JSK Weekly - November 7, 2019

Most developers have at some time in their life loved gaming and in fact many never outgrow this phase at all. codeguppy.com is a system that helps kids, teens and creative adults to learn JavaScript by coding games or remixing existing projects. Is there a better way to learn, especially for kids? Check out "Learn JavaScript by coding games" for more on this.

Interested in Svelte? Charles Ouellet takes us through a Svelte tutorial to help better understand what it’s all about in "Build a Svelte App (That Magic Framework You Heard About)" on Snipcart's blog.

If you enjoyed Paul Cowan's piece in September on Frustrations with React Hooks, be sure to check out his follow up this week, "Solutions to frustrations with React Hooks" on Logrocket's blog.


Advanced 2D Movement with MelonJS

Tip: Use Bit ( Github) to easily share and reuse JS modules and UI components across your projects, suggest updates, sync changes and build faster as a team. Though they work as a great combo together, I want to start with covering the dashing movement.

Authored by: Bit

Build a Svelte App (That Magic Framework You Heard About)

In a rush? Skip to tutorial or live demo. Just when you were getting comfy with tools you love, something pops up, challenging everything you know. Take frontend frameworks, for instance. We're 100% behind the paradigms React, Vue and others brought forth a few years ago.

Authored by: Snipcart

Release Notes for Safari Technology Preview 95

Safari Technology Preview Release 95 is now available for download for macOS Catalina and macOS Mojave. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS. This release covers WebKit revisions 250947-251210.

Authored by: WebKit

Deploy a Gatsby Site on GitHub Pages for Free

Learn how to configure Gatsby to easily deploy a blog site on Github Pages There are currently many options available for you if you're looking to build a blog site. Though WordPress is the arguable frontrunner as a content management system choice, you may want to opt for a static site altogether.

Authored by: Bit


codeguppy.com - Learn JavaScript by coding games

codeguppy.com is a system that helps kids, teens and creative adults to learn JavaScript by coding games or remixing existing projects.

Authored by: Code Guppy

Understanding the Delete Operator in JavaScript

Learn how the delete operator deals with configurable and non-configurable properties, and much more. According to ECMA Specification Delete (O, P) This is used to remove a specific own property of an object. It throws an exception if the property is not configurable.

Authored by: Bit

Sortable data tables using pure JavaScript

I have a table which has fixed headings. I have an array of objects including just four elements for the sake of simplicity. This table should be sorted by some properties of these objects, not all of them. I have to build this table without using any of the view libraries, just plain-old JavaScript!

Authored by: Murat Doğan 🚀

A Quick Guide To Stacks In JavaScript

Understanding And Implementing Stacks Stacks are a way to structure data. They are based on the concept of LIFO (Last In First Out). They can be implemented in various ways (which will be covered later on) but the idea is that you have 2 ways of interacting with the data: push an element on top of the stack or remove an element from the top of the stack.

Authored by: Kenneth Young Castro

Two JavaScript Coding Patterns that give you away as a Junior Developer

Computer programming is somewhere between an art and a science. Your code must match the syntax that the computer expects and understands, but the style and flow of your program is ultimately up to you. Most programming problems can be solved in many different ways and judging one as better than another can be tricky.

Authored by: Chris Geelhoed


Getting Typescript 3.7 To Work With Webpack and ts-loader - I Like Kill Nerds

At the time of writing this post, TypeScript 3.7 is in beta. Eventually, this post will become irrelevant. But, for the moment if you are trying to get TypeScript 3.7 Beta or any of the RC builds working with Webpack and ts-loader you might have encountered a bunch of red text in your console.

Authored by: Dwayne Charrington


Component Reusability Techniques with Angular

Building components using highly-reusable code DRY (Don't repeat yourself) is one of the fundamental concepts of software engineering; As software engineers, we often strive to build as much as possible using as little code as we can. That's indeed a really good thing because it allows us to ship less code, increase productivity, and keep a healthy codebase.

Authored by: Bit

The new Angular Youtube Player component!

Documentation is a bit thin on the ground right now, so let's dig into the code and see how this thing works! First, we need to import and include YouTubePlayerModule: This gives us access to the component! Pretty straightforward! Unfortunately documentation for the full API hasn't written yet.

Authored by: craig as af.

Migrate your Angular library to Jest

It's essential to notice that the my-awesome-lib-with-jest project as well as the my-awesome-lib-with-test-showcase each contains a separate jest.config.js and a tsconfig.spec.json. The thing to point out is that each project contains a specific test configuration which inherits from the shared base configuration. We put the base configuration in a jest.base.config.js file in the rootDir.

Authored by: Angular In Depth

Top Angular Admin Templates in 2019

We understand you are here to research for the admin panel templates that will give you the best value for your project. So we are going to save you the hassles of reading through a lengthy introduction. We shall go straight to presenting an unbiased review of the top Angular Admin templates in the industry today.

Authored by: JavaScript in Plain English


Solutions to frustrations with React Hooks Blog

One of my previous posts, Frustrations with React Hooks, got an incredible amount of views and topped hacker news at one point. The post also got lots of comments, some of which have changed how I view Hooks and given me a completely new and positive way of viewing them.

Authored by: LogRocket

React Native Car Parking Finder App UI Clone #6: Implementing Modal View

This tutorial is the sixth part of our React Native Car Parking App UI clone series. In the last part, we successfully implemented the Header section in our map screen as well as organized our code. In this part of the tutorial series, we are going to continue from where we left off in the last part.

Authored by: TheBestDevlist

How to build a mapping app in React the easy way with Leaflet

Mapping is hard, but spinning up a new app that renders maps doesn't have to be. Here's how you can easily get started working with maps in a new React app. Maps have been around for thousands of years, but they've become more complex and powerful within the last couple decades simply due to the fact that computers exist.

Authored by: Colby Fayock

React User Experience Tactics: Placeholder Loading Content to Improve Loading Screens

Today we will be taking the next step to improve user experience in React, using placeholder loading content. Scroll down to learn how to implement this tactic in your project, step by step. Let's take a look at the before and after in the example above.

Authored by: gitconnected

Clean Components with React Hooks

React Hooks were first introduced at React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence. Hooks enable state and side effect management without creating a class component. The React Team had three main issues with class components and the patterns that were created within React applications.

Authored by: PrestonCode


Aurelia vNext - 2019 Fall Update

As we approach the first major release of Aurelia vNext, we've got a special treat for you. It's time to announce the official framework name and provided a more in-depth look into the work that's been done so far and what's next to come.

Authored by: Aurelia


Vue.js Quasar Framework App Tutorial

Check out my latest tutorial on getting up and running with Quasar!

Authored by: Erik Hanchett

Considering Vue?

Vue is definitely David to the Goliaths of Angular and React - those two being backed by Google and Facebook after all - but, like the fable of old, I suspect Vue will beat the odds and come out on...

Authored by: gitconnected

How to use Vue.js Components | Gary Woodfine

Developing Web & Mobile applications and highly interactive and visually appealing front ends is a highly complex task. Your code can get messy really quickly especially when the Page or View you're working on will enable the user to do a number of tasks. There is a fine balancing act...

Authored by: Gary Woodfine

How to use V-Masks when building forms with Vue.js

One of the key aspects of any successful form is clarity. If the user finds the form easy to use and easy to understand, they are more likely to fill it in, and submit it. In this chapter, we are going to be looking at input masking.

Authored by: Packt


Take your Node back end to the next level with NestJS Blog

NestJS is a back-end framework for creating scalable applications. It works as an abstraction over the underlying HTTP server library. Currently, it supports two libraries - Express and Fastify - while still enabling developers to use their own APIs when needed.

Authored by: LogRocket

Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 3)

This third part of the series will focus on adding a text-based client for the game engine that was created in part 2. Fernando Doglio explains basic architecture design, tool selection and code highlights by showing you how to create a text-based UI with the help of Node.js.

Authored by: Smashing Magazine

Querying SQL Server with Node.js

JavaScript's server-side language, node.js, it a powerful language to use for interacting with databases. My typical use case in this realm is to have an AWS Lambda function, running node.js, acting as a middle-ware component between my front-end and the back-end database, performing one or more CRUD operations.

Authored by: Gravity Well

How to Create PDFs with Node.js

Everyone uses PDFs - it goes without saying that it's one of the most common document formats. Therefore, a feature of many apps is to create PDFs from other kinds of documents. Creating PDFs is easy in Node.js by using third-party libraries, and we can easily add the feature to our own apps.

Authored by: John Au-Yeung

Libraries and Tools

A Complete Guide to JavaScript Tooling

Want to become a productive JavaScript developer? Confused no more with a complete guide to JavaScript tooling systems

Authored by: Hoang Nguyen

When and How to Use Polyfills

So, let's start with a fun story that happened to me recently. I built a web app and added features to an existant application used by the HR department in my company. It looked great, I was excited...

Authored by: Bit

CraftyJS: JavaScript game library - FrontNet Blog

# Crafty JS Crafty is a JavaScript game library that can help you create games in a structured way... Key Features: Entities & Components - A clean and decoupled way to organize game elements. No inheritance needed!

Authored by: FrontNet Blog

Functional Programming

Algebraic Structures: Things I wish someone had explained about functional programming

Algebraic Structures are something I wish I'd understood better, sooner. I had a hazy idea of what they were, but didn't know the correct terminology. That was a massive barrier to finding out more. This article is my attempt to stop that happening to others. We'll look at: What are algebraic structures?

Authored by: James Sinclair