Internationalization is the term used for making a website suitable for multiple locales (i.e. one or more places and/or languages).
Internationalization is oftentimes shortened to i18n as it starts with an “i”, ends with an “n” and there are 18 other characters in between. Developers just love their abbreviations, don’t they?
A good internationalization framework should provide a decent DX (developer experience) without taking up a lot of implementation time.
The library this article presents is called React Intl. With more than 800,000 monthly downloads it’s one of the most used tools for internationalization in the world of React.
React Intl can do a lot more than just choosing messages/strings based on the locale. It can also format numbers and dates based on it! In this article, however, only the messages aspect of it is covered as this is what most people are mainly looking for. …
Displaying a PDF in a web app should be quite straight forward.
It is, in most cases.
The majority of web browser do support displaying PDFs natively, without the need for a third party library. However, the behaviour would not always be consistent.
Let’s first see some ways you could display a PDF in your web app, and then showcase best technique, Mozilla’s PDF.js, in the context of a React application.
<embed> tag works on all major desktop browsers, but it just fails on mobile. If that still suits your needs, here you go:
You do not have to code 13 hours a day.
You do not have to be up to date with the latest libraries and frameworks.
You do not have to write top libraries.
You do not have to build 3 side projects in parallel.
You do not have to be accepted at Facebook, Amazon, Google or your local hyped company.
You do not have to be a specialist in Frontend, Backend, Machine Learning, Augmented Reality whilst knowing your way through AWS, and oh, let’s not forget, also work on your Flutter and React Native side projects in the evenings!
You don’t have to…
The easiest way to embed an image in a web page is by using the classic
<img> HTML tag:
The latest trend, and rightfully so, is to pre-render pages at build time instead of rendering them on the client or on the server (via Server Side Rendering), to achieve a blazing fast experience.
It is generally a good idea to pre-render a website/a page (i.e. use Static Site Generation) which does not have a lot of dynamic content that should be different for every user.
Dynamic content is meant by data that has to be fetched from an external API, such as third party service or database.
A blog or a portfolio is a great example. …
After a couple of months playing around with AWS and developing web applications with it, I would like to describe the top services I found myself using the most.
This article is, for sure, not a detailed guide of AWS services, as it is intended to be an introductory article about the world of AWS, written by a full stack developer for all the rest of the full stack engineers out there 🌎.
This list can and should be considered subjective. However, if you’re in the web development industry, chances are high that you will use most of the below Amazon Services. So, let’s get to it! …
Recently the developers from Chrome posted an article about introducing a brand new label for high performance websites, which aims to help users find the pages which offer a “high quality user experience on the web”:
“To help users identify great experiences as they browse, we are excited to announce that Chrome will begin to highlight high quality user experiences on the web, starting with the labelling of fast links…” — Chromium blog
Chrome will start rolling out this feature in v85 for Android, however, it should be expected to reach desktop browsers soon enough.
React Suspense is part of a new suite of features from React. It basically lets you suspend the rendering of a component until a certain condition is met.
React Suspense goes hand-in-hand with the scary sounding Concurrent Mode. In this article we are not going to talk about that one, as it is still in its infancy and not yet stable.
However, you could start using React Suspense for one huge thing already: lazy loading components via code splitting 🎉.
Chances are that you’ve bootstrapped your React application via create-react-app, Gatsby, Next.js or used a template. …
Working in web development is interesting and many times quite challenging.
We must integrate our applications with many external services. Most probably one of the things you must do when working on a frontend application is calling a backend service to fetch some data (by sending an HTTP request).
Axios, being an HTTP client library, helps you with just that: sending HTTP requests and managing the responses 🔥.
In the beginning of times (well, actually, in the beginning of web development) there was only the synchronous request-response model.
Whenever you accessed a link (a URL), an HTTP request was sent to the server (via your browser), which returned an HTML document with all the content that the user would see, until he/she navigated to another web page. …