JSK Weekly - February 19, 2020

Looking for a career as a Javascript Developer? Faced with an upcoming programmer interview? Well check out "Ace your JavaScript interview by writing domain oriented unit tests " and let Matt Stephens help you ace it!

There is always a wealth of information and tutorials around for seasoned developers but if you're just starting out or even thinking of starting out, have a look at Lee McGowan's "Why You Should Learn to Code, and How to Do It for Free" and Sunil Sandhu's "JavaScript for absolute beginners" for a good kick start.

For our more experienced readers, Eden Ella recommends some tools and libraries that will help build a stunning web app in "10 Top Javascript Libraries and Tools for an Awesome UI/UX" and Shanika Wickramasinghe takes us through different VueJS boilerplates for different occasions in "10 Top VueJS Boilerplates for 2020", both on Bits and Pieces.


Why You Should Learn to Code, and How to Do It for Free

Learning to code is liberating. There are countless applications for the skill, and I'm not just talking about a full-time job. You might never become a software engineer by trade, but that doesn't mean you can't leverage coding to make your life easier and more affluent.

Authored by: Lee McGowan - Writing

How to Create Seating Layout Using Essential JS 2 Maps Control

The primary goal of the Essential JS 2 Maps control is to render SVG shapes using GeoJSON data. Using this control, you can render various maps along with simple geographical features. In addition, you can also render custom shapes to simulate concepts like travel seat selection, sports stadium seat

Authored by: Syncfusion

The state of web development on mobile

Let me ask you a question - what kind of a machine do you code on? I bet it's one of desktop, laptop, or maybe even a remote server with SSH connection. That's the standard these days, but I think that there are some passionate (and crazy in a sense) people (like me) who'd like to stretch it even further.

Authored by: areknawo


The Game of Life Using JavaScript

The rules for whether a cell becomes alive or dies all depends on the number of neighbors a given cell has. Let's add a function, getNeighborCount(), to count the number of neighbors for a given cell.

Authored by: Gravity Well

What is really so special about JavaScript Closures?

"Can you explain to me what a closure is?" If you are a full-stack, frontend, backend, or do anything with JavaScript, you have likely heard of the term closure. If you are interviewing for a software engineer role, you might encounter a question asking you to explain what a closure is.

Authored by: gitconnected

JavaScript for absolute beginners

You may already have some knowledge of HTML and Cascading Style Sheet (CSS). You know that your journey into Web Development involves learning how to programatically manipulate things in a web page through the use of JavaScript (JS).

Authored by: Sunil Sandhu

Ace your next JavaScript interview by writing domain oriented unit tests

Faced with an upcoming programmer interview? It's pretty much a certainty that you'll be asked to complete a coding task. This could be a "homework" assignment that you prepare ahead of time, or an on-site programming task done during the interview itself. Either way, it's your opportunity to really shine - and I'll show you how.

Authored by: gitconnected

The JavaScript Event Loop explained

In the previous two articles, we learn about call stack, Single-threaded & Non-blocking behavior of JavaScript. In the series to understand how JavaScript runs on a V8 engine of chrome. This is the last article where we discuss Event loop, Web APIs & task queue.

Authored by: Prateek Kumar Singh

JavaScript Algorithm: Minimum Distances

For today's algorithm, we are going to write a function called minimumDistances that will take in an array, a, as an input. In this function, we are given an array of integers. Each value is found by its index.

Authored by: JavaScript in Plain English

JavaScript Objects - A Friendly Introduction

JavaScript objects can be difficult to learn, especially for beginners. In this tutorial you will learn how to loop through JavaScript objects with for...in loop, Object.keys(), Object.values(), Object.entries() and Object.getOwnPropertyNames(). You will also learn how to freeze objects and about some gotchas. JavaScript Objects - A Friendly Introduction Part 1.

Authored by: Alex Devero


Getting to know and love TypeScript's "meta" types

As you write more code in TypeScript or use more libraries with TypeScript typing, you will likely become aware of a few types whose meaning can be rather puzzling. Let me throw a few out at you: In my head, I call these types the "meta" types because they often go beyond describing concrete, real-world "things".

Authored by: gitconnected


Angular Accessibility

Let's talk about building accessible Angular applications. Why? Because Angular apps are awesome, but the amazing things Angular lets you do are a net negative unless you can build an app that everyone can use. Accessibility (sometimes abbreviated as "a11y") refers to designing software in such a way that it can be used by all users, regardless of any disabilities they may have.

Authored by: Matt Eland

Understanding Angular and Creating your Second Application

Part Two-Moving Further with Angular If you read Part One, you are here to move on to another level of Angular. Thank you for joining me. I will purposely keep each part as short as possible while achieving a new goal in Angular.

Authored by: Gravity Well

Generating Meme Images In The Browser Using html2canvas In Angular 9.0.1

Ben Nadel uses the html2canvas library to render "This Is Fine" Meme images directly within the browser using Angular 9.0.1. The html2canvas library emulates DOM rendering onto an canvas element, which can then be used to obtain Image data.

Authored by: Ben Nadel


The elegance of React

PureComponent or Component Why do we need to use destructuring on React? Learning to use properly setState method. When we're using a class component we have the two different options use a PureComponent or Component so,what's the difference?

Authored by: Jhornan Colina

React Internationalization wit i18n

When my last client asked me about internationalization in React, I went through all the hoops to prepare a presentation for them. In this React tutorial, I want to show you the gist of what I have learned about translating a React application. There are two popular libraries for internationalization in React out there: react-intl and react-i18next.

Authored by: Robin Wieruch

A better way to handle forms and input with React

In this post, we will cover how to write a `From` component and use it as a HOC(Higher Order Component) to maintain each input data and add validations at the HOC level. This component should: Render all of its children. Maintain state to track field data. Provide the field/form data through the context API.

Authored by: bharat soni


Dynamic Styling with Vue.js -Changing Classes

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we'll look at how to styling elements dynamically with Vue.js by changing classes. We can change CSS classes dynamically like any other attribute with v-bind .

Authored by: JavaScript Kicks

10 Top VueJS Boilerplates for 2020

Different VueJS boilerplates for different occasions. Boilerplates are a great way to quickly jump start your project and keep focus on the things that matter most to you. The combination of boilerplates together with reusable shared components boosts development and, in many cases, makes for a better, more maintainable code.

Authored by: Bit

Why Vue.js? - Let's learn Vue.js (Part 2)

Part 2 of our Let's learn Vue.js series - this time on the topic: "Why Vue.js?" - Here are a few good reasons to take a closer look at Vue You missed Part 1?

Authored by: JavaScript in Plain English


How to Send Emails In Node

With that being said, we can start looking into how to send out emails. First, you'll need to import node-mailet and provide the public and private keys that has been generated for your account: You can either add them directly here or as I did in the example above, you can provide it as process.env variables.

Authored by: Ferenc Almasi

A simple Node.js Docker workflow

Docker is a great tool that helps developers build, deploy, and run applications more efficiently in a standardized way. We can develop in the same environment as the app running in production. You can speed up the debugging or even the prevention of upcoming bugs by having the same setup locally.

Authored by: Soós Gábor

Libraries and Tools

3 more awesome but small JavaScript Libraries you need to try

First, thank you so much for that awesome feedback on my first part of this series - I got a lot of messages that the article might help you, and you got to know some cool new JS libraries. In case...

Authored by: JavaScript in Plain English

Best JavaScript Frameworks and Libraries: what to use in 2020

I can certainly say that the 2010s was the decade of JavaScript. At the beginning of this decade, it was clear that the creation of high-quality web applications is no less complicated than the...

Authored by: IntexSoft

10 Top Javascript Libraries and Tools for an Awesome UI/UX

A lightweight JS library for delivering beautiful animations. Anime offers a basic and simple API that would take little time to master. React developers may also choose to use the react-anime...

Authored by: Bit


Build Your Own JavaScript Testing Framework

Understand JS testing by building your own framework. Testing (Unit or Integration) is a very important part of programming. In today's software development, unit/functional testing has become an integral part of software development. With the advent of Nodejs, we have seen numerous super JS testing frameworks being released: Jasmine, Jest, etc.

Authored by: Bit

Functional Programming

Functional Components are Better

Here's the simplest possible functional app: function WisdomComponent() { return The good that ought to be the object of our earnest pursuit, is to be found only within ourselves. ;} ReactDOM.render( , document.querySelector("#app")) So the point I am going to make here is this: this is literally the simplest expression of the mechanics desire.

Authored by: Matt Tyson

7 JavaScript Utility Functions to Improve Your Efficiency

Detect browser, detect function type, convert hyphen-case to camelCase, delete HTML tag in a string and reverse a string, etc. Different browsers have different navigator.useragent. We can detect browser types by checking this value. Example: There was a 'chrome' string on the result. There was a 'firefox' string on the result.

Authored by: JavaScript in Plain English

Safe Containers in JavaScript - Functional Programming for JavaScript Developers

Now, once we start looking at other containers, you will see that this safety with map is actually a general principle. Every container that has a map function has an empty/error state, where it will just skip the manipulating function. And therefore, we won't get have unexpected crashes. OK, enough about arrays.

Authored by: Jan-Vidar Bakke