Happy #NationalAppDay! Who knew? In celebration, why not share your favourite ones today, especially the ones that make your life easier or that you predict for the future! Or just check out John Au-Yeung's story, "How to Add a Date Picker to Your Vue App" and Tushar Tuteja's "Using ES6 for your Node.js Application running on Express, using Babel" to get you started!
Looking ahead though, Dwayne Charrington advocates for Aurelia in "Reasons To Use Aurelia in 2020" and Quincy Larson summarises some of Brad Traversy's main insights from a published overview of what he recommends you learn to become a web developer in 2020 in "Web Development in 2020: What You Should Learn."
General
How is bit.dev different from Storybook?
A short comparison of two different tools and when to use them. Bit.dev and Storybook are two quite different tools. At first glance, it might seem that both provide a visual showcase for your UI components, and can be used to visually document and organize UI components.
Authored by: Bit
Web Development in 2020: What You Should Learn
Today one of my favorite teachers, Brad Traversy, published an overview of what he recommends you learn to become a web developer in 2020. Brad cuts through a lot of the hype you hear on social media. His advice is practical and realistic. And I agree with him on pretty much everything he recommends you learn.
Authored by: freeCodeCamp.org
What's new in Firefox 71: CSS subgrid and more Blog
Firefox 71 has just been released, with support for the CSS subgrid. This is huge news for anyone working with web layouts, as it allows us to easily align items to their parent's grid container. Up until now, when we declared a grid container, only its direct descendants could be aligned to the specified columns/rows.
Authored by: LogRocket
Web security 101 Blog
Web security is a huge topic. The things you need to be aware of in order to keep your users (and yourself) safe can be overwhelming. Nevertheless, there are a few concepts and recommendations that solve the most important problems and are easy to learn and understand. Let's take a look.
Authored by: LogRocket
Is it time to move on from Virtual DOM(ReactJS)?
Web Component specification enables capabilities to extend existing HTML elements. This gave rise to HTML extension model (Custom HTML elements )was picking up. However, it was nowhere close to being adopted by the browsers natively, but this inspired a new era of component-based JS frameworks, including AngularJS(by Google) and React(by Facebook).
Authored by: Shashank Sharma
Kubernetes log aggregation Blog
So you're the proud new owner of a Kubernetes cluster and you have some microservices deployed to it. Now, if only you knew what the heck they were all doing. Implementing log aggregation is an imperative in the world of microservices. Things can get out of hand quickly!
Authored by: LogRocket
JavaScript
5 Top Cloud IDEs for JavaScript Developers
Top 5 JavaScript IDEs you should know in 2020 Developers have traditionally been writing software using text editors on local machines but recently, habits have started to change. A rise in the popularity of cloud-based services has led to an increase in cloud-based IDEs too.
Authored by: Bit
Why does JavaScript have -0?
Since the early versions of JavaScript there have always been two ways of performing equality comparison: Abstract Equality Comparison using == aka "double equals" Strict Equality Comparison using === aka "triple equals" ES6 delivered a third option in the form of the method.
Authored by: Thomas Barrasso
Different ways to measure performance in JavaScript
To find how much time a function, loop, or any operation takes to execute in JavaScript, we can use one of the following tools: Using console.time and console.timeEnd Using the performance.now method Using online performance testing tools The console.time and console.timeEnd will print the number of millisecond taken to execute the code between the function calls.
Authored by: jagathish
Three ways to merge arrays in JavaScript
We can loop through the array source array which need to be pushed , then add elements one by one function push(fromArray, toArray) { return toArray; for(let i = 0, len = fromArray.length; i { ),newArray.push(item); return newArray; array1);
Authored by: jagathish
AI in browsers: Comparing TensorFlow, ONNX, and WebDNN for image classification Blog
Libraries that perform image recognition in the browser, such as TensorFlow, ONNX, and WebDNN, allow developers to create dazzling AI-enabled web apps.
Authored by: LogRocket
TypeScript
Stop unexpected data from breaking your app with TypeScript Blog
In this article, we'll explore how to use TypeScript type definitions to get better guarantees for runtime safety. We'll show how runtypes and io-ts libraries are used and explain why they exist in the first place. The TypeScript compiler is a powerful friend.
Authored by: LogRocket
Cool New Features Released in TypeScript 3.7
With the release of TypeScript 3.7, some great new features that are included from ES2020 that are now part of TypeScript. The new features include things like optional chaining, nullish coalescing, check for uncalled functions, and more. In this article, we'll look at some of them in more detail.
Authored by: John Au-Yeung
How to write correctly typed React components with TypeScript Blog
React and TypeScript make a powerful pair, but if you're just starting out, you'll need to understand how to write correctly typed components.
Authored by: LogRocket
Introduction to TypeScript Interfaces
The big advantage of TypeScript over plain JavaScript is that it extends the features of JavaScript by adding type safety to our program's objects. It does this by checking the shape of the values...
Authored by: John Au-Yeung
Utility Types in TypeScript
Flexible Types for Every Occasion I worked on a project recently where I had to write a whole bunch of data in JSON. Let's not get too deeply into why - suffice it to say that I was pursuing the simplest solution to a problem.
Authored by: Jamie Morris
Angular
Angular 8|9 Checkbox Tutorial with Multi Checkbox Validation - positronX.io
A step by step tutorial on handling multiple checkboxes in Angular 8|9, we will learn how to create, select and unselect multiple checkboxes and validate checkboxes with Angular Reactive Forms. A checkbox is also known as the tick-box and it is a Graphical User Interface widget that allows a user to choose one or many ...
Authored by: Digamber Singh
Using $any() To Temporarily Disable Type-Checking Within A Component Template In Angular 9.0.0-rc.4
In recent releases of Angular, type-checking has been extended to include our component templates. Which is awesome for catching compile-time bugs. However, the type-checking within our template is not quite as clever as the type-checking within our TypeScript code. For example, type-checking doesn't appear to work well with discriminated unions.
Authored by: Ben Nadel
Create Data Tables with Ionic 4 and ngx-datatable - positronX.io
A complete step by step Ionic 4 Data Table tutorial, create a data table in an Ionic / Angular app and learn how to show relevant information in tabular form using the ngx-datatable plugin. The purpose of this post is to teach you how to create data tables in the Ionic app quickly.
Authored by: Digamber Singh
React
Building reusable UI components with React Hooks Blog
In React, a reusable component is a piece of UI that can be used in various parts of an application to build more than one UI instance. For instance, we can have a button component display with different colors in several parts of our application.
Authored by: LogRocket
Learn React Native Animation by Building Circular Progress Bar
Today we are going to build a circular progress bar using the Animated library of React Native and three semicircles. Let's understand the concepts first then we will dive into coding. We have a base outer circle that serves as a container for the other three semicircles.
Authored by: Shad Mirza
Building The Same Application With and Without React Hooks, Part 1
With the release of React Hooks, many people may be wondering, what is the benefit of hooks anyway, or even what are hooks? Hooks are functions that allow you to "hook into" React state and lifecycle methods from within function components. An example of a "hook" is useState.
Authored by: Sukrit Walia
Building an e-commerce website with React and 8base Blog
In 2018, the total value of online shopping markets was estimated to be around $2.84 trillion. Companies like Amazon, Walmart, and Alibaba top the charts. Through their massive platforms, these giants have opened a new window for small businesses to also operate and own their e-commerce stores.
Authored by: LogRocket
Aurelia
Reasons To Use Aurelia in 2020 - I Like Kill Nerds
It is almost the year 2020, and you are still not using Aurelia, say it isn't so. No more excuses, it's time to charge up your Bluetooth keyboard and mouse batteries, make yourself a coffee and start using Aurelia. Version 2 is coming and it's going to be FAST While Aurelia 1 is plenty fast, ...
Authored by: Dwayne Charrington
Vue
How to Add a Date Picker to Your Vue App
Subscribe to my email list now at Follow me on Twitter at https://twitter.com/AuMayeung http://jauyeung.net/subscribe/ . For many applications, recording dates is an important feature. Having date picker inputs is often a handy feature to have. Fortunately, many developers have made date picker components that other developers can easily add to their apps.
Authored by: John Au-Yeung
Filtering Lists Dynamically With Vue on the Server Side is Easier Than You'd Think
I recently attended the ARTIFACT conference in Austin, TX, and was inspired by a few talks about accessibility through the lens of site performance. It became clear to me that there is this tendency to rely on big JavaScript frameworks to handle the work - like React, Vue, and Angular - but that can be overkill in some cases.
Authored by: CSS-Tricks
Node.js
Setting Up a Logging Infrastructure in Nodejs
How to set up a logging Infrastructureusing using ElasticSearch, Fluentd, and Kibana. Setting up the right logging infrastructure helps us in finding what happened, debugging and monitoring the application.
Authored by: Bit
Understanding Elasticsearch query body builder in Node.js Blog
Elasticsearch query body builder is a query DSL (domain-specific language) or client that provides an API layer over raw Elasticsearch queries. It makes full-text search data querying and complex data aggregation easier, more convenient, and cleaner in terms of syntax. In this tutorial, we will learn how writing queries using the builder syntax offers more advantages over raw Elasticsearch queries.
Authored by: LogRocket
Using ES6 for your Node.js Application running on Express, using Babel
We all love ES6 syntax, and we have been using it in our front-end applications build on react and other frameworks. It would be nice to be able to use ES6 syntax for our backend nodejs application. It is very easy to set up and pretty straightforward.
Authored by: Tushar Tuteja
Generating video previews with Node.js and FFmpeg Blog
Every website that deals with video streaming in any way has a way of showing a short preview of a video without actually playing it. YouTube, for instance, plays a 3- to 4-second excerpt from a video whenever users hover over its thumbnail.
Authored by: LogRocket
Libraries and Tools
10 Awesome React Native UI Component Libraries You Should Know
Here is a list of 10 useful React-native UI libraries to get you started on cross-platform mobile app development.
Authored by: JavaScript in Plain English
My Top Favorite Tools for Angular Developers
This tool is not much known, but it packs power. Angular playground provides a base where you can test and play with the components in your Angular project in isolation. You can pass different parameters to the component and you will see them rendered in your browser locally.
Authored by: Bit
15 VS Code Extension to Save Your Time and Make You a Better Developer
VS Code has a marketplace, and it contains a collection of plugins that can be installed into the text editor to make it more powerful. We can open market place by selecting Extension option in View...
Authored by: jagathish
Testing
Ember.js: Countdown to The New Year- Ember A11Y Testing
This is the tenth in our DecEmber series- "Countdown to The New Year: 31 Days of Ember Addons". We plan to highlight a new addon each day until the new year, and we hope you'll join us for the fun! Let's talk about ember-a11y-testing.
Authored by: EmberJS
How To Easily Mock Moment.js In Jest - I Like Kill Nerds
Recently whilst writing some unit tests in Jest, I had to test some code that took ISO date strings and converted them to formatted date strings, then code that converts them back to ISO strings before it's sent to the server. My first attempt was to use jest.mock and mock each individual method.
Authored by: Dwayne Charrington
Functional Programming
What is Functional Programming?
When I first started learning about functional programming, I had a hard time wrapping my head around it. I understood the concept and the main principles but I lacked the practical knowledge. With this tutorial I want to cover not just the concepts but give you examples and show you how you can apply the functional programming paradigm on your own code.
Authored by: Ferenc Almasi
Functions in TypeScript Part 1 - Parameters
In our last TypeScript article, we looked at loops. In this article, we'll start looking at functions in TypeScript and dive deeper into parameters in TypeScript. Functions are the essential ingredient in writing code that is readable, maintainable, and reusable. So what is a function?
Authored by: DiscoverSDK
How to reverse a tree in JavaScript the Functional way
Trees are the single most important data structure in computer science, after lists. Just about everything you do in your programming career will be related to trees. For example JSON objects, xml, html DOM are tree structures.
Authored by: papadimitriou
React Native || Inheritance || Following DRY Principle
Functional Don't repeat your self(DRY) using composition in React Native
Authored by: Tunvir Rahman Tusher