![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
In a profession where the staple diet is education, Chris Gregori reminds us this week of a few simple steps he has taken to better himself and his career in "How to Become a Better Developer" on the Bits and Pieces blog. A few other gems from them this week are "Understanding Higher-Order Components in React" by Chidume Nnamdi, "What the duck is GraphQL?" by Mahesh Haldar and Nwose Lotanna shows us all the good-to-know features in version 2.8.0 of Nuxt JS in "What's New in Nuxt JS 2.8.0".
Robin Wieruch turns his focus this week to Prettier with a two part tutorial, first covering its installation for Visual Studio Code in "How to use Prettier in VS Code" and then making it work with ESLint in "How to make Prettier work with ESLint" in part two.
Hernan Rajchert goes full Shakespeare this week with "To mutate, or immutate, that is the question", comparing TypeScript and PureScript, while Nwose Lotanna helps us control our workflow by using lifecycle hooks in "Introduction to Vue lifecycle hooks" and Sean Van Mulligen takes us through why creating offline-first web applications is not a trivial task in "Cache invalidation strategies using IndexedDB in Angular 2+" ... quite the buffet on Logrocket's blog.
If you enjoy creating timeline-based animation, have a look at "Introducing Scene.js Library to Create Timeline-Based Animation" by Daybrush and don't forget to have a look at ScaffoldHub, the web app generator that enables you to generate React, Angular or Vue + NodeJS + SQL, MongoDB or Firebase Firestore apps.
General
Web App Generators for React, Angular or Vue + NodeJS + SQL, MongoDB or Firebase Firestore
ScaffoldHub is a web app generator that enables you to generate React, Angular or Vue + NodeJS + SQL, MongoDB or Firebase Firestore apps. You model the entities, relationships, fields and validations, and ScaffoldHub generates the source code for you.
Authored by: Felipe Lima
How to Become a Better Developer
I'm not saying you should question everything you hear or you should start arguments with developers on social media. I'm just saying you should question things if they don't sound right to you.
Authored by: Bit
Microfrontends: the good, the bad, and the ugly
Front-end twitter exploded last week talking about 'microfrontends', with strong arguments and strong opinions jumping out on both sides. Someone let me perf. profile a site using "microfrontends". Memebait related: pic.twitter.com/LMldrx14Ui - Sean Larkin (廖肖恩) (@TheLarkInn) June 13, 2019 The argument reminds me a lot about the "CSS in JS" argument, with both sides talking past each other.
Authored by: Kevin Ball
How to make Prettier work with ESLint
This tutorial is part 2 of 2 in this series. The default setup for my JavaScript projects: Prettier + ESLint. Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a good shape.
Authored by: Robin Wieruch
What the duck is GraphQL?
Why do I need something better than REST APIs? GraphQL has nothing to do with ReactJs. Yes, that's how I am starting this post, there has been a huge confusion among developers that GraphQL is only for React apps because it was introduced in one of the React conferences.
Authored by: Bit
JavaScript
The JavaScript Mutation Feature You Never Knew About
You know the X-men, right? Well, this is just like the X-men, except that it's a lesson on Javascript. But still, pretty much the same thing. Because JavaScript is a prototype-based (not object-oriented) language, mutation is an important aspect. We won't get too theoretical here but there are mutable and immutable objects in JavaScript i.e.
Authored by: DiscoverSDK
Manipulating Arrays in JavaScript
An important part of any programming language. Most times we need to do several operations on arrays, hence this article. In this article, I would show you various methods of manipulating arrays in JavaScript [^^] -------------------------------------------------------------------------------- What are Arrays in JavaScript? Before we proceed, you need to understand what arrays really mean.
Authored by: B O L A J I ⚡
JavaScript Fundamentals: Using Conditionals
When we want to introduce logic & make decisions in our programs, we use conditionals. With conditionals, we can control the behavior of our code - by determining whether or not pieces of code can run. For example, when using a weather app, if the weather is sunny we could see a sun image, or if its raining we could see a rain-cloud image.
Authored by: Tim Robards
How to do scroll-linked animations the right way Blog
This article revolves around both classes of responses, with two takeaway tips: use Javascript observer patterns and use CSS where possible.
Authored by: LogRocket
Reduce spread and the path to unique
Reduce spread and the path to unique As modern JavaScript language features land more and more support I find myself using more and more of the semantic sugar. I'm a big fan of [default arguments](https://remysharp.com/2017/10/25/es6-default-arguments) but I also really like the `...spread` syntax.
Authored by: Remy Sharp
Which Bit Compiler Should I Use?
The world of web development is going through rapid and exciting changes. Web apps have gotten more and more complex, and as they did, changes to our code architecture had to be made; what was once, primarily, a monolithic architecture, turned quickly into highly modular and reusable code.
Authored by: Bit
Frontend Development is Dead. Long live to Frontend Engineering!
Do you remember the good old times where all you needed to do was to write some good CSS and HTML? Maybe a little bit of PHP, JSP or (if you were a skilled frontend dev) some Jade/Pug variables...
Authored by: gitconnected
TypeScript
To mutate, or immutate, that is the question Blog
This is the second post in the not all compilers are created equal series, in which we compare TypeScript (TS) and PureScript (PS), two statically typed languages that compile to JavaScript (JS). In the first post, we introduced both languages and explained their reason to be.
Authored by: LogRocket
Angular
All you need to know about Ivy, The new Angular engine!
First and foremost - Mobile devices! It might sound insane but 63% of all US online traffic comes from smartphones and tablets. By the end of this year, 80% of internet usage is expected to come from mobile devices. ( Source) One of our biggest challenges as front end developers is to load our website as fast as we can.
Authored by: Angular In Depth
Dynamic Page Titles in Angular
The problem with the above approach is that we need to put those methods in the component and need to call that method for each link that we have in the component templates. There is a better way to do this with Angular Routing module and Router API.
Authored by: Bit
Cache invalidation strategies using IndexedDB in Angular 2+
Creating offline-first web applications is not a trivial task. There are numerous considerations to be made (more than can be covered in a single article) and there are many potential pitfalls. However, there are two very important considerations to be made with respect to storing data in the user's browser: where to store the data, and how to ensure that it is not stale.
Authored by: LogRocket
React
The future of React, unfolding with Suspense Blog
Ever since the React team released their 16.x vision, it has definitely caught the community by storm. Some of the coolest additions to the collection are Hooks, lazy loading, Suspense, and the cache API. This won't be just another article on how to write Hooks, but rather what to expect in the future of React!
Authored by: Lusan Das
Understanding Higher-Order Components in React
Your complete guide to higher-order React components In our last post, we talked about type-checking in React; we saw how to specify the types of props in our React components despite being written in JS. In this post we continue the streak, we will look into HOC in React.
Authored by: Bit
Email Authentication with React Native and Firebase
User authentication can be implemented by using Facebook, Google, Twitter or LinkedIn but Email authentication rules them all with its tremendous popularity. In this tutorial, we will walk you through the creation of Email authentication with React native and Firebase.
Authored by: Bit
Vue
What's New in Nuxt JS 2.8.0
Nuxt is a framework built for creating Vue applications. These Vue applications can be a single page application, a static generated application or a universal application. Nuxt presets all the configuration needed to make developing a Vue Application more enjoyable.
Authored by: Bit
Introduction to Vue lifecycle hooks Blog
Help control your workflow by using lifecycle hooks to add custom logic at different stages of the lifecycle of your Vue instance.
Authored by: LogRocket
Cropping images in the browser with Vue.js Blog
Have you ever created a web application that needed to accept images from the user and later realized that users tend to provide images in all shapes and sizes that break your fancy website theme? Working with images on the web can easily become a pain - unless, of course, you're using the right tools.
Authored by: LogRocket
Node.js
What is an Abstract Syntax Tree
Learn what ASTs are (and why you should care) AST is an acronym for Abstract Syntax Tree. It is a representation of tokens generated from statements and expressions in a programming language. With the AST, the interpreter or the compiler can generate machine code or evaluate an instruction.
Authored by: Bit
Introducing AwesomeLog
AwesomeLog is a logging system for enterprise nodejs applications. It provides a basic out of the box logging solution that is ready to go with zero configuration but also gives you a highly configurable logging solution with the power to do your logging right.
Authored by: arei
Libraries and Tools
Introducing Scene.js JavaScript Library to Create Timeline-Based Animation
Scene.js is a JavaScript timeline-based animation library for creating animation websites. As an animated timeline library, it allows you to create a chronological order of movements and positions of objects.
Authored by: Daybrush (Younkue Choi)
Other
How to create a Custom Progress Bar
The theme for week #14 of the Weekly Coding Challenge is: A progress bar is used to show how far a user action is still in process until it's completed. A good example is a download progress bar which shows you how much of the file is downloaded already (or it could also be an upload progress bar if you upload files 🙂).
Authored by: freeCodeCamp.org
How to use Prettier in VS Code
Tutorial on how to install Prettier for VS Code (Visual Studio Code). Get to know how to configure Prettier for format on save and how to write a configuration file for line length and other formatting options ...
Authored by: Robin Wieruch
