README.md

Setup Chrome extension

Visit chrome://extensions in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox: The menu's icon is three horizontal bars. and select Extensions under the More Tools menu to get to the same place).

Ensure that the Developer mode checkbox in the top right-hand corner is checked.

VS Code can launch and attach the debugger across multiple processes. This is called a "Compound Launch Configuration". This is useful when dealing with a front-end heavy application that contains both a server comonent and some sort of built-in development server (such as Webpack) which is handling live-reloads.

This video uses the following launch configuration to debug both an application that has both server (Express) and front-end (React) components and uses the following launch configuration (launch.json).

Almost any website you visit today is protected by HTTPS. If yours isn’t yet, it should be. Securing your server with HTTPS also means that you can’t send requests to this server from one that isn’t protected by HTTPS. This poses a problem for developers who use a local development environment because all of them run on http://localhost out-of-the-box.

At the startup I’m a part of, we decided to secure our AWS Elastic Load Balancer endpoints with HTTPS as part of a move to enhance security. I ran into a situation where my local development environment’s requests to the server started getting rejected.

It's kind of a phenomenon. Let's get one thing out of the way: it still involves servers, so that word serverless might feel a bit disingenuous. It's actually a new way to pay for and work with servers that, in many cases, is cheaper and easier than buying and managing your own servers.

Web developers of all kinds can take advantage of it, but this site is particularly interested in how it relates to and helps front-end web developers. Here's one way to think about it: you can take your front-end skills and do things that typically only a back-end can do. You can write a JavaScript function that you run and receive a response from by hitting a URL. That's sometimes also called

In this article, we are going to go out of the scroll darkness and talk about the modern way of lazy-loading resources. Not just lazy-loading images, but loading any asset for that matter. More so, the technique we are going to talk about today is capable of much more than just lazy-loading assets: We will be able to provide any type of deferred functionality based on the elements’ visibility to users.

Ladies and gentlemen, let’s talk about the Intersection Observer API. But before we begin, let’s take a look at the modern tools’ landscape that led us to IntersectionObserver.

2017 was a very good year for tools built into our browsers, helping us to improve the quality as well as the style of our code-base without too much effort. These days, the web seems to be moving away from sporadic solutions based on

Regardless of your developer background, it’s inevitable you’ve heard the term Serverless in the past year. The word has been buzzing around in my ears for longer than I dare say. For too long have I been putting off looking into it in more detail. Well here goes nothing.

You can access paths just like you can link to parts of a website. For example, to get a list of all posts tagged under “JavaScript” on Smashing Magazine, you navigate to https://www.smashingmagazine.com/tag/javascript/. https://www.smashingmagazine.com/ is the root-endpoint and /tag/javascript is the path.

To understand what paths are available to you, you need to look through the API documentation. For example, let’s say you want to get a list of repositories by a certain user through Github’s API. The docs tells you to use the the following path to do so:

/users/:username/repos

Any colons (:) on a path denotes a variable. You should replace these values with actual values of when you send your request. In this case, you should replace

Getting Ready: Planning And Metrics

Micro-optimizations are great for keeping performance on track, but it's critical to have clearly defined targets in mind — measurable goals that would influence any decisions made throughout the process. There are a couple of different models, and the ones discussed below are quite opinionated — just make sure to set your own priorities early on.

Establish a performance culture.In many organizations, front-end developers know exactly what common underlying problems are and what loading patterns should be used to fix them. However, as long as there is no alignment between dev/design and marketing teams, performance isn't going to sustain long-term. Study common complaints coming into customer service and see how improving performance can help relieve some of these common problems.

First of all, I recommend reading the old series if you're not familiar with this project. If you don't want to read all of that, no worries! I got you covered!

Now that that's out of the way, let us begin.

Last year I started implementing Nexus.js, a multi-threaded server-side JavaScript run-time based on WebKit/JavaScriptCore. I dropped it for a while, due to circumstances out of my control that I'm not going to discuss here, but here we are again: I couldn't keep myself from working on it for long.

So let us start by discussing the architecture of Nexus and how things work:

One of the first things you learn when you start programming is that, just like any craftsperson, your tools matter. Notepad.exe isn’t going to cut it. A powerful editor and testing pipeline supercharge your productivity. I still remember learning to use Vim for the first time and being able to zip around systems and complex programs. Do you remember how hard it was to setup all your compilers and dependencies on a new machine? How many cycles have you wasted matching versions, tinkering with configs, and then writing documentation to onboard a new developer to a project?

I like React as a templating engine, not only on the client side but on the server as well. Over the last year or two rendering templates with React.js on the server has become commonplace. Services from rather static content driven sites to Universal JavaScript Applications built on frameworks like Next.js are serving dynamic of server side rendered views using React.

While I like the concept of the guarantees of structure and validity, I do recognise that there’s a lot of overhead in how it works for constructing just a single view server side. This is why I decided to examine just how much overhead there is compared to more traditional templating engines that work on strings and don’t guarantee structure of the generated HTML markup.

The Web Platform is doing amazing! We have a multi-language, standardized Virtual Machine with a graphical layer running on virtually every device. If you want to share your things with an audience, there’s nothing with a wider reach!

However, building the Web is by no means simple. There’s a lot that’s possible, which means there’s a lot to learn. But that shouldn’t prevent it from being easy to build things.

And that’s where Bankai comes in. We wanted to have a tool that makes it easy to build things for the web. And as the Web evolves, it figures out how to apply the latest optimizations to your project. You shouldn’t need to be an expert to do the right thing.

There are 3 main factors that make GraphQL stand out from all other API technologies:

Now, let’s take a look at three aspects of data fetching that people frequently ask about, and how GraphQL improves each of them by taking advantage of the properties above.

Note that while a lot of the functionality I’m going to talk about below is something you can do today, some of it is aspirational for the future. If this stuff is as exciting for you as it is for me, scroll to the bottom to get involved.

One of the first things people always ask about is — how do I do cross-request caching with my GraphQL API? There are some issues that come up when trying to apply regular HTTP caching to GraphQL:

This is post # 5 of the series dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a lightweight JavaScript application that has to be robust and highly-performant in order to stay competitive.

If you missed the previous chapters, you can find them here:

This time we’ll dive into the world of communication protocols, mapping and discussing their attributes and building parts on the way. We’ll offer a quick comparison of WebSockets and HTTP/2. At the end, we share some ideas on how to choose which way to go when it comes to network protocols.

When it comes to building and maintaining a website, one has to take a ton of things into consideration. However, in an era when people want to see results fast, while at the same time knowing that their information online is secure, all webmasters should strive for a couple of things:

Improving the performance of their website,

Increasing their website’s security.

Both of these goals are vital in order to run a successful website.

So, we’ve put together a list of five technologies you should consider implementing to improve both the performance and security of your website. Here’s a quick overview of the topics we’ll cover:

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks.

What are Micro Frontends?

The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith

Creating software does not end with writing good code. It gets completed when the software is deployed and able to handle the requests properly and when we can scale without hindering the performance and the cost of running it.

You’re probably thinking about how you have cloud computing to take care of all these things. “So what is this new serverless thing, Vignes?”

Serverless computing is an architecture style in which the code is executed in a cloud platform where we don’t need to worry about the hardware and software setup, security, performance, and CPU idle time costs. It’s an advancement of cloud computing that goes beyond infrastructure that abstracts the software environment as well. It means no configuration is required to run the code.

Matteo has many years’ experience in the software industry and is a well-known figure in the global Node.js, Internet of Things and open source software communities. He first started working with Node.js in 2010, and, to date, has released dozens of Node.js modules. He is also co-author of the book JavaScript: Best Practices (FAG Milan, 2013) .

We could all use a little levity in the IT world (especially if you lived in the path of Hurricane Harvey).

Aurich / Getty

HOUSTON—I had enough to worry about as Hurricane Harvey plowed into the Texas Gulf Coast on the night of August 25 and delivered a category 4 punch to the nearby city of Rockport. But I simultaneously faced a different kind of storm: an unexpected surge of traffic hitting the Space City Weather Web server. This was the first of what would turn into several very long and restless nights.

Space City Weather is a Houston-area weather blog and forecasting site run by my coworker

This diagram shows the percentages of websites using various web servers broken down by ranking. Cross-technology reports only include technologies with more than 1% usage to ensure statistical significance of the results. See technologies overview for explanations on the methodologies used in the surveys.

How to read the diagram: Apache is used by 49.0% of all the websites whose web server we know.Apache is used by 41.4% of all the websites whose web server we know and that rank in the top 1,000,000.

Node.js 8.4.0 just arrived with the experimental support of HTTP/2, which you can enable by using the --expose-http2 flag.

In this blog post, we will introduce the most important aspects of HTTP/2 Server Push and create a small Node.js app that gains benefit from using it.

About HTTP/2

The primary goals for HTTP/2 are to reduce latency by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields, and add support for request prioritization and server push.

For expert-led online Angular training courses you can’t go past Ultimate Angular by Todd Motto. Try his courses here, and use the code SITEPOINT to get 25% off and to help support SitePoint.

The MEAN stack comprises of advanced technologies used to develop both the server-side and the client-side of a web application in a JavaScript environment. The components of the MEAN stack include the MongoDB database, Express.js (a web framework), Angular (a front-end framework), and the Node.js runtime environment. Taking control of the MEAN stack and familiarizing different JavaScript technologies during the process will help you in becoming a full-stack JavaScript developer.

Last year and at the beginning of this year, we asked you, Node.js users, to help us understand where, how and why you are using Node.js. We wanted to see what technologies you are using alongside Node.js, how you are learning Node.js, what Node.js versions you are using, and how these answers differ across the globe.

Thank you to all who participated.

1,405 people from around the world (85+ countries) completed the survey, which was available in English and Mandarin. 67% of respondents were developers, 28% held managerial titles, and 5% listed their position as “other.” Geographic representation of the survey covered: 35% United States and Canada, 41% EMEA, 19% APAC, and 6% Latin and South America.

Machine Learning (ML) and Artificial Intelligence are becoming ubiquitous in websites, chatbots and mobile apps. While Node.js may not be the language of choice for building and training ML models, it is an excellent option for building the user-facing server layer that brings ML product to life.

In this talk learn about the ways that Node and ML can work together, whether it’s through running ML models in the browser (using WebAssembly and WebGPU) or writing a node server for an ML chatbot.

We’ll show you how to take a pre-trained ML model built on any library (e.g. TensorFlow, Torch) and any language (python, lua), and build and deploy a node server for a Facebook messenger bot that interfaces with the model.