JSK Weekly - September 26, 2019

With less than 100 days to go before 2020 is upon us, some of you may want to start flexing your resolution muscle with a code challenge or few, to see how you're likely to fair come January. Florin Pop is going all out with #100Days100Projects, so go check his first project, on freeCodeCamp, called "Creating a Random Meal Generator", and join the fun if you're up for it.

As a developer having your patience tested, whether by the code, the client or even sometimes technology itself, is part of the job. On the flipside though, testing your own work should also be par for the course. This week Kevin Kreuzer gives us the ultimate guide so we'll never again be confused on how to test Observables in "How to test Observables" on Angular in Depth; Peter Ekene Eze takes a closer look at some of the best ways to test React applications in "Testing React applications in 2019" on LogRocket's Blog and Thomas Lombart teaches us about Jest, a powerful tool to write tests for JavaScript apps in "How to test JavaScript with Jest."

Interested in components? Let Eden Ella tell you how to let components drive the development of your applications in "A Guide to Component Driven Development (CDD)" or check out Jonathan Saring's story "React Component Monorepo Library Made Easier" as he walks you through why sometimes it’s better to keep all components in one single repository and still publish each individually, both on the Bits and Pieces blog.


Why I Left a Big Enterprise Position to Build an Open Source Project

Why I decided to leave a "dreamy" enterprise position to work at a start-up. In the summer of 2016, I quit a high-paying, hard-earned senior development position at a large (billions of $) enterprise. This decision led me to where I am today, and I do not regret it.

Authored by: Bit

Creating a Random Meal Generator

For the first project in the #100Days100Projects I thought about working with a public API in order to get some data that would be displayed in a webpage; an usual thing to do with an API. For that I chose to use TheMealDB's public API in order to get some random meals by pressing a button.

Authored by: Florin Pop πŸ‘¨πŸ»β€πŸ’»


Build a Tree-Shaking Utility in JavaScript

How to build your own "dead code" remover in JS Tree-shaking is one of many optimization techniques we have. It entails removing code that is never used. In this post, we will demonstrate, with a simple JS code, how to build your own tree-shaking utility.

Authored by: Bit

Algorithms 101: Reverse a string in JavaScript

Noob v. LeetCode, episode 2 Apparently this is a classic challenge in a tech interview: The brute force solution for this is easy to find.

Authored by: Joan Indiana Lyness

CSV & Excel to JSON in JavaScript

There is a couple of JavaScript plugins that can be used to read and process CSV and Excel files as well as just hard coding your own script to do so. In this tutorial, we'll explore and demonstrate...

Authored by: Bit


How TypeScript squashed all known bugs

You know that application that keeps you up at night hoping you won't have to change it? It seems like we all have one. Mine was in JavaScript. It was a single page application made with just jQuery and JavaScript and it was the most brittle thing I've ever worked with.

Authored by: Matt Eland


Lean Angular Components

So you've been developing Angular projects for a couple of years and you feel like you've got everything under control. You break your applications into components and services. You even follow the official style guide - at least you think so. This is all there is to it, right? Wrong!

Authored by: Lars Gyrup Brink Nielsen

Chrome extension with Angular

or a short how-to and why-in-the-world Hey folks. It's been a while since my last blog post but I've got something interesting for you today. Today we're going to explore the process of developing a Chrome extension with Angular.

Authored by: Angular In Depth


10 mistakes React developers make Blog

Certain mistakes have become pretty common among developers working on React applications. These mistakes may be the result of an oversight, pressure to meet a deadline, or a lack of experience with React/JavaScript. In this post, I'll outline 10 mistakes developers frequently make when building React applications.

Authored by: LogRocket

How to host a React app on Azure

This article explains about how to host your react app on azure app service. Assuming you have npm and VS Code installed in your machine, follow below steps sequentially. 1. Open VS Code terminal. 2. Create a react app by running 'npx create-react-app my-app' command. 3.

Authored by: JavaScript in Plain English

The ultimate guide to drag and drop in React Blog

Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX. There are many use cases for drag and drop UI. The most common ones are: Using drag and drop in the browser to upload files.

Authored by: LogRocket

When to useLayoutEffect Instead of useEffect

There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same. The way you call them even looks the same. But they're not quite the same. Read on for what makes them different and when to use each.

Authored by: Dave Ceddia

Improve UX in React apps by showing skeleton UI Blog

A skeleton screen is a UI that doesn't contain actual content; instead, it shows the loading elements of a page in a shape similar to actual content. Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads.

Authored by: LogRocket


How To Integrate Vue into a Rails app - Part 1

As an intro, I will explain what I am doing with this blog, so you will get an idea about this. This blog is intended for basic Vue.js to intermediate person who wish to integrate backend to the Vue.js.

Authored by: JavaScript in Plain English

How to make your components dynamic in Vue.js Blog

This post serves as an introduction to the ways you can reference HTML elements in your components in Vue.js. You can toggle between views or component templates by using the Vue router or by creating dynamic components. The Vue router is used to navigate between views or component templates in the DOM.

Authored by: LogRocket

Using event bus in Vue.js to pass data between components Blog

This post is suited for developers of all stages, including beginners. Here are a few things you should already have before going through this article: Node.js version 10.x and above installed. You can verify that you have this version by running the command below in your terminal/command prompt: node -v Visual Studio Code editor or a similar code editor.

Authored by: LogRocket


Setting a Fake Backend Server in Node in Less Than 60 Seconds

Working as a frontend engineer and building a dummy or proof-of-concept project without a complete backend might be very challenging to set up REST API's. You can use Firebase or many other things to setup backend without writing much code. BUT, There is a way to set up an incredibly simple backend server running on your localhost.

Authored by: gitconnected

Moving beyond console.log() - 8 Console Methods You Should Use When Debugging JavaScript and Node

Moving beyond console.log and learn the console functions you have never used for debugging! Every JavaScript developer has used console.log('text'). The console module is one of the most common utilities in JavaScript, and the API implemented in Node: provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

Authored by: gitconnected

Libraries and Tools

React Component Monorepo Library Made Easier with Bit

Develop, build, test version and publish individually isolated components in your library, with 0 refactoring or configurations. Sharing components between different repositories and projects is very effective for code reuse. In the case of UI components, it's also an effective way to make sure your UI stays consistent across different applications.

Authored by: Bit

A Guide to Component Driven Development (CDD)

Let components drive the development of your applications. This article was originally published by Jonathan Saring on itnext.io Modularity has been a key principle in software development since the 1960s. It provides many advantages in software development, leveraging the separation of concerns for better reusability, composability, development etc.

Authored by: Bit


How to test JavaScript with Jest

Testing is an important skill every developer should have. Still, some developers are reluctant to test. We've all met at some point someone who thinks tests are useless or that it takes too much effort to write them.

Authored by: freeCodeCamp.org

Testing React applications in 2019 Blog

Testing is tough. In this post, we'll take a closer look at some of the best ways you can go about testing your React applications.

Authored by: LogRocket

How to test Observables

If you came across this blog post, I assume that you already wrote some lines of reactive code with RxJS if not a thousand. So I don't have to tell you how it works and how cool it is. 😎 I guess we...

Authored by: Angular In Depth

Functional Programming

Let's Master JavaScript Function Parameters

A function is a cohesive piece of code coupled to perform a specific task. The function accesses the outer world using its parameters. To write concise and efficient JavaScript code, you have to master the function parameters. In this post, I will explain with interesting examples of all the features that JavaScript has to efficiently work with function parameters.

Authored by: Dmitri Pavlutin


Why Use Serverless Programming? (Use Cases & Live Example)

In a rush? Skip to technical tutorial or live demo There's one thing that will always fascinate me about the worldwide dev community: Our ability to come up with solutions that consistently make our job less painful. Because let's be honest, some tasks that come with being a developer are...

Authored by: Francis Cote

Every website deserves a service worker Blog

Does your website work offline? If not, it should. In the same way every website should be responsive and work on both desktop and mobile devices, there's really no excuse anymore for websites that don't work offline. Except for IE, you can now make your website work offline in every browser.

Authored by: LogRocket