JSK Weekly - December 19, 2019

Exactly 6 days until Christmas but if you're not holidaying just yet, or like to read while on holiday, as always we've got a few gifts in our newsletter stocking to check out! Madison Kanna lists a bunch of 100% resources to help learn JavaScript fundamentals in "30 Free Resources To Help You Learn JavaScript Fundamentals" on freeCodeCamp.

Chidume Nnamdi shows us 10 useful Angular features you might have missed in "10 Useful Angular Features You’ve Probably Never Used" and 8 top Chrome features that blur the lines between native apps and web apps in "8 New Chrome APIs You Should Know", and Joel Thoms shows us the different ways to create a Promise in "6 Ways to Use Promises in Your Javascript Code", all on the Bits and Pieces blog.

Trey Huffine looks back at the top events, news, and trends for frontend and web development in "A Recap of Frontend Development in 2019" while Ivan Cabral shares tips obtained in the course of more than 12 years of programmer experience in "10 tips to be successful in Software Development."


7 New Chrome APIs You Should Know

7 top Chrome features that blur the lines between native apps and web apps We love our native apps because they seem to offer a better user-experience - a faster and more reliable one. Still, we wouldn't like to commit to every web app, the same way we do when we download and install a native app.

Authored by: Bit

Getting Started With React and TypeScript Pt.1 - The Setup

Have you ever wanted to try React and TypeScript together, but didn't know where to start? This tutorial will help you with it. It will...

Authored by: Alex Devero

A Recap of Frontend Development in 2019

A look back at the top events, news, and trends for frontend and web development The world of frontend development once again evolved at a rapid pace over the past year, and this article recaps all the important events, news, and trends from 2019.

Authored by: Trey Huffine

10 tips to be successful in Software Development

We all know that at the beginning of our programmer's career we find difficulties due to lack of information or not knowing how to look for it and over time we are improving.

Authored by: Ivan C. Developer

What's new in Preact X? Blog

Preact X makes it easier than ever to create efficient, lightweight, performant, and blazing fast frontend apps in JavaScript.

Authored by: LogRocket

Mastering JS console.log like a Pro

Still, using only console.log( ) to debug? Well, there's a lot more. Printing messages in the browser console have definitely come to rescue to all the developers out there. console.log( ) messages are like medicines for most of your diseases while debugging some wired problems in your code.

Authored by: Harsh Makadia

Role-based Authentication with React Router and TypeScript

Let's say we have an inventory management tool that requires users to be authenticated and there are super-admin, admin, and non-admin users, each of which have different write/read rights to various parts of the app.

Authored by: Tucker Blackwell

How to build performant web applications for slow networks Blog

A large portion of your users are likely running on slow networks, which is why it's imperative to build performant web apps that deliver a smooth UX.

Authored by: LogRocket


6 Ways to Implement a Promise in JavaScript

Before creating this, I didn't imagine there would be so many different ways to create a Promise. I imagine that it's likely that I may have also missed a few. There's a lot of redundancy here, but every method is worth going over in detail because of the nuances.

Authored by: Bit

The Complete Guide to JavaScript Classes

JavaScript uses prototypal inheritance: every object inherits properties and methods from its prototype object. The traditional class as the blueprint to create objects, used in languages like Java or Swift, does not exist in JavaScript. The prototypal inheritance deals only with objects. The prototypal inheritance can emulate the classic class inheritance.

Authored by: Dmitri Pavlutin

Why use JavaScript? (See the magic)

When I started my trip to become a software developer, One of the most common struggles that most new developers are select one...

Authored by: Ivan C. Developer

6 Ways to Use Promises in Your Javascript Code

Before creating this, I didn't imagine there would be so many different ways to create a Promise. I imagine that it's likely that I may have also missed a few. There's a lot of redundancy here, but every method is worth going over in detail because of the nuances.

Authored by: Bit

Regular Expressions in JavaScript: The Basics

Quick Reference and Refresher Part One Regular expressions are fun! They are like a little programming language of their own that can apply anywhere, regardless of what language is being used. They have a wide range of uses, from validating user input to renaming files and finding links or URLs on a page or in an email.

Authored by: adam

33 Free Resources To Help You Learn JavaScript Fundamentals

If you're learning JavaScript, you've most likely heard how important it is to learn the fundamentals. Problem is, you aren't sure what the fundamentals are. And, with thousands of resources on the Internet, where do you begin? In an episode of Syntax [https://syntax.fm/show/162/the-fundamentals-js], Wes and Scott do a great job of covering JavaScript fundamentals.

Authored by: freeCodeCamp.org

How to Use the Web Share API

Google and the Chromium team are advancing the web with new exciting features that bring native-like experiences to the online world. Recently, they released a new API that enables us to share data...

Authored by: Bit


Const Assertions in Literal Expressions in TypeScript

With TypeScript 3.4, const assertions were added to the language. A const assertion is a special kind of type assertion in which the const keyword is used instead of a type name. In this post, I'll explain how const assertions work and why we might want to use them.

Authored by: Marius Schulz

TypeScript Types Deep Dive - Part 1

TypeScript is a modern and safer version of JavaScript that has taken the web development world by storm. It is a superset of JavaScript that adds in some additional features, syntactic sugar and static type analysis aimed at making you more productive and able to scale your JavaScript projects.

Authored by: Jaime González


Angular 8/9 Service Tutorial with Example

In this tutorial, we are going to discuss Angular 8/9 Service. To show you the Angular Service example, we will create API with HttpClient service. Angular Service contains the various methods and functions to manage the data arriving from the server. Why Angular Service Class?

Authored by: Digamber Singh

Rendering A TemplateRef As A Child Of The Body Element In Angular 9.0.0-rc.5

CAUTION: The concept that I explore here goes outside my area of expertise. As such, please take this with a grain of salt and forgive anything that is grossly inaccurate. A few weeks ago, I discovered that you could translocate Angular DOM nodes without breaking template bindings.

Authored by: Ben Nadel

10 Useful Angular Features You've Probably Never Used

10 useful Angular features you might have missed. Having spent so much time writing Angular apps, you're probably convinced you've seen it all. To be 100% sure - read on 😃 In addition to our list of Angular features, one tool cannot be overlooked.

Authored by: Bit

Creating Linked Slider Inputs Constrained To A Given Total In Angular 9.0.0-rc.5

Ben Nadel sits down to write a code-kata about a Slider component in Angular 9.0.0-rc.5; but, quickly realizes that the interesting part of the kata is the exploration of linked-values which he implements using an Equalizer class that maintains a fixed-sum across an arbitrary number of values.

Authored by: Ben Nadel

Custom input in ion-select with Ionic 4 / Angular 8

This article covers a way to implement a custom input field for the ' ion-select ' component in the Ionic 4 / Angular 8 application, which by default does not allow editing of the options in it. So here is the ion-select component above which allows selecting one option out of 3 available in Ionic 4 application.

Authored by: Chief Morphist


Choosing the right React Native date picker Blog

Today, almost every application has some kind of date or time picker implemented. We use them to set reminders, mark special dates in a calendar, set up an alarm, etc. In this article, we'll take a look at the available options for React Native date pickers and discuss how to choose the right one for your app.

Authored by: LogRocket

Build an Awesome Developer Portfolio Website Using React

Use Create React App and the gitconnected.com portfolio API to build your personal website In this article, I'll walk you through building your portfolio website using React with Create React App and deploying the finished project to GitHub Pages.

Authored by: Trey Huffine

Deploying and Authenticating a React App with Google's Firebase

With services like AWS available to everyone, it's easier than ever to get your app on the internet. And AWS is incredible, especially for large-scale corporations who have the resources to leverage the kind of power it gives you. But what if you're a small business? Or a single developer?

Authored by: Lee McGowan - Writing

React is a state manager too, ya know!

You probably don't need Redux... or Context. Use React's internal component state instead of complex and third-party solutions. A homage to the simplicity of React's internal state I've been writing React for nearly two years now, and it has been without a doubt my favorite tool to work with in the web development space.

Authored by: Tucker Blackwell

Creating an app with React and Django Blog

Django is one of the most complete web development frameworks available. With the power of Python, we can get an application up and running in just about no time. It manages everything from the database to the final HTML sent to the client.

Authored by: LogRocket

Creating a Medium-like Blog Post Builder in React

I love writing, mostly because I love talking, but after 25 years of machine-gun mouth, my family are pretty tired of listening to it. So I write, because other people don't know how annoying I am yet. Medium is a great platform for doing just that, with an intuitive post builder.

Authored by: Lee McGowan - Writing


Aurelia SlickGrid

Hello, I'm Ghislain B. I live in Montreal Quebec in Canada, which is a French-speaking province, and I speak both French and English almost every day (more on that later). I use Aurelia mainly for all my personal projects. I also wrote a couple of plugins/libraries for Aurelia in the hope of helping the Aurelia community to grow.

Authored by: Aurelia

Callback Functions in Aurelia Using .call - I Like Kill Nerds

Aurelia's robust binding system allows you to not only bind values into your custom attributes and elements, but also the ability to pass in callback functions as well. While your first instinct might be to try using <my-element callback.bind="myFunction" you will quickly realise that this will not work because of scoping issues.

Authored by: Dwayne Charrington


A First Look at Vue3 - A Composition API Tutorial

Although Vue 3 is not completely out yet, there are still bits and pieces that are available to implement in Vue 2 projects. One of the most popular features that many developers have been exploring is the composition API. It's actually pretty easy to start using in existing projects - so let's not waste time and just get into it.

Authored by: matt maribojoc 🇵🇭

How to Add Copy to Clipboard Feature to Your Vue.js App

Copy to clipboard feature is a popular feature for web apps like password managers, where it is inconvenient for people to highlight text and then copy it. It is an easy feature to add to your own web app.

Authored by: John Au-Yeung

A Beginner's Guide To Vue Lifecycle Hooks

A simple introduction to the lifecycle hooks and when to use them. VueJS Lifecycle Hooks seem like a pretty easy concept, and they are! But making sure you're putting code in the optimal hook takes a little bit of thought sometimes.

Authored by: matt maribojoc 🇵🇭


NPM Crash Course

The content of this section is a crash course in node and npm. It is not exhaustive, but it will cover all of the necessary tools. The node package manager (npm) installs external node packages (libraries) from the command line.

Authored by: Robin Wieruch

Libraries and Tools

How to publish JavaScript Libraries

You wrote some code, and it's useful. Of course, you want to use it in different projects or you may even want to publish it for more people to use it. You can upload the source somewhere and write instructions about how to use it.

Authored by: Javi Carrasco

Using the Gesture Handler in React Native

Replacing the Gesture Responder System with the Gesture Handler. React Native Gesture handler makes it easy for us to deal with gestures in react-native by providing an easy declarative API. I personally use this library every day and enjoy saving time and not worrying about the details of how it actually works.

Authored by: Bit

How to Make a Vue.js App with Buefy Widget Library

Buefy is a lightweight UI component library for Vue.js. It is based on the Bulma CSS framework, which is a framework similar to Bootstrap and Material Design libraries like Vuetify and Vue Material. It provides components like form inputs, tables, modals, alerts, etc, which are the most common components that Web apps use.

Authored by: John Au-Yeung

CI/CD tools compared: CircleCI and Travis CI vs. major CSPs Blog

In recent years, the software industry has seen an explosion of innovation in the continuous integration and continuous deployment space. Many tools and services have been established to provide key parts of the CI/CD pipeline, but only a few organizations have produced full CI/CD systems and established themselves as de facto standards.

Authored by: LogRocket


Understand the Superpower of Optional Chaining in JavaScript

Learn how to use upcoming JavaScript feature Optional chaining ?. → Optional Chaining operator Optional chaining will eliminate the need for checking if a property is available in an object . Example without Optional chaining.

Authored by: jagathish

Functional Programming

Functional Reactive Programming with React, Redux, and TypeScript

I have chosen Redux among other React-friendly state managers (Apollo Link State, Unstated, Mobx) and native hooks (useEffect, useMemo, useState, useReducer) because working with Angular got me used to NGRX and NGXS. I feel convenient with the way Redux organizes state management and defines store, actions and reducers separately from component logic.

Authored by: Konrad

A closer look at JavaScript closures, higher-order functions, and currying Blog

Closures are one of the most powerful JavaScript features, but they can be a little daunting at first. Having a solid understanding of closures paves the way for understanding topics like higher-order functions and currying. We're going to address a few concepts that help illustrate the principles of closures, higher-order functions, and currying.

Authored by: LogRocket


Frustrations in Python Blog

Dark forces cast their wicked spells to leak into our realm of precious Python programs. They spam their twisted magic uncontrollably and pollute our readable code. Today I am going to reveal several chthonic creatures that might already live inside your codebase and accustom themselves enough to start making their own rules.

Authored by: LogRocket

Event triggered GraphQL Blog

I saw this amazing talk by Tanmai Gopal, one of the founders at JAMStack SF, on Making Static React Sites Dynamic . "I could probably cook up a Vue alternative," I thought. My Blog happens to be built with Gridsome, a Vue powered static site generator for building blazing-fast static websites.

Authored by: LogRocket