Let's dive in HTML, CSS, JavaScript, TypeScript, Angular and Vue and grow together in our Frontend Development skills
Discover the top five benefits of incorporating AI into your work as a developer, use ChatGPT and Github Copilot. Don't get left behind – start using AI to revolutionize your programming skills today
Learn how to use the includes() method in JavaScript to search an array and return a boolean value indicating whether a specific value is present. Quick and easy guide for beginners."
Calculating the total price for your shopping cart was a hassle in the days before the JavaScript reduce method. In this post, I will show you how easy it is to use the reduce method to calculate the total price of a product array in the shopping cart. The JavaScript reduce method is powerful and can calculate a total price based on an array of object properties.
Searching specific values in arrays is easy with the JavaScript `find()` method. It doesn't matter if you want to find a string, number, boolean, or property of an object in an array. In this post, I will show you how to find values very easily. The find() Array method in JavaScript returns the first item in the array that matches your condition.
One of the main reasons why TypeScript is important is that it allows developers to add type annotations to their code. This means that they can specify the data type of variables, function arguments, and return values, which can help prevent many common bugs and make the code easier to read and understand.
Embedding Youtube in a blog build with Nuxt has never been easier. Include the lite-youtube-embed package, create a Nuxt plugin and component, and you can use it in all your Markdown content files.
The simplest way to convert a CSV file into a JavaScript Array of Objects is, using the JavaScript split, map, forEach, trim methods, and spread operator. In this post, I love to show you how you can exactly do that by using a file upload form.
I started in 2016 by writing on Medium. And since 2020, I have started earning money with that. In 2,5 years, I earned ~$4000. I recently looked at that data and learned a few things by analyzing that data.
Subtract the data from the enum and remodel it into a JavaScript Array of Strings so you can use it for whatever you like.
In this post, I want to share with you some tools you can use on a mobile phone or cheap tablet to get started with programming web development.
An interface is a blueprint for an Object. It tells you which properties there are, which are required and optional and which type of data they hold. Let's dive into interfaces by making pizzas for breakfast
Have your picture ready in seconds!
There is no easier way to create images and videos than with Canva!
The features Array.at(), structuredClone(), Top-level await, For-await-of-loop, private class fields and Object.hasOwn() are both very new features and features that improve the already existing functionality in JavaScript. Let's dive into it together.
So lately I was working with a team member on an Angular Pipe. We had an Address Interface and wanted to only allow an argument that was…
I’ve seen a lot of organizations use the Gitflow strategy to use Git. It’s not a bad strategy, but it could be way simpler. That’s why I was happy to find Releaseflow. In this post, I want to tell you how it works, and why it could be a benefit for your organization.
Generating fake content with random words can be convenient for testing purposes. That’s why today, we will create a JavaScript function that does that. It's super simple with the Math.random, round, while loop and map methods in JavaScript.
You can use a library for generating random data in JavaScript, but I think it’s even cooler to do it yourself. If you want to spice up your JavaScript skills, these functions are the best to practice.
Imagine building a word game with JavaScript, and you need to pick a random character from the alphabet, but you don’t want to type all the letters by hand. We will generate it with JavaScript .map, string and the Math.round methods.
For many purposes, you can need a random string. Sometimes a long one and sometimes a short one. A lot of time, I use these functions in a unit or end-to-end test to automate even more.
Learn How To Use The Elfproef for dutch identification numbers
Creating forms in Angular with NGX-Formly is super easy. But sometimes you want a little more, like formatting postal codes, phone numbers, or bank accounts. In this post, I will show you how you can do it.
With end-to-end tests in Cypress we test if the front-end works well with the back-end with end-to-end testing. So automatically filling forms, clicking buttons, navigate through the pages should be tested by end-to-end tests.
Some applications need multiple languages, but others need one language but have loads of content to re-use. In this article, I want to show you the fastest way to create a ContentService (some call it a dictionary) for your Angular application.
Before development teams of an enterprise organization are ready to pick up their work, the whole process is prepared. This process is essential before a developer can write their code.
Angular has many types of Observables which you can use. Maybe you’ve seen RxJS methods like Subject, BehaviourSubject, ReplaySubject, or AsyncSubject in Angular. In this post, I want to dive deeper into what those types of Subjects are and when you should use them. So buckle up and enjoy the ride.
In Angular, you can perform asynchronous actions in two different ways, Observables, and Promises. Most people pick Observables because every example on blogs and documentation tells you to do so. But why? Are Promises that bad? Or Observables that good?
Angular is full of Observables. But is there is a mechanism that automatically unsubscribes your Observables when components get destroyed? Yes there is! You can use the async pipe or the takeUnitl method.
For many years developers complain about formatting their dates and times in JavaScript. Doing calculations or proper formatting required libraries like MomentJS. Thanks to the ECMAScript Internationalization API, those days are over! It can format dates and times and also calculations.
Storybook Decorators are the answer for creating a bit more markup
Docker Improved Their Mac M1 Support, but which Docker images do work on the Mac with the M1 processor?
As a developer, we are focused on tech. We adore working with new technologies, languages, libraries, and frameworks. All these things are changing so quickly! Are there any developers wondering what the consequences are for the business? Or the responsibility for a manager only? I don’t think so!
So many developers are focussing on success, but what is success? Why do they all want to become 10x developers? Is it something everyone can achieve? Or is it only for the best of the best?
It’s essential to take it slow, start with a 25–20 min run, and built up as you go at your own pace. In this 6 step guide, I help you started. Every runner starts as a beginner. It matters that you create the right way. Start easy to grow faster. Make it a habit. You will learn to love it so that it can change your life.
Running a Serverless function or Web API every periodically can be done in so many ways. But today, I want to show you a free option in iOS if you have an iPhone or iPad. It is the Shortcut app.
If you got the error “_Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type_” in TypeScript via TSLint or Visual Studio Code? The solution is KeyOf type in TypeScript
Low-code + Professional Developer = ❤️
When you call a function with parameters in a TypeScript file in Visual Studio Code, you sometimes get an ugly red line. Let's fix that.
Microsoft made it easy to build apps via their Power Apps Platform. As a professional developer, I love to make things re-usable, so I don’t have to type them every time. The Power Apps Canvas application lets you do that very quickly. But it requires some code in the Formula Bar.
Coding is dead sounds hard, but I think we are at the forefront of a revolution in how we have taught about code for a long time. Will professional developers lose their jobs? Or will they evolve? I think professional developers and lowcode developers will join forces!
As developers, we are all aware that web technologies are changing so fast that no human is ever in the power of learning everything. But how should we deal with it?
Can We Embrace Low Code Platforms?
Web development has evolved over the last couple of years. We load more and heavier files in the browser, but those things cost the user experience. Let's improve the page loading.
We all want to use well-documented UI components in our frontend. With Storybook, you can do that reasonably quickly with React, Angular, Vue, or any other framework. But also without a JavaScript framework! Let's dive into it.
I have those moments quite frequently, I need to update my develop branch, but I don't want to switch to it in git.
If you’re working on a project that forces you to run all the linting before you can commit, you can sometimes feel frustrated. But most of the time, I forget to clean un-used imports in my TypoScript/JavaScript files.
If you’re working on a big React (Next.js) application, sometimes you might need to dive deep into a data structure. Let's use Optional Chaining & Nullish Coalescing to improve React components.
I think this is a pretty unknown feature in the package.json. But you can define what version a computer needs to be able to run your project.
Sass functions like lighten(), darken(), complement(), invert() are pretty useful. I was wondering if there was something for styled-components. Well, I found the great library Polished.js.
I’m pleased with Styled-components. Adding proper TypeScript typings was a big question for me, until now! So I want to share them with you. 😉
Use Media Queries Smarter In Styled Components
Using CSS variables in Styled Components with React is supereasy. With this example you can start using them 💪
Sometimes it happens in a WebRTC application that a browser can’t access the camera or microphone. Possibly it’s being used by another piece of software, or it doesn’t have a camera at all.
When you want to learn JavaScript, where do you start? Building UI components is always a good idea!
Some people hate writing CSS, but others love to write it. I'm one of those people who love to write CSS himself. But using a tool that helps me create a website a lot faster and brings stability into my work will always make me excited to give it a try
Manipulating the HTML DOM is easy with JavaScript methods querySelector and querySelectorAll. In this post, I will show you how easy it is!
NextJS is one of the best tools for building JAM-stack websites with all kinds of content sources.
Not all discussions are great. Let’s improve them
A Tiny Step At The Time Is More Than Enough To Become A Pro
Code readability is a feature of your application (even if your users don’t see it)
Want to create development tutorials but you aren’t sure where to start? Start here!
WSL2 is so powerful to make the switch from Mac a breeze.
Isolated, Shallow, Integrated, and End to end testing
Connect Angular and FaunaDB with Netlify Serverless functions
In this article, I want to tell you everything I know about serverless functions. I’m not going to dive into the small details. I want to talk about what they are and why you want to use them as front-end developers. What Are Serverless Functions?
A Method So Simple It Will Blow Your Mind!
Are you not able to manage your programming projects? Try this!
Please don’t think that experienced developers know everything from their head! No! I’m searching basic switches a lot of times because…
Don’t start before you are comfortable with them
Spend Your Time Wisely To Learn To Code
Good preparation is half the work.
Use Const by default, unless it needs to change.
Build a Dark Mode Switcher with CSS Variable, JavaScript and TypeScript
FOMO is a real thing in the developer community
What would be your strategy?
I want to share with you some tools you can use on a mobile phone or cheap tablet so that you can get started with web development.
Use CSS to build them yourself
In this post, I want to dive into the basics of TypeScript. We’re going to learn primitives, interfaces, enums, classes and a lot more. Sit back, grab your editor and let's get started with learning TypeScript.
Validations, repeatable sections, conditional fields, and submitting your form to your API
Working from home isn’t as easy as it sounds. Let’s make it easier!
It’s not about not being realistic, it’s about being optimistic
Why don’t we treat software the way we treat real-world infrastructure?
Improving our development workflow in VS Code
3 Ways Programmers Can Get Paid Without The Need Of A Job
Forms can be a nightmare — let’s make them better
Push through all boundaries, even though it’s hard
Explanation about the behaviour of Var, Const, Let, Functions, Objects and Classes in the Global Scope.
Do you know how to deal with duplication?
My favourite posts of Februari 2020 about JavaScript Development
Sometimes React, Angular, or Vue.js might be too much
It’s not easy to be a junior developer, but stick with it, it’s worth it
Finally, privacy in TypeScript/JavaScript classes
Be helpfull to anyone in everything, it’s a WIN-WIN!
How writing technical blog posts can help you early in your developer career
No more undefined properties
Set up your Angular 9 app in a Docker environment and deploy it in no time
Lessons I learned which will hopefully save you time and stress
Classes on fire in TypeScript with class decorators
Every developer who did some JavaScript has got errors like “Cannot read property ‘…’ of undefined”. There is one simple way to prevent…
I know that this sounds odder than it is, but using GraphQL in an Angular 9 application with Apollo Client feels like flying a SpaceX…
GraphQL is fantastic! Apollo build tooling around it to make our life easier, to use it at scale
Why it could be good to break up your monolithic front-end codebase
Lazy loading has always been a popular toppic on the web! But with the Intersection Observer that will all be so much better than it was!
Today I want to show you how easy it is to merging branches, fix a merge conflict and how to use cherry-pick to get any commit your local branch!
In this episode (9) of the Mr Frontend Podcast, we are gonna talk about: "How to spice up your technical skills during the end of 2017 holidays!"
This time we are going to talk about how you can handle branches with Git on the terminal . For a full explanation check the video 😉
Listen to this podcast on iTunes, Soundcloud, Overcast, PlayerFM, CastBox, ListenNotes and PocketCast.
In the previous post I gave a introduction about Git and how to install it. In this video I show you how you can manage your changes, commit them and eventually push them to Github.
If you never used Git it can be hard to start. With this series of blogs and video’s, I want to help you get started. We are gonna start on the terminal! If you're not used to the terminal (some call it command line), I do my best to show you it is not scary!
This podcast episode is all about Black Friday, Web Dev news and the VueJS & Frontend Love Conference 2018 in Amsterdam!
Every fifth episode of the Mr Frontend Podcast is gonna be a visual one! In this episode, I will talk about the new Mr Frontend Online Class, Frontend Love Conference, VueJS Conference and some cool Web Development new from these past weeks!
At the moment there is a lot talking about SSR (Serverside rendering) applications. SSR is most used in combination with frameworks like React or Vue. For React there is NextJS and VueJS has NuxtJS.
https://soundcloud.com/mr-frontend-community/mr-frontend-podcast-4-how-and-why-should-start-blogging-as-junior-developer
I’m gonna show you how you can create private functions and public methods with Vanilla JavaScript using the Module Pattern (Object Literal).
You want to gain more serious experience, to get a real job as Junior Web Developer. With these 5 tips, I'm gonna help you to achieve this!
This time I want to talk what a return statement does and how you can return a value from a function in Vanilla JavaScript.
Mr Frontend Podcast #2, is about who I am and what I do with Mr Frontend. And I give 3 important tips for developers that are just starting!
In the previous videos and blogs, I showed you a couple of things with getting 1 or more HTML elements via Vanilla JavaScript. This time we are going to add and remove HTML elements to our page with Vanilla JavaScript. We are gonna use the createElement, createTextNode, appendChild & removeChild methods for it.
This is the first episode of the Mr Frontend Podcast.
In jQuery, it is super easy to get the child elements of a parent HTML element. But do you know how it works with Vanilla JavaScript?
Be aware that this blog post is my opinion, based on my own experience. So it is possible that you won't agree with that and that is okay. If you want to give your vision about this topic, please do it in the comments 😉.
If you search StackOverflow for selecting HTML elements on a page you will be overloaded by jQuery examples.
I created this video because I was inspired by the talk of Jessica Rose that she gave at the Fronteers Conference 2017! Unfortunately, the video of this talk is not online yet, but this is the talk of a few years ago.
This blog and video are especially for Developers who want to optimize their CSS. It is very important to have readable CSS, for your teammates and yourself.
It happens a lot that you need to loop over an Array with JavaScript Objects! But sometimes you just don’t know what kind of properties that Object has. Lucky we are that JavaScript offers a few ways of looping over JavaScript Object properties.
Well, first it is important to know what your definition of a project is because you can have super small projects, but also very big projects.
I think this is a bit generic question! But this question was asked on Quora!
In this video, I share why you shouldn't be afraid of not knowing EVERYTHING as a Developer.
Don't think you are not good enough! Because you are definitly good enough! 😁😎
A lot of people have asked to help them grow in their JavaScript skills. But the only way to do it is by using JavaScript properly and get feedback on the code you’ve written.
