![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
It's been a big week for the React community with top notch content being released like Chidume Nnamdi's "Improve Your React App Performance by Using Throttling and Debouncing" on Bits and Pieces and "Getting started with Enzyme for React" by Diogo Souza on LogRocket, as well as HasuraHQ announcing their GraphQL tutorials featuring React and React Native.
Louis Lazaris offered a break from all things React with "8 DOM features you didn’t know existed", a must read, while Luis Manuel goes in-depth on "Implementing a Scroll Based Animation with JavaScript".
Last, but not least, Areknawo shows how you can not only manipulate DOM elements' styles and CSS classes but also create full-blown stylesheets, just like with HTML, using JS in "Messing with CSS through its JavaScript API".
General
Learn GraphQL by doing - The 2 hour GraphQL Tutorials for Frontend Developers
With these open-source tutorials, you will move from the basics of GraphQL to building a real-time application in 2 hours. Currently featuring React, Vue, React Native, iOS Tutorials. More coming soon.
Authored by: Hasura
What's new in Firefox 67: Prefers-color-scheme and more
Firefox 67 introduces a number of new features for both users and developers, including improved privacy controls and new accessibility features.
Authored by: LogRocket
Reconsidering "text-overflow: ellipsis" As A Design Smell And Accessibility Concern
After reading "Accessibility For Everyone" by Laura Kalbag, Ben Nadel steps back and reconsiders the use of "text-overflow: ellipsis". Whereas it once felt like a clean and elegant way to maintain the design aesthetic, he now wonders if hiding a user's content is, in fact, a "design smell."
Authored by: Ben Nadel
How to build a custom GatsbyJS theme
Gatsby is a static site generator that is built with React.js, Webpack, and GraphQL. It is used for building very fast websites that have relatively static content, for example, blogs, eCommerce websites, and even company websites.
Authored by: LogRocket
JavaScript
How Does JavaScript Really Work? (Part 2)
In Part 1 of this article, I gave a brief overview of how programming languages work in general and discussed the V8 engine's pipeline in detail. This post will cover a few more important concepts that every JavaScript programmer must know and are not tied only to the V8 engine.
Authored by: Bit
Implementing a Scroll Based Animation with JavaScript
Learn how to implement a beautiful scroll based animation with vanilla Javascript
Authored by: Scotch Development
Messing with CSS through its JavaScript API
Beyond all preprocessors, transpiler, or whatever web development tool you can think of, one fact still remains true - it's HTML, CSS, and JavaScript that power today's web. Any kind of tool, language and etc., all that remains dependent on these 3 technologies (if we don't count the uprising WebAssembly).
Authored by: areknawo
Lazy Loading Images using the Intersection Observer API
Most webpages today contain images. They make up a huge percentage of what we see on the web. The more the images, the more lag in load time we will experience in our webpage. We see that a lot of...
Authored by: Bit
The visual learner's guide to async JS
Have you ever watched or read hours' worth of tutorials but were still left confused? That's how I felt when I first dove into learning asynchronous JavaScript. I struggled to clearly see the differences between promises and async/await, especially because under the hood, they're the same.
Authored by: Eden Adler
TypeScript
What's new in TypeScript 3.4
TypeScript is an open-source, strongly-typed, object-oriented compiled language developed and maintained by Microsoft. It is basically JavaScript on steroids (it is a super-set of JavaScript) with static typing options. It is designed for the development of large and scalable applications that compiles to JavaScript.
Authored by: Bit
Types & Variables in TypeScript
Types & Variables in TypeScript - DiscoverSDK Blog
Authored by: DiscoverSDK
Build a Tic Tac Toe Game with TypeScript, React and Mocha
Learn how to compose a tic-tac-toe app with React and TypeScript components. A simple Tic-Tac-Toe game built with modularity in mind and shared on Bit. After sharing, my game's components can be tweaked and tested on Bit's live PlayGround.
Authored by: Bit
Angular
Build a Reddit Look-Alike App with Angular and ngrx
In this post, we will see how we can use Angular framework and ngrx to build a Reddit look-alike app. You will learn how to implement reactive programming in angular. You will also learn what pattern it is, where the pattern can prove useful, and how the pattern can be used to build better Angular applications.
Authored by: Bit
Angular Performance: Optimize Template Expressions
In this post, we will look at template expressions in Angular and learn how to optimize them to speed-up performance Template expressions were, for me, one of the most useful features when I started using Angular in 2017. Define your data /property in your component and render it on the component using your double curly braces - that was awesome.
Authored by: Bit
Understand Angular's NgRx by Building One
NgRx, a reactive state management module developed by Rob Wormald, has come to be the most popular and most widely used state management module in the Angular world. He took a cue from Redux and created this wonderful library for Angular, leveraging the power of RxJS.
Authored by: Bit
How To Use jQuery With Angular (When You Absolutely Have To)
Not often, I start something on a cautious note. However, I will make an exception this time because when it comes to integrating jQuery in Angular, things get a little weird. Why I am writing this...
Authored by: Bit
React
How to make a tic-tac-toe bot with WebAssembly for Go
A while back, I wrote an article about the basic setup for Go WebAssembly in a React.js app. We'll be piggybacking off of the work we did there so make sure to give that a read first (or download the starter template)!
Authored by: LogRocket
Improve Your React App Performance by Using Throttling and Debouncing
Learn how to improve performance by implementing throttling and debouncing with lodash, underscore or RxJs When building an app using React, we always have this problem of limiting the number of expensive calls, async network requests and DOM updates. We can really check all these using the features provided by React shouldComponentUpdate(...)
Authored by: Bit
Getting started with Enzyme for React
Testing is an important step in web application development, especially when it comes to apps made on top of component libraries like React. Among the many different tools and libraries for testing, Enzyme stands out for its flexibility and its easy-to-develop tests for your React code.
Authored by: LogRocket
A React Lift State Up & Down Example
A walkthrough by example on how to lift state up and down in React. You will see two examples that illustrate the problem and solution ...
Authored by: Robin Wieruch
Creating Your Own React Validation Library: The Features (Part 2)
In Kristofer's previous article, he explained how the basic parts of a validation library can be implemented. While the next part will focus on improving the developer experience, today's article will focus on adding more features to what was created in Part 1. Implementing a validation library isn't all that hard.
Authored by: Smashing Magazine
Demystifying Flexbox in React Native
React native uses Flexbox to handle the layout. Flexbox makes it easy to distribute the UI elements in the container. The way that flexbox works in React Native is a bit different than the way it works on the web - that's why we are going to demystify it here and give you a clear idea of how FlexBox in React Native deals with the Layout.
Authored by: Bit
What are Reusable Components in React?
A brief walkthrough that explains reusable components in React by example. You will refactor a specific to a more generic component by offering a clean API for this component for the outside world ...
Authored by: Robin Wieruch
Vue
What's new in Vuex 3.1.1
Vuex 3.1.1 adds support for jsDeliver CDN, memory leak fixes, a new minifier, and more.
Authored by: Diogo Souza
Vue.js And SEO: How To Optimize Reactive Websites For Search Engines And Bots
Do websites created with reactive frameworks get indexed by Google and other search engines? Is it compulsory to set up pre-rendering, as your SEO consultants suggest? Or are they wrong? Reactive JavaScript Frameworks (such as React, Vue.js, and Angular) are all the rage lately, and it's no wonder that they are being used in more and more websites and applications due to their flexibility, modularity, and ease of automated testing.
Authored by: Paolo Mioni
Node.js
From PHP to Node with Zeit's lambdas and Cypress.io
From PHP to Node with Zeit's lambdas and Cypress.io / The first post in this blog was published on 25th of August 2008. This place was always living on a shared PHP/MySQL hosting. It was driven by a custom made PHP CMS for over 10 years.
Authored by: Krasimir Tsonev
Libraries and Tools
8 DOM features you didn't know existed
Take a break from all of the React and npm-install-everything posts and take a closer look at some pure DOM and Web API features that work in modern browsers with no dependencies.
Authored by: Louis Lazaris
15 App ideas to build and level up your coding skills
We all know that it can be hard sometimes to find new application ideas that you could build in order to either improve or learn a new programming language or framework. Tip: No matter what language or framework you're using - good code is always written with modularity in mind.
Authored by: Bit
Webpack From Zero to Hero
Chapter 3: Everything is a Module This article is part of the Webpack from Zero to Hero series, for more background or for the index you can check the Chapter 0: History.
Authored by: Rubens Pinheiro
Functional Programming
How to migrate from HOCs to Hooks
The future is here, and you're loving every single second of writing your React code with Hooks. You're all like "useThis" and "useThat" and are having the time of your life implementing cross-cutting concerns with this new React feature. Then, out of nowhere, your manager tells you to fix a bug in some existing code.
Authored by: LogRocket
Functional JavaScript: How to use array reduce for more than just numbers
The array reduce method is really powerful. But people often run into trouble as soon as they step beyond the basic examples. Simple things like addition and multiplication are fine. But as soon as you try it with something more complicated, it breaks. Using it with anything other than numbers starts to get really confusing.
Authored by: James Sinclair
Friday Frontend: Advanced JavaScript Patterns Edition
Hope you had a great week this week, and if you're in the US have a wonderful holiday weekend! There are a set of articles that go a little bit deeper on some advanced JavaScript features and patterns. Proxies, generators, and functional patterns.
Authored by: Kevin Ball
Other
TTI: Time to Interactive ― 10 Web Performance Audit Tips for Your Next Billion Users in 2019
First Meaningful Paint is close to useless because it's an illusion. It's a decoy to keep the user from bouncing off your website while we get them the real thing. When does the user get this real thing? That time frame is what we call Time to Interactive.
Authored by: Scotch Development
Styling A Movie Cast List Using A Definition List And CSS Flexbox
Ben Nadel kicks of Friday with a fun little code-kata: styling a Movie Cast List using a Definition List and CSS Flexbox. In fact, this approach uses nested Flexbox layouts which allow the "dots" to take up all the empty space.
Authored by: Ben Nadel
Front-End Documentation, Style Guides and the Rise of MDX
You can have the best open source project in the world but, if it doesn't have good documentation, chances are it'll never take off. In the office, good documentation could save you having to repeatedly answer the same questions. Documentation ensures that people can figure out how things work if key employees decide to leave the company or change roles.
Authored by: CSS-Tricks
