JSK Weekly - July 31, 2019

With another month gone it won't be long before we're looking back on 2019 like a storybook of memories and learning curves and experiences! Speaking of storybooks, Raphael Ugwu covers React Storybook and how it can simplify component testing in "How React Storybook can simplify component testing" while Austin Roy Omondi takes us through its alternatives in "Alternatives to React Storybook", both on LogRocket's blog.

Aurelia also made an appearance this week with Dwayne Charrington covering both "What I Love About Aurelia" and "Working With An API In Aurelia Store" while Angular was thoroughly covered on Bits and Pieces with various stories from "How to Write Better Code in Angular" by Chidume Nnamdi to "Angular 8 - Bazel Walkthrough" by Vamsi Vempati. Finally, Snipcart gives us the Why and the How to PWA E-Commerce in "A Guide to PWA E-Commerce."


Can You Build Web Apps in 2019 without a Framework?

Do we need React/Angular/Vue in 2019? With many EcmaScript features coming to the modern browsers, you might be wondering what else do we need web frameworks for. Looking back, Angular 1.x, Backbone, JQuery and other libraries come and go, but the new features such as const , let , class and many others are here to stay, so it might be worth looking into the new kids on the block.

Authored by: Bit

Optional Chaining

For all of the improvements that the JavaScript language has added over the past few years, like the spread operator, default argument values, and arrow functions, there are still a few features I'd love to see implemented. On such feature is optional chaining. Optional chaining allows developers to reference object properties which may or may ...

Authored by: David Walsh

A Guide to PWA E-Commerce (The Why & The How)

In a rush? Skip to tutorial or live demo. I tried buying a t-shirt on my phone the other day. First, I get redirected to a http://m.thatsite.com URL. Mobile site loads... Content finally appears, along with a fullscreen pop-up: Download our mobile app for a better shopping experience! I tap the link.

Authored by: Snipcart


Understanding the Best Javascript Meme I've Ever Seen

Originally posted on https://yazeedb.com I unintentionally found this JavaScript meme on Reddit, and it's the best one I've ever seen. You can verify this meme's accuracy by running each code snippet in Developer Tools. The result isn't surprising, but still kind of disappointing. Of course this little experiment lead me to wonder...

Authored by: Yazeed Bzadough

Everything you need to know about error handling in Javascript

Learn about how to handle exception in Javascript. Exception handling is the way that we can prevent abnormal program termination on runtime due to some Exception. For example In the above case, instead of termination of the program, we can handle it by try...catch block. Any error inside try block doesn't cause program termination.

Authored by: jagathish

3 Flavors of the For Loop in JavaScript and When to Use Them

Everyone knows at least one version of the For loop, it's a classic and probably almost every language out there has a version of it. JavaScript, however, has three (or 4 if you're really picky about it), and they're not exactly the same, I'm referring of course to: The classical For loop The For...

Authored by: Bit

5 Reasons to love Design Pattern

So now that we have an idea of what design patterns are( definitely in a broad sense), let's dive into why as a programmer you should study these: Every programmer can relate how tedious the task is when you have to write the same code again and again and again.

Authored by: Bit

How to configure Create-React-App to use TailwindCSS Blog

Recently, I tried using TailwindCSS in a React project bootstrapped by the Create-React-App (CRA) boilerplate and ran into difficulties setting up TailwindCSS as CRA abstracts configuration. To make custom configurations, we would have to eject Create-React-App to have full access to tinker with the configurations, which also means a much more tedious setup and should anything break...you're on your own.

Authored by: LogRocket


When Not To Use TypeScript

Now let us know when not to use TypeScript at all. Here are some use-cases which you might reconsider the use of TypeScript: I think this is fairly obvious. When you're building prototypes for presenting the app that you're building in the market as quickly as possible, you don't add additional type checkers in your javascript that might hamper your productivity and delivery.

Authored by: Bit


How to Write Better Code in Angular

Learn how to write clean, maintainable, scalable, performance-optimized and testable code in Angular Angular abstracts so many complexities but, still, our app can become difficult to test and maintain over time if we don't make sure to write good code. In this article, we will look at different ways to write better code in Angular.

Authored by: Bit

Svelte for Angular Developers

Svelte is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup. Svelte will likely appear as a radically different approach from what you've seen before, and that's probably a good thing. Svelte will impress you for mainly two things: its speed, and its simplicity.

Authored by: Bit

Angular 8 - Bazel Walkthrough

One of the features that I am really excited about in Angular 8 is Bazel. Bazel is Google's open-source part of its internal build tool called Blaze. The biggest selling point for this tool is that it is capable of doing incremental builds and tests!

Authored by: Bit


End to End Testing React with Cypress

This tutorial is part 3 of 3 in the series. End-to-end testing (E2E) was always a tedious task with testing frameworks from the past. However, nowadays many people are using Cypress.io for it. Their documentation has a high quality and their API is concise and clean.

Authored by: Robin Wieruch

Alternatives to React Storybook Blog

React Storybook is a user interface development environment and playground for UI components. It allows developers to develop their components and showcase them interactively in an isolated environment. Storybook also allows the developer to provide code examples of component usage which may, in turn, serve as documentation for the component.

Authored by: LogRocket

React Native vs. Ionic: Which one is right for you? Blog

Mobile development does not mean just native iOS development using Swift or native Android development using Java anymore. We are in the generation of hybrid, cross-platform and progressive web apps. In this article, I am going to compare two popular mobile frameworks, React Native and Ionic.

Authored by: LogRocket

How React Storybook can simplify component testing Blog

Every developer wants to build software that works. We can make sure our software's code works flawlessly by isolating it and showing its behavior in a series of tests. The same can't be said for our components as they are tested within the context of our app.

Authored by: LogRocket

Redux Persist with Next.js by Example

The following implementation is a quick excerpt from one of my daily tasks as a software developer. If I run into a problem and arrive at an example that I find worth sharing, I will put a gist of the code up on this website.

Authored by: Robin Wieruch

Material UI and Styled Components - Using Styled Components with External Libraries

There was a bit of a war on Material UI at my last job. It's a heavy library that is (understandably) very opinionated, while Styled Components was a new found freedom. We could write regular CSS AND inject custom properties like any other React component?? Sign us up.

Authored by: JavaScript Kicks

Create a Reusable React Native OTP SMS component

Learn how to create a React Native component for SMS verification and make it reusable and shareable. In this tutorial, we'll learn how to create a React Native component for SMS verification and make it shareable using Bit. OTP SMS Verification is the process of verifying Mobile Number of users by sending verification code(OTP) during registration.

Authored by: Bit


What I Love About Aurelia - I Like Kill Nerds

There is no shortage of Javascript frameworks and libraries to choose from. Notably, you have Angular, React, and Vue, which are the most discussed and used. If you are a regular reader of my blog, you know how much I love Aurelia and have blogged about it since early 2015.

Authored by: Dwayne Charrington

Working With An API In Aurelia Store - I Like Kill Nerds

Unless you're working on a completely static web application, chances are you'll be needing to get data from an API or send data to one. In Aurelia, you would usually do this either using the HTTP Client or Fetch Client (you should be using Fetch). However, what about Aurelia Store?

Authored by: Dwayne Charrington


Getting Started with Vue.js Navigation Guards to Restrict Access to Routes

You might remember that I had written a tutorial titled, Simple User Login in a Vue.js Web Application, which demonstrated how to navigate between routes and check a variable to determine if a user should in fact be allowed to be on a particular route.

Authored by: Nic Raboy

How to pass HTML content through components with Vue slots Blog

This post will introduce you to how data can be passed from the parent component to child components in Vue.js using Vue slots. This post is suited for developers of all stages - including beginners - though there are some prerequisites before going through this tutorial.

Authored by: LogRocket

What I Like About Vue

Over the past six months I've had the opportunity to work on a simple PWA using Vue. To speed up the learning curve we brought in Eduardo San Martin Morote, a Vue core contributor, to help us on the project.

Authored by: Dave Rupert


How to install Node.JS on Raspberry Pi

Instructions on how to install different versions of NodeJS on your Raspberry PI using Node Version Manager.

Authored by: Gary Woodfine

Develop Your Own Background Manager

Build a desktop background manager with Nodejs and Unsplash API. Okay, so the idea is to build a simple cross-platform software utility that changes your desktop background image on a regular basis. It would be nice if we have control over the size of images (e.g.

Authored by: Bit

Libraries and Tools

6 Tools for Documenting Your React Components Like a Pro

What good are components if nobody can understand how to find and use them? React encourages you to build modular applications with components. Modularity brings all sorts of advantages, including improved reusability. But, when you aim to share and reuse a component, you better make sure it is easy to discover, understand and put to use.

Authored by: Bit

How to test React components with Mocha, Chai & Enzyme

Recommended alternative: Instead of Mocha/Chai, using Jest as test runner and assertion library for unit, integration and snapshot tests. Before setting up the test setup with different testing libraries and writing the React component tests, you will need a simple React application which can be tested in the first place.

Authored by: Robin Wieruch

The top 7 JavaScript date libraries Blog

In this post we will look at seven date libraries that add layers of abstraction on top of JavaScript's Date object to make it actually useful.

Authored by: LogRocket

How to Build and Share a Component Library

Before we start, let's see an example of what you will gain. Here's the Semantic-UI-React library on GitHub. Right now it's a reposiotry also available as a package on NPM. Using Bit and in about 15 minutes, it was turned into a collection of individual components in the cloud.

Authored by: Bit

Introducing React Elasticsearch

React Elasticsearch is a UI components library, created in order to be expressive, lightweight and customizable. It just has been released and is used by the french Ministry of Culture for its Cultural Heritage Open Platform.

Authored by: Raphaƫl Huchet

Functional Programming

Functional, Object-Oriented, and Procedural Programming

Procedural Programming is the use of code in a step-wise procedure to develop applications. For example, to develop a simple Bank Account App procedurally: Creating an account for an individual (account) Getting an account to deposit or withdraw funds (getAccount, deposit, withdraw) Transferring funds between two different accounts (transfer) Recording all changes that occur with all accounts (accounts) Object Oriented Programming (OOP) is the use of self-contained code ( objects) to develop applications.

Authored by: gitconnected


20 Simple Python Performance Tuning Tips

Python is a powerful and versatile higher-order programming language. Whether you're developing a web application or working with machine learning, this language has you covered. Python does well at optimizing developer productivity. You can quickly create a program that solves a business problem or fills a practical need.

Authored by: Stackify

Reducing MTTR in the Field: 10 Simple Steps Using Retrace

The last decade has ushered in a golden era of software engineering. The rise of cloud computing freed companies from managing their own data centers and provided on-demand scaling. These services allow for provisioning servers on the fly using configuration and code. Treating that task as just another type of software development led to the advent of DevOps.

Authored by: Stackify