![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
International Talk Like Yoda Day, it is! A Jedi master, he might be, but code can he? Even developers can be vague, Yoda style, when it's called for! Check out Anupam Chugh "What Programmers Say vs. What They Actually Mean" on gitconnected.
There's a lot of chatter around Deno this week and whether or not it will mean the end of Node. Arek Nawo gives us a run down of what Deno is in "Deno - why all the buzz?" and Fernando Doglio goes into a few interesting facts that may play a role in determining that in "What is Deno and will it Replace NodeJS?" on the Bits and Pieces blog.
General
Stackbit: Friendly Jamstack Websites & CMS Management
In a rush? Skip to step-by-step tutorial or live demo One of the most significant challenges the Jamstack faces going forward is gaining a wider adoption and boosting accessibility. Many indicators suggest that 2020 is the year where the community reaches this goal.
Authored by: Snipcart
What Programmers Say vs. What They Actually Mean
Yeah right, but I've also smashed it with some changes recently. It's been zero days since I said this. Of course, it doesn't work. Expect a fury of bugs which I'll call "hardware problems". I still haven't implemented that feature. You might see a WIP commit shortly.
Authored by: Anupam Chugh
Visualize COVID-19 data using Postman, D3.JS and Bootstrap.
Have you ever thought about what if you could visualize your data quickly at the early stage to make more sense of it? Or what if you developed an API and want to highlight the information in it to make it more readable for your client or manager since showing raw data (even "beautified/pretty" ) is not very presentable.
Authored by: Bit
Deno - why all the buzz?
Deno is coming big time... but why is all the buzz, anyway? Introducing and comparing Deno with Node.js. Talking future and current state of Web Dev!
Authored by: areknawo
JavaScript
Google JavaScript Technical Interview
Pyramid of Doom or Callback Hell Callback has native difficulty ; As calls becomes more nested, the code becomes deeper and increasingly more difficult to manage Promise is introduced in ES6 to resolve the callback hell issue and handle asynchronous operations Promise allow us to do things in the natural
Authored by: JavaScript Kicks
Early Returns/Guard Clauses in JavaScript (and React)
In this article, we will go through the following sections: The basic concept of Early Return The reasons for using Early Return Using Early Return with React Using Early Return with Hooks Now, let's get started. Early Return is a pattern that suggests us to avoid nested if-else statements by checking the preconditions and return or throw as early as possible.
Authored by: zzdjk6
The new way to remove duplicates from an Array in JavaScript
Arrays are fundamental blocks of how we deal with sets of data. We use them every day, not only in JavaScript but in every language. Today, I would like to show you a particular cool trick I found out reading some code.
Authored by: Piero Borrelli
JavaScript Design Patterns: The Factory Pattern
This is the second article in JavaScript Design Patterns series, where I explain Design Patterns with simple words. There is a ton of information out there on the internet, which is incredibly confusing, dry and boring. My goal is to explain complex things in a simple and enjoyable manner.
Authored by: Arthur Frank
JavaScript vs Dart: An Overview
JavaScript is commonly known as a browser scripting language, but it has also extended to many server-side and mobile application development environments. JS has been present for almost 20 years and...
Authored by: Bit
TypeScript
Use microbundle for a TypeScript npm module · Code with Hugo
For those looking to write a package and publish it to npm, TypeScript + microbundle is a low-friction way to build a high-quality library.
Authored by: Hugo Di Francesco
Read a file with promises in TypeScript on Node
import * as fs from "fs"; import { promisify } from "util"; const content: Promise = promisify(fs.readFile)("path/to/the/file", { encoding: "UTF-8" }) I am tired of looking that up over and over every time I want to read a file into a promise in Node using TypeScript, so here it is.
Authored by: Jessica Kerr
Angular
Binding a Firebase Data Source to Grid Using AngularFire2
Learning and sharing are the best ways to gain expertise in any field. With this in mind, I am going to share one of the features that I learned how to use at the NG-Conf Hardwired, an online Angular conference. This conference was very well organized and was quite successful.
Authored by: Syncfusion
Getting started with Angular development 2020
This post shows how you could setup your development environment to create and manage Angular applications. Of course many other tools and ways could be used to develop Angular applications, not just the ones used here, but this setup works great for me. Install Node.js, npm or yarn, git Before you can install the Angular...
Authored by: damienbod
Securing an Angular application using Azure B2C
This article shows how to secure an Angular application using Azure B2C with OpenID Connect Code Flow and PKCE. The silent renew is supported using iframes. Code: Angular Azure B2C Setting up Azure B2C In the Azure portal, create a new App registration in your B2C tenant.
Authored by: damienbod
RxJS Terms You MUST know in Angular
It will be created whenever you subscribe an observable. The function that you supply is an Observer where we make the decision how to react to each event that happens. An Observer has 3 main functions: next(), error(), and complete().
Authored by: transonhoang
Wrapping 3rd-Party Scripts In Angular Services In Case They Get Blocked In Angular 9.1.4
Ben Nadel looks at wrapping 3rd-party scripts / libraries in Angular Services such that if the underlying library fails to load, the rest of the Angular application can remain blissfully unaware. He explores this idea in an Angular 9.1.4 context with a mock analytics tracker.
Authored by: Ben Nadel
React
Building Native Desktop Apps with React Node GUI
Have you ever wondered if you can build a native and cross-platform desktop application with React? No, not by wrapping your web app inside a browser. But a REAL desktop application that is developed...
Authored by: Bit
Custom Form Handle With React Native
Let us start building the form now. Create a folder src Create a subfolder components under src . Create a file formData.js in your src folder. Create files RegisterForm.jsand FormField.js inside your components folder. Lets quickly get some code inside these empty files. The Register Form and Form Field components would look something like this respectively.
Authored by: Karthik_B
Building a React Component Design System
Design systems are a highly effective way to ensure a standardized, consistent look & feel across your screens and apps. This, in turn, helps to reduce user confusion, increase satisfaction, and helps your brand grow a loyal fan base. For most top companies, design systems are implemented as a reusable set of components in React, Vue, Angular, or even Stencil. This makes sense, as it gives developers the ability to share and reuse components to build different apps, which boosts development velocity as well as UI consistency.
Authored by: Bit
React Tips - Async and setState
React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps. In this article, we'll look at the async nature of setState and how we should write our code to run multiple setState calls sequentially.
Authored by: John Au-Yeung
Sharing React Components between Your SPA and Static Pages
Static pages are optimized for speed and SEO (and great for security, but that's for another post) so, when you need a landing page, a documentation site or a blog for your app, to serve both as a guide and as a marketing tool - static is the way to go.
Authored by: Bit
Will React Classes Get Deprecated Because of Hooks?
Before you say anything, yes, I am aware that React's official documentation states that there are no plans to deprecate class components any time soon, so don't worry, you don't have to go out and...
Authored by: Bit
Aurelia
Announcing The Aurelia 2 Book - I Like Kill Nerds
Buy the Aurelia 2 book here. With the Aurelia 2 alpha coming very shortly, I have had plans for a while to write another Aurelia book, this time around on Aurelia 2. I learned a lot writing my first book and admittedly, made a few mistakes. The learning experience was invaluable.
Authored by: Dwayne Charrington
Vue
Vue Tips - CSS Frameworks and Watching Nested Data
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 using CSS frameworks to save us time from styling everything manually and watching nested data. Off the shelf CSS framework saves us time from styling things that we've to style manually otherwise.
Authored by: John Au-Yeung
Many Ways to Rerender a Vue Component
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 ar the ways to rerender a Vue component, and which way is the right way. The whole point of having a single page app is to not have to reload the whole page to update data.
Authored by: John Au-Yeung
Tackling Authentication With Vue Using RESTful APIs
Authentication (logging in!) is a crucial part of many websites. Let's look at how to go about it on a site using Vue, in the same way it can be done with any custom back end.
Authored by: CSS-Tricks
Best Vue Event Handling Libraries for Handling Mouse Events
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 the best Vue directives for handling various kinds of mouse events that aren't included with Vue.
Authored by: John Au-Yeung
Node.js
What is Deno and will it Replace NodeJS?
The short answer is (obviously) it's way too early to tell but here are a few facts that may have a large role in determining that. For starters, Deno is the creation of Ryan Dahl, also known for the creation of a little thing called Node.js, sounds familiar?
Authored by: Bit
Render dynamic content in Node.js using templates
Create a new folder with the name templating-nodejs and navigate to that folder from terminal and initialize package.json by running following command: Install express and ejs by running: npm install [email protected] [email protected] Install nodemon as dev dependency by running: npm install [email protected] --save-dev Create a new file index.js and add the following code inside it: Add a start script inside package.json "start": "nodemon index.js" Now start the express server by executing the npm start command from the command line: You can access the application now by navigating to http://localhost:3000/ Now let's add the ejs functionality into the application.
Authored by: gitconnected
Using Firebase for storage and auth with Restify & NodeJS
I've recently been building an API that implements basic Create, Read, Update, Delete (CRUD) functionality for a CV application I'm going be building. I built the API consumer first using Pact and once I was happy that my API met the consumer contract with stubs I moved to implement Firebase for storage and auth, using the consumer contract to ensure I didn't break anything.
Authored by: Colin Wren
Libraries and Tools
React Animation Libraries for 2020
Animations are important in instances like page transitions, scroll events, entering and exiting components, and events that the user should be alerted to. In this article, we'll take a look at 5 React animation libraries that can be integrated with React for interactive and attractive web pages.
Authored by: Bit
How to Add Redux into create-react-app
Redux is the most popular State container library for frontend apps. It helps you manage your state in a predictable and easy way. This post is about setting up Redux on your new/existing React app. I am taking the most popular React-boilerplate (create-react-app).
Authored by: Tarun Nagpal
Caching made easy with React Query
Hey everyone, I'm making this post to share with you a library that made managing server state on React applications easy and fun - React Query. In this blog post, I'll do a small introduction by explaining what led to its creation followed by an introduction to how the useQuery hook works.
Authored by: JavaScript in Plain English
Testing
7 Must-Use Front-End Debugging Tools
If you've been working on the front end, you know how hard it is to debug applications. Especially with JavaScript, a small mistake can sometimes take hours to debug. With different browsers, operating systems, and devices, bugs are inevitable. This article outlines some tools that can help you find, diagnose, and fix your issues.
Authored by: Mahdhi Rezvi
Functional Programming
5 Differences Between Arrow and Regular Functions
In JavaScript, you can define functions in many ways. The first, usual, way is by using the function keyword: The function declaration and function expression I'm naming a regular function. The second way, available starting ES2015, is the arrow function syntax: In this post, I'm going to show the main differences between the regular functions and arrow functions, so you could choose the right syntax for your situation.
Authored by: Dmitri Pavlutin
