astro-erudite is a opinionated, no-frills blogging template—built with Astro, Tailwind, and shadcn/ui.https://malcoded.com/https://malcoded.com/posts/angular-json-web-token/https://malcoded.com/posts/angular-json-web-token/ When I started with web development, I had a lot of trouble when I tried implementing a simple authentication system. There are all these terms like signatures, sessions, hashes, encryption and whatnot that make it quite hard to get started. Not to mention that doing this for a real projec...Sun, 23 Feb 2020 00:00:00 GMThttps://malcoded.com/posts/angular-best-of-2019/https://malcoded.com/posts/angular-best-of-2019/ The year 2019 is almost over... As every year (for the last 3 years now... wow) I collected the atricles and blog posts about Angular I enjoyed the most. Thank you to the whole Angular community for creating the great content! I would also like to thank the loyal readers of this blog. Som...Sun, 15 Dec 2019 00:00:00 GMThttps://malcoded.com/posts/react-portals/https://malcoded.com/posts/react-portals/ In this tutorial, you are going to learn what react portals are and how to use them to spawn components anywhere on the DOM. We will take a look at the example of a simple dialog component to grasp the concepts of portals and why they are useful. You can take a look at what we will build in the d...Sun, 22 Sep 2019 00:00:00 GMThttps://malcoded.com/posts/react-dom-refs/https://malcoded.com/posts/react-dom-refs/ In this tutorial, you will learn how to get access to the actual DOM in React using so-called refs. To do that, we will take a look at what refs are and when and how to use them. You will also learn about callback refs and what they are used for. During this tutorial, we will take a look at di...Wed, 28 Aug 2019 00:00:00 GMThttps://malcoded.com/posts/react-component-style/https://malcoded.com/posts/react-component-style/ In this tutorial, you will learn how to style your components in react. We will take a look at how you can use inline styles, regular CSS classes, CSS modules or react styled components. Also, you will discover how to conditionally apply styles based on the state of the component. Ready? ...Tue, 04 Jun 2019 00:00:00 GMThttps://malcoded.com/posts/react-http-requests-axios/https://malcoded.com/posts/react-http-requests-axios/ Sending an HTTP request to a server is a common task in web development. In this tutorial, you will learn how to send HTTP requests from your react application using different APIs like XMLHttpRequest, fetch and axios. You will learn how to send GET and POST requests with different configura...Thu, 30 May 2019 00:00:00 GMThttps://malcoded.com/posts/angular-i18n/https://malcoded.com/posts/angular-i18n/ In this tutorial, you will learn how to use the angular i18n functionality to translate your angular app into different languages. Also, we will take a look at how you can use the angular-cli to generate translation files automatically and how we can customize them. Finally, we discover ...Sat, 25 May 2019 00:00:00 GMThttps://malcoded.com/posts/angular-async-pipe/https://malcoded.com/posts/angular-async-pipe/ In this tutorial, we are going to take a look at how we can use the angular async pipe and why you should always use it in combination with observables. Also, we will learn how to use it with interpolation data binding and different directives like \*ngIf and \*ngFor. Ready? Let’s get sta...Fri, 24 May 2019 00:00:00 GMThttps://malcoded.com/posts/angular-ngstyle/https://malcoded.com/posts/angular-ngstyle/ In this tutorial, we are going to take a look at how we can dynamically assign CSS styles to elements using angular. We will take a look at different methods to dynamically assign a CSS style to an element using the style property. You will also learn, how we can toggle that styles on or off...Thu, 23 May 2019 00:00:00 GMThttps://malcoded.com/posts/angular-custom-directives/https://malcoded.com/posts/angular-custom-directives/ In this tutorial, you will learn what angular attribute directives are and how to create custom directive. We will discover how to use directives to alter the appearance of DOM-element, react to user input and how to pass input to directives. In the process it will also become apparent when ...Sat, 11 May 2019 00:00:00 GMThttps://malcoded.com/posts/angular-data-binding/https://malcoded.com/posts/angular-data-binding/ In this tutorial you will learn what data-binding is, the difference between one-way and two-way data binding and how to implement both in angular. We will take a look at all the different ways of using data binding in angular and learn how the angular template syntax works. Also, we will no...Tue, 07 May 2019 00:00:00 GMThttps://malcoded.com/posts/react-swipeable-list/https://malcoded.com/posts/react-swipeable-list/ In this tutorial, you will learn how to create a react list component where each element can be swiped to trigger an action. A typical example of this is "swipe to delete" used in many android applications. We will discover, how we can build such a list using nothing but react itself. Also, you ...Fri, 01 Mar 2019 23:00:00 GMThttps://malcoded.com/posts/react-file-upload/https://malcoded.com/posts/react-file-upload/ Creating a file upload component is a common task in web development. Unfortunately it can be quite intimidating. In this tutorial you will learn how to create a working file upload component with react from scratch using no dependencies other than react itself. You will learn how to upload file...Wed, 13 Feb 2019 23:00:00 GMThttps://malcoded.com/posts/react-dropzone/https://malcoded.com/posts/react-dropzone/ In this tutorial you are going to learn how create a file dropzone component from scratch using react. We will discover how to open a file selection dialog in react using some nifty tricks. Furthermore, we will learn how to listen for file drop events and use that to build a reusable dropzone com...Wed, 06 Feb 2019 23:00:00 GMThttps://malcoded.com/posts/angular-best-of-2018/https://malcoded.com/posts/angular-best-of-2018/ The year 2018 is coming to an end... That time went by quite quickly, didn't it? It was a very exciting year to be an angular developer. There was not only one, but there were two major framework (6 & 7) releases! But not only the guys from the angular team were busy. The community did a great j...Thu, 20 Dec 2018 23:00:00 GMThttps://malcoded.com/posts/vue-computed-properties/https://malcoded.com/posts/vue-computed-properties/ In this tutorial, you will learn what Vue computed properties are and how to use them. We will compare them to regular Vue methods and discover when to use computed properties instead. Ready? Let's get started!  ## Why using Vue methods is not alway...Wed, 28 Nov 2018 23:00:00 GMThttps://malcoded.com/posts/angular-desktop-electron/https://malcoded.com/posts/angular-desktop-electron/ In this tutorial, we are going to take a look at how to turn any angular application into a native desktop app using electron. You will learn how to set up an angular app and run it inside of electron using typescript all the way. Also, you will discover how to use native APIs like the file syste...Sat, 17 Nov 2018 23:00:00 GMThttps://malcoded.com/posts/angular-color-picker/https://malcoded.com/posts/angular-color-picker/ In this tutorial, you will learn how to create a color picker with angular from scratch. We will take a look at how to use the HTML-canvas together with angular to create the rainbow-like effect we are all used to. Also, we will discover how to create a basic drag&drop functionality using the can...Tue, 18 Sep 2018 22:00:00 GMThttps://malcoded.com/posts/angular-dynamic-components/https://malcoded.com/posts/angular-dynamic-components/ In this tutorial, you will learn what dynamic components are and how they work in angular. You will do so by creating a very flexible dialog system, that demonstrates how dynamic components are used. We will learn how to create dynamic components and attach them to the DOM or use them in other co...Wed, 12 Sep 2018 22:00:00 GMThttps://malcoded.com/posts/angular-reactive-form-validation/https://malcoded.com/posts/angular-reactive-form-validation/ Forms are a fundamental part of every angular application. One of the greatest features of forms is, that you can validate the input of the user before it is send to the server. In this tutorial you are going to learn how you can validate your angular reactive forms. We are going to create a bas...Sun, 09 Sep 2018 22:00:00 GMThttps://malcoded.com/posts/angular-progress-bars/https://malcoded.com/posts/angular-progress-bars/ In this tutorial, you will learn how to create loading indicators with angular. First, we will take at look at how to create a simple horizontal progress bar using just a DIV-element and some CSS. Afterward, we will dive into more advanced techniques using SVGs. We will use them to re-create ou...Thu, 16 Aug 2018 22:00:00 GMThttps://malcoded.com/posts/vue-file-upload-ts/https://malcoded.com/posts/vue-file-upload-ts/ Creating file-upload components can be quite hard. Not only because you need to deal with files in JavaScript. Also, because you need an API to test against before you can actually start coding. In this tutorial, we will learn how to do both. First, we will create a simple express server with ...Wed, 08 Aug 2018 22:00:00 GMThttps://malcoded.com/posts/angular-push-notifications/https://malcoded.com/posts/angular-push-notifications/ In this tutorial, we are going to take a look at how to display push notifications using angular. These push notifications will be the same as the native notifications you get on your smartphone or your computer. Also the user does not have to be on your site to receive the notification because o...Sun, 05 Aug 2018 22:00:00 GMThttps://malcoded.com/posts/storing-data-blockchain/https://malcoded.com/posts/storing-data-blockchain/ Storing data on the blockchain is not as simple as it sounds. There are many problems that can make this task quite difficult. In this tutorial we are going to take a look at the problem from a developers point of view. No fancy business slides or buzzword bullshit! We will take a look how we coul...Thu, 05 Jul 2018 22:00:00 GMThttps://malcoded.com/posts/angular-docker/https://malcoded.com/posts/angular-docker/ In this tutorial, we are going to take a close look at Docker and its containers. We will discover, how we can use Docker to build and host a simple angular application. For that, we will create a simple image to build angular and then use the Docker multi-stage feature to create another image to...Fri, 01 Jun 2018 22:00:00 GMThttps://malcoded.com/posts/angular-ngclass/https://malcoded.com/posts/angular-ngclass/ In this tutorial, we are going to take a look how we can use CSS classes with angular. We will take a look at different methods to dynamically assign a CSS class to an element using the className directive. We will also learn, how we can toggle that class on or off, depending on the state of the ...Tue, 15 May 2018 00:00:00 GMThttps://malcoded.com/posts/angular-ngif-else/https://malcoded.com/posts/angular-ngif-else/ In this tutorial, we are going to take a look at the ngIf directive. We will discover how we can use it to show or hide parts of our angular application. Also, we will find out how the ngIf directive differs from using the "hidden" attribute. When we got the basics, we will move on to more advan...Fri, 11 May 2018 22:00:00 GMThttps://malcoded.com/posts/angular-ngfor/https://malcoded.com/posts/angular-ngfor/ In this tutorial, we are going to learn about the ngFor directive. We will discover, how we can use the ngFor directive to display multiple elements directly from a JavaScript array. Also, we will take a look at the utilities of the ngFor directive, like the index, or even and odd. When we got t...Wed, 09 May 2018 22:00:00 GMThttps://malcoded.com/posts/web-assembly-angular/https://malcoded.com/posts/web-assembly-angular/ For some applications, JavaScript just isn't fast enough... But there is hope! Web Assembly is faster than JavaScript and can run in the most popular browsers today! In this tutorial, we are going to take a look at Web Assembly in angular. We will discover how we can compile any C program int...Thu, 19 Apr 2018 22:00:00 GMThttps://malcoded.com/posts/angular-top-20-q1-2018/https://malcoded.com/posts/angular-top-20-q1-2018/ Keeping up reading all the new articles that are released every day is a tough task! Therefore, I have collected the best blog-posts about angular that got released in the first quarter of 2018. Thank you everybody for writing such great articles! This list is not a competition though. There is ...Tue, 03 Apr 2018 22:00:00 GMThttps://malcoded.com/posts/angular-file-explorer-component/https://malcoded.com/posts/angular-file-explorer-component/ In this tutorial, we will learn how to create a file-explorer in angular. Why? Because we can! And it's fun!  We will explore how to use the angular material library to create a visual appealing component to manage our fil...Fri, 30 Mar 2018 22:00:00 GMThttps://malcoded.com/posts/angular-file-upload-component-with-express/https://malcoded.com/posts/angular-file-upload-component-with-express/ Creating file-upload components can be quite hard. Not only because you need to deal with files in JavaScript. Also, because you need an API to test against before you can actually start coding. In this tutorial, we will learn how to do both. First, we will create a simple node.js express server...Mon, 19 Mar 2018 23:00:00 GMThttps://malcoded.com/posts/nodejs-image-resize-express-sharp/https://malcoded.com/posts/nodejs-image-resize-express-sharp/ Resizing images on the fly as a common task for an API. Implementing the API however can be a challenge. In this tutorial, we are going to take a look at how you can implement your own image-resizing API using node.js, express and sharp. We are doing so by looking closely at each step, so you ha...Sun, 18 Mar 2018 23:00:00 GMThttps://malcoded.com/posts/improve-your-angular-codebase/https://malcoded.com/posts/improve-your-angular-codebase/ Angular can have quite a learning curve. Building applications that are maintainable and easy to read, is a form of art by itself. In this article I will share 5 actionable tips and tricks with you, that can help you improve the quality of your code. From most basic things, like how to name your...Wed, 14 Mar 2018 23:00:00 GMThttps://malcoded.com/posts/angular-fundamentals-reactive-forms/https://malcoded.com/posts/angular-fundamentals-reactive-forms/ Forms are arguably one point where angular really shines. So learning how forms work in angular is an essential skill. In this tutorial we are going to take a close look at one of the two ways to create forms in angular. The reactive forms. We will dive right into code and discover all the detai...Sat, 03 Mar 2018 23:00:00 GMThttps://malcoded.com/posts/angular-fundamentals-cli/https://malcoded.com/posts/angular-fundamentals-cli/ Setting up a new project and creating all these files for every new component can take a lot of time. It is tedious work that takes a lot of fun from the development process. Fortunately, there are tools like the angular-cli, that can do all that hard work for you! In this tutorial, we are going...Fri, 02 Mar 2018 23:00:00 GMThttps://malcoded.com/posts/graphql-with-angular-apollo/https://malcoded.com/posts/graphql-with-angular-apollo/ When it comes to angular applications, there is almost always a webserver running an API, as well. If you have built such an API before, you are probably familiar with the REST-protocol. If you did, you probably also had some issues using it. Certainly, when it comes to more complex queries, REST ...Wed, 21 Feb 2018 23:00:00 GMThttps://malcoded.com/posts/angular-top-2017/https://malcoded.com/posts/angular-top-2017/ The year 2017 is coming to an end... That time went by quite quickly, didn't it? It was a very exciting year to be an angular developer. There was not only one, but there were two major framework (4 & 5) releases! But not only the guys from the angular team were busy. The community did a great j...Thu, 07 Dec 2017 23:00:00 GMThttps://malcoded.com/posts/angular-backend-express/https://malcoded.com/posts/angular-backend-express/ Angular is a single page application framework. Unfortunately, that does not mean that you don't require a server for certain tasks. After all, your data has to be served from somewhere... But don't worry, setting up a server is easier than you might think. In fact, the first server we will creat...Thu, 16 Nov 2017 23:00:00 GMThttps://malcoded.com/posts/angular-beginners-guide/https://malcoded.com/posts/angular-beginners-guide/ You want to learn how to build Angular applications? You have come to the right place! In this getting started tutorial, I want to take you by the hand and give you a gentle introduction to the angular ecosystem. We will start from scratch and build our first example angular app. You will dis...Thu, 09 Nov 2017 23:00:00 GMThttps://malcoded.com/posts/angular-ngrx-guide/https://malcoded.com/posts/angular-ngrx-guide/ You will probably agree with me, that angular applications can become quite hard to overlook as they become bigger. Information is passed from parent-components to child-components, @Output goes into @Input, and at the end of the day, nobody knows where the malformed result came from. But it doe...Fri, 20 Oct 2017 22:00:00 GMThttps://malcoded.com/posts/why-angular-not-works/https://malcoded.com/posts/why-angular-not-works/ Resolving problems of your angular application can be very challenging. When your angular app is not working and all it gives you are some cryptic red lines in a console. Especially when you are a beginner, these problems can turn the development process with angular into a real pain. But trust ...Wed, 04 Oct 2017 22:00:00 GMThttps://malcoded.com/posts/angular-fundamentals-universal-server-side-rendering/https://malcoded.com/posts/angular-fundamentals-universal-server-side-rendering/ You probably agree with me when I say: Angular Universal is not easy to get right the first time. Well, it turns out, it is not that hard at all! Once you understand how it actually works, setting up a working application will be easy for you. In fact, creating a fully functional angular unive...Fri, 22 Sep 2017 22:00:00 GMThttps://malcoded.com/posts/angular-continuous-integration-vsts/https://malcoded.com/posts/angular-continuous-integration-vsts/ Continuous Integration is, once set up, very useful. Gone are the days, when we had to deploy to our servers manually. Today, all we have to do is commit to a certain branch of our (git) repository. The rest is taken care of. Of course, continuous integration is much more than automatic deploys. I...Fri, 08 Sep 2017 22:00:00 GMThttps://malcoded.com/posts/angular-service-worker/https://malcoded.com/posts/angular-service-worker/ It's summertime. You are laying on the beach or at the pool, enjoying the sun on your skin. You remember an article, you discovered recently on your favorite blog. But you were too busy to read it at that time and forgot about it. You realize you have plenty of time now. So why shouldn't you rea...Fri, 01 Sep 2017 22:00:00 GMThttps://malcoded.com/posts/rxjs-for-angular-devs/https://malcoded.com/posts/rxjs-for-angular-devs/ RxJs is not easy. To be honest, it is sometimes pretty hard to understand. Especially in the beginning. So why should you even bother? Yes, RxJs can be complex. Very complex sometimes. But it also offers some great features that let you think in a different way. It enables you to simplify asynchr...Fri, 25 Aug 2017 22:00:00 GMThttps://malcoded.com/posts/get-started-typescript/https://malcoded.com/posts/get-started-typescript/ You will probably agree with me, that Typescript is great. Also, that it takes some time to get used to, especially when coming from plain JavaScript. In this post, we will take a closer look at the Typescript language, to get you started as quick as possible. With the knowledge from this article,...Mon, 21 Aug 2017 22:00:00 GMThttps://malcoded.com/posts/angular-fundamentals-http/https://malcoded.com/posts/angular-fundamentals-http/ Most angular applications require data from web-servers and APIs. To talk to the outside world known as "the internet" we use the build in angular HttpClient. Today, we are going to take a look at how we can use that HttpClient and make our first requests. We will learn how to make requests, u...Fri, 18 Aug 2017 22:00:00 GMThttps://malcoded.com/posts/angular-fundamentals-routing/https://malcoded.com/posts/angular-fundamentals-routing/ Most applications have more than one page. The user clicks links, presses buttons and returns to previous pages. And although angular runs completely client side, it all behaves like the user is used to. Just like any other website. In this tutorial, we are going to take a close look at the ang...Fri, 11 Aug 2017 00:00:00 GMThttps://malcoded.com/posts/angular-fundamentals-modules/https://malcoded.com/posts/angular-fundamentals-modules/ Want to get a better understanding of all the different building blocks of an angular application? Don't look any further! In this article, we will take a close look at modules. Modules in angular are a great way to share and reuse code across your application. Shared modules do not only make y...Sat, 05 Aug 2017 22:00:00 GMThttps://malcoded.com/posts/angular-fundamentals-services/https://malcoded.com/posts/angular-fundamentals-services/ In this tutorial, you will learn what angular services are and how they are used. We will take a look at the benfits of services by using simple examples. That way you will learn about dependency injection, how to provide a serive and what singleton services are. Let's get started! ! Honestly, I don't know, h...Tue, 06 Dec 2016 23:00:00 GMT