React vs. Angular vs. Vue.js: A Complete Comparison Guide

Choosing a tech stack sometimes becomes a tedious task as you need to take every factor into consideration, including budget, time, app size, end-users, project objectives, and resources.
Whether you are a beginner, a developer, a freelancer, or a project architect forming strategies, it is a wise decision to be aware of the advantages and drawbacks of each framework in detail. So, this post will not help you select the best one, because that decision depends on the scope of your project and the framework’s suitability to your needs. But, this post can help you gain a better understanding of each framework along with trends and insights.


Level up your .filter game

.filter is a built-in array iteration method that accepts a predicate which is called against each of its values, and returns a subset of all values that return a truthy value.
That is a lot to unpack in one statement! Let’s take a look at that statement piece-by-piece.

“Built-in" simply means that it is part of the language—you don’t need to add any libraries to get access to this functionality.
"Iteration methods" accept a function that are run against each

The post Level up your .filter game appeared first on CSS-Tricks.


GatsbyJS: Static Site Generator for React

Gatsby is a static site generator for React and allows web developers to create a static HTML file. Thus it provides fast initial load times and makes dealing with SEO much simpler. The user-side experience is very comfortable when JavaScript is enabled, and you don’t lose any content or navigation while having disabled JavaScript. By adding a single plugin, Gatsby can provide offline support as well, transforming your site into a Progressive Web Application. The Purpose and Background of GatsbyJS Gatsby allows web developers to create static HTML files for every single page. Right after loading the page, Gatsby will boot up React and enable the user to navigate through the website just like a single page app. 


Create and Publish Web Components With Vue CLI 3

Are web components “the future" for the web platform? There are many opinions both for and against. What is a fact, though, is that browser support is emerging for web components and there are a growing number of tools and resources for authors interested in creating and publishing web components of their own.
A great tool for creating web components is Vue.js, and it’s been made even easier with the release of Vue CLI 3 and the new @vue/web-component-wrapper library.


Polyfill as Needed With Polyfill-Service

In last week’s newsletter “What is a polyfill?", I talked about a situation I came across with a white screen on IE10 (the app crashed because we were missing polyfills). I explained a bit of the difference between a polyfill and a code transform. I explained a few options you have at your disposal to use new JavaScript features and still support older browsers. In the conclusion I said this:

So what did I do to fix my IE10 bug? Well, one thing that really bugs me is that I have to ship all this code for polyfills to all browsers even if they do support these features. But a few years ago I heard of a service that was able to ship polyfills that are relevant only to the browser requesting them. I created my own endpoint that uses the module that powers that service and I’ll write about that next week!

That’s today’s article! I’ll explain how I created a polyfill.js endpoint that gives back a very aggressively cached JavaScript file with the polyfills that users need and no more.
Why polyfill-service?
With the way I have my usage of polyfill-service configured today, if I make a request for polyfill.js using Internet Explorer 10 (the lowest version of IE that we support), the response is 60.2kb! If you’re unfamiliar with the impact this can make, I suggest you read The Cost Of JavaScript by Addy Osmani (or watch a talk version here). To put this in terms you may appreciate, this will take users in emerging markets about a full second just to download, then you have to take the content they’ve downloaded and parse/compile/run it which can take even longer, especially for individuals using lower-end phones.


React Emoji Picker

When emojis first hit the web scene I rolled my eyes — they seemed like a lame communication method for giggling kids.  After years more experience working remotely, managing open source communities, and communicating with people that may not get my sense of humor, I’ve realized that emojis go a long way in representing the […]
The post React Emoji Picker appeared first on David Walsh Blog.


JavaScript’s Tilde: Its Real Use Is No Mystery

A while back I wrote an article titled “The Great Mystery of the Tilde" where I tried to explain what the ~ (tilde) operator did in JavaScript. When trying to demystify what it was, I ended up perpetuating a lot of misinformation. I’m here to fix that today.
Setting the Facts Straight
Normally, I don’t care too much about going back and updating old content, but my error was quite egregious. Not only that: that post is the second most view post I had last year, so if I’m going to have that much traffic going to it, then I need to fix it, so I’ve added a paragraph to that post directing visitors to this new post, so that I can prevent future misinformation from spreading.


The Cost of JavaScript in 2018

Even though we mentioned it earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript was still worth digging into a little more.
In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a budget to “Time-to-Interactive” measurements and auditing your JavaScript bundles.

Embrace performance budgets and learn to live within them. For mobile, aim for a JS budget …
The post The Cost of JavaScript in 2018 appeared first on CSS-Tricks.


Replace Repeated Characters with JavaScript

URLs can be tricky to work with because they can be more complicated than the traditional URL format you type in.  I was again reminded of this when I was parsing Webpack URLs when I saw this beauty: webpack-internal:///../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/ I parsed the URL with new URL(“….") but saw that the pathname included every leading slash: ///../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/ […]
The post Replace Repeated Characters with JavaScript appeared first on David Walsh Blog.