![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Whether you're a newbie or seasoned developer, it's pretty safe to say that learning by doing is still one of the best ways to improve. Which is exactly what Alex Devero maintains in one of this weeks "How To's" where he helps teach how to build your own todo list app, improving JavaScript, React and TypeScript skills in "How to Build a Todo List App with React Hooks and TypeScript." Keeping with "How To's" is Mohan Ram, with "How to construct Tree data using recursive mechanism with RxJS" and Robin Wieruch in "How to test Axios in Jest by Example."
Short on time? Matthew Tyson gives us a No-Nonsense Intro to React.js in "React in 7 Minutes", Siyang Kern Zhao shows how not to reinvent the wheel in "Don’t reinvent the wheel when implementing ControlValueAccessor" and Dom DiCicco shows us a quick win in "TypeScript Safe API Requests."
General
Composing Angular Components with Typescript Mixins
Learn how to maximize reusability in your Angular components by using composition instead of inheritance This is a follow-up from my previous article about Component Composition with Angular where I listed 3 ways of composing Angular components: Class Inheritance Class Mixins Component Composition TLDR; my favorite way is to compose components in small units and use Inputs and Outputs to communicate between components.
Authored by: Bit
INGMARSON's Shopping Cart Integration in a Gatsby PWA
It's been quite a while since the last time we released one of these case studies. However, when developer Tim Walpole contacted us through Intercom to show us his new Snipcart integration, we thought: "Woah, this is cool, gotta do something with this!"
Authored by: Snipcart
The Dilemma of Code Reuse in Microservices
In the world of Microservices, reusing code betweenMicroservicesisn't a prominent practice. But as we all know, duplicating code doesn't help either. Besides, reusing code within a Microservice boundary is not a question at all. The dilemma is about reusing code between Microservices.
Authored by: Bit
Having fun with ES6 proxies Blog
Proxy is one of the most overlooked concepts introduced in the ES6 version of JavaScript. Admittedly, it isn't particularly useful on a day-to-day basis, but it is bound to come in handy at some point in your future. The Proxy object is used to define a custom behavior for fundamental operations such as property lookup, assignment, and function invocation.
Authored by: LogRocket
Building a JAMstack e-commerce website Blog
JAMstack has been a buzz word for a while now. In online forums and chat channels, you'll frequently see similar questions on the subject: What's the idea behind it? What makes up the JAM? Why is it useful? Is it specific to certain frameworks? How can I build a JAMstack website?
Authored by: LogRocket
An introduction to deep learning with Brain.js Blog
In this post, we will discuss some aspects of understanding how neural networks work. We will also build a small, example project using Brain.js.
Authored by: LogRocket
JavaScript
Know your JavaScript data structures Blog
Data structures are often overlooked in JavaScript - or, rather, we don't think about them much. The problem with ignoring data structures is that for many top companies, you are usually required to have a deep understanding of how to manage your data.
Authored by: LogRocket
Static Type Checking vs Dynamic Type Checking in JavaScript
Do you prefer discovering bugs during execution time or during the bundling (or any other stage you have before publishing your code)? Would you rather let the code figure out your data types or do...
Authored by: Bit
How I used JavaScript generators to create a Casino game cards shuffler 🃏
Understand JavaScript generators purpose and get your programming skills to next level through the example of a simple casino cards shuffler machine.
Authored by: Andréas HANSS
Detecting Online/Offline Status in Javascript
Learn how to detect if the user is online or offline and handle events if a change in the online/offline state occurs. We can detect if the user is online or offline by using the online property on the navigator object which will return true if the user is connected to the internet, otherwise it returns false.
Authored by: jagathish
Expanding the Next Generation of Coders
We are fortunate to be living at a time when we have greater access to information and social interaction from across the world than ever before. The devices we keep in our pockets are powerful tools for business and creativity. The importance of technology in our society cannot be overstated - we rely on it.
Authored by: Bit
How to construct Tree data using recursive mechanism with RxJS
In this blog, we are going to see how we can convert a flat data of tree nodes into tree data structure with help of recursive mechanism with RxJS. Ideally, UI should be driven by the data from back-end service but at some times service may not be able to facilitate the expectations of User Interface, so we have to compromise with that state/data conversion in UI.
Authored by: JavaScript in Plain English
TypeScript
TypeScript Safe API Requests
There are many quick wins you get by introducing TypeScript to your project. As they start to stack up, the confidence level alone that your engineering team gains is worth it. One of the quickest wins you can get in increasing type safety of your app is by making your API calls type-safe.
Authored by: Dom
TypeScript Tip of the Week: Generics
Happy Monday and thanks for reading the first ever TypeScript tip of the week. I'm starting this series helpful TypeScript insights and tips as a way to get more people interested in using TypeScript. This week I wanted to talk about TypeScript generics.
Authored by: programming_dog
Constructors and Access modifiers in TypeScript
What is Angular (Part 6.4) / What is TypeScript? How it works... | How to start... If you haven't covered Part - 6.3 of this series, I recommend you to check this link → Interfaces and Classes in TypeScript Look down the code below...👇 Define a class (Point) - at line no.
Authored by: Ankit Maheshwari
How to Build a Todo List App with React Hooks and TypeScript
The best way to learn something is by doing. This tutorial will help you learn how to build your own todo list app with React hooks and TypeScript. Try this easy tutorial, build your own todo list app, and get better in JavaScript, React and TypeScript.
Authored by: Alex Devero
Angular
Handle @media Breakpoints in Angular and Sass
In this section, I will create one file called responsive.mixin.scss and put it inside the assets folder. Note: You can put it everywhere that depends on your project and your view. In the file, I will do 2 things: I created a breakpoints variable in SCSS with 5 big breakpoints as follows: There are so many breakpoints based on material design.
Authored by: transonhoang
Don't reinvent the wheel when implementing ControlValueAccessor
Reuse already-implemented controlValueAccessor You might have already know the technique of implementing ControlValueAccessor (CVA) to adapt your custom form element to Angular's Reactive Form, such as a 1-5 star rating component. CVA is a prerequisite knowledge before you read this article.
Authored by: Angular In Depth
Deploy Your Serverless Server-side-rendered (SSR) Angular App on AWS Lambda
In this section, we will have a hands-on exercise. I will follow the order below to go in-depth on Angular SSR development and deployment. Create a blank CSR Angular app Update the CSR Angular into SSR Angular app using Angular Universal Deploy the SSR Angular app on AWS Lambda In this blog, we will use Angular CLI to create new project and generate components and modules.
Authored by: gitconnected
How I wrote NgRx Store in 63 lines of code
Deep dive into NgRx Store. How I tried to understand it by getting to the very essentials. I was introduced to a concept of Redux state management back in 2017 when I started working on a new Angular 2 project.
Authored by: Angular In Depth
Quantum Angular: Maximizing Performance by Removing Zone
For Observables, it gets a little bit more complicated: we need to subscribe to the observable and mark the component dirty in the subscription, but we also need to clean it up. To do that, we override ngOnInit and ngOnDestroy to subscribe and then clean the subscriptions.
Authored by: Bit
React
Quick walkthrough to SuspenseList in React
Suspense for Data Fetching is a new feature starting from React 16.6 that lets you use to explicitly "wait" for, well, anything. It can wait for images, scripts, or other asynchronous work along with Data Fetching. SuspenseList helps coordinate many components that can be suspended, by orchestrating the order in which these components are revealed to the user.
Authored by: Bit
React in 7 Minutes
Next, let's see how the JSX knows what to put into place for the tag. That work is done directly above in the JS, where we define the Parent component: Again we have a render method. This time, the render method returns a simple div with a class, some text content and another component, called Child.
Authored by: Matt Tyson
Using React-Redux Hooks
React has released 16.8 version with Hooks as a new addition. Hooks are JavaScript functions that allow functional components to access state and life cycle methods. Since then, the focus of...
Authored by: Bit
React Hooks | Better Functional Components
React Hooks are one of the most aggressive topic now a days in react community and i recently i got chance to explore it and believe me it is very easy yest complicated . In this article we will talk about . 1.) what are react hooks ? 2.)
Authored by: freeCodeCamp.org
Building a payments system with React and Stripe Blog
Stripe is a suite of APIs that makes it easy to set up online payment processing, and today, we'll be leveraging it to create a bare-bones payment system using React. Whether you're implementing a subscription-based service, an e-commerce store, or a crowdfunding solution, Stripe offers the flexibility to get it done.
Authored by: LogRocket
Creating a searchable movie app using React, styled-components and React Hooks
With React Hooks becoming the new normal, they have certainly got me more hooked on to React. The other day I was commenting on a post here and figured I should write this article. In this article, we will be creating a small searchable movie database using the TMDb API completely using React hooks.
Authored by: Manan Joshi
Aurelia
Aurelia on GitHub Sponsored Organizations
Today, we're pleased to share that Aurelia was selected by GitHub to be one of the first open source organizations to participate in their new GitHub Sponsored Organizations program! Aurelia is more than a front-end framework. It's a platform and ecosystem, built on the open web, enabling the creation of ambitious user interfaces.
Authored by: Aurelia
Vue
Using JSX with Vue Blog
The common way to build Vue apps using templates. It is not as common to build Vue apps using render functions and JSX. In this tutorial, we will learn what render functions are and how they work. We will also take a look at what JSX is and why you might want to use it in your Vue project.
Authored by: LogRocket
Examining the Vue render function
If you're using the Vue CLI to scaffold your VueJS projects (and if you aren't, you should be) you've probably noticed that when you create a new project, it will generate a number of files for you. One of these is main.js .
Authored by: Alex Ritzcovan
A curated list of awesome things related to Vue
All the great things you need to be using if you aren't already with Vue.js Awesome Vuje is collection of awesome things create with VueJS. Collection includes Packages / Documents resources / Community / Post cards and Many more.
Authored by: Videolime.org
Display Images like Google and Flickr with Vue.js
If you use image search websites like Google Image Search or Flickr, you will notice that their images display in a grid that looks like a wall of bricks. The images are uneven in height, but equal in width. This is called the masonry effect because it looks like a wall of bricks.
Authored by: John Au-Yeung
Node.js
Going serverless with your Node.js apps Blog
Most web applications run on high-maintenance servers. Nowadays, software engineering teams have dedicated DevOps/infra engineers to help manage, provision, and maintain these servers. Due to the associated challenges, the need to drive alternative solutions became necessary. Serverless applications shine in this regard.
Authored by: LogRocket
Build a Select-Options for the Terminal using Nodejs
Learn how to implement a select-options feature using Nodejs I'm a great fan of the terminal. As a personal hobby, I try to replicate HTML objects on the terminal. In my past articles we have treated: Coloring the terminal, Build colorful terminal spinners using Nodejs, Build colorful terminal progress bars using Nodejs, and more.
Authored by: Bit
Natural language processing for Node.js Blog
The internet facilitates a never-ending creation of large volumes of unstructured textual data. Luckily, we have modern systems that can make sense of this kind of data. Modern computer systems can make sense of natural languages using an underlying technology called NLP ( natural language processing).
Authored by: LogRocket
Testing
Unit and integration testing for Node.js apps Blog
With any application, testing is an integral part of the development process. Building tests with your application enables you to: Quickly verify that changes to a project do not break expected behavior Act as pseudo documentation as path flows are documented Easily demonstrate application behaviors Quickly take a review of your application's health and codebase This post is going to introduce unit and integration testing of Node.js applications.
Authored by: LogRocket
Improved debugging of Angular component tests in Jest
with @angular-extensions/pretty-html-log Good tests are the backbone of every application. They are crucial to the success of our project. Therefore it's no surprise that Angular is designed with testing in mind and provides us with a lot of testing utils. By default, the Angular CLI generates a project with Karma as a test runner and Jasmine as a testing framework.
Authored by: Kevin Kreuzer
How to test Axios in Jest by Example
Every once in a while we need to test API requests. Axios is one of the most popular JavaScript libraries to fetch data from remote APIs. Hence, we will use Axios for our data fetching example -- however, the following tutorial should make it possible to exchange axios with any other data fetching library.
Authored by: Robin Wieruch
Complete Guide on Unit and Integration Testing of React/Redux Connected Forms
After seeing the amazing feedback and requests that followed our latest article on What and How to Test with Jest and Enzyme , I'd love to share a couple of other test cases. Today, we'll talk about testing React forms that are connected with Redux, considering both unit and integration testing.
Authored by: Bit
Functional Programming
Algebraic Data Types: Things I wish someone had explained about functional programming
Algebraic data types and algebraic data structures sound similar. It's like they ought to be the same thing. But they're not. They both have 'algebraic' in the name, so it's confusing. I got them mixed up at times. Others have too. But, they're different concepts.
Authored by: James Sinclair
