DEV Community: TechSnack - Technology Tutorials

The Evolution of Web Browsers: Unveiling the Magic Behind Their Functionality

TechSnack - Technology Tutorials — Sat, 07 Oct 2023 06:54:10 +0000

Introduction

In today's digital age, web browsers are our windows to the expansive online world. They seamlessly connect us to websites, deliver multimedia content, and enable online transactions. But how did these digital marvels come into existence, and what makes them work? In this article, we'll not only explore the inner workings of web browsers but also take a journey through their fascinating history.

The Birth of Web Browsing

Before we delve into the intricate details of how web browsers function, let's take a step back in time to the early days of the internet. The World Wide Web, created by Sir Tim Berners-Lee in 1989, marked the beginning of a revolutionary era. Initially, accessing web pages was a text-based affair using command-line interfaces. However, the need for a user-friendly way to navigate the web soon became apparent.

1990s: The Birth of Browsers

The early 1990s saw the emergence of the first web browsers. NCSA Mosaic, created by Marc Andreessen, was one of the pioneering browsers, introducing graphical interfaces for web navigation. It allowed users to view text and images on web pages, setting the stage for the web as we know it today.

1994: Netscape Navigator

Netscape Navigator, released in 1994, was a game-changer. It popularized the use of hypertext links, images, and multimedia content, making the web more visually appealing and interactive. Netscape's innovations laid the foundation for many web features we take for granted today.

1995: Internet Explorer

In response to Netscape's success, Microsoft launched Internet Explorer, leading to the first browser war. This competition resulted in rapid advancements in browser technology and improved support for emerging web standards.

2000s: The Browser Wars and the Rise of Mozilla Firefox

The early 2000s continued to see fierce competition between browsers, with Internet Explorer and Netscape battling for dominance. However, a significant turning point occurred when Mozilla Firefox was released in 2004. Firefox gained a reputation for being faster, more secure, and more compliant with web standards, sparking a new era of browser innovation.

Understanding the Modern Web Browser

Now that we've journeyed through the history of web browsers, let's explore how these browsers function today:

User Interface: The user interface (UI) provides the familiar address bar, tabs, buttons, and other elements. It's a far cry from the early days of text-based browsing, thanks to user-centric design principles.
Rendering Engine: The core of a modern browser, the rendering engine, interprets HTML, CSS, and JavaScript to render web pages accurately. Browsers like Chrome use Blink, Firefox employs Gecko, and Safari utilizes WebKit.
Networking: Browsers must connect to the internet to fetch web content. They use protocols like HTTP and HTTPS to request data from web servers.
Browser Engine: This component manages user interactions, such as clicking links and navigating the UI, instructing the rendering engine on what to display.
JavaScript Engine: JavaScript plays a pivotal role in web interactivity. Browsers are equipped with JavaScript engines (e.g., V8 in Chrome) to execute and process JavaScript code.

The Browsing Process

Here's how these elements come together to display web pages:

Step 1: Requesting a Web Page

When you enter a URL in the address bar and press Enter, the browser's networking component sends a request to the web server hosting the website.

Step 2: Receiving Data

The web server processes the request and sends back a response containing the web page's content, often written in HTML, CSS, and JavaScript.

Step 3: Rendering the Web Page

The rendering engine interprets the HTML, CSS, and JavaScript to create a Document Object Model (DOM) and a CSS Object Model (CSSOM). These models define the page's structure and styling. The rendering engine then combines them to create a Render Tree, which determines the layout and appearance of each element.

Step 4: Interactivity with JavaScript

If the web page includes JavaScript code, the browser's JavaScript engine executes it, enabling dynamic interactions like animations and form submissions.

Step 5: Continuous Updates

Web browsers continuously check for updates on the web page, ensuring smooth user experiences. When updates occur, the rendering engine repaints and reflows affected parts of the page.

Conclusion

Web browsers have come a long way since the early days of the internet, evolving into the sophisticated tools we rely on daily. By understanding their history and inner workings, we gain a deeper appreciation for the technology that makes the internet accessible and interactive. The next time you open your favorite browser, remember the journey it took to bring you the boundless world of the internet.

Stay tuned for the next article where we will exploring how the modern web browser works in-depth.

Resurrecting an open-source text based game? Seeking collaborators

TechSnack - Technology Tutorials — Wed, 30 Aug 2023 03:50:00 +0000

I have been interested in beginning a new project and figured this may be a good place to take the first step.

There are open-source projects from places like sourceforge that are built on outdated PHP packages that I would like to resurrect from the dead. Some of these games are what inspired me to get into web development such as solar-empire.net and LoTGD. I feel as though a great way to resurrect them would be to begin the discussion surrounding who would be willing to toss some spare time at a passion project, which open-source project to begin with and the stacks and packages that could be used to best achieve our end goal.

If any of you are familiar with the browser based games I mentioned above then you may have noticed that I am over the age of 30. Because of this fact, and a yearning to learn how these games were made, I began diving into web dev technologies over 20 years ago. Since then I have forged a path forward with my passion and have secured a job as a professional full stack developer. I also have nearly three years experience as a project manager in the industry. As such I feel as if I may be in a unique position to finally begin this project!

Please, understand that anybody who may wish to be involved will be volunteering their time unless we can crowd source funding or find a revenue stream out of this project. As such this is currently considered a passion project and would only serve to help you gain more experience, a project to put on your portfolio and the enjoyment of having been a part of restoring a part of Internet history.

If your interest has been piqued then feel free to comment here to begin the discussion. If this gains any sort of traction we will centralize our communications.

Thank you for reading this far ♥️

What is your favorite programming language and why?

TechSnack - Technology Tutorials — Wed, 30 Aug 2023 01:46:46 +0000

There are so many languages out there that enable us to create so many new things. So, I got curious what languages others may find to be the best tool for the job.

I'll start. I enjoy using JavaScript the most due to its versatility and what it allows front-end devs to produce. Let me know in the comments what you think!

What is a 'Lambda' function?

TechSnack - Technology Tutorials — Tue, 29 Aug 2023 06:05:48 +0000

Many of you may be familiar with the term Lambda function. Maybe you've heard somebody in the programming field use it. But, what is it truly and how can we most simply describe it? To begin answering this question we first need to understand the origin and usage of the term so that we may move past that aspect of the term and begin looking more closely at what this elusive term really means in the simplest terms possible.

Historical origin and usage:

To begin with let's touch on the origin of the term and its initial usage. Lambda Function is derived from a calculus term Lambda calculus (λ-calculus) and was used to describe a formal mathematical system, which simply put, requires three lambda terms and two reduction steps. Basically, it is a mathematical system consisting of:

A Lambda term or a parameter representing a mathematical or logical value
A Lambda abstraction or a specific function definition M
An application of function M to argument N

You may read more deeply on the entire subject at the Wiki link above if you wish. For those of us looking for a concise description let's move on.

Evolution of the term and modern usage

Moving beyond the days of the early 1900s a new form of function programming had become a more widely studied and understood field. Computer programming was now a tool that people could utilize to build upon the years of mathematical and electronical understandings. To spare you all the extensive history lesson I will briefly touch on a few major revolutions which led to the term we are discussing today.

Programmable electronic computers
Compilers
Low-level programming languages
High-level programming languages
Programming paradigms

As each of these burgeoning technologies were coming into being it brought with it years of mathematical principles which were now being utilized in a very new way. One of these principles was the functional programming paradigms whereby functional algorithms were used, as opposed to the object oriented programming paradigms, to write extendable, re-usable and efficient snippets of code.

One such type of function was the Anonymous Function. This particular type of function would simply be an unnamed function. Now, for the simple definition: A Lambda Function is an Anonymous function generally adhering to the principle constraints of the lambda calculus and written in a single line of code.

In summary a Lambda Function is a very simple concept whose name is a historical artifact which generally tends to overcomplicate and overshadow it's meaning. Not only is the lambda function a powerful tool but it also embodies the spirit of elegance and simplicity that all great mathematical concepts seem to have in common.

I would love to share some examples and common use cases of this concept in the future. If you have any questions or wish to report inaccurate information please leave a comment so that I may address them.

What I Learned | My First Client | Web Startup

TechSnack - Technology Tutorials — Sun, 26 Sep 2021 17:29:27 +0000

A little bit about me

My name is James and I have been doing full stack web development for since 2002. Mind you until recently this was only a hobby that I have only recently decided to turn into a career path. Now, that is not to say that I haven't been "keeping up with the code-ashions", throughout the years I have observed and kept up with the evolution of everything from HTML/CSS/JS/PHP/SQL to frameworks and tools like Node.JS and Bootstrap. I understand that this is most likely not the case for most of you, but don't worry. As long as you are adept at using a search engine and you have the drive to learn/implement new concepts you will be just fine! Anyway, let's get into it!

Services / Setting rate

Depending on your experience level you may be able to offer services from a wide range of possible services. You may also want to pay a contractor to do some of the things you cannot. I did this for Dev-ops work on my first project and I am glad I did. Some of the services I am able to offer are:

Web Design (Figma)
Web Development
Managed Hosting (contracted out)
Dev-ops (contracted out)

As far as setting a rate goes this is completely up to you. Do you want paid a lump sum on a per project basis? Would you rather charge based on an *hourly rate x project time estimate"? You can also have a mix of box which was ultimately the way I chose to go. We will cover this below.

Finding the first client / Being sought out

This is a notoriously hard step that I kinda lucked out on but I will explain how it worked for me so that you may be able to find your first client successfully.

Word-of-mouth is one of the great advertising tools out there. Even with most modern advancements this method is still regarded as one of the best! I know, asking for help is hard, but believe me you will regret no asking for help more often than you will for having asked for help. Now, how do we use this helpful method??? Family and friends, of course, by starting a conversation on social media we can ask the people we know whether they know anybody in need of our services. This is the method I chose and it worked out well for me. Within one day of reaching out for help I was talking to who I am now able to call my first client!

Just a small note, there is no one direct way to success at this stage, I have heard it said, "In order to be successful as a web agency startup you need to understand that luck plays a large roll but not as large a roll as drive, determination and willpower."

In the comments please let us know any other methods you have used. Was it successful? How are things going now?

Landing the project / Getting hired

It is important to keep in mind that once you have found a potential client, or they have found you, this is not a done deal just yet. Actually, it is at this stage is where a lot of soft skills come into play, and it seems the most important aspect of this stage (and many others) is effective communication. You may be communicating over DMs, email or in so many other ways. You should remain concise and professional at all times.

What should this conversation entail? Well, this is a highly variable situation and is not a cookie-cutter type thing. These conversations have an ebb-and-flow with some basic consistencies across many projects. Some of the information you will likely be asked for is as such:

How much experience do you have in _____?
What is your rate?
Do you offer ____?
Can you provide examples of other relevant projects?

NOTE: Sometimes you will find out that they have paid another agency to do work for them in the past. Sometimes this may mean that you are expected to re-work an old agency's shoddy work. In the case of my first client this was a near $1,000 site in which she had to remove due to copy-written materials that the other agency has used. This resulted in the need for a fresh build.

If the client seems interested after interviewing you then we can proceed.There are questions you will need answers for in order to offer up a proposal for the job:

Is this a fresh build or a redevelopment of an existing build?
What are the features they will be needing?
Do they need a design made or will they be providing one?
Will they need media/assets or will they be providing them?
Are they using a hosting/managed hosting platform?
Do they have a tech stack in mind?
Will they need managed hosting?
Do they own a domain name (or multiple)?
What is the time frame for release?

From these questions we can start to build a foundation from which to work from. I will use my first client as an example below:

Evaluating Work / Scoping out the project / Making a proposal

Once we have gathered the relevant information we can begin to look closer at the job itself. We will want to make sure that we can not only provide the services needed but that we can do it within the allotted time frame.

NOTE: You may need to outsource some of the work to contractor(s) or other agencies and this is perfectly fine. I had to employ the help of a dev-ops friend in order to deliver for my first client. Don't assume that because you know server-side or back-end programming that you also know how to configure servers.

To make sure that we are able to deliver the work we promise we must review the answers we get to this question and break it down into its constituent parts. In order to do this effectively I took the information I gathered and made the following Document:
Scope Document

You will notice how this document contains a layman explanation, a detailed list of technical jobs and a breakdown of price (per service). This ensures that we are being entirely transparent with our client as to our intentions.

Once completed and we are happy with the scope we should send this over to the potential client to review. Only once there is a mutually agreed upon scope will we begin the work!

What's next?

If you vetted everything appropriately you should be able to get to work on your first client's project!

Links

You can find my first client's website Here!

To employ us for your next web project:
Email: jamesromesberg@gmail.com
Phone: (814)485-1621

Understanding Progressive Web Apps: Delivering a Mobile Experience - HTML5 and JavaScript Service Workers in 2021

TechSnack - Technology Tutorials — Sun, 15 Aug 2021 08:05:19 +0000

What is a PWA?

A PWA (Progressive Web Application) is a type of app software delivered through the web. PWAs are built using common technologies such as HTML, CSS and JavaScript. They can be installed and function on any platform which uses a W3C compliant web browser on either desktop or mobile devices.
It is important to note that the browser will allow your web application to become a PWA only over a secure connection (using SSL encryption technology) or on localhost.

Who Can Install PWAs?

Support for PWAs are mostly focused around mobile browsers but there is limited support for some desktop browsers as well.

Support as of August 2021:

Mobile:

Nearly every mobile browser supports PWAs, with the exception of KaiOS

Desktop:

Chrome 39 & UP
Edge 79 & UP
IOS Safari/Chrome 11.3 & UP - Partial Support
Firefox - Deprecated as of January 2021

Screenshot from caniuse.com

Why Should I Develop PWAs?

Purpose:

PWAs allow us to offer web applications that can be installed onto any device and act indistinguishably from a native app.
By meeting certain criteria, your website or web application can easily be turned into a PWA as well.

Required Technologies:

HTML

CSS

JavaScript

NodeJS (optional package that we will be using here)

Benefits:

Application Store Registration

Offline Fallbacks

Network or Cache First Resource Fetching

Push Notifications

Background Sync

And More

It doesn't take much to get started!

Our File Structure

    -root/
      -index.html
      -manifest.json
      -service-worker.js
      -logo.[png, jpg, etc...]

index.html

Development can start with a basic HTML5 boilerplate.

HTML5 Boilerplate

    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TechSnack Simple PWA</title>
      </head>
      <body>
        <h1>Hello World!</h1>
      </body>
    <html>

manifest.json

In order for the user's device to know what to do with our web application, we are going to need to provide it some details. These details are fairly self explanatory.

We will leave the icons array empty for now. More on this shortly.

    {
      "name": "TechSnack Simple PWA",
      "short_name": "TechSnack",
      "start_url": "/?home=true",
      "icons": [],
      "theme_color": "#000000",
      "background_color": "#FFFFFF",
      "display": "fullscreen",
      "orientation": "portrait"
    }

With this information the user's device can:

Install our application

Apply a custom icon for launching the app

Display a custom splash screen on launch

Allow customization of the application window and behaviour

Mimic native application behaviour

Allow access to native features such as GPS and push notifications

Register our application with popular app stores

Linking manifest.json

Use the link tag to connect manifest.json to our app

    <head>

      ...

      <link rel="manifest" href="manifest.json">
    </head>

Node Packages (1 - optional)

pwa-asset-generator

As previously mentioned, the user's device will apply the custom icon for us. For it to do that we will need to supply at least one image for the device to reference.

What about multiple screen sizes or resolutions?

There are countless different mobile devices being used around the world today. To optimize the display of visual assets, each device prefers logos of a certain dimension.

pwa-asset-generator

You will need at least one image file of the following MIME types:

PNG
JPEG/JPG
SVG
WebP

Install

   $ npm install --global pwa-asset-generator

We will now want to run the package in our webroot directory.
The following snippet will do for our purposes.

npx pwa-asset-generator [path/to/logo] [path/to/output/dir] -i [path/to/index.html] -m [path/to/manifest.json] -f
The -f flag generates favicon image/meta tag

Execution - From webroot directory
   $ npx pwa-asset-generator logo.jpg logos -i index.html -m manifest.json -f

It is worth noting that if you execute pwa-asset-generator without using the -i, -m and -f flags the results will be output to your console instead.

Copy and paste the results into the icons array within manifest.json

Copy and paste the output into the head tag of index.html

New `icons/` directory

Contains all of the generated images.

Updated `index.html`

Our index.html file should look like this now:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <link rel="apple-touch-icon" href="icons/apple-icon-180.png">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
    <link rel="apple-touch-startup-image" href="icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

    <title>TechSnack | Simple PWA</title>
    <link id="favicon" rel="sortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Final `manifest.json`

Our manifest.json file should look like this now:

    {
      "name": "TechSnack Simple PWA",
      "short_name": "TechSnack",
      "start_url": "/?home=true",
      "icons": [
        {
          "src": "icons/manifest-icon-192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "maskable any"
        },
        {
          "src": "icons/manifest-icon-512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "maskable any"
        }
      ],
      "theme_color": "#000000",
      "background_color": "#FFFFFF",
      "display": "fullscreen",
      "orientation": "portrait"
    }

Service Worker

Before our PWA can do all of the fancy things previously mentioned we must first create a service worker.

A service worker is a listener script the browser runs in the background. The service worker runs separately from the webpage allowing for the implementation of features that do not require interaction or calls from the webpage or user.
Service Workers may support features such as periodic sync or geofencing in the future.
NOTE: Although service workers are a JavaScript file, there are additional limitations imposed when coding. You may not have access to the DOM through a service worker.

Lifecycle of a Service Worker

There are multiple functions/features that you would normally have to build out around A Service Workers Lifecycle.
We will be using an API called workbox to avoid worrying about configuring what is under the hood.

`workbox` API

For our service worker, we are going to employ the use of an API called workbox. This API offers baked-in features that would require multiple articles to describe on its own.
If you are interested in digging into the nitty gritty you can read about A Service Workers Lifecycle.

ImportScript

Inside of service-worker.js we will import the workbox API
   importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');

Registering Routes

A service worker can intercept network requests from a page. It may respond to the page with cached content or generated content

Screenshot from Google Dev

Note: (From Above)

The method is GET by default.
To change this it must be specified.

The order of route registration is important when multiple workers are available to handle a request.
Whichever worker has been created first will take priority in handling a given request.

`service-worker.js`

We can now add the following code within service-worker.js:


    ...

    workbox.routing.registerRoute(
      ({request}) => request.destination === 'image',
      new workbox.strategies.CacheFirst() //to search cache first
      //new workbox.strategies.NetworkFirst() //to search server first
);

That's it! The above code will:

RegisterRoute with workbox

Intercept all 'image' files at the page's request

Here we choose our strategies. Would we like to serve to our page from CacheFirst or NetworkFirst? This we will decide by whether the specific resource(s) we are interested in is static or dynamic.

If they are generally static to the page our user lands on then we will want to serve them from cache.
However, if they are dynamically generated by some sort of back-end then we would want to largely get that file from the network.

Final `service-worker.js`


    importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');

    workbox.routing.registerRoute(
      ({request}) => request.destination === 'image',
      new workbox.strategies.CacheFirst() //to search cache first
      //new workbox.strategies.NetworkFirst() //to search server first
);

Linking `service-worker.js`

Now that we have our service worker in place and intercepting requests for image files, we can link our script within index.html

    <body>

      ...

      <script>
        if('serviceWorker' in navigator){
        navigator.serviceWorker.register('/service-worker.js');
      }
      </script>
    </body>

Its that simple to register our service worker!

Putting it all together

We can finally take a look at the final code base for our PWA project.

Our File Structure:

`index.html`

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="theme-color" content="#000000">
        <link rel="apple-touch-icon" href="icons/apple-icon-180.png">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

        <title>TechSnack | Simple PWA</title>
        <link id="favicon" rel="sortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="manifest" href="manifest.json">
      </head>
      <body>
        <h1>Hello World!</h1>

        <script>
          if('serviceWorker' in navigator){
            navigator.serviceWorker.register('/service-worker.js');
          }
        </script>
      </body>
    </html>

`manifest.json`

    {
      "name": "TechSnack Simple PWA",
      "short_name": "TechSnack",
      "start_url": "/?home=true",
      "icons": [
        {
          "src": "icons/manifest-icon-192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "maskable any"
        },
        {
          "src": "icons/manifest-icon-512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "maskable any"
        }
      ],
      "theme_color": "#000000",
      "background_color": "#FFFFFF",
      "display": "fullscreen",
      "orientation": "portrait"
    }

`service-worker.js`

    importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js');

    workbox.routing.registerRoute(
      ({request}) => request.destination === 'image',
      new workbox.strategies.CacheFirst() //to search cache first
    );

Serving Our Page

We can now view our page in the browser.

For localhost run npx serve in the webroot directory.
Then you can visit your securely served remote ip or domain
Please keep in mind the browser support for your device

There is a new icon in our address bar!

The browser requires a user action to install the PWA
The User can click this icon to see the prompt

Now you can click on the icon installed on the device's homepage

Summarization of PWA Development

As you can see it is super easy to create a web application that can mimic the same functions as a native app. In future articles we will delve into each feature that we will now have access to with this powerful piece of technology.

Help TechSnack Write Concise Content:

Leave us a comment with your thoughts on the article below. Whether you liked or disliked the article, all feedback will help me to know how to better create content that meets your needs, goals and aspirations.

Sharing the article on your social platforms would also be a great help!

Follow TechSnack on Twitter

Join the conversation at r/TechSnack

Pure CSS Flex Box Responsive Design - No Media Queries

TechSnack - Technology Tutorials — Thu, 12 Aug 2021 20:57:01 +0000

Responsive Design Doesn't Have To Be Hard

With Flex Box we can easily make our webpage act as a responsive container without media queries!

To start with we are going to quickly create a file with the following HTML inside of it



    <div class="viewport flex-parent flex-col">
        <div class="nav flex-parent space-around">
            <div class="box-1"></div>
            <div class="box-2"></div>
            <div class="box-3"></div>
        </div>
        <div class="content flex-parent">
            <div class="sidebar-left"></div>
            <div class="main-area"></div>
            <div class="sidebar-right"></div>
        </div>
        <div class="footer flex-parent space-evenly">
            <div class="box-4"></div>
            <div class="box-5"></div>
            <div class="box-6"></div>
        </div>
    </div>

...and this is it for the HTML. That's our entire page!

Now the CSS

At this point the page is blank. We will fix that by styling it right now.

`*` CSS RESET

The first thing we will do is a basic reset to all of the elements in the document. This will set everything to border-box sizing and remove all margins and padding.



    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

`.viewport`

We can now create the viewport class. We want this element to take up all available space within the device's screen.
Just to emphasize where the viewport is we will also give it a large black border (this is not necessary when you have inner content or other elements to display)



    .viewport{
        min-height: 100vh;
        min-width: 100%;
        border: 5px solid black;
    }

Next we can make our viewport class responsive with the following class. .viewport is now a Flex Box container!



    .flex-parent{
        display: flex;
    }

By default Flex Box containers display vertically but we would like our viewport flex-parent element to display horizontally. We can achieve this with the following flex property.



    .flex-col{
        flex-direction: column;
    }

That's it for the flex box container.

Now we can begin creating the flex children.

`.nav`

The first child element will be .nav This is our general header area. Let's make the width 100% of the container's width and the height 20vh.



    .nav{
        min-width: 100%;
        min-height: 20vh;
        border: 5px dashed blue;
    }

Since we want to place elements inside of .nav we will give it the class .flex-parent and we will also demonstrate a key aspect of Flex Box here.

The `justify-content` flex property

Empty space is crucial. If you have ever attempted to position something with pure CSS without the use of Flex Box or CSS Grids then you know how difficult this is to get right. Luckily, Flex Box has a property called justify-content that can do this for us in various ways.

`.space-around`

We are going use the following code to place the white space around each element.



    .space-around{
        justify-content: space-around;
    }

`.space-evenly`

and while we are here we will make another class for later except using space-evenly which works similarly to space-around with one major difference. With space-evenly the white on the left of the furthest and the right of the furthest right elements will also be part of the spacing distribution!



    .space-evenly{
        justify-content: space-evenly;
    }

The justify-content property deals with our main axis. Which in this case is the x axis or horizontal axis. this would act differently if this had a class of .flex-col. Go ahead and try it out!

`.nav` inner elements

Now we can go worry about the elements within .nav

I want to be able to easily change the value of one element without affecting another. For this we will create a different class for each element. This is not entirely necessary but will save stress down the road.



    .box-1{
        min-width: 20vw;
        background-color: yellow;
    }

    .box-2{
        min-width: 20vw;
        background-color: purple;
    }

    .box-3{
        min-width: 20vw;
        background-color: red;
    }

Take a look! The content does not overflow from the page and everything inside of .nav scales with the screen size!

We can now style the rest of our elements!

First we will place .content and .footer onto the page

`.content`



<span class="nc">.content</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="nl">min-height</span><span class="p">:</span> <span class="m">80vh</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">dashed</span> <span class="no">orange</span><span class="p">;</span>
<span class="p">}</span>

`.footer`



<span class="nc">.footer</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="nl">min-height</span><span class="p">:</span> <span class="m">20vh</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">solid</span> <span class="no">cyan</span><span class="p">;</span>
<span class="p">}</span>

`.content` inner elements

`.sidebar-left`



<span class="nc">.sidebar-left</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">20%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">teal</span><span class="p">;</span>
<span class="p">}</span>

`.main-area`



<span class="nc">.main-area</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">60%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">green</span><span class="p">;</span>
<span class="p">}</span>

`.sidebar-right`



<span class="nc">.sidebar-right</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">20%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">blue</span><span class="p">;</span>
<span class="p">}</span>

`.footer` inner elements



<span class="nc">.box-4</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">15%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">pink</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.box-5</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">30%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">maroon</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.box-6</span><span class="p">{</span>
    <span class="nl">min-width</span><span class="p">:</span> <span class="m">20%</span><span class="p">;</span>
    <span class="nl">background</span><span class="p">:</span> <span class="no">black</span><span class="p">;</span>
<span class="p">}</span>

The Results

Desktop

Tablet

Mobile

Final Thoughts

If you made it this far thank you! I hope you have a better understanding of what Flex Box is and how it can better help us make responsive designs easily without stressing too much.

This was a bonus article today. Stay tuned for an Intro to Version Control later!

Help TechSnack Write Concise Content:

Sharing the article on your social platforms would also be a great help!

Follow TechSnack on Twitter

Join the conversation at r/TechSnack

DEV Community: TechSnack - Technology Tutorials

The Evolution of Web Browsers: Unveiling the Magic Behind Their Functionality

Introduction

The Birth of Web Browsing

1990s: The Birth of Browsers

1994: Netscape Navigator

1995: Internet Explorer

2000s: The Browser Wars and the Rise of Mozilla Firefox

Understanding the Modern Web Browser

The Browsing Process

Step 1: Requesting a Web Page

Step 2: Receiving Data

Step 3: Rendering the Web Page

Step 4: Interactivity with JavaScript

Step 5: Continuous Updates

Conclusion

Resurrecting an open-source text based game? *Seeking collaborators*

What is your favorite programming language and why?

What is a 'Lambda' function?

What I Learned | My First Client | Web Startup

A little bit about me

Services / Setting rate

Finding the first client / Being sought out

Landing the project / Getting hired

Evaluating Work / Scoping out the project / Making a proposal

What's next?

Links

Understanding Progressive Web Apps: Delivering a Mobile Experience - HTML5 and JavaScript Service Workers in 2021

What is a PWA?

Who Can Install PWAs?

Support as of August 2021:

Mobile:

Desktop:

Why Should I Develop PWAs?

Purpose:

Required Technologies:

Benefits:

It doesn't take much to get started!

Our File Structure

index.html

HTML5 Boilerplate

manifest.json

Linking manifest.json

Node Packages (1 - optional)

What about multiple screen sizes or resolutions?

pwa-asset-generator

Install

Execution - From webroot directory

New icons/ directory

Updated index.html

Final manifest.json

Service Worker

Lifecycle of a Service Worker

workbox API

ImportScript

Registering Routes

service-worker.js

Final service-worker.js

Linking service-worker.js

Putting it all together

Our File Structure:

index.html

manifest.json

service-worker.js

Serving Our Page

Summarization of PWA Development

Help TechSnack Write Concise Content:

Pure CSS Flex Box Responsive Design - No Media Queries

Responsive Design Doesn't Have To Be Hard

With Flex Box we can easily make our webpage act as a responsive container without media queries!

Now the CSS

* CSS RESET

.viewport

That's it for the flex box container.

Now we can begin creating the flex children.

.nav

The justify-content flex property

.space-around

.space-evenly

.nav inner elements

Resurrecting an open-source text based game? Seeking collaborators

Execution - From `webroot` directory

New `icons/` directory

Updated `index.html`

Final `manifest.json`

`workbox` API

`ImportScript`

`service-worker.js`

Final `service-worker.js`

Linking `service-worker.js`

`index.html`

`manifest.json`

`service-worker.js`

`*` CSS RESET

`.viewport`

`.nav`

The `justify-content` flex property

`.space-around`

`.space-evenly`

`.nav` inner elements

`.content`

`.footer`

`.content` inner elements

`.sidebar-left`

`.main-area`

`.sidebar-right`

`.footer` inner elements