Latest stories
Our goal is to create a music player with ReasonReact like this one: ☞ Demo . James King wrote the JavaScript version of the tutorial at upmostly . My blog post series is a port of the tutorial to…
In the last post , we set up our project: a music player with useContext in ReasonReact. You can find the demo on GitHub pages and the full code on GitHub . The tutorial is a port from the React…
What Are We Building? This tutorial will show you how to build a music player with ReasonReact and the useContext hook . You will learn how to bootstrap a ReasonReact project, how to build a…
My goal for the rest of October till November is to get better with CSS. I know the bare basics but I'm not proficient. I have tons of courses and resources, but my focus so far has been on other…
When you close the lid on your laptop (using Manjaro i3 ), the laptop goes to suspend mode. But the screen doesn't lock. You have to write a script for systemd . i3lock Manjaro i3 ships with i…
If you'd like to clean your system by deleting all node_modules folders (and saving tons of disk space), you can type: It also works well with fd : Further Reading Remove all node_module folders…
A few days ago , I switched to fnm as my version manager for Node.js. Before, I installed the default nodejs package that came with Arch Linux. But sometimes I would update my operating system, and…
Here are some reflections on my path to creating a first ReasonReact application. ReasonReact is still React ReasonReact's API stays as close as possible to React. As you know, ReasonML is a syntax…
fnm offers a speedy alternative to the Node.js manager NVM . Built with native ReasonML, it's significantly faster than NVM . fnm Setup Here's how I set it up on an Arch-based Linux system that…
In the last post , we finally finished the custom useForm hook. You can see the code on GitHub . Use The Custom Hook Let's switch to our main form component: scr/Form.re . We need to connect…
Yarn is my package manager of choice for the JavaScript ecosystem. When I started programming, yarn was superior to NPM - faster, more secure, better dependency lock. Nowadays, in 2019, npm , the…
Here are some useful links I found this week: Flexbox30: Learn Flexbox with 30 Tidbits : a bite-sized visual guide to CSS Flexbox 5 useful Typescript tricks 9 Projects you can do to become a Frontend…
We set up our form validation rules, tackled state management and most of the logic . Now, we have to hook up our validation logic with the form. Each time a user types into the form, we want to…
Why Colemak? In short: better coding experience. The standard Germany keyboard layout (QUERTY) is not helpful for my coding flow. Many keys are hard to reach, for example, the backslash ( \ ). I chose…
I've attended several local meetups this year. Being new to tech can be daunting because you don't know anyone, and you might feel that you don't fit in. As a woman, it can also be intimidating…
Last weekend I attended my first tech conference: Ruhr.js 2019 in Bochum, Germany. Milestone reached! I will write about my impressions tomorrow. My Coding Journey I'm a self-taught developer who…
What We've Done So Far We've laid the groundwork for adding form validation to our app . We defined our types; we have a simple form and a functioning useForm custom hook in a separate module…
What We've Done So Far So far, we've created a simple ReasonReact form with a custom useForm hook and client-side routing. The custom hook uses a useReducer to handle state and transitions. The…
Here are some useful links I found this week: Announcing NestJS Monorepos and new CLI commands Vim quickies/cheatsheet by Rubin Redux Crash Course with Hooks - illustrated quickstart guide by Chris…
A few weeks ago, I started learning ReasonML and ReasonReact . After doing a basic tutorial , I decided to tackle a form with validation. Building a simple form is not too hard, but it offers some…
Learning the fundamentals of React was reasonably straightforward. React.js adds a lot of abstraction over JavaScript. But after you've got the basic building blocks down, you can get quite far. You…
Rich Winter kindly pointed out an error in one of my posts. He also suggested adding my Twitter handle to the blog. Thus, I've included a new button to the index page. The button leads to my Twitter…
State management in React.js and ReasonReact proves to be challenging. I have two pieces of state with useReducer , which I can't get synchronized. Another problem is to conditionally setup…
I'm sick and not able to code today. I try to write a blog article each day, and I try to code every day. If you want to learn, you have to be consistent. You have to make time for input (a course, a…
Yesterday two articles from my blog got mentioned in the Awesome ELixir Newsletter . Both articles were about Vim with Elixir . That's so cool, and I hope those articles will help others. Developing…
Here are some useful links for your pleasure: Stand Up a Node.js Server with NestJS including TypeScript and GraphQL - a tutorial by Aryan J. Robot, a new JavaScript library for finite state machines…
I started the Microservices with Docker, Flask, and React a while ago. The course proved to be quite challenging, as I'm not familiar with Docker and Flask. It also uses advanced features of React…
The problem with ReasonReact is - it's still React. (No kidding.) Today I tried fixing a bug in my ReasonReact form app . After some debugging, I realized that I have a problem with derived state…
A few days ago I was on the verge of giving up ReasonML . Learning ReasonReact is quite challenging. But I'm glad that I stuck with it. I quite enjoy the type system after some initial hiccups. The…
ReasonML still holds my interest, despite my problems with it . (JavaScript interop and disjointed documentation comes to mind.) Here are some free beginner-friendly videos: Learn ReasonML by…
The problem: You have a bunch of JavaScript and .jsx files that you wish to parse with Prettier and ESLint . Why? You would like to make sure that ESLint analyzes your code for problematic…
Vim is my favorite editor, and I prefer it over VS Code. (Neo)Vim offers a light-weight, fast experience where I can quickly navigate via keyboard shortcuts and use the terminal to its fullest. Reason…
Here are some useful links for your pleasure: Advice for Technical Writing by Chris Coyler from CSS-Tricks Curated list of project-based frontend tutorials [Project-Based Learning Frontend] Why You…
In the last few days, I've been working hard on learning ReasonReact by creating a small project . I've learned a lot, but it has been quite frustrating, too. At the moment, I'm trying to set up…
Our reusable Form component works, but we don't have any routing. How can we navigate to our two forms (register and login)? Enter ReasonReact Router It's a breeze to set up the inbuilt ReasonReact…
So far, we've created a simple form component with a useReducer hook . This form works with an email and a password - it could be a login form. But what if we would like to use the same logic to…
In my last post I tried to create a custom hook function for React forms . That didn't work as I expected. Some kind folks helped me out and gave me some suggestions . Let's pivot and try something…
By now we have the HTML/JSX skeleton for our input form: a simple login form styled with Bulma . (The code is available on Github .) Stumbling Blocks With ReasonReact The idea for this blog post…
The last few days, I've spent a lot of time learning ReasonReact. It has been a frustrating experience so far. Even simple tasks like creating forms prove to be quite hard for me. I'm quite familiar…
Let's continue from yesterday's post and build the skeleton for our application: a simple form with ReasonReact and hooks. Go to the src folder. The main App.re file should just render a Form…
My goal is to learn more in public , so that it also may help others. I've given ReasonReact a first try. I've read a bit of the documentation, took a peek into Exploring ReasonML , and found some…
I'm interested in Reason and ReasonReact because it is a typed functional language for the frontend. Today I learned about the Option type . During my experiments with ReasonReact I'm stumbling over…
I'm currently working on three different toy apps/learning projects: a Meetup clone in Svelte.js, an online store in React (with Redux, GraphlQL, etc.), and a simple todo with ReasonReact. It's…
In the last few days, I've taken a look at Reason . I'm interested in ReasonReact as an alternative to using JavaScript on the front-end. I enjoy the style and patterns of functional programming…
Installation rtop is the name of the Reason REPL. Get it by installing Reason and BuckleScript globally: (or reason-cli@latest-macos ) If you get the error Permission denied , you can solve it by…
Again a "late Friday" selection: How to Build Good Software From design patterns to category theory by Mark Seeman - this article series explains software abstractions Clojure/script GraphQL…
I'm currently working through Mastering Phoenix Framework by Shankar Dhanasekrann. The book teaches you how to build a shop application with Test-Driven Development using Phoenix. Unfortunately, the…
I just came across a great tool to "shallow copy" a git repository. I often clone git repositories as a starting point for my projects, or for learning purposes. But I don't need the fully-fledged git…
I'm so excited! I will be attending my first tech conference in October! Today I got my tickets for RuhrJS , a JavaScript conference in the Ruhr area. I'm one of the volunteers, and I'm looking…
Last weekend I took a peek at Reason , a JavaScript-like-syntax for OCaml. Ocaml is a multi-paradigm language from 1996 which also supports a functional programming approach. It is also typed and…
I'm trying to improve my VIM configuration. Customizing Vim to your needs can be a never-ending story. Over the last few months, I have collected several plugins and settings. And from time to time, I…
Here are two useful resource for people looking for a career in tech: The Coding Bootcamp Handbook: How Do Bootcamps Work and Are They Right for You? by FreeCodeCamp founder Quincy Larson Tech…
Today the "Friday Picks" are a day late. Sorry. Problem Solving and Clojure 1.9 Podcast transcript - Rich Hickey, creator of Clojure, talks about problem solving - worth a read, even if you're not…
Yesterday I installed LanguageClient-neovim for NeoVim. This tool adds Language Server Protocol support for NeoVim (or Vim8). It helps with autocompletion, code formatting, code definitions, and…
I'm trying to wrap my head around React 's render props and Svelte 's slots . Not much to write here, I still try to understand how it works. State Management in SPAs is quite complicated. There…
I'm expanding my React knowledge so that I can build better apps. One of my learning resources is the Udemy course Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL) . I've been familiar…
Today I learned more about Docker and Python. The blog post Connection refused? Docker networking and how it impacts your image gives an approachable overview over networking with Docker. In the end…
Today I've been trying to refactor a class-based component that uses getDerivedStateFromProps() . I originally used this lifecycle method to replace the deprecated componentWillMount() . You can…
I found this new Humble Bundle for Python Programming . Here are some insights into the included books by Al Sweigert, author of Automate the Boring Stuff with Python : reddit/r/python . And here…
Both GitLab and GitHub allow you to use a private email address. Setting your commit email address on GitHub Commit email on GitLab Now, your regular email address will be private and others can't…
Here are some things I've found useful this week or that I enjoyed: A web scraping guide for beginners, part 1 and part 2 A weird experiment: The Boost Your Coding Fu With VSCode and Vim Auditory…
Today I found a useful reddit thread: r/vim Delete until word Type d/<word> and it will delete until that word. Also: A truly mindblowing thing is the concept of search-offset ( :h search-offset…
I'm trying to use environment variables for my Git configuration. The article Carrying your Git settings around provides a good starting point. You can set GIT_AUTHOR_NAME , GIT_AUTHOR_EMAIL…
Today I found an excellent article about Cleaning up your Elixir Code . It shows how you can refactor your code and use best practices (hexagonal design with adapters/ports, dependency injection…
Today I listened to the Localhost.fm Podcast . The most recent episode with guest Chris Ferdinandi inspired me to take a look at Svelte.js again (as an alternative to React.js). So I played around…
Today it took me over one hour to debug an error with Docker and Nginx. Every time I tried to submit a form with a POST method, NGinx gave me a 405 error: "405 Not Allowed". I originally thought that…
Sometimes I get alerts on GitHub because my project's npm packages have security issues. With npm, you can use npm audit fix to update your packages. What about yarn? Yarn also has a command for…
Here are some things I've found useful this week or that I enjoyed: GraphQL Recipes - Building APIs with GraphQL Transform Paged Out! #1 : a free magazine about programming Reef - a lightweight…
I'm trying to wrap my head around JavaScript generators . One article that helped me to grasp its concepts is JavaScript Getter-Setter Pyramid by André Staltz. Another valuable resource is the…
Nothing much to report. I'm still learning TDD with Python (Flask) and React.js. I'm using Jest and Enzyme for React. Testing React components feels very abstract to me. Kent C. Dodds wrote two…
I found a browser tool on r/webdev today: Link Control ( Chrome / Firefox ). It's a simple browser extension which uses the web's localStorage API. It applies a new color to all visited links ( a…
Here is a useful post that shows the commands to delete unused docker containers, images, volumes and networks: How To Remove Docker Containers, Images, Volumes, and Networks . That's the most useful…
When I wanted to jump inside my VIM file, I always used line numbers, like so . But often, I only want to jump to the next paragraph in my code. For example, the next function. You can easily use…
I have the following Dockerfile for a React app: After setting up the work directory I copy the package.json and package-lock.json to Docker. Then I install a global package ( react-scripts…
Here are some things I've found useful this week or that I enjoyed: Production-ready Docker images - a guide to Docker with Python Programming Algorithms: A Crash Course in Lisp - a course on data…
I'm learning test-driven development with the course Microservices with Docker, Flask, and React . It's been a lot of fun. I've also learned more about using Docker and docker-compose. The course…
I'm trying to deploy my docker containers with docker-compose and Travis-CI to Heroku. I found two articles: Continuous Deployment con Docker + Travis + Heroku (article is in Spanish, but very easy…
I've read about The Odin Project a few times on reddit. People seem to be happy about this (free) curriculum, as it starts from zero, but doesn't hold your hands. They offer a Ruby course and a…
I'm interested in learning test-driven development (and Domain-Driven Design, too). I find it a bit hard to find the right material to apply TDD in the context of building a full-stack web application…
Today I reviewed my progress with the Microservices with Docker, Flask, and React by Michael Herman. I'm not familiar with Flask, but I wanted to learn how to build a microservices app with TDD. The…
Today I had problems running a NGinx Docker container with docker-compose after a system update. So I wanted to reset all docker containers. Here are the relevant commands: Stop and remove all…
Here are some things I've found useful this week or that I enjoyed: The Architecture of Open Source Applications - some free books on architecture! Use Svelte with SASS/SCSS in VSCode - add SASS to…
I'm trying to set up Nginx with my Docker containers. I want to route the standard listening port 80 to the port where my Docker runs my Django app. docker-compose proxies my app from port 5001 to…
I'm trying to use Docker for my apps. I like the tool, and it also helps to have a stable dev environment when everything runs inside a container. But it adds another layer of complexity. Now, a lot…
Yesterday I wanted to insert a character at the start of each line. Vim doesn't have multiple cursors like some popular text editors (VS Code, Sublime Text). But sometimes you don't need more than…
Yesterday I finished the course Build a Backend REST API with Python & Django - Advanced . Here is my review: Excellent course on TDD with Django. I especially like how we use Docker and Travis CI to…
Today I tried to set up a dockerized Flask app with Postgres database with Travis CI. It shouldn't have been difficult because I followed a tutorial. Setup Here is the docker-compose.yml : There is a…
I started my coding journey with the editor Sublime Text . I then tried different editors, for example, Atom and brackets . For Clojure, there was Lighttable . It is a beginner-friendly editor…
Here are some things I've found useful this week or that I enjoyed: Becoming a Zsh (Oh My Zsh) Power User 10 docker-compose and docker commands that are useful for active development CSS - Center both…
Here is a gentle introduction in solving problems for Algorithm challenges: How to think like a programmer — lessons in problem solving
One of the blogs I follow is Dave Ceddia's . He has a way of breaking down complex topics to the bare minimum. His blog posts provide a good overview of a topic without going too much into details…
I'm still handicapped by slow internet speeds. Learning to code is a bit difficult at the moment. I'm doing Udemy courses (React, CSS, and Django TDD) and watching videos is almost impossible right…
I've never realized how lucky I am to live in an area with a good infrastructure. At home, I have a stable internet connection with decent speed. After I've tried to work remotely with a download…
I've been taking a break from React and trying my hand at TDD. I found a good course that teaches Django API development with TDD principles. I'm not that familiar with Django. But I hope I can pick…
Today I found an insightful article about the History and effective use of Vim . If you're a Vim user, it's worth a read. The blog post also peeks behind the curtain and explains some of the inner…
Here are some things I've found useful this week or that I enjoyed: As a senior developer, how do I better mentor an intermediate developer who is struggling? - Reddit thread about mentoring (might…
I'm currently working on the Udemy course Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL) by Andrei Neagoie and Yihua Zhang. So far, it's been an exciting journey, and I appreciate that…
I'm amazed about what you can learn for free on platforms like YouTube. For example, here are some tips on how to write more professional code by Dylan Israel: How to Code Like a Pro (with Dylan…
Today I watched this talk: André Staltz - How to Think - Uphill Conf 2019 . And while the ideas were not new, it was still a good reminder about what it means to be a thinker in the context of being…
A few days ago, I heard of using state machines in JavaScript. I've been listening to React Roundup podcast episode 069 The State Machines in React with David Khourshid . David wrote a JavaScript…
Here's a free video tutorial for Regular Expressions from one of my favorite teachers, Colt Steele: Regular Expressions (Regex) Mini Bootcamp
Today I learned two neat tricks: Put your cursor on a link (in normal mode), and type gx . This will open the URL in a browser window. What if you want to open a file in a web browser? On Linux, you…
Here are some things I've found useful this week or that I enjoyed: Boilerplate Code - Starter projects in React, Vue, Python, Full-Stack - some useful boilerplates As a self taught developer, i feel…
Yesterday I attended the Amazon Web Services User Group Dortmund MeetUp . It was easy to travel to, very central in the city. Around 40 people attended this event. The organizers offered pizza and…
Today I learned about how to use Local Storage and redux-persist . Local Storage is part of the native Web Storage API and allows you to store data accross browser ressions (and refreshes). It's…
So much to do, not enough time. I'm interested in so many things, but I don't have the time to learn them all. Gatsby.js, Elixir & Phoenix (Phoenix LiveView!?), TypeScript, DDD, software architecture…
Yesterday I finished Introduction to Gatsby , a beginners course by Jason Lengstorf, hosted by Frontend Masters. Gatsby is a static site generator for JavaScript/React.js. It pre-builds your website…
My .vimrc is full of customizations. Like many others, I've set options, added plugins, and wrote custom key bindings. All these personalizations make it hard to debug when something goes wrong…
I emphasize using buffers over tabs in VIM. Buffers are the ideomatic way of using VIM. You can read more about that here: Vim Tab Madness. Buffers vs Tabs . I customized my settings with some…
Let's say that you create a new file in a buffer: What happens if you didn't create the header directory first? What now? You can still create the directory and save the file. In NeoVim, you can use…
I like Gatsby.js - it offers a ton of functionality out of the box and embraces the React ecosystem. I watched the excellent Frontend Masters course Introduction to Gatsby . I'm blown away by the…
I've found a new programming font that I use with VIM and VS Code. It's a free font with font ligatures (those don't work in VIM, though). Check it out ! Here is the GitHub repository .
Today I listened to a React Podcast episode where Michel Weststrate was a guest . He talked about state management, MobX , and Immer , his new library. Listening to talk like these, and the ideas…
Here are some links I found useful to level up my VIM skills: Fast movement and navigation inside Neovim Traversing text in Insert mode I've been switching between Vim and VS Code the last few days…
Today I learned that it's a bad idea to drop a PostgreSQL table directly with PGAdmin. Afterwards, I got tons of errors, because the table was missing. I you want to re-create your database from…
Here is a tutorial on how to deploy a Node.js and React.js app with Heroku: Reed Barger is concise and on point, as always. I can also recommend his paid courses. You learn a lot by following his…
Here are some things I've found useful this week or that I enjoyed: TypeScript Weekly - a newsletter for TypeScript How YOU can use Nest to build a GraphQL API - a tutorial that walks you through…
Nest.js I'm still smitten with Nest.js , a Node.js framework with TypeScript support. Here are some resources to get started with Nest.js . Vim vs. VS Code I'm giving VS Code another chance . So far…
I've been reading posts on dev.to lately to stay up to date. I follow a few writers there, for example, Jaime González . Like me, Jaime is a big VIM fan and has even written two books about VIM…
I'm a big fan of Brad Traversy and this video is one of the reasons why: If you have some rudimentary knowledge of React.js, you should be able to follow Brad's instructions. As always, he offers…
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…