Latest stories
If you want to know more about data fetching with hooks, you can read these two articles, too: A Complete Guide to useEffect & How to fetch data with React Hooks? . For a short video tutorial on…
Currently, I'm working through the excellent Udemy Course: NestJS - Zero to Hero by Ariel Weinberger. There are still some coupons to get a discount for this course . I'm still excited about…
ESLint and prettier As a developer and VIM enthusiast I heavily rely on tools to fix my code . I just want to write, and let the program worry about making it adhere to code standards. Furthermore…
Here are some things I've found useful this week or that I enjoyed: You don't need passport.js - Guide to node.js authentication - Santiago Quinteros explains how authentication in Node.js…
Here are some recommendation for useful YouTube channels for JavaScript and learning web development: Ben Awad - short videos about React.js, GraphQL, Node.js, JavaScript Dev Mastery - architecture…
I'm learning about TypeScript and NestJS right now. There's an excellent course on Udemy by Ariel Weinberger . It shows how to develop a CRUD API. If you want to get a sense on how NestJS looks…
I just finished a Serverless React with AWS Amplify - The Complete Guide by Reed Barger today. I learned a lot about AWS and serverless functions. But now it's time for something different! What…
I have several courses, books, and video platforms I learn from. One of my recent discoveries is Testdriven.io , a website dedicated to full-stack web development with Python and TDD. I purchased the…
Just a short note: Today I learned that you shouldn't pass props to React Router with the component attribute, but with render . From the Docs : When you use component (instead of render or…
If you follow JavaScript Teacher on Twitter , you'll notice that he's giving away another book on web development: Node API Book - you have to provide an email address Further Reading JavaScript…
Here are some things I've found useful this week or that I enjoyed: From doing tutorials to getting an actual job? (MPJ shows his Spotify application) - great video by funfunfunction Svelte Crash…
At the moment, I'm going through Reed Barger 's course Serverless React with AWS Amplify - The Complete Guide . I'm learning a lot about serverless JavaScript/React development with AWS. But wow…
Lately, I've been watching some videos from the freeCodeCamp YouTube Channel . Some of the videos are quite good. For example, the tutorials by Beau Carnes are enjoyable to watch. They don't go into…
Al Sweigert is the author of the beginner-friendly and highly rated Automate the Boring Stuff with Python . You can already read the text for free online. But at the moment, you can also snatch the…
Today I spent most of my time with my kids. I got up at 5 am to make time for coding. But shortly afterward, my youngest woke up. Thus, I only managed to squeeze in a few minutes of programming. The…
AWS Amplify offers an Authentication API that allows you to manage and store users. Here is an example for a custom React Hook with useReducer and useEffect that fetches the current user data…
A CORS Error? I've set up a serverless function and REST API endpoint to process payments via Stripe . Every time I try to use the function, I get a POST error with status code 403: This looks like a…
Here are some things I've found useful this week or that I enjoyed: Helsinki MOOC on full stack web development (and other free courses in English) - quality courses from a Finnish university in…
At the moment I'm struggling with enabling CORS for an AWS Gateway API . I haven't found a solution yet . Meanwhile, I found the #60seconddev hashtag on Twitter. The original Instagram posts are…
AWS Amplify provides a back-end service for your front-end or mobile app. It also offers build-in UI components and functions to integrate with their AWS services. It integrates well with JavaScript…
Today I found a new exciting video course by Flavio Copes : I am going to document the process of building an online diary Web App built using React, Node.js, GraphQL, Postgres. From zero (rough idea…
Today I didn't have much time for studying. I read another chapter in A Common-Sense Guide to Data Structures and Algorithms . This is really an excellent beginner-friendly book. The illustrations…
I've tried several online courses on learning data structures and algorithms. But nothing seems to stick. Usually, video courses work well for me. I consider them more engaging than a book. But for…
At the moment I'm learning more about GraphQL with React (full-stack) with the help of Wes Bos's Advanced React course . But here are some tips on how to get a job in tech (from reddit): Tips on How…
Here are some things I've found useful this week or that I enjoyed: The Great Gatsby Bootcamp - Full Gatsby.js Tutorial Course Supercharging Vim: Blazing fast search and global replace · Matt Layman…
ESLint throws some errors: or, when using JSX: Per default, ESLint defaults to ES5 and doesn't understand the keywords import or const . You have to configure ESLint to use the correct parser…
Today I got up to spend some time coding and improving my skills. During the day, I work as a tax officer, so I don't have time to program. I either have to get up early or spend my evenings learning…
One of my favorite online learning resources for JavaScript and front-end development is Egghead.io . They offer some free resources . But their premium tier is worth the money. At the moment, they…
You can do a lot of nifty things with React when you think about how you can use functions in JavaScript. At the moment, I'm learning more about reusable components and composing components together…
There are a few blogs I follow that don't teach you how to code. But they provide tools, models, and systems for learning how to think . I'm very focussed on learning the technologies and techniques…
I finished my first round of #100DaysOfCode! First immediate reaction: Let's do something more useful. Perhaps I've been doing it wrong. I didn't have a particular goal in mind. I just love coding and…
Here are some things I've found useful this week or that I enjoyed: On Lisp in 15 minutes belly.io - A curated list of streamers SOLID Principles: The Software Developer's Framework to Robust…
A quick check-in. I try to attend as many MeetUps I can. It's a bit difficult with two young kids and a job. But I'm lucky, and my husband supports me. I enjoy that I can always learn something new at…
In the last two days, I started learning Svelte.js . I'm positively surprised. Svelte is easy , and it works. React 's abstraction level is high, especially if you mix in JSX. With Svelte, you stay…
Yesterday I explained how you can add linting and formatting support for Svelte.js with ESLint and Prettier . But how can you integrate it into (Neo)Vim and ALE ? 1. Installation Follow the steps…
1. Installation You need to install the following packages as dev dependencies: or 2. Configuration Create an .eslintrc file in your project root directory: If you want to know more about how to run…
Yesterday I was at my first Unconference . It uses the Open Space Method . Nothing is planned. Participants can introduce new themes, give talks, or open discussion rounds. I liked the format, and…
First of all, prefer buffers over tabs . Josh Davis wrote a comprehensive blog post which explains why: Vim Tab Madness. Buffers vs Tabs . I followed Josh's Solution #1 and added support for…
Here are some things I've found useful this week or that I enjoyed: The Ultimate Guide To Learning Code And Getting Paid: How To Find Your First Software Engineering Job in 2019 Reintroducing React…
There's an interesting (free) YouTube livestream about React today. It's by Michael Chan ( @chantastic ), React Podcast host. I liked it because it's beginner-friendly but still covers design…
I can't help myself - I'm too enamored with Elixir and Phoenix. If you want to see what's so exciting about Phoenix's new features, check out the videos linked below by Dennis Beatty. He shows how to…
It's important to focus on problem-solving skills and on computer science fundamentals or on programming languages and frameworks. But it's equally essential to learn some soft skills…
Today on Reddit : Roman Liutikov announced UIx , a new library for ClojureScript. It's a thin wrapper around React.js that uses Hooks! It looks interesting and I will now take a peek at his…
This blog runs on Gatsby with the Gatsby Starter: Minimal Blog by LekoArts . I recently upgraded some dependencies and ran into some issues. The repo switched from @mdx-js/tag to @mdx-js/react…
Learning to code proves to be a slow and steady journey. I wonder about those folks who claim that they were coding for 4 months and then got hired. I can imagine that they were very talented to grasp…
Here are some things I've found useful this week or that I enjoyed: Full Stack Radio: 114: Sebastian De Deyne - React for Vue Developers React Redux TypeScript Guide Intro to React Hooks Full Stack…
I've decided to dial back my interests and to focus on JavaScript/React.js, front-end tech, and clean code/architecture . Maybe I'll throw in some ClojureScript... Work has picked up and I have…
I've spent tons of hours trying to understand how the React Hook useEffect works and how I can avoid memory leaks. At this point, my best guess is that it's a bug. Related issues: setState hook…
One of the people I follow is Flavio Copes . He's writing short and informative posts every day. His blog is beginner-friendly. At the moment, he's working on a Web Platform Course , and the first…
I found another excellent collection of Vim tips: Working with Vim Take it with a grain of salt. You can configure Vim/NeoVim to your liking, and these tips present what worked for the author. But…
I'm still trying to figure out what causes a memory leak with my useEffect custom React Hook. I read tons of articles (I recommend Dan Abramov's ) but I haven't found the solution. My custom data…
Currently I'm wrangling with cleaning up my data fetching functions with useEffect . I return a function that React can run when it unmounts, see React Documentation . In my example, I use the…
I updated my AWS Amplify API and added more nested layers to my GraphQL schema: I also wanted to update my S3 storage to add different permissions: But this fails with Resource is not in the state…
Right now I'm working on creating React apps with Hooks and AWS Amplify. I'm looking forward to take a peek at Gatsby.js and Next.js . I'm watching Deep JavaScript Foundations by Kyle Simpson…
I realized today how grateful I am to be able to learn to code. It gives me so much joy to read about function closures, monads, software architecture, DDD, React Hooks, Elixir, recursion, etc…
I'm extensively using React Hooks . There are new patterns to learn and some pitfalls to avoid. Here are some good resources that help with learning more about Hooks: A Simple Intro to React Hooks…
I'm now writing my React apps with Hooks . I'm accustomed to the way setState() worked: state updates may be asynchronous and updates were merged . That's why I used functions instead of…
I signed up for a free 21-Day Coding Challenge yesterday. If you're a Canadian citizen, you can win prizes, but that's not my motivation. I want to improve my coding skills. I learned about the…
At my last MeetUp we talked about our favorite podcasts. Here is a list of web development podcasts for JavaScript, web development, React.js which I listen to. It might be useful for you. Front End…
Today I added a RSS feed to this blog. I'm not happy with it. This blog runs on Gatsby and uses mdx instead of Markdown. Adding a new plugin, the gatsby-plugin-feed , was easy. But it doesn't…
Two days ago I learned about Clean Architecture with Node.js . I still find it hard to create a well-designed program without polluting my business logic with implementation details. Today I found…
Today I started working with AWS Amplify and React. I bought a Udemy course , and use it as a learning aid. Setting up AWS Amplify with JavaScript proved to be frictionless. Creating a new GraphQL…
Today I watched one of my favorite YouTube channels, Dev Mastery , by Bill Sourour. I've heard the term Clean Code before but I didn't have a clear picture on what it meant. This video was helpful…
I've read the announcement about Svelte 3 today and decided to look into it. Svelte is a front-end (JavaScript) framework that was once called "the magical disappearing UI framework." From the…
Debugging is an essential skill for a developer. It's an area where I have room for improvement. So far I've gotten by with console.log statements. But the Chrome Developer Tools can be helpful for…
I've been feeling a bit under the weather so I haven't had the energy to tackle hard topics. For these kind of days, I always like watching videos on YouTube or Twitch, or listen to podcasts. You can…
I try to learn something new every day , and I find it surprising what cool things you can do with technology. Today I learned that you could run a PostgreSQL database in a docker container. I was…
In your existing project, add mongoose, dotenv, and @types/mongoose : Set up your database, for example with MongoDB Atlas or on your local machine. Create a new file called .env and add your…
I realize: I'm accustomed to writing my front end with JSX or hyperscript-helpers. I programmatically generate HTML and stick functions to it instead of separating pure HTML from JavaScript. And pure…
What Is Cross-Origin Resource Sharing (CORS)? See the MDN Docs : Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application…
I have a form input text field and press the enter key to submit the form. I get an error "Assertion failed: Input argument is not an HTMLInputElement". I originally thought that I had an error in my…
With the npm package concurrently you can run more than one command inside the same terminal. This comes handy when you simultaneously develop your front end and your back end in one project. Let's…
On Thursday, I attended yet another tech-related MeetUp. The location, Unperfekthaus , is interesting. It's a space where you can meet and do (creative) projects. Attendees have to pay a flat fee for…
At some point, you have to send data from your back end (Node.js/ Express.js ) over the wire to your front end. Express makes it easy for you. Let's say you have a GET request to a resource on the…
When working with Vim, I open the editor from the project root. This is the parent directory which also contains the .git directory. For file navigation, I heavily rely on fzf.vim . Opening Vim…
Today I deployed a full-stack example app . It's a toy app for learning purposes. But it's still important to think about security. Unfortunately, it's a topic that most tutorials don't cover. Here…
I've been playing around with Flutter lately. Flutter is a framework for app development based on the Dart language . I've always been interested in creating mobile apps but so far it's taken a…
Here is a list of things I'm excited about and I'm currently learning or would like to learn: Flutter for mobile development a deep dive into Elixir and Phoenix (and Phoenix Liveview ) GraphQL Full…
Yesterday I went to a workshop about Responsive Web Design . I quite enjoyed it. As always I learned something new. Most of the workshop's agenda was aimed at beginners. That was ok and I expected it…
ALE is a plugin that offers essential support for my coding workflow in Vim. ALE helps with linting and fixing the code you write. I also use ALE's autocomplete function, as described in the blog…
Yesterday I went to my second MeetUp organized by Softwerkskammer Ruhrgebiet . I met one of the co-organizers, Sandra. And it was totally cool to see another woman there. We also talked a little bit…
I still find it hard to get productive and hands-on experience with TypeScript. I understand the basics (they are not that hard anyway) but I'm not sure on how to use TS in a meaningful way. I'm going…
I try to learn something new everyday but sometimes there are no big aha moments. That's why I'm falling back to writing a boring Vim post. I'm sorry. Today I wanted to indent a code block. Normally…
Just today, I read an article Getting Productive with Vin in a Week without Hating It . Kudos to the author, Nick Janetakis, for coming up with a great title. The article chronicles Nick's journey of…
I'm learning TypeScript at the moment (as well as dabbling in other things like Elixir, React Hooks, GraphQL ...). But I find it hard to apply my knowledge. It's all fine and dandy to know what…
It can be difficult to get your terminal colors working correctly between your terminal emulator, tmux and your shell. st , tmux and fish shell sometimes don't play nice together when it comes to…
When you create a new SSH key for a remote connection, you will need to add that key to the ssh-agent . For example, the GitHub documentation tells you to start the ssh-agent in the background: And…
Although I'm currently a heavy Vim user, I still think that VS Code is one of the best editors available - and it's open-source and free to use. Traversy Media published a neat YouTube video…
Today I switched back to the open-source editor Visual Studio Code . But I realized that I can now work better with Vim! I have my custom key bindings which flow naturally. You can edit settings in…
I'm very interested in TypeScript at the moment. I love learning new things and TypeScript looks like a useful super-set of JavaScript. It is well supported (by Microsoft), open-source, and seems…
The official Hugo Docs do a very good job at guiding you through the installation of Hugo, the static site generator written in Golang. Setting up a local version of Hugo turned out to be a smooth…
Here's how to get language support for the Dart language in (Neo)Vim. Tools Needed I assume that you installed (Neo)Vim and the Dart language. For example, Arch has a community package that easily…
Let's talk about what I learned about immutability and Elixir today. This is from the book Elixir in Action, Second Edition by Saša Jurić. So far, the book has been a great tour of Elixir and its…
Yesterday I was wondering how I could protect routes in React.js. I have a back-end application written in Node.js which uses middleware ( Passport-Next and a requireLogin helper) to protect the…
I was at a wonderful tech meetup on Wednesday. This was one of my first meetups and it was so much fun! The organizer was super nice and approachable. I enjoyed the lecture about REST to GraphQL…
Redux is a common tool that's used with React. It creates a central "store". This store holds your data (the React state). You can connect your React components to the store to read data or use…
One of my current favorite resources for JavaScript is egghead.io . This paid membership site provides tons of short video lessons for front-end developers. The quality differs a bit. Some courses…
The chain method in Ramda and in Lodash are totall different. Both Ramda and Lodash are utility libraries for JavaScript that make functional programming easier. I'm following a Udemy course…
neoterm is a terminal wrapper for the inbuilt NeoVim terminal. It offers some convenient shortcuts and also comes with REPL integration. Unfortunately, sometimes the terminal doesn't show the command…
I got bitten by the Vim bug at the beginning of March. I can't exactly remember why and how. I spent some frustrating first days with this editor. I switched back and forth between (Neo)Vim and VS…
Nvim-TypeScript adds TypeScript support for NeoVim. Why Nvim-TypeScript instead of Tsuquomi ? The author answers the question on github : tsuquyomi requires vimproc currently, which can be slow for…
Using (Neo)Vim is surprisingly enjoyable after the initial hurdle . Language support for Elixir also works fine in Vim. Plugins I use minpac as my package manager. VimCasts has a good introduction…
These are the plugins and settings that I use for JavaScript/React.js-development with (Neo)Vim. Vim Plugins I use minpac as my package manager. VimCasts has a good introduction video on minpac if…
If you want to open a new file in the same directory as the current file: :e for edit (opens a file) %:p:h for the current directory and the head of the file name If you want to save the current…
I was always confused about where to put my config for the bash shell on Linux. I shoved everything into ~./bashrc because that seemed to be the easiest solution. What is .bashrc ? .bashrc is a…
Today I learned that you can remap Vim keys with VS Code. In my NeoVim config I have some custom keybindings that I can now replicate with VS Code. The official VSCodeVim documentation has some…
I'm slowly learning the power of Vim/NeoVim but the first steps are quite painful. If you're like me and would like to learn Vim gradually and still use VS Code in the meantime, you might want to take…
I found a new beautiful color scheme that's available for different platforms: Nova Colors : The (free) color scheme is available for Vim, tmux, Git, VS Code and other terminals and editors. It looks…
I'm playing around with editors. It seems like some Elixir people use Spacemacs instead of Vim for their needs . Spacemacs is an Emacs distribution that comes with default configuration and…
As I'm experimenting with Vim/Neovim, I realized how much I rely on Prettier and ESlint for taking care of my JavaScript syntax. But how can I have that with Vim? It doesn't come out of the box. I…
When you type in : you can run commands in Vim. And when you run :! you can run terminal commands. For example, :!ls gives you a list of the current directory. In Neovim, you can also start a…
I use Visual Studio Code as my main editor at the moment. It offers great in-built features and because of its popularity, you can also enhance it with many plugins. I love it. I used Sublime Text…
There is a useful free Chrome extension called FP Glossary . It explains functional programming concepts when you open a new tab in Chrome. For example: Currying The process of converting a function…
A few months ago I worked through the book Web Development with Clojure, 2nd Edition . The book was written in 2016 and some code is outdated. That was frustrating but I could get it to work by…
I'm reading Programming Elixir ≥ 1.6 right now and there are two interesting examples of coding Fizzbuzz . This is the output: Here the function upto is the trampoline for the function. It calls…
I'm learning how to handle React Hooks . The article Getting Hooked on React Hooks helped me clear up some misunderstandings. But I'm still not sure how to use the Effect Hook when it's supposed…
My computer uses the QUERTZ per default. From Wikipedia : [ The PC keyboard layout QUERTZ ] employs dead keys to type accented characters like “é”, and the AltGr key to access characters in the…
The new version of React, React 16.8 was released this month - and it finally has Hooks . From the official announcement : Hooks let you use state and other React features without writing a class…
Fish Shell is an interactive and user-friendly command shell for all platforms. The default shell on Linux (and macOS?) is bash. But fish is much nicer. It looks better, it has great autocomplete…
Create-React-App allows you to set environment variables. This is often used to store secret keys, for example, API Keys. You need those to authenticate a request to a third party service (i.e. a…
Here is one of the Algorithm challenges from FreeCodeCamp: Intermediate Algorithm Scripting: Sum All Odd Fibonacci Numbers : Given a positive integer num, return the sum of all odd Fibonacci numbers…
Yesterday I was working on my portfolio site . A local copy of Hugo , the static site generator written in Golang, worked fine on my machine. But when I tried to deploy the site to Netlify , the…
I'm learning ELixix at the moment, to have some variety from coding in JavaScript. Elixir is a friendly, functional language with a syntax that is a bit similar to Ruby. This document gives a good…
I did some work on algorithm challenges and data structures, but am now back to coding a Javascript/Node app called feedbacky . I learned about authentication with Google OAuth using Passport-Next…
I'm working on learning data structures and different algorithms. One of the first ones is Bubble Sort: Bubble Sort takes O(n^2) time in the worst case because you have two nested loops. This is a…
During development, you set a port that Node listens to. That doesn't work with Heroku because Heroku binds your port and you cannot set it yourself. You'll get an error: Web process failed to bind…
Here are all falsy values: Here is a Github Gist with better formatting. Further Reading Truthy and Falsy: When All is Not Equal in JavaScript What is Actually True and False in Python? Truth in…
There are some gotchas with React's setState() . For example, state updates may be asynchronous : React sometimes batches multiple setState() calls for performance reasons. Make sure to set state…
In the last few weeks, I've upleveled my coding skills. I've been coding every day for at least an hour and I've finally taken the step to break out of tutorial hell. Yes, I still learn with video…
Every time I create a frontend project, I realize that CSS is hard. Especially layout (flexbox or grid). I'm glad that we have flexbox now and do not need to float and clearfix anymore. But still…
I finished The Complete Web Developer in 2019: Zero to Mastery course a few days ago. I skipped some sections (HTML, CSS) which I plan to refresh later. Especially my CSS Grid and responsive design…
I started the #100DaysOfCode a few days ago. The challenge sounds like a fun way to log my progress and participate in a greater community . The idea behind the challenge is to code at least for an…
Heroku doesn't deploy your dev dependencies. This sounds like a good thing. But when you develop Node.js with Nodemon and your package.json uses nodemon as a start script, things can go haywire…
I've been trying to find a way to architect my projects in a functional way. When you're still a newbie programmer, it's hard to do. Most books and tutorials focus on the essentials and don't teach…
I like the Kaizen technique: small, tiny baby steps towards a goal. Little improvements pile up and lead to big wins. Compound interest. Kaizen helps with breaking down a problem: to do it the Kaizen…
Sometimes I think I already know a lot about something. But often that's not true. You can always dig deeper. Often I'm ignorant about what I don't know because I know enough to get by. It's ok that I…
Some days are worse than others. Some days feel like you're making no progress. What you want to build doesn't work. You try to come up with a solution for a complicated function. It doesn't work. You…
Recently I discovered @joelnet on dev.to . He writes about functional Javascript. He created a new language called MojiScript that compiles to JS. It looks very interesting. What I like about it is…
"Everyone should learn to code." and even "Coding is easy" are some statements floating around on the internet. There are tons of resources for budding learners. Some are low-priced, some are free…
Things that nobody tells you but you somehow have to learn: the steps/how-to to code your app. With a frontend app, you have a combination of HTML, CSS, and Javascript and you have to address them all…
I wanted to have a basic working webpack configuration so that I could try out different things without a framework. Doesn't sound so hard, does it? Hours later, I came up with this Minimal Webpack…
I was wondering how one could display the error of a fetch Promise in React. Here is a an async fetch API call with a try/catch block. The function takes an input string, makes a POST request and…
In the past, Javascript only had objects but no maps . Objects were both used as records and as dictionaries. (From JavaScript for impatient programmers (beta) by Axel Rauschmeyer) : Records…
A user submits text to your program with an input field. In Javascript, this is always a string. But sometimes you need a number: Ramda.js defaultTo This converts the input (string) to a number. If…
Request/AJAX Yesterday I was writing a function for an API call. The documentation gave an example for Node.js using the request module : request is asynchronous and uses streaming and callbacks…
The React documentation explains how to handle HTML forms and events . Let's have a look. Imagine you have an HTML form with an <input> field: the browser will open a new page when the user…
You can create stunning backgrounds with Particles.js . Luckily, a kind soul has implemented this library as a React component: react-particles-js . react-particles-js is easy to use but it can be…
Why ClojureScript? With React, you build small components and combine them. You design from data and then flow it through functions (and React classes). You start with the programming logic. You…
This is part 2 of my Clojurescript Reagent Tutorial . In part 1 we created a simple random quote app that displays quotes from the TV-series "Breaking Bad". Here is the live demo: Breaking Bad…
Learning to code takes practice and building projects. So, here is how to build a simple "Random Quote Machine" with Clojurescript and Reagent. Hopefully, you'll get a sense on how Clojurescript and…