Nanna Bach Munkholm, Author at Female Tech Entrepreneur

Python Programming for the absolute beginner

by Nanna Bach Munkholm | Sep 6, 2023 | Book Recommendation

A Perfect Starting Point for Python Newbies

Forfatter: Michael Dawsons

“Python Programming for the Absolute Beginner” was my first dive into the world of Python programming, and I must say, it was an excellent choice for a beginner like me. This book, authored by Michael Dawsons, provides a welcoming and comprehensive introduction to Python, making it an ideal choice for anyone new to programming.

One of the standout features of this book is its abundance of practical examples. Python is renowned for its readability and simplicity, and this book capitalizes on those qualities by presenting a multitude of hands-on exercises and code snippets. These examples are thoughtfully designed to reinforce the concepts explained in each chapter. They were instrumental in helping me grasp the fundamental concepts of Python quickly and effectively.

The book is structured in a logical and progressive manner. It starts with the absolute basics, assuming no prior programming experience, and gradually introduces more complex topics. The pacing is comfortable, allowing readers to build a strong foundation before moving on to more advanced concepts. This approach greatly reduces the intimidation factor often associated with learning a new programming language.

The explanations provided are clear and concise, and complex topics are broken down into manageable chunks. The author has a talent for simplifying intricate ideas without oversimplifying them, ensuring that readers develop a solid understanding of Python’s core principles.

Additionally, the book covers essential topics such as data types, loops, functions, and object-oriented programming, making it a well-rounded resource for beginners. While it might not delve as deeply into these topics as more specialized books, it offers a fantastic starting point for further exploration.

In conclusion, “Python Programming for the Absolute Beginner” is an excellent choice for anyone new to Python. Its practical examples, clear explanations, and gradual progression make it a solid starting point for beginners. While it might not be the only book you need on your Python journey, it certainly provides a strong foundation to build upon. I wholeheartedly recommend it to anyone taking their first steps into the world of Python programming.

Get your copy here

What are the unspoken rules for frontend development?

by Nanna Bach Munkholm | Dec 27, 2022 | Angular, Becoming a Tech Entrepreneur, Technology

Are you a frontend developer or are you applying for your first job as a frontend developer? Here are the things I have learned in the first year working as a frontend developer for a big consultant company in Denmark. My main experience is in the frontend framework Angular, but I believe the points in this posts will benefit you no-matter what framework you work in.

To construct this post I had a conversation with chatGPT about the point I have experienced and what else it things I should considerate. So in this post you can find ChatGPTs answer to “What are the unspoken rules for frontend developers” and further explanation to the points I find important to elaborate on. Last you will find the checklist I have next to my desk when developing frontend.

As a consultant I am assigned a task with a description of the task at hand, a link to a design with a design system and user acceptance criterias. Based on this information I should be able to solve the task. But as you quickly learn there is some unspoken rules and requirements when it comes to frontend. If you know the rules your life as a frontend developer will become much easier with fewer pull request comments and QA (Quality Assurance) tasks.

What are the unspoken rules for frontend developers?

Use a consistent coding style throughout your project.
Optimize for performance and load time.
Test your code on different devices and browsers.
Keep your code well-documented and easy to understand for other developers.
Don’t rely on layout frameworks too heavily; try to understand and use the underlying HTML and CSS concepts.
Keep accessibility in mind when designing and coding.
Use animation to make good user experience.
Use version control and collaborate with other developers effectively.
Don’t use hacky solutions; try to find a clean, efficient solution to problems.
Be open to feedback and constructive criticism.

It is time to go into details, how do we manage to incorperate these points into our daily routines.

How to use a consistent coding style throughout our project

Choose a coding style guide: There are several coding style guides available for Angular, such as the AngularJS Style Guide or the John Papa Angular Style Guide. Choose one that best fits your team’s needs and preferences.
Install a linter: A linter is a tool that helps enforce coding style guidelines by analyzing your code and identifying potential issues. For Angular, you can use tools such as TSLint or ESLint.
Set up a linter configuration file: Create a configuration file for your linter that specifies the coding style rules you want to follow. This can include things like indentation, line length, and naming conventions.
Use an automated formatter: An automated formatter is a tool that automatically reformats your code to match your chosen coding style. This can be especially helpful when working with a large codebase or when working with multiple developers who may have different coding styles.
Review and enforce coding style guidelines: It’s important to regularly review and enforce coding style guidelines to ensure that your codebase is consistent and easy to read. This can be done through code reviews, automated tools, or manual checks.
Document your coding style guidelines: Make sure to document your coding style guidelines in a central location, such as a readme file or style guide document, so that all team members are aware of them. This will help ensure that everyone is following the same guidelines and that the codebase remains consistent.

How to optimize for performance and load time in Angular

Use lazy loading for modules: Lazy loading allows you to load only the required modules and components as needed, rather than loading everything at once. This can significantly improve the performance and load time of your application.
Use Angular Universal for server-side rendering: Server-side rendering allows you to pre-render the HTML on the server, which can improve the initial load time of your application.
Use the Angular Compiler: The Angular Compiler can optimize your code by removing unnecessary code and inlining small functions, resulting in faster execution and a smaller bundle size.
Use a CDN for static assets: Storing static assets such as images and fonts on a CDN can reduce the load time of your application, as the assets will be served from a location closer to the user.
Use caching: Caching allows you to store frequently used data and assets in the browser, reducing the need to fetch them from the server on subsequent visits.
Minimize the number of HTTP requests: Each HTTP request takes time to complete, so reducing the number of requests can improve the overall performance and load time of your application.
Optimize images: Using properly sized and optimized images can reduce the load time of your application.
Use a performance monitoring tool: Tools such as Lighthouse or Webpagetest can help you identify performance bottlenecks and suggest ways to improve them.

How to test our code on different devices and browsers.

There are several ways to test your code on different devices and browsers:

Use an emulator or simulator: Many IDEs (Integrated Development Environments) have built-in emulators or simulators that allow you to test your code on different devices and browsers. For example, Android Studio has an emulator that you can use to test your Android app on different devices and browsers.
Use a remote testing service: There are several services that allow you to remotely test your code on different devices and browsers. For example, BrowserStack and Sauce Labs offer a wide range of devices and browsers that you can use to test your code.
Use real devices: You can also test your code on real devices by installing it on your own devices or borrowing devices from friends or colleagues. This is a good option if you want to test your code on specific devices or if you want to test how it performs in real-world conditions.
Use automated testing tools: There are several tools that allow you to automate the testing process by running tests on different devices and browsers. For example, Playwright where you can create end-to-end test.

It’s generally a good idea to test your code on as many devices and browsers as possible to ensure that it works correctly and performs well.

How to keep code well-documented and easy to understand for other developers.

There are several ways to keep your code well-documented and easy to understand for other developers:

Use clear and concise naming conventions for variables, functions, and classes. This will help other developers easily understand the purpose of each component in your code.
Include comments in your code to explain the purpose of each function or block of code. This will help other developers understand the logic behind your code.
Use clear and descriptive error messages to help other developers understand what went wrong in case of an error.
Document the inputs, outputs, and dependencies of each function or class. This will help other developers understand the requirements and dependencies of your code.
Use consistent formatting and indentation in your code to make it easier to read and navigate.
Regularly update your documentation as you make changes to your code to keep it up-to-date and accurate.
Follow the SOLID principles

By following these guidelines, you can make your code more understandable and easier for other developers to work with.

How to keep accessibility in mind when designing and coding?

There are several steps you can take to ensure that your designs and code are accessible:

Use semantic HTML: Use HTML tags that accurately describe the content of your page, such as <h1> for headings, <p> for paragraphs, and <img> for images. This will help assistive technologies, such as screen readers, understand the structure of your page.
Add alt text to images: Alt text is a description of an image that is displayed when the image cannot be displayed, such as when a user is using a screen reader. Make sure to add alt text to all images to provide context and information to users who cannot see them.
Make sure your site is responsive: Responsive design ensures that your site is easy to use and navigate on any device, including mobile phones, tablets, and desktop computers. This is especially important for users with disabilities who may be using assistive technologies, such as screen readers, that are optimized for specific devices.
Use clear and concise language: Avoid using jargon or complex language that may be difficult for users with cognitive or learning disabilities to understand. Use clear, concise language that is easy to read and follow.
Test your site for accessibility: Use tools such as the Web Content Accessibility Guidelines (WCAG) to test your site for accessibility issues. This will help you identify any issues and make necessary changes to ensure that your site is accessible to all users.
1. You can read more about WCAG for Angular

How do I use animation to make good user experience.

Here are some steps you can follow to become good at making animations in frontend:

Learn the basics of HTML, CSS, and JavaScript: These are the fundamental technologies used to create animations in frontend. Make sure you have a good understanding of how they work before attempting to make animations.
Experiment with different animation libraries: There are many libraries and frameworks that make it easier to create animations in frontend, such as Animate.css, Velocity.js, and GSAP. Experiment with different libraries to find the one that works best for you.
Practice, practice, practice: The more you practice making animations, the better you will become at it. Find projects to work on that involve animating elements, and try to come up with creative ways to use animations in your projects.
Learn from others: There are many resources available online that can help you learn how to create animations in frontend. Follow blogs and tutorials, and watch videos and webinars from experts in the field.
Keep up with the latest trends and techniques: The field of frontend animation is constantly evolving, so it’s important to stay up to date with the latest trends and techniques. Follow industry news and take courses or attend workshops to stay current.

Checklist

This is a lot to remember so I have created a checklist that you can print out and have next to your computer while coding. The checklist is separated into three; Before, During and After starting a new task.

I hope this can help you and make your development process more clean and fun.

You can find a link to the design here.

If you have any questions or things to add to the checklist please leave a comment and I will love to get your imputs.

Have a great day and happy coding 👩🏽‍💻

Setting up a new Angular project

by Nanna Bach Munkholm | Oct 3, 2021 | Angular, Becoming a Tech Entrepreneur, Technology

Have you ever tried creating a new Angular project?
Me neither.

Why not do it together so you can learn from my mistakes and hopefully I can show that it’s possible to do for everyone, no matter your prior programming skills. Last time I working i Angular was in 2020, where it was called AngularJS. A lot of things have happened since then, so lets take it all from the beginning.
Things moves fast within software, so remember to find a tutoial that is up to date. .

Lets get to the fun part of programming.

Angular is a framework that uses HTML, SCSS and Typescript. You don’t need to know about these languages before we begin, but you will need to learn them to start coding your first app.

CREATE A NEW ANGULAR PROJECT

I like working in VS Code so everything is going to be done using that code editer.

First step into the world of Angular is to install the required packages.

– I expect that you already have installled node, so you can import what you need to setup a new Angular project.

Go to VS Code

Open the terminal in the folder you want o work within.
Install the Angular CLI: npm install –g @angular/cli
Create a new Angual project: ng new my–app-name
- Would you like to add Angular routing? Y
- Which stylesheet format would you like to use? SCSS

When the project is installed add the folder to your workspace, by going to File > Add Folder to Workspace.

Now go to your folder > src > app.component.html here you will find the main code of your new application. Lets try to run the application be writing ng serve in the terminal.

Your code should be up and running and look something like this:

That was actually, not that hard. If you have any questions or problems please leave a comment and I will see if I can help. You can now delete everything in the app.component.html and start writing your own code.

Have a great day and happy coding 👩🏽‍💻

Setup your first EXPRESS.JS BACKEND step by step

by Nanna Bach Munkholm | Oct 24, 2020 | Becoming a Tech Entrepreneur

Wanna build your own website or app? There is something magical about building an application from scratch and to do that you need both a frontend and a backend. In this post I’m going to take you along the journey of building a backend in Express.js.

First of, let us talk about what Express.js is. Express.js is a popular framework that enables you to build server applications in node.js. You can think of it as the link between your frontend and database. So instead of, linking your database directly to your frontend, you build a backend that handle request and sends data back to your backend in the right format. Just to give you an idea, the following is a list of combination of how you can design you client-server architecture stack.

Angular.js (Frontend) + Express.js (Backend) + MongoDB (Database)
Flutter (Frontend) + Express.js (Backend) + MongoDB (Database)
React.js (Frontend) + Expressjs (Backend) + Firebase (Database)

Now that we know what it is used for, it’s time to setup an Express.js Backend.

Create a new Express.js backend

I like working in VS Code so everything is going to be done using that code editer. If you haven’t already setup your code editer for node.js, you can follow the guide here. Check if you already have installed it by running npm install.

First step into the world of building your own Express.js backend is to create a new project.

Go to VS Code

In the terminal go to the desired location on your computer where you wanna store your project and write mkdir <project-name>
Change to the new created folder with cd <project-name>
Initialize node.js in your new project by writing npm init
Fill out the questions asked (you can always modify the inputs later)
You will now find a new file in your folder package.json
Install Express.js by running npm install express

You folder will now include a new folder node_modules and package-lock.json including all preinstalled packages and the package.json file that will now look something like this:

Run the Express.js server

Now that you have installed that right packages it is time to create a file that can run the Express.js backend. So in your folder create a new file called app.js and write the following.

h

js

const express = require(‘express’)

const app = express()

// http://localhost:3000/

app.listen(3000, () => {

console.log(‘Server is up and listening on port 3000’)

})

If you are not familiar with the JavaScript syntax you can read more about it here.

To run your server and see if it gives you the desired outcome, go to your terminal and write node app.js. Go to a browser and type in http://localhost:3000/ and you should now see “Server is up and listerning on port 3000” in your terminal. But ass you can see in the browser it returns with “Cannot GET /”. This is because we haven’t specified a router, so /contact go to the contact page and / goes to the main page. See below how to write the router function. In the function you have req which stands for request and res for respond. This server will therefor respond with “Hello, here is your first Express.js backend” in your browser and “Responding to root route” in your terminal. Remember to restart the server in your terminal.

h

js

const express = require(‘express’)

const app = express()

app.get(“/”, (req, res) => {

console.log(“Responding to root route”)

res.send(“Hello, here is your first Express.js backend”)

})

//http://localhost:3000/

app.listen(3000, () => {

console.log(‘Server is up and listening on port 3000’)

})

Return data in json format in Express.js

Lets say you have a datebase with users and you want the route /users to respond with the user information in json format. Then you can define a variable user1 and respond that variable in a json format as shown below.

h

js

const express = require(‘express’)

const app = express()

app.get(“/”, (req, res) => {

console.log(“Responding to root route”)

res.send(“Hello, here is your first Express.js backend”)

})

app.get(“/users”, (req, res) => {

console.log(“Responding to users route”)

var user1 = {firstName: “Nanna”, lastName: “Munkholm”}

var user2 = {firstName: “Sarah”, lastName: “Munkholm”}

res.json([user1, user2])

})

//http://localhost:3000/

app.listen(3000, () => {

console.log(‘Server is up and listening on port 3000’)

})

Optimize your workflow when working with Express.js

To make your life easier when working with your new Express.js backend, you can install the package nodemon. This package automatically restarts your node application when it detects changes in your folder.

Run the following code in your terminal:

sudo npm install -g nodemon

When it is installed you can use nodemon app.js instead of node app.js.

I hope this helped you get started setting up your Express.js backend. If you have any questions or problems please leave a comment and I will see if I can help. If you haven’t decided on which frontend framework you want to use, then check out my post on how to get started working with Flutter.

Have a great day and happy coding 👩🏽‍💻

How do I learn to code?

by Nanna Bach Munkholm | Aug 22, 2020 | Becoming a Tech Entrepreneur, Technology

One question I’m asked often is, “How do I learn to code?“. Coding can be a black box to many of us. It’s something that you hear that only guys who sits in a basement and eats a lot of chips and drinks Coca Cola does. But that is not true! Coding is for everyone and I mean everyone. You doesn’t have to be raised with computers or being a guy for that matter. I never had anyone in my family or friends growing up that could code. But at the age of 23 I was introduced to the world of coding and a door to the black box opened. But you may be wondering, How do I start coding? and Is coding even for me?.

Here I will give you my tips, to how you can open the door to the magic black box of coding. I can already tell you, that when you have first opened the door it isn’t that black inside. It is just about grabbing the right door handle.

Where to start when learning to code?

You might be wondering which door handle I’m talking about. What I mean is that, there is a lot of different paths to starting to code. And it really depends on what you want to accomplish.

Do you want to built an app?
Do you want to automate processes?
Do you want to create a website?
…the list could go on.

So your NUMBER ONE TAKEAWAY from this post is, FIGURE OUT YOUR WHY.

– Why do you want to learn to code?

Which programming language should I start with?

When you have figured out why you want to code, it is much easier to figure out which programming language you should start with. Each programming language has a purpose, so when you know your WHY, you can ask Google for instance, “How do I learn to code an app?“. This is a much better search term than, “How do I learn to code?“. But it’s still a quite broad search term, so you should narrow it more down to “How do I learn to code an iOS app?“. So try to see how specific you can be in what you want to learn to code.

To give you an example, my first introduction to the magic black box of coding, was when I started my company DecorRaid. I had an idea for an app that could help consumers finding interior products that match their style. I knew nothing about programming and had no prior technology experience. I told friends about my new business idea and they helped me narrow down what I needed. First of, I needed to learn how to code an app but secondly, they said the word Machine Learning.

I was like..What is Machine Learning? They told me that it is what you can use to match the consumers with the right products.

Now I had two search terms, How do I code an app? and secondly, How do I code a Machine Learning algorithm?. This is two very big projects and two very different doors handles into the black box of coding. After some searching and asking around, I figured out that it was best to outsource building the app as it was essential for testing out our business idea. Instead, I could start looking into what it took to code a Machine Learning algorithm. For Machine Learning, Python is the right language.

With my WHY in place, I opened to door with python written across.

Nanna Bach Munkholm

My WHY, Creating a Machine Learning algorithm that can match DecorRaids consumers with interior products.

How do I learn to code?

Now that you know you why, it’s time to start learning how to code. We all learn differently, so this is just some inspiration to how you can tackle learning to code.

My first suggestion is find a book or a youtube video that explain the basic of the language you have choosen. I started with the book Python for absolute beginners. It took me through the basic terms and some cool small assignments.

You will soon learn that you need a specific place to write your code. You can do it in a terminal on your computer, but I will recommend that you install Anaconda Navigator. Here you will get Visuel Studio Code which you can use to code nearly all programming languages. Secondly, you get Jupyter Notebook which is used to code Python in.

When you have a place to write your code in and learned the basics of your new programmin language, it’s time to find yourself a small motivating project.

If you need some inspiration, you can go to my previous post Choosing a Flutter project, here I have gathered a few ideas for a good beginner app project.

When you have found your first project, write down in small steps what you want to accomplish. Then it is just about taking it one step of the time.

As a final tip – Coding is all about Googling.

– The better you become at narrowing down your search term in Google the easier it gets to code.

Happy coding and if you have any questions to how you get started learning to code, then please leave a comment below.