Friday Picks 061

Read more →

Friday Picks 059

Read more →

NativeScript With Android Emulator on Arch Linux

Today I wanted to try out NativeScript: NativeScript enables you to build truly native apps for iOS, Android, and the Web, from a single JavaScript code base. With support for TypeScript, CSS, and popular frameworks like Angular and Vue.js. Install NativeScript Either use Arch’s native packager or npm. With the AUR: yay -S nativescript If you choose to install NativeScript via Node, do it like this: npm i -g nativescript Now you can bootstrap a NativeScript:
Read more →

Friday Picks 057

Read more →

Friday Picks 056

Read more →

Friday Picks 055

Read more →

Friday Picks 054

Read more →

Static File Server With Deno and Abc

Let’s say I have some static files I want to serve. For example, a React app or a Svelte app. Create Svelte App Let’s use the Svelte template: npx degit sveltejs/template svelte-app cd svelte-app npm install Now we need to create a production build: npm run build The command will create an optimized build in the public folder. Create Deno Server Install Deno. We’ll use the third-party module Abc to create a simple web server.
Read more →

TIL About Array.prototype.fill (Javascript)

Today I learned about Array.prototype.fill and friends. You can use the method to fill an array with values, or create a new array filled with values. Pitfall: if you fill a new array with a value that is an object, each slot in the array will reference that object. const newArr = Array(4).fill([]) > [[], [], [], []] newArr[1].push(8) > 1 newArr > [[8], [8], [8], [8]] Further Reading MDN: Array.
Read more →

Deno First Impressions

I’ve started learning about Deno. My first impressions are positive. I like how I can load dependencies with URLs. I especially like the combination of usingA CDN like pika.dev or unpkg which mirror tons of GitHub repos. If a module offers an ESM JavaScript file, you can load it with Deno. For example, load Rambda (the smaller alternative to the functional programming library Ramda): import * as R from 'https://unpkg.com/rambda@^5.6.1/dist/rambda.esm.js' Deno also offers tons of functionality out of the box, e.
Read more →

Deno Course Is Here

Read more →

SolidJS First Impressions

Two days ago I stumbled over SolidJS, a UI library for JavaScript. Solid is a declarative Javascript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs. Solid is a new contender in the saturated space of front-end libraries like React, Vue or Svelte.
Read more →

Some Vim Resources

Read more →

Friday Picks 052

Read more →

Tuesday Picks 005

Read more →

Run Locally Installed NPM Packages Without Global Install

There are a lot of tools in the npm ecosystem that you need to run in your project. For example, firebase-tools or heroku. If you read the documentation, those tools require you to install them globally: npm install -g firebase-tools Now you can execute the binary from everywhere, for example: firebase init. But it’s recommended to install packages locally instead of globally 1. Updating a global package would make all your projects use the new release, and as you can imagine this might cause nightmares in terms of maintenance, as some packages might break compatibility with further dependencies, and so on.
Read more →

Tuesday Picks 004

Read more →

Friday Picks 050

Here are some links: Code Tetris: JavaScript Tutorial for Beginners - learn the basics of JavaScript by coding a Tetris game from scratch Beginner’s Guide to React w/ Hooks (2020) Free Course - a 2-hour free YouTube video by popular instructor Colt Steele Go GraphQL: Introduction to building GraphQL API in Golang #1 - a multi-part tutorial series Design Resources For Developers - a curated list of free design and UI resources by Brad Traversy [AskJS] Has anyone used GraphQL for a large project and regretted it?
Read more →

Snagged Some Udemy Courses on Sale May 2020

Read more →

Strapi.js Resources

Read more →

Tuesday Picks 003

Read more →

Deno Resources

This page collects resources, starter guides and tutorials on Deno, an alternative V8 runtime for JavaScript and TypeScript. A primer is here: Deno 1.0: What you need to know. Official Resources Deno website Collections dev.to Deno tag Awesome-Deno Deno SubReddit Tutorials/Getting Started/Guides (Free Resources) A Guide to Deno Core by Yingchen Xue & Kevin (Kun) “Kassimo” Qian Build A Simple CLI Tool With Deno by Mayowa Ojo Build Your First Deno App with Authentication Building CRUD APIs using Deno and oak by Kailas Walldoddi Creating your first REST API with Deno and Postgres by Diogo Souza Deno & PostgreSQL (Crash Course Part 2) by Brad Traversy Deno Beginner by Ahmad Awais Deno Course - Better than Node.
Read more →

Code Snippets With vim-vsnip

When you work with a language like Dart, you soon realize that you have a lot of boilerplate code. For example, here is the skeleton code for a stateless Widget in Flutter: class YellowBird extends StatefulWidget { const YellowBird({ Key key }) : super(key: key); @override _YellowBirdState createState() => _YellowBirdState(); } class _YellowBirdState extends State<YellowBird> { @override Widget build(BuildContext context) { return Container(color: const Color(0xFFFFE306)); } } A few code snippets would be helpful.
Read more →

Friday Picks 049

Here are some links for this Friday: Architecture Patterns with Python: Enabling Test-Driven Development, Domain-Driven Design, and Event-Driven Microservices Paperback - learn Domain-Driven Design with Python, free HTML version Performance Best Practices: Running and Monitoring Express.js in Production - insightful article, although it boasts some ads for the service the blog belongs to How To Build An Amazing LinkedIn Profile [15+ proven tips] - a guide on getting the most out of your LinkedIn profile Nonsense!
Read more →

Tuesday Picks 002

Read more →

Friday Picks 048

Read more →

Tuesday Picks 001

Read more →

Friday Picks 047

Read more →

Currently Working on Clean Nodejs With Mongodb and Graphql API

At the moment, I’m into architecture, clean code, building APIs. I’ve watched the video Using Clean Architecture for Microservice APIs in Node.js with MongoDB and Express by Bill Sourour. I’m trying to build something similar, but using the Fastify framework and GraphQL. Bill works a lot with dependency injection, and I’m having trouble with translating the code from using http endpoints and requests to using GraphQL. Further Reading Example Microservice API by Bill Sourour Using Clean Architecture for Microservice APIs in Node.
Read more →

TIL How to Refactor Try Catch With Either Monad

Today I watched the course Hardcore Functional Programming in JavaScript, v2. The instructor, Brian Lonsdorf, shows you functional programming principles with JavaScript and introduces concepts like currying, functors and monads. One interesting application is the refactoring of a try-catch-block to the Either monad. const fs = require('fs') const getPort = () => { try { const str = fs.readFileSync('config.json') const config = JSON.parse(str) return config.port } catch (e) { return 3000 } } const result = getPort() const Right = (x) => ({ map: (f) => Right(f(x)), chain: (f) => f(x), fold: (f, g) => g(x), inspect: () => Right(${x}), }) const Left = (x) => ({ map: (f) => Left(x), chain: (f) => Left(x), fold: (f, g) => f(x), inspect: () => Left(${x}), }) const fromNullable = (x) => (x !
Read more →

More Learning Resources During COVID-19 Outbreak Part 3

Read more →

Colt Steele Runs a Free Coding Bootcamp on YouTube

Read more →

Friday Picks 042

Read more →

More Learning Resources During COVID-19-Outbreak

Here are some more resources for learning new things during self-isolation: Education Links: a collection of links to help you and your kids Amazing Educational Resources: a list of resources with free or discounted offers OpenLearn (free learning platform from the Open University) Scholarships for Students on Codecademy: 10,000 free accounts for high-schoolers and college students around the world Shawn Wildermuth’s Courses: free courses on Bootstrap 4, Vue, SignalR during the crisis Free JavaScript/Node/CSS books 365 Data Science: Free Access Till April 15th: learn mathematics, statistics, SQL, Python, machine learning 50% discount on Wes Bos’s courses: Wes Bos is a respected JavaScript teacher 50% discount on dataquest.
Read more →

Free Learning Resources During COVID-19-Outbreak

Read more →

Friday Picks 041

Read more →

Friday Picks 040

Read more →

Friday Picks 038

Read more →

Friday Picks 037

Read more →

Friday Picks 036

Read more →

Friday Picks 034

Read more →

TIL: Objects in Nim

Objects in Nim use the type constructor:

Type Definition type MusicTrack = object index: int title: string ## (Mutable) Value var summer = MusicTrack(index: 1, title: "Summer in the City") That reminds me of Records in Reason:

/* Type definition */ type musicTrack = {index: int, title: string} /* Value */ let summerInTheCity = {index: 1, title: "Summer in the City"} In Nim, “An object is a value type, which means that when an object is assigned to a new variable all its components are copied as well.

Read more →

Learning About Nodejs Graphql Microservices

I’m currently working on a few micro-services with Docker. The architecture looks promising to me, and I like to play with Docker containers. Lately I’ve been watching a few videos about Node.js/GraphQL Microservices by Better Coding Academy. The tutorial series assumes a lot of knowledge (JavaScript, Express, GraphQL, Docker). I would have liked more detailed explanations. But the videos are still useful for showing the architecture of an Express/GraphQL setup with micro-services.
Read more →

babel-eslint and prettier-eslint-cli Are Broken

A while ago I figured out how to format and prettify all JavaScript files in a project. The guide worked for me at the time of writing. Unfortunately, the current versions of babel-eslint and prettier-eslint-cli are both broken. Relative paths are broken with prettier-eslint-cli and eslint 6.7.0 prettier-eslint [ERROR]: There was trouble creating the ESLint CLIEngine. There is a workaround for Linux and MacOS: inject $(pwd) before the file path.
Read more →

Friday Picks 030

Read more →

State of Js Survey 2019

Read more →

Friday Picks 029

Read more →

Fix Import React Renderer With Jest Error

A few days ago, I updated a React application that uses Jest and Enzyme for testing. The new tests yielded errors like cannot find module ‘react-test-renderer’. Solution: Install react-test-renderer and enzyme-to-json as dev dependencies, and re-factor tests to use enzyme-to-json. npm i –save-dev react-test-renderer enzyme-to-json In your package.json file, add the serializer to your jest config: { "jest": { "snapshotSerializers": [ "enzyme-to-json/serializer" ] } } Example test file before update:
Read more →

Learning About Best Practices for Docker and Node

Today I’ve tried to update one of my Docker apps that uses React, Enzyme, and Jest. This lead me on a wild goose chase about react-test-renderer and best practices for Docker builds for Node.js. I’m still not sure where the problem is (Enzyme, maybe?). But I found three useful resources for Docker and Node.js: Docker and Node.js Best Practices Node + Docker Hello World, for Showing Good Defaults for Using Node.
Read more →

Friday Picks 028

Read more →

Decked Out With Black Friday Swag

Read more →

Friday Picks 027

Here are some reads I found this week: A Pattern For Cancelling Fetch API Requests - how to cancel fetch Create a user controlled dark or light mode - design accessible dark and light modes for your website Computer Architecture - Fall 2019 Course - free YouTube lectures from ETH Zürich Commit Message Driven Development - you might have heard of README Driven-Development, but what is Commit Message Driven Development?
Read more →

Black Friday Deals 2019

Here are some sweet Black Friday Deals. Wes Bos Wes Bos creates high-quality courses about JavaScript and React. Now all of those courses are on sale. I bought the FullStack Advanced React & GraphQL course. Wes glosses over some concepts, but overall the quality is quite high, and the course was well worth the money. Find an overview over all courses at wesbos.com/courses. Talk Python The Mega-Bundle Deal is $50 off: $149 for the whole course catalog.
Read more →

Friday Picks 026

Here are some useful links for you: Colors And Fonts: a curated library for front-end developers and designers RxJS with React Hooks for state management: a beginner-friendly tutorial Barebones AWS Amplify + React + GraphQL App: get started quickly with this tutorial Building a payments system with React and Stripe: this tutorial shows you how to use Stripe in your React.js application React, Redux and JavaScript architecture: a post from 2018 that’s still helpful in understanding the basic concept of Reat.
Read more →

Friday Picks 025

Read more →

Avoid Memory Leak With React SetState On An Unmounted Component

Raise your hand ✋, if you’ve seen this error in your React application: Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. The Problem This error often happens when you make an asynchronous request for data, but the component unmounts. For example, some logic in your app tells React to navigate away from the component.
Read more →

Check For Equality in Reason vs JavaScript

Reason and JavaScript are not the same languages, although the syntax looks similar. That’s intentional, but sometimes hides fundamental differences of those languages. Comparing values is a common task in programming. Let’s look at the equality operators. Checking For Equality in JavaScript Here’s what MDN has to say: Equality (==) The equality operator converts the operands if they are not of the same type, then applies strict comparison. If both operands are objects, then JavaScript compares internal references which are equal when operands refer to the same object in memory.
Read more →

Gatsby Build Times On Netlify Solved?

I wrote about my Gatsby build time woes yesterday. Unfortunately, Netlify and Gatsby rebuild my site completely with every update. I use the gatsby-plugin-netlify-cache but build times are still high. While searching for ways to optimize my Netlify build I stumbled upon an issue on the Gatsby repository. The issue was merged into master and published to gatsby@2.17.0. Before: At the moment this hash changes if anything within ./src has changed between builds.
Read more →

Gatsby Builds Take A Long Time

When I started the blog, I wanted a quick solution that simply works. That’s why I’m using a Gatsby Starter. I didn’t want to fiddle around with my blog too much. I chose Gatsby because it’s build with JavaScript and React.js. There are other candidates like Hugo, but I’m not familiar with the programming language it’s built with (Golang). Gatsby offers great features out of the box, and it was easy to deploy to Netlify.
Read more →

Thinking in React Hooks

I’m a big fan of Dave Ceddia’s blog for bite-sized overviews of React Hooks. For example, the articles A Simple Intro to React Hooks or How the useContext Hook Works are excellent short introductions to a complex topic. Yesterday, I found this gem: Thinking in React Hooks The article compares class-based React components to React hooks in a concise, and visually appealing way. I recommend checking out the article, even if you’re already familiar with React hooks.
Read more →

Learning Update End of October 2019

Read more →

Friday Picks 022

Read more →

Gatsby.js: Heap Out Of Memory JavaScript Crash

Lately, my development server in Gatsby.js repeatedly crashed: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory I found a similar issue on GitHub. Suggested fixes: updating Gatsby and especially updating netlify-cms-app. My problem: All my dependencies were up to date, and I didn’t have netlify-cms-app, gatsy-plugin-netlify-cms, or similar installed. Solution (GitHub): add NODE_OPTIONS = "–max_old_space_size=4096 to node.js. You can set a universal variable in Fish shell:
Read more →

Delete All node_modules Folders Recursively

Read more →

Tool: pnpm - Fast And Lean Package Manager for Node.js

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 thus getting a new Node.js version, and my system would break. With fnm, I have fine-grained control over which version of Node.js I’m running. Now, let’s talk about package managers. Node.js ships with npm as the default package manager.
Read more →

Friday Picks 021

Read more →

A Look Back At Tech MeetUps And Ruhr.js

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 because you might be the only woman present. I’m pretty extrovert in such situations, so it was never a problem for me. But I can understand if others might feel uncomfortable. (I never experienced prejudices or sexism at meetups, though, I was always on equal footing with other attendees.
Read more →

A Look Back At My Programming Journey So Far

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 decided one day (on a whim) to learn how to program. I started with HTML, CSS, and JavaScript with Freecodecamp. Soon I realized that I didn’t have a clue on how to design programs, how to come up with a concept and make it happen as a web application.
Read more →

Friday Picks 020

Read more →

Working On Stale State And Hooks

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 can profit from the vast ecosystem, and the tons of available material (tutorials, StackOverflow, blog posts, etc.). But the more you work with state, props, you realize that there are a lot of pitfalls. You probably don’t need derived state, but sometimes you do.
Read more →

Friday Picks 019

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 - a simpler and smaller alternative to x-state 253 of the very best tools and resources for web designers, developers and makers – in a nutshell. You can now generate self-hostable static blogs right from your DEV content via Stackbit - this blog runs on Gatsby.
Read more →

Format And Fix All Files With Prettier And ESLint (Recursively)

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 patterns. You would like to have consistent formatting, and don’t worry about code style while writing the code. In this post, I’ll show you how to recursively fix and format all your JavaScript files with one command.
Read more →

Friday Picks 018

Read more →

Going to RuhrJS

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 forward to that, too. This is all new to me, but I couldn’t be happier! I’m glad that I attended local tech meetups. I met one of the organizers, Madeleine Neumann at a JavaScript meetup.
Read more →

React Render Props and Svelte Slots

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 are a lot of solutions: passing props down, the Context API, the new useContext hook, state management libraries like Redux or MobX, state machines, etc. But you can also use component composition by rendering the children props.
Read more →

Learning About React Context

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 with the basic setup of React’s Context API. But there are some nuances, of course. Below are some blog posts to get you started on the topic. Further Reading How the useContext Hook Works by Dave Ceddia Redux vs.
Read more →

Learning About React and Derived State

Read more →

Played Around With Svelte Tooling for VIM and ESLint

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 a bit today and got stuck on my tool chain. Oops. I updated my blog posts about Prettier and ESLint for Svelte.js and Vim and Svelte.js. There were still some errors with ESLint thanks to missing parser options.
Read more →

Fix npm Vulnerabilities with Yarn

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 auditing packages: yarn audit This command shows a list of vulnerable packages. But there is no yarn audit fix! What can you do? If you want to store the results of yarn audit: yarn audit –json > audit-output.
Read more →

Friday Picks 014

Read more →

JavaScript Generators, Getters and Setters

Read more →

The Odin Project and Full Stack Open

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 JavaScript course. In comparison, Helsinki’s Full Stack Open course focusses on JavaScript. But they also teach you about GraphQL. Both courses also offer you an introduction to testing - something which I’m very interested in.
Read more →

An Introduction to Svelte by Dave Ceddia

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. Although I’m concentrating on learning the ins and outs of React, I still enjoy looking at alternatives. One of them is Svelte. I wrote about Svelte before. My first impression was positive, as it feels like a straightforward framework to learn with lots of power under the hood.
Read more →

Friday Picks 010

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 be useful to self-reflect on your own gaps) Digital Minimalism Review: Gazing Into the Abyss - an insightful review of “Digital Minimalism” by Cal Newport NestJS Tutorial für Einsteiger - (German) - I reviewed some of the content (it will be published in English next week) A complete guide to the Node.
Read more →

State Machines and Statecharts in JavaScript

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 library called XState. Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic. State machines are a way to handle state management in your front-end application.
Read more →

Friday Picks 009

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 like i missed out on a lot of CS theory/basics. Good curriculums to catch up with ? - some advice for self-taught devs New Node.js 12 features will see it disrupt AI, IoT and more surprising areas - the future of Node.
Read more →

Learn About Gatsby Themes

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 and serves static images. Thus, it’s very fast. But it can also load dynamic data because it also is a fully fledged React app. The Gatsby team just released a big feature: Gatsby Themes. Gatsby Themes are similar to Wordpress plugins. They are pre-configured and you can load them into your Gatsby configuration.
Read more →

error gatsby-mdx: renderMdxBody was unavailable when rendering html.

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 possibilities Gatsby offers. But the devil is in the details. A while ago, I added an RSS feed to my blog. Unfortunately, using the official gatsby-plugin-feed is not as easy as it sounds. The culprit is mdx again.
Read more →

Learning About State Management

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 behind JavaScript libraries and software architecture make me insanely happy. I’m excited about learning such concepts and how they play out in web development. It’s also humbling to realize how much I still don’t know. I’ve been thinking about how to build and structure a front-end React app.
Read more →

React.js & Node.js App Deployment with Heroku

Read more →

Friday Picks 008

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 building a GraphQL endpoint with CRUD functionality Forget about component lifecycles and start thinking in effects - about React Hooks Build a Todo App in React Using Hooks - simple tutorial for beginners One simple trick to optimize React re-renders - without using React.
Read more →

Simple Frontend Pagination in React

Read more →

React.js - How to Fetch Data

Read more →

Stop Worrying About Formatting And Linting JavaScript With prettier-standard

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, I would like to see linting errors. There are some well-known tools for JavaScript, for example ESLint. ESLint is an open-source project by Nicholas C. Zakas which analyzes your code and looks for problematic patterns.
Read more →

Friday Picks 007

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 applications work Implementing DTOs, Mappers & the Repository Pattern using the Sequelize ORM [with Examples] - DDD w/ TypeScript - how to handle data access with TypeScript and Domain-Driven Design What’s the best documentation you’ve ever seen? - reddit thread: I like the DigitalOcean Tutorials Using Typescript in Node.
Read more →

YouTube Channels to Follow

Read more →

TIL: How to Pass Props to React Router

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 children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component.
Read more →

Free Node API Book

Read more →

Writing Ugly React.js and GraphQL

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, does it get ugly. Code duplication, wrangling with the AWS back end, fetching data several times, etc. I don’t have a lot of confidence in AWS Amplify. It makes it relatively easy to create a back-end API with GraphQL. But the documentation is lacking, the AWS web console confusing, and the pricing (after the free trial months) steep.
Read more →

Custom React Hook: Use AWS Amplify Auth

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 from AWS Amplify: import { useReducer, useState, useEffect } from 'react' import { Auth, Hub } from 'aws-amplify' const amplifyAuthReducer = (state, action) => { switch (action.type) { case 'FETCH_USER_DATA_INIT': return { …state, isLoading: true, isError: false, } case 'FETCH_USER_DATA_SUCCESS': return { .
Read more →

AWS Amplify Serverless Function 403 Error CORS

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: XMLHttpRequest cannot load https://XXXXX.execute-api.us-west-2.amazonaws.com/YYYYY. No 'Access-Control-Allow-Origin' header is present on the requested resource. This looks like a CORS error. When you use the Amplify CLI tool to create your function, it delivers a sample Node.js/Express app.
Read more →

Hashtag 60seconddev on Twitter

Read more →

Authorization Rules in GraphQL and AWS Amplify

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 and offers a GraphQL endpoint. Additionally, AWS Amplify ships with an Authentication API. How can you allow users to read all data (see everything), but restrict their ability to modify data? For example, my GraphQL schema has a Product type:
Read more →

From Zero to App by Flavio Copes

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 of what the thing will be) to deployment. The full project documentary will be a paid course, but I plan to make the first 10-15 videos free and document the initial process (still haven’t decided how many videos the course will be).

Read more →

ESLint Parsing error: Unexpected token

Read more →

Egghead.io Sale

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 offer a steep discount (USD $150 instead of $250 for their yearly plan). Some of my favorite courses: Just Enough Functional Programming in JavaScript Data Structures and Algorithms in JavaScript Professor Frisby Introduces Composable Functional JavaScript Functional Programming in JavaScript with Ramda.
Read more →

React Components

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. When I see these patterns, I always think: “Of course, it’s function composition” - but I would never have come up with this pattern on my own. Luckily, there are great teachers that can help me with that:
Read more →

Friday Picks 003

Read more →

Svelte.js: First Impressions

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 near “Vanilla-JS-Land.” (Svelte.js compiles down to standard JavaScript.) In a basic setup, your code also divides into three parts: The <script> block where you write JavaScript: you can define variables and write functions (typically event handlers). The CSS block where you write your component-scoped styles.
Read more →

Vim and Svelte.js

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 here to get up and running with ESLint and Prettier. Install ALE with your favorite Vim plugin manager (I use minpac). optional: Install burner/vim-svelte for syntax highlighting. 2. Configuration There is no native support for .svelte files but you can define an alias.
Read more →

Prettier and ESLint Setup for Svelte.js

Note: updated on 2020-05-29. In this article I will show you how to setup ESLint and Prettier for a Svelte.js project.

  1. Installation You need to install the following packages as dev dependencies: npm install –save-dev prettier eslint prettier-plugin-svelte eslint-plugin-svelte3 2. Configuration 2.1. ESLint Create an .eslintrc.json file in your project root directory: { "env": { "browser": true, "es6": true }, "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2019, "sourceType": "module" }, "plugins": ["svelte3"], "extends": ["eslint:recommended"], "overrides": [ { "files": ["**/*.
Read more →

Friday Picks 002

Read more →

Free React Function Component Workshop

Read more →

gatsby-mdx Error

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. During development, everything worked fine. But you couldn’t build static HTML files. I got errors with mdx-utils: className.match is not a function. mdx-utils is part of gatsby-mdx. I found a workaround in this issue: Named capture groups not supported (latest Firefox and < Node 10) #366.
Read more →

Friday Picks 001

Read more →

Focus on JavaScript

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 limited time I can spend on coding. Although I love Elixir and functional programming languages, it will be better to double down on one tech stack - for now. JavaScript is beginner-friendly and offers tons of tutorials and other material for a web-dev newbie.
Read more →

Persistence

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 fetching hook (with an asynchronous API call) messes with state although the component is unmounted. The obvious solution is to add a cleanup function. But my implementation (see “Abort Data Fetching in Effect Hook” from this article) doesn’t work.
Read more →

React Hooks: useEffect Cleanup

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 didCancel Boolean from this article. Unfortunately, it doesn’t work and still fetches data even if I navigate away from the page that uses the custom data fetching hook. import { useEffect, useReducer } from "react"; import { API, graphqlOperation } from "aws-amplify"; import { getMarket } from ".
Read more →

AWS Amplify: Resource is not in the state stackUpdateComplete

I updated my AWS Amplify API and added more nested layers to my GraphQL schema: $ amplify configure codegen $ amplify codegen statements $ amplify push I also wanted to update my S3 storage to add different permissions: $ aws amplify update storage $ amplify push But this fails with Resource is not in the state stackUpdateComplete. My solution: $ amplify update auth Choose the option “Yes, use default configuration” (uses the Cognito Identitypool).
Read more →

Currently Learning

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 (Frontend Masters). I’m reading books about JavaScript, Domain-Driven Design, Elixir and Phoenix. The book JavaScript Allongé, the “Six” Edition is now available for free, so I’ve grabbed it. I’ve come to like JavaScript, although it has weird parts. I enjoy React.
Read more →

Learning More About React Hooks

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 by Dave Ceddia How to Use the useReducer Hook by Dave Ceddia How the useEffect Hook Works by Dave Ceddia How the useContext Hook Works by Dave Ceddia Application State Management with React by Kent C.
Read more →

React useState Hook

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 objects when calling setState(). Doing so ensured that you always get the newest values. Example: this.state = { person: { firstName: "", secondName: "" } }; this.setState(prevState => ({ person: { …prevState.person, firstName: "Tom", secondName: "Jerry" } })); The useState Hook works differently.
Read more →

21-Day Coding Challenge JavaScript

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 contest from the Women in Web Dev group. They form a team for the 21 days and have some information about the challenge on their site. But you can also join solo, form a new team, or join a public team.
Read more →

My Favorite Front End Web Podcasts

Read more →

Add RSS Feed to Gatsby

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 work with mdx. Although the RSS feed gets rendered, I can’t add a title or description to the feed. It looks like it’s a bug. Here’s how the config looks: plugins: [ { resolve: gatsby-plugin-feed, options: { query: { site { siteMetadata { siteTitle siteDescription siteUrl site_url: siteUrl } } }, feeds: [ { serialize: ({ query: { site, allMdx } }) => allMdx.
Read more →

Node.js Architecture

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 another read-worthy article that might help: Bulletproof node.js project architecture. It also uses SOLID principles and different layers (controller, service layer, data access layer). Interestingly, the author of the blog post explains in a different article that Node.js is not designed to serve static assets, or your front end.
Read more →

AWS Amplify

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 back-end API took me 5 minutes. The Udemy course holds your hand and provides a gentle introduction into AWS Amplify. I’m pleasingly surprised. But as someone with an affinity for back-end work, the lack of control bothers me a bit.
Read more →

Clean Code and Dev Mastery

Read more →

Svelte 3 - JavaScript Framework

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 announcement: What is Svelte? Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there’s a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like that eat into your frame budget and tax the garbage collector.
Read more →

DOM Manipulation is Hard

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 DOM manipulation is now hard. I find it easier to make functions and pass arguments to those functions to generate HTML. “Hard-coding” HTML and trying to use event listeners and then to manipulate the event targets with setAttribute() looks ugly.
Read more →

How to enable CORS for apollo-server

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 running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
Read more →

Assertion failed: Input argument is not an HTMLInputElement

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”. Assertion failed: Input argument is not an HTMLInputElement getFormProfile @ onloadwff.js:71 setFieldValue @ onloadwff.js:71 formKeydownListener @ onloadwff.js:71 onloadwff.js:71 Uncaught TypeError: Cannot read property ‘type’ of undefined at e.setFieldValue (onloadwff.js:71) at HTMLFormElement.formKeydownListener (onloadwff.js:71) setFieldValue @ onloadwff.js:71 formKeydownListener @ onloadwff.js:71 I originally thought that I had an error in my input field, perhaps some HTML code was wrong?
Read more →

JavaScript Development: Run Concurrently

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 see an example with a Node.js back end and a React front end. Here is the folder structure: server/ .gitignore index.js package.json …etc client/ public/ src/ … <- all the other React code First, install concurrently.
Read more →

Express.js: Send Responses

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 backend. app.get('/book/:id', async (req, res) => { // fetch the data from the database, for example from MongoDB try { const book = await Book.findbyId(req.user.id}) // then send the data with a HTTP code res.
Read more →

Express.js Security Best Practices

Read more →

Redux: Why?

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 dispatch actions to update the data in your store. The official docs make it sound so complicated: Why Use React Redux? Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS.
Read more →

Egghead.io Courses

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 are quite thorough, but some just scratch the surface. For example, Up and Running with TypeScript only offered a glimpse of what TypeScript can offer. The Cycle.js Fundamentals course by framework creator André Staltz gives you a good understanding of what Cycle.
Read more →

Chain in Lodash and Ramda

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 which occasionally uses Lodash functions. And this time the author chose _.chain to transform an array. Lodash’s chain example: Creates a lodash wrapper instance that wraps value with explicit method chain sequences enabled. The result of such sequences must be unwrapped with _#value.
Read more →

EsLint and Prettier for JavaScript/React in Vim

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 you’re interested. Useful plugins: pangloss/vim-javascript MaxMEllon/vim-jsx-pretty w0rp/ale Optional: sheerun/vim-polyglot ternjs/tern_for_vim If you use tern.js you need to install the npm package, too. Installing NPM Packages and Setup I use ESLint and Prettier. If you use Create React App skip the ESLint installation because it doesn’t play nice.
Read more →

Vim With Eslint and Prettier for Javascript

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 found a useful article that walks you through installing it for Vim. It uses the ALE Plugin. ALE offers linting support for many languages, not only JavaScript. The official documentation for the Vim Setup for Prettier is also worth a look.
Read more →

FreeCodeCamp: Sum All Odd Fibonacci Numbers

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 that are less than or equal to num. The first two numbers in the Fibonacci sequence are 1 and 1. Every additional number in the sequence is the sum of the two previous numbers. The first six numbers of the Fibonacci sequence are 1, 1, 2, 3, 5 and 8.
Read more →

Bubble Sort in JavaScript

I’m working on learning data structures and different algorithms. One of the first ones is Bubble Sort: const bubbleSort = array => { let noSwaps; for (let i = array.length; i > 0; i–) { noSwaps = true; for (let j = 0; j < i - 1; j++) { if (array[j] > array[j + 1]) { [array[j], array[j + 1]] = [array[j + 1], array[j]]; noSwaps = false; } } if (noSwaps) break; } return array; }; Bubble Sort takes O(n^2) time in the worst case because you have two nested loops.
Read more →

Truthy and Falsy Values in JavaScript, Python and Clojure/ClojureScript

Here are all falsy values: JavaScript Python 3 Clojure/ClojureScript Falsy false False false null None nil NaN undefined 0 (zero) 0 0.0 0.0 "" (empty string) "" (empty string) [] (empty list) () (empty tuple) {} (empty dict) set() (empty set) b’’ (empty byte) Everything else is truthy.
Read more →

Webpack 4 Woes

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 a minimal Webpack Babel Setup. Robin Wieruch’s React + Webpack 4 + Babel 7 Setup Tutorial and Valentin Gagliardi’s Webpack 4 Tutorial: from 0 Conf to Production Mode guided my boilerplate. Both articles do a good job of explaining how this tool works, so I won’t rehash their explanations.
Read more →

Return Errors With Async/await Fetch

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 returns a Promise if successful. It parses the response with json(). Otherwise it throws an error. In the catch block I return the error object. You have to both throw an Error if the response.
Read more →

Use the Spread Operator to Update Objects

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: Objects-as-records have a fixed number of properties, whose keys are known at development time. Their values can have different types. […] Dictionaries: Objects-as-dictionaries have a variable number of properties, whose keys are not known at development time. All of their values have the same type.
Read more →

Ramda.js defaultTo

Read more →

Javascript Fetch Pitfall: json.parse() vs. response.json()

Request/AJAX Yesterday I was writing a function for an API call. The documentation gave an example for Node.js using the request module: var request = require("request"); […] request({ uri: "https://api.rebrandly.com/v1/links", method: "POST", body: JSON.stringify({ destination: "https://www.youtube.com/channel/UCHK4HD0ltu1-I212icLPt3g" , domain: { fullName: "rebrand.ly" } //, slashtag: "A_NEW_SLASHTAG" //, title: "Rebrandly YouTube channel" }), headers: { "Content-Type": "application/json", "apikey": "YOUR_API_KEY", "workspace": "YOUR_WORKSPACE_ID" } }, function(err, response, body) { var link = JSON.
Read more →