DEV Community: Francesco Leardini

Pushing the Boundaries of Web Apps: Exploring Advanced Features and Hardware Integration

Francesco Leardini — Wed, 26 Jun 2024 08:54:28 +0000

Today, web applications seamlessly integrate with external services, and can directly interact with a device's hardware to deliver dynamic, more advanced experiences. At the heart of this revolution lies a powerful tool: the Web Application Programming Interfaces, or Web APIs.

There are plenty of APIs we can use in our web projects, some are well-established and supported by many browsers, while others are still in an experimental phase and supported only by a subset of browsers (typically Chrome and Edge).

This article delves into a selection of web APIs, showcasing their diverse functionalities and the transformative impact they can have on web application development.

1. Device Orientation API

Smartphones, and other mobile devices, are equipped with built-in sensors that track their position in space.

With the DeviceOrientationEvent we can detect when a user tilts or rotates the device and create features triggered by these patterns. When the device's accelerometer senses a change in orientation, this event fires, providing us with the data to react accordingly.

There are three orientations we can listen to:

For instance, the native app of Revolut allows you to toggle on/off the credit card details by moving the device forward and backward. Similarly, web applications can now explore alternative interaction methods beyond traditional UI elements, generating increased interest and engagement.

2. Page Visibility API

Designed to enhance web application responsiveness, the Page Visibility API equips developers with tools to track a page's visibility. It provides events for detecting visibility changes and properties for retrieving the current state, allowing for optimized resource management and user experience adjustments.

While not the newest API, the Page Visibility API remains remarkably underutilized despite its potential to effortlessly optimize application resource usage.

In the screenshots above the tab's title changes when the API detects that the content is not visible anymore (play/pause values are displayed accordingly).

Imagine a scenario where a client continuously polls the server for fresh data.
With the Page Visibility API, we can automatically pause these requests when the user minimizes the browser or switches tabs, resuming them only when the page regains focus. This is particularly valuable in situations demanding bandwidth and data transfer optimization or when we want to stop mandatory video advertisements when the tab is not in focus.

3. Ambient Light (Sensors API)

The AmbientLightSensor interface empowers information the hosting device captures regarding the surrounding area's light level. The amount of light detected is provided in terms of luminance value (an integer), and developers can implement any logic around this information.

We can implement environmentally responsive web solutions, allowing applications to react to their surroundings. With the Ambient Light interface, we can design applications that adjust their user interface (UI) elements dynamically. It ensures a comfortable viewing experience for users in different lighting conditions, whether they're basking in bright sunlight or relaxing in a dimly lit room.

Context-aware APIs have already been available for mobile apps for a long time, this is exactly what native apps like Google Maps offer, switching to dark mode while we drive through a gallery or use the app at night. But we can now provide this feature to our web users too.

Live Demo

Here is the live demo to some of the APIs described in the article and new ones. Each section covers a separate use case and can be tested with a mobile or desktop device (not all APIs are cross-compatible).

Github repo (if you like it, leave a ⭐️ )

Conclusion

While each Web API offers individual benefits, their combined potential is truly transformative. With careful design and creativity, web developers can craft web solutions that rival the functionality and user experience of native Android and iOS apps.

To exemplify a personal experience, the native camera app on my Android phone lacks a self-shot feature.
Instead of downloading a third-party solution, I built a web project using the Media Capture and Streams API to access the camera. Here's where I needed to inject some creativity: I combined the camera API with a predefined motion pattern from the Device Orientation API to trigger the camera shutter. By rotating the device forward and then backward a three-second timer is triggered before taking the shot. This allows for a more comfortable self-portrait experience compared to a traditional on-screen button press.
Once captured, the Share API lets users seamlessly share the photo through their preferred native apps like WhatsApp, Gmail, or Twitter.

How Progressive Web Apps Can Benefit our Business

Francesco Leardini — Fri, 14 Jun 2024 10:43:38 +0000

In an increasingly mobile-first world, optimizing the time to access our content and the user experience for our users can be the success of our business.
However, native mobile apps can be expensive to develop, require downloads from app stores, and take up valuable storage space on phones. This is where Progressive Web Apps (PWAs) shine - offering a powerful and user-friendly alternative.

This article cuts through the technical jargon to focus on the big picture.

Do you wish to learn all the secrets behind PWAs?
Check my PWA course teaching you in detail how to develop and optimize PWAs with ease.

What are Progressive Web Apps (PWAs)?

A PWA is a web application that, thanks to modern technologies, can provide extended and rich features to users.

Below is a screenshot of the Twitter/X native app for Android and its PWA version. Once a PWA is installed on a device, it is almost impossible to distinguish it from a native app.

One of the goals of Progressive Web Apps is exactly to combine the accessibility and discoverability of a website with the functionality and user experience (UX) of a native app. Our customers can access the PWA directly from their web browser, without any download required from an app store.

PWAs Core Parts

Two key components can make PWAs installable and working offline: the web manifest file and service workers.

Web Manifest

A web manifest file can be seen as a blueprint for our PWA.

It instructs the browser agent that our PWA can be installed on the home screen, just like a native app. An install banner (named A2HS - Add To Home Screen) is automatically displayed on the user's device. It also specifies essential visual details like the app's name, icon, and if we want to display the application in portrait (vertical) or landscape (horizontal) mode. The latter is the preferred option for media-rich content or web games.

Thanks to the display property of the manifest file we can instruct whether the browser's UI elements (e.g. URL address bar) should be rendered or less.

Three main values are possible (in the pictures below from left to right respectively):

browser (default mobile experience)
standalone
fullscreen

As we can see, with these properties it is possible to remove some UI elements of the browser or even use the whole device's viewport. All these aspects help to create a familiar and app-like feel.

Service Workers

Let's delve into the engine that powers offline functionality and allows for drastic performance improvements – service workers (SW). These are essentially scripts that run in the background, separate from your PWA's main thread, and can offload our application from heavy tasks.

They act as intermediaries between the app and the network, offering several advantages:

Caching: Service workers can intelligently cache essential static resources like HTML pages, JS or CSS files, and HTTP responses as well. This means that when a user visits our PWA, even without an internet connection, the cached resources can be used to deliver a functional, albeit potentially limited, experience.

Improved Performance: This aspect relates tightly to the previous point. Responses from the local cache are provided almost instantaneously since no network roundtrip is needed. We can implement multiple caching strategies to cover wide scenarios and ensure that, if needed, the provided cached data is not stale but in an up-to-date state.

Push Notifications: SW enables push notifications, a powerful tool for keeping users engaged. Web notifications were for a long time precluded to iOS devices, but since v16.4 are now available for Apple users as well).
Even when the PWA is not actively running, service workers can receive and display notifications, prompting users to revisit your app. This is possible because Service workers run in the background and, therefore do not require the user to be actively on the PWA to perform actions.

Background Syncing: This web API allows to register actions (sync tags) that, in case the user does not have a valid internet connection, will be kept on hold for later execution.
Once the user regains internet connectivity, service workers are notified by the API and seamlessly synchronize any offline actions taken within the PWA.
Imagine we are building an e-commerce website where users can add items to their cart and submit orders. A user adds items to their cart and proceeds to checkout. While filling out the order form, the user's internet connection drops (maybe because of commuting from/to work). Without Background Sync API, the user would lose their order progress, leading to frustration and a new order for our company. This combination of web APIs and service workers ensures data consistency and a smooth user experience in these scenarios.

Benefits of Native Apps

PWAs offer a multitude of advantages over traditional mobile apps, making them a compelling option for businesses of all sizes:

Reduced Development Costs: PWAs leverage existing web development technologies, making them significantly cheaper and faster to develop than native apps. There is no need to have dedicated developer teams to create iOS or Android apps. This translates into substantial cost savings for your business.

Reduced Time To Market: PWAs bypass the app store approval process, avoiding potential delays in the release date due to the restrictions or controls imposed by app stores.

Extended Functionalities: Thanks to Web APIs, all web apps, PWAs included, can benefit from new and modern features out of the box. For instance, we can interact with the hardware of the hosting mobile phone to detect the amount of light in the surroundings. This allows the development of smart capabilities and switching automatically from a light to a dark theme if the user is in a room with insufficient light. The native app Google Maps has the same behavior, switching to the dark mode when we cross a tunnel while driving, for instance.

Improved Conversion Rates: By providing a seamless, app-like experience, PWAs can significantly improve conversion rates, leading to more sales and increased revenue for your business. The website PWA Stats collects several success stories of companies that adopted PWAs.

Search Engine Optimization (SEO) Friendly: PWAs are indexed by search engines like websites, making it easier for potential customers to discover our business online.

Easy to Maintain: Updates to PWAs happen automatically in the background, ensuring users always have access to the latest features and bug fixes without the need to download a new patched version. Differently from a native app, PWAs have only one version live to be maintained.

Small Memory Footprint: PWAs do not come with 3rd party libraries as native apps and, therefore require much less space on the hosting device. This can be a crucial aspect for our business if a portion of our user base does not have modern devices or the cost for mobile data is significantly high in their country.

Conclusion

In conclusion, opting for a progressive web app over a native app can represent a strategic advantage for our business.

PWAs offer a user experience that rivals native apps, reaching a wider audience without the burden of individual app store downloads for a fraction of the development costs. This streamlined approach translates to broader customer accessibility and increased engagement, ultimately driving growth for our company.

Add logic to run before current Material Tab changes

Francesco Leardini — Mon, 23 Aug 2021 14:56:28 +0000

Angular Material offers a wide, feature-rich set of UI Components that we can easily introduce in our projects.

Although the proposed functionalities already cover many common scenarios, it can be that we need to implement a special requirement in our current project.

In my last project I needed to store in a NgRx UI State the vertical scroll position of the content of Angular Material Tabs. The client wanted to restore the last scroll position of each tab, while navigating among them.

There are multiple approaches to fulfill this requirement, but I wanted to avoid costly event listeners that get triggered multiple times while scrolling through the page.

All I wanted, was the possibility to target the scrolling element in the template and register its position just before navigating to the next tab, at the end of the interaction with the current tab.

This functionality can also be useful in other situations. Let's imagine the case where we want to prevent switching to a different tab if a form is not in a valid state, for instance.

The MatTabGroup object provides a public event that gets triggered when a new Tab is selected:



@Output()
selectedTabChange: EventEmitter<MatTabChangeEvent>

The problem is that it gets triggered too late for our needs. We want to be able to detect the content's state of the current tab before navigating to a different one.

Luckily we can use a private event handler _handleClick from the _MatTabGroupBase abstract class to intercept a Tab click and then apply our logic accordingly:



/** Handle click events, setting new selected index if appropriate. */
_handleClick(tab: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void;

To describe the solution, we start from the template, where we simply define the material tab component:



<mat-tab-group mat-align-tabs="start">
  <mat-tab label="First">Content first tab</mat-tab>
  <mat-tab label="Second">Content second tab</mat-tab>
  <mat-tab label="Third">Content third tab</mat-tab>
</mat-tab-group>

All the logic happens on the component side:



import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ViewChild,
} from '@angular/core';
import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
@Component({
  selector: 'app-component',
  templateUrl: './app-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements AfterViewInit {

// Get a reference of the MatTabGroup form the template
@ViewChild(MatTabGroup)
tabs?: MatTabGroup;

private currentTabIndex = 0;

ngAfterViewInit() {
  this.registerTabClick();
}

registerTabClick(): void {
  // Get the handler reference
  const handleTabClick = this.tabs._handleClick;

  this.tabs._handleClick = (tab, header, index) => {  
    // Get tab content reference for the current Tab -> currentTabIndex
    // since index here is already the "new" tab index
    const tabContent = this.getTabContentElement(this.currentTabIndex);

    const scrollPosition = Math.round(tabContent.scrollTop) || 0;

    this.store.dispatch(
       setTabScrollPosition({
         scrollPosition: scrollPosition,
         // ... other props
       })
    );

   // If you want to prevent the user to navigate to the new tab,
   // you can avoid invoking the 'apply' method below 
   handleTabClick.apply(this.tabs, [tab, header, index]);

   // We update the currentIndex, as we need it again when
   // another tab is clicked
   this.currentTabIndex = index;
  };
}

 // Returns the <mat-tab-body-content> with the tab content scroll 
 position given the target tab index
 private getTabContentElement(tabIndex: number) {
   return document.getElementsByClassName('mat-tab-body-content')[tabIndex];
 }
}

The code above is pretty straightforward. When the user clicks on a new tab, the code inside this.tabs._handleClick is invoked and this gives us the possibility to handle the current state according to our needs.

Even if probably selectedTabChange will cover all your needs, it is still useful to know that we have further possibilities to cover also edge cases.

Do you know even more customizations or other special cases you needed to face? If so, feel free to add your experience in the comments below!!

Avoid These Terrible Web Notifications Mistakes! 🤦‍♂💥

Francesco Leardini — Wed, 03 Feb 2021 09:18:47 +0000

This article is a brief introduction to some best practices about web notifications and some typical mistakes we should avoid.

We have several instruments to measure users engagement, such as downloads or clicks. Highly engaged users tend to be more profitable as typically they conclude purchases and share the website content within their network.

When we consider push notifications, engagement can be measured as the average number of sessions the recipients generated by receiving the message within a defined period of time.

Push notifications are a powerful channel to keep an interactive contact with our users and reach out to them even when they aren't visiting our web site.

Commercial newsletters allow for fake user data (do you always provide your real information in any newsletter? 😄).
Conversely, it is not possible to falsify credentials with web notifications, but they can be a double-edged sword.

We can build an amazing web app but if we do not use notifications properly, we flood the users with irrelevant information. Either they will be annoyed or the message we wanted to send across will be swallowed by too much information.

The benefits of push notifications

Push notifications can bring benefits to different business fields.

E-commerce: a practical case

Let's take a common scenario. A potential customer browses among our e-shop articles and puts one item in the cart for the purchase. However at the very last checkout step additional costs - shippings costs, gift options, express delivery - might pile on top of the original price. At this point the customer second-guesses his/her choices and aborts the purchase.

A study by hosting facts says that 66 percent of shoppers have decided not to buy an item they were considering buying due to shipping costs.

We can track these "abandoned" items left in the shopping cart. At a certain point our marketing department might decide to launch a new sales campaign. This would be the perfect time to send a message to all those users who left some articles in the cart. If those objects are now 30% - 40% cheaper, it is more likely that the user is going to conclude the purchase this time.

This is just one possible example, but there are many more opportunities: shopping websites can send an email when a piece of clothing that was out of stock is available again or when a parcel has been handed over to the shipping courier.

Common mistakes to avoid

As we mentioned earlier, the misuse of web notifications results into a negative user experience.

source: https://vwo.com/ebooks/push-notifications-report-2018

What can go wrong:

Wrong timing. You should be able to collect geographical details to segment the audience according to their location. This allows for so called geo-push notifications. If you want to inform that your latest tech article has been published, probably the best time to reach your readers is between 6am and 9am when many people are commuting to work. In order to do this, the server push logic needs to take into account the recipients time zone.
Impersonal data. Provide information tailored to the recipient, addressing him/her by name or references to previous interactions. For this reason we should always record the transactions with our users in order to create a detailed context allowing for a more precise customers segmentation.
Unclear actions. The context and interaction option of a notification have to be immediately clear and accessible. In the example below, the type of notification and the actions that can be taken are easily identified:
Too many. Even if we can provide information of interest for our recipients, we should carefully evaluate the frequency of a notification. Otherwise our messages will be simply perceived as annoying spam.

With these concepts in mind, you should be ready to plan your notifications strategy with the most effective impact on your target users.

Do you have any further methods or measures you adopt in your web notifications strategy? Share them with us in the comment below!

Enhance your web apps with a vibration!!

Francesco Leardini — Wed, 16 Dec 2020 14:06:55 +0000

Nowadays we are used to receive a tactile feedback when we receive a text message or when we play a game on our phone.

Until now, native apps had the advantage of providing a deep experience to the users, being able to tightly interact with the hosting hardware.

However, thanks to the Vibration API we can enrich our web apps with a new functionality and let a device vibrate through our browser!
It's a further step to close the feature gap with native applications.

The Vibration API simply won't do anything if the hosting device doesn't support it.

This goes along with the progressive enhancement strategy. That is, if the user has a modern browser and a device capable of vibrating, then we can offer a richer experience. On the other side, our web app must keep working correctly for all other users even without advanced features.

API Syntax

We use the navigator.vibrate to define a pattern, made of a single vibration or a sequence of vibrations and pauses. The method accepts as parameter an integer or an array of integers, expressing the length in milliseconds of a vibration or sequences of vibrations and pauses, respectively. The return value type is boolean: false in case we pass wrong parameters, true otherwise.

As mentioned previously, if the device doesn't support vibration, this method won't have any effect.

var success = window.navigator.vibrate(pattern);

pattern

Provides a pattern of vibration and pause intervals. Each value indicates a number of milliseconds to vibrate or pause, in alternation. You may provide either a single value (to vibrate once for that many milliseconds) or an array of values to alternately vibrate, pause, then vibrate again. (Source: MDN Web)
The method returns a boolean if we pass wrong parameters.

To generate a single vibration lasting 300ms we can use the following code:

window.navigator.vibrate(300);

While to create a pattern composed by 300ms vibration, 100ms pause, 300ms vibration:

window.navigator.vibrate([300, 100, 300]);

Cancel a running vibration

It is possible to interrupt a running vibration any time by passing a value of 0 or an empty array to the navigator.vibrate() method.
Similarly, if we pass a new valid pattern as parameter, while a vibration is going on, this will replace the old, running pattern.

Follow me on Twitter if you want to know about new articles or future updates

Use cases

We can think of different scenarios where this API might come handy. Probably the most intuitive one is for web games, where we can provide a further grade of engagement to the users.

It can be useful also for web quizzes to underline a wrong answer or to give a tactile feedback for errors while filling a form. The latter case can be particularly useful with long forms on mobile devices, since the displayed keyboard could cover some error messages or invalid form fields.

Browser support

The API is well supported by most (modern) browsers, with the exception of IE and Safari.

Of course, the target device must also have a vibration hardware in order to work correctly!

Demo

You can test the API on your phone with the following DEMO.

Here the Github REPO with the source code.

Conclusion

The Vibration API is another interesting possibility to enrich our web projects and offer an improved experience to our users that, until now, was reserved only to native applications.

Create an Angular Rest API Mock with Deno

Francesco Leardini — Tue, 09 Jun 2020 07:52:51 +0000

In one of our Angular courses we are currently using a Node Express server to provide mock data to an Angular application.

As Deno has been released with the official version 1.0 (mid May 2020), I decided to experiment it and write a new web server for the course. The final layout looks like the screenshot below (as you can see nothing fancy from the layout perspective):

This article is a step-by-step, practical guide focused on creating a Rest API, with full CRUD actions, for an Angular application. I will not cover too many details about Deno though, as it would make the post way too long, and there are already plenty of good introductions to Deno already.
Below are the topics that we will cover, feel free to follow along or jump directly to the topic of interest if you prefer:

Deno:

What is Deno
Install Deno
Create a server
Start the server
Debugging

Angular:

Create an Angular service

Repo

Github Repo

What is Deno

Deno has been created by Ryan Dahl, the same creator of Node.js.

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

If you are already familiar with Node, then Deno is able to do exactly the same things, but faster.

Deno can be seen as a way to rewamp Node.js, solving different aspects that the same Ryan considered his "regrets".
Below is his talk at the JSConf EU 2018, where he exposes these points:

Install Deno

We can choose to use a package manager or execute directly a command in the shell.

Install via command

With Shell (Mac):



curl -fsSL https://deno.land/x/install/install.sh | sh

With PowerShell (Windows):



iwr https://deno.land/x/install/install.ps1 -useb | iex

Install via Package Manager

With Homebrew (Mac):



brew install deno

With Chocolatey (Windows):



choco install deno

After Deno is downloaded and setup locally, run deno --version in the shell to verify the installation. We should get a similar output:



$ deno --version
deno 1.0.3
v8 8.4.300
typescript 3.9.2

If we want an overview about the available commands, we can invoke the instruction deno --help, showing all the available sub-commands.
We can even get further details for each single command simply appending the --help flag, like: deno run --help

Available modules

Deno provides a list of standard modules, reviewed by the core team and guaranteed to work with the specific Deno version. These standard modules are hosted at https://deno.land/std and provide functionalities for most of the basic tasks like: uuid generation, http calls and file system access, for instance.

Aside these, deno.land website also provides a public hosting service for third party modules that are compatible with Deno at deno.land/x.
We can search among an exhaustive collection of modules.

Create a Server

Now that everything is in place, let's start writing some code. Define a root folder for your server:



mkdir webServer && cd webServer

Server.ts

Create a server.ts file.

💡 Note: we can use plain JavaScript instead of typescript, but we would lose many of the benefits that typescript offers. Moreover, being Deno written on top of Rust and Typescript, it compiles directly .ts files for us.

Use the standard http module

To create an HTTP server we could import the server.ts file from the http standard module:



import { serve } from "https://deno.land/std@0.125.0/http/server.ts";

const server_port = 5400;

function req_handler(req: Request): Response {
  console.log("\nReceived a request...\n");
  const body = JSON.stringify({ message: "I am a DENO server 🦕" });
  return new Response(body, {
    status: 200,
    headers: {
      "content-type": "application/json; charset=utf-8",
    },
  });
}

serve(req_handler, { port: server_port})
console.log("Listening on PORT: ", server_port);

💡 Note: you might have noticed that we import from a url here rather than from a local path.
This is a new concept in Deno, we don't need to have the packages already installed locally. We can import their latest version and cache it, making it available even while offline. Deno uses ES Modules to import packages, where from Node uses npm. This translates in the absence of the node_modules folder and package.json file (we don't have any trace of them in our webServer folder). With Deno we directly import the packages we want through its url.

Use third party module

Alternatively we can opt for oak, a middleware framework for Deno's http server, including a router middleware. This middleware framework is inspired by Koa, therefore already familiar to many Node.js developers. For our mock server I decided to use oak.



import { Application } from "https://deno.land/x/oak/mod.ts";
import { oakCors } from "https://deno.land/x/cors/mod.ts";
import router from "./src/routes.ts";

const port = 8280;
const app = new Application();

app.use(oakCors());
app.use(router.routes());
app.use(router.allowedMethods());

app.addEventListener("listen", ({ hostname, port, secure }) => {
    console.log(`--- Listening on: ${secure ? "https://" : "http://"}${
        hostname ?? "localhost"
        }:${port}`
    );
});
await app.listen({ port });

If you already used Express the code above should be already very familiar. After creating an instance of the Application class, we can stack multiple middleware using the use() method and then activate the server (listen() method), waiting for incoming requests.

CORS

We can define CORS for our application otherwise we would get a client-side error every time we try to reach our server from the Angular app. Deno provides a cors module (https://deno.land/x/cors/mod.ts) with default settings that already capture many common cases. We can enable CORS with the following call:



app.use(oakCors());

The default configuration, hence without parameters like in the snippet above, translates in the following set of options:



{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}

Routes.ts

As our mock server is pretty simple, I decided to create just a folder src to host all the business logic and keep it separated from the server.ts file.

The routes file contains all the endpoints that we want to expose to the Angular client and in our case implement the classic CRUD operations.



import { Router } from "https://deno.land/x/oak/mod.ts";
import {
    getAllEmployees, getEmployeeById, updateEmployee, addEmployee, deleteEmployee
} from "./employeeApis.ts";

const router = new Router();

router.get("/employees", getAllEmployees)
    .get("/employees/:id", getEmployeeById)
    .put("/employees/:id", updateEmployee)
    .post("/employees", addEmployee)
    .delete("/employees/:id", deleteEmployee);

export default router;

Employee.ts

We need to define a generic model for our domain. Here we design an Employee object with some static data and no database storage, as it would be beyond the course scope, focusing on Angular and client side development only.



export interface Employee {
    id: number;
    firstname: string;
    lastname: string;
    email?: string;
}

export const EmployeeData: Employee[] = [
    { id: 1, firstname: 'Larry', lastname: 'Potter', email: 'larry.potter@hotmail.com' },
    { id: 2, firstname: 'Mara', lastname: 'Croft', email: 'mara.croft@gmail.com' },
    { id: 3, firstname: 'Thomas', lastname: 'Müller', email: 'thomas123@gmail.com' },
    { id: 5, firstname: 'Karl', lastname: 'Fritz', email: 'Karl_great@microsoft.com' },
    { id: 6, firstname: 'Paolo', lastname: 'Rossi' }
];

EmployeeApis.ts

In this file we implement the real logic behind each endpoint. Any data mutation will affect the local data structure EmployeeData, seen above.
The code is very simple and self-explanatory therefore I won't go in detail about it.



import { EmployeeData, Employee } from './employee.ts';

// Returns all available employees
export const getAllEmployees = ({ response }: { response: any }) => {
    response.body = EmployeeData;
};

// Returns one employee by its Id or 404 if not found
export const getEmployeeById = ({ params, response }: { params: { id: string }; response: any }) => {
    const selectedEmployee: Employee | undefined = EmployeeData.find((employee) =>
        employee.id === +params.id
    );
    if (selectedEmployee) {
        response.status = 200;
        response.body = selectedEmployee;
    }
    else {
        response.status = 404;
        response.body = [];
    }
};

// Add a new employee to the list
export const addEmployee = async (
    { request, response }: { request: any; response: any },
) => {
    if (!request.hasBody) {
        response.status = 400;
    } else {
        const newEmployee: Employee = await request.body();

        newEmployee.id = getNextEmployeeId();
        EmployeeData.push(newEmployee);
        response.status = 201;
    }
};

//Provides the next number to be used as employee Id
function getNextEmployeeId(): number {
    let maxId = 1;
    EmployeeData.forEach(p => {
        maxId = Math.max(p.id, maxId);
    });
    return maxId + 1;
}

// Removes an employee by its Id or 404 if not found
export const deleteEmployee = (
    { params, response }: { params: { id: string }; response: any },
) => {
    const targetId = +params.id;
    const newEmployeeList = EmployeeData.filter(x => x.id !== targetId);
    if (newEmployeeList.length < EmployeeData.length) {
        replaceCollection(EmployeeData, newEmployeeList);
        response.status = 200;
    } else {
        response.status = 404;
    }
};

// Updates en existing employee
export const updateEmployee = async (
    { params, request, response }: {
        params: { id: string };
        request: any;
        response: any;
    },
) => {
    const targetId = +params.id;
    let employeeToUpdate: Employee | undefined = EmployeeData.find((employee) =>
        employee.id === targetId
    );
    if (employeeToUpdate) {
        const body = await request.body();
        const newEmployeeData: Employee = body.value;

        let updatedData = EmployeeData.map((e: Employee) => {
            return e.id === targetId ? { ...e, ...newEmployeeData } : e;
        });

        replaceCollection(EmployeeData, updatedData);
        response.status = 200;
    } else {
        response.status = 404;
    }
};

// Replaces the employee data structure with a new collection
function replaceCollection(originalData: Employee[], newData: Employee[]) {
    originalData.splice(0, originalData.length);
    originalData.push(...newData);
}

Start the server

Now that we created all the needed files, it is time to start the server. Execute the following command in the shell from the path hosting your server file:



deno  run --allow-net server.ts

⚠️ Note: if you didn't add the Deno install root ($HOME/.deno/bin) to your environment variables, then you have to prepend the file path to server.ts

By running the command, different modules are downloaded, but no folder inside our solution is created for them.



Compile file:///.../server.ts
Download https://deno.land/x/oak/mod.ts
Download https://deno.land/x/oak/application.ts
Download https://deno.land/x/oak/context.ts
Download https://deno.land/x/oak/cookies.ts
Download https://deno.land/x/oak/httpError.ts
Download https://deno.land/x/oak/middleware.ts
Download https://deno.land/x/oak/request.ts
Download https://deno.land/x/oak/response.ts
Download https://deno.land/x/oak/router.ts
Download https://deno.land/x/oak/send.ts
Download https://deno.land/x/oak/types.ts
Download https://deno.land/x/oak/deps.ts
Download https://deno.land/x/oak/keyStack.ts
Download https://deno.land/x/oak/tssCompare.ts
Download https://deno.land/std@v1.0.0-rc1/http/server.ts
...

These modules are cached from now on and we do not need to download them again, unless we explicitly want to, using the --reload option, for instance. By default, the cached modules are stored in Deno's base directory: $HOME/.deno (DENO_DIR), but we can change this location if we need, typically in the case of a production environment.

DENO_DIR contains the following files and directories:

💡 Note: in Deno, you need to give explicit permissions before running a program. In the command above we had to grant network access with the option: --allow-net

If we omit this option, we get the following error after downloading all the modules:



error: Uncaught PermissionDenied: network access to "127.0.0.1:8280", run again with the --allow-net flag
    at unwrapResponse ($deno$/ops/dispatch_json.ts:43:11)
    at Object.sendSync ($deno$/ops/dispatch_json.ts:72:10)
    at Object.listen ($deno$/ops/net.ts:51:10)
    at listen ($deno$/net.ts:164:18)
    at Application.serve (server.ts:261:20)
    at Application.listen (application.ts:106:31)
    at server.ts:18:11

And that was all we need to create a simple http server to use as a mock for our client application. Let's create now an Angular project that uses our REST APIs.

Debugging

Deno supports V8 Inspector Protocol. We can debug Deno programs with Chrome DevTools or other clients that support the protocol.

As most probably we are using Visual Code to implement our Angular application, let's see how we can debug the Deno server directly from our IDE. An official plugin is currently under construction, but for the time being we can create a launch.json file:



{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Deno",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "deno",
      "runtimeArgs": ["run", "--inspect-brk", "-A", "server.ts"],
      "port": 9229
    }
  ]
}

💡 Note: if you named your script file differently than server.ts you have to adapt the last item of "runtimeArgs" accordingly.

With the configuration above, VS Code debugger will run at: 127.0.0.1:9229 and intercept all the breakpoints we set.

More about Deno

If you are interested in knowing more about Deno, I recommend the official blog post about the v 1.0 release.

Keep also an eye on the Deno Cheat Sheet as it is a great resource to have always an overview about all available commands.

Create an Angular service

For the Angular part, I will describe only the http service calling our REST server. All the code is available on the Github repo anyway and you can download the whole project.

If you don't have already an existing Angular application and you need instructions on how to create one, have a look at my post about it.

EmployeeService.ts

Thanks to schematics, generate files in Angular is very easy:



ng g service employee

This command creates the EmployeeService.ts and its unit test file. In the service, we define the methods implementing the CRUD operations and that will call the endpoints of the Deno server that we implemented before.



import { Employee } from './../model/employee.model';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable ,  of ,  throwError as _throw } from 'rxjs';
import { catchError, delay, map } from 'rxjs/operators';
import { environment } from '../../../environments/environment';

@Injectable()
export class EmployeeService {

    constructor(private http: HttpClient) { }

    getEmployees(): Observable<Employee[]> {
        return this.http
          .get<Employee[]>(`${environment.apiBaseUrl}/employees`)
          .pipe(catchError((error: any) => _throw(error)));
      }


    getEmployee(id: number): Observable<Employee> {
      return this.http
        .get<Employee>(`${environment.apiBaseUrl}/employees/${id}`)
        .pipe(catchError((error: any) => _throw(error)));
    }

      createEmployee(payload: Employee): Observable<Employee> {
        return this.http
          .post<Employee>(`${environment.apiBaseUrl}/employees`, payload)
          .pipe(catchError((error: any) => _throw(error)));
      }

      updateEmployee(payload: Employee): Observable<Employee> {
        return this.http
          .put<Employee>(`${environment.apiBaseUrl}/employees/${payload.id}`, payload)
          .pipe(catchError((error: any) => _throw(error)));
      }

      removeEmployee(payload: Employee): Observable<any> {
        return this.http
          .delete<any>(`${environment.apiBaseUrl}/employees/${payload.id}`)
          .pipe(catchError((error: any) => _throw(error)));
      }

}

Environment.ts

In the file environment.ts we can save the base url for the server and eventually other configuration keys. environment.prod.ts, reserved for prod builds, typically has keys with different values, to target the production server instead of the staging one.



export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8280'
};

Conclusion

As we saw, it is very easy to create a web server with Deno and use it as a mock for our client application.

This architecture is very convenient because it allows to decouple our web app from the server mocks. We can execute real network calls from our client without need to apply any change to our Angular app before deploying it to production.

Github Repo

The sample code (Angular and Deno server) is available on Github: https://github.com/pacoita/deno-api-mock

Be more productive with these tools! ⛄️ February picks for you

Francesco Leardini — Mon, 03 Feb 2020 14:51:46 +0000

Already started some new year proposals or are you still wondering which one has the highest priority on your list (like me 😄)?
In any case don't lose the focus, you still have plenty of time ahead to model your resolutions path!

Vue paycard enhances a payment form with smooth micro-interactions, like number formatting, validation and automatic card type detection.

It is built with vuejs (the React version is on the way 😄) and fully responsive.

Give it a try with the sample below:

Github

Freezeframe.js is a library allowing to pause and re-enable animated gif images. You can choose for mouse hover or click events, touch event or with a manual toggle functions.
Thanks to the library you can activate the animation only in specific cases (mouse hover, for instance) making the image much more catchy.

1 - Dowload the library

npm install freezeframe

or

yarn add freezeframe

2 - Import it in your code

// es6
import Freezeframe from 'freezeframe';

// Commonjs
const Freezeframe = require('freezeframe');

// 1. Save a reference to your freezeframe instance
const ff = new Freezeframe({
  trigger: false
});

// 2. Add event listeners to the instance
ff.on('start', (items) => {
  // do something on start
};

ff.on('stop', (items) => {
  // do something on stop
};

ff.on('toggle', (items, isPlaying) => {
  if (isPlaying) {
    // do something on start
  } else {
    // do something on stop
  }
};

3 - Bind the library to an element in your template

<img class="freezeframe" src="image.gif" />

<!-- We can target a parent element if we need to wrap multiple images -->
<div class="freezeframe">
  <img src="image1.gif">
  <img src="image2.gif">
  <img src="image3.gif">
</div>

Examples

In the last month collection, Aweys Ahmed suggested humaaans library as alternative to unDraw. 🎉 Many thanks Aweys for the hint! 😄

Humaaans is a free library to manipulate and compose illustrations focusing on people (from here the name "humaaans").
It's available on InVision Studio, which grants designers full control over the illustrations and mixing the different body parts, colours, clothing and hairstyles. A dropbox folder contains the illustrations (as .png files), a .studio and a .sketch project file that you can freely download.

The amount of interchangeable elements is great, making it easy to create different scenes fitting a wide spectrum of projects and situations:

Starting with different pre-generated templates, you can apply several backgrounds to your illustration in order to give some more context details.

If you are a professional designer or simply interested in a cool instrument to enhance your creativity, probably humaaans will be a good add-on to your tool set.

Website

Scene.js is an interesting JavaScript library for creating animated websites. It offers many different features to create advanced and appealing animations with few lines of code.

A simple usage can be the case when you need to animate some text:

new Scene({
    ".overflow .text span": i => ({
      0: {
        transform: {
          translateY: "100%",
        }
      },
      1: {
        transform: {
          translateY: "0%",
        }
      },
      options: {
        delay: i * 0.2,
      }
    }),
  }, {
    easing: "ease-in-out",
    selector: true,
  }).play();

On the other side, if you need to develop more advanced scenarios, you can use the scenejs timeline library, where you can have full control over time, properties and items:

var clapperScene = new Scene({
    ".clapper": {
      2: "transform: translate(-50%, -50%) rotate(0deg)",
      2.5: "transform: rotate(-15deg)",
      3: "transform: rotate(0deg)",
      3.5: "transform: rotate(-10deg)",
    },
    ".clapper-container" : {
      0: Scene.zoomIn({ duration: 1 }),
    },
    ".clapper .circle": {
      0.3: Scene.zoomIn({ duration: 1 }),
    },
    ".clapper .play": {
      0: "transform: translate(-50%, -50%)",
      0.6: Scene.zoomIn({ duration: 1 }),
    },
    ".top .stick1": {
      2: "transform: rotate(0deg)",
      2.5: "transform: rotate(-20deg)",
      3: "transform: rotate(0deg)",
      3.5: "transform: rotate(-10deg)",
    },
    ".stick1 .rect": i => ({
      0: "transform: scale(0) skew(15deg)",
      0.7: "transform: scale(1)",
      options: { delay: 0.6 + i * 0.1 },
    }),
    ".stick2 .rect": i => ({
      0: "transform: scale(0) skew(-15deg)",
      0.7: "transform: scale(1)",
      options: { delay: 0.8 + i * 0.1 },
    }),
  }, {
    easing: "ease-in-out",
    selector: (selector) => "[data-timeline] " + selector,
  });
  new Timeline(
    clapperScene,
    document.querySelector("#timeline .example_result"),
    { keyboard: false },
  );

On their Website you can find other examples, like the counter below with a different animation for each step, making it much fancier:

Sortable is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices.
It offers different features to use with a list or a grid, like the obvious drag & drop and sorting, but also the possibility to move items between list or to clone an element from one group to another.

This is the code used in the example above:

<div id="example2-left" class="list-group col">
    <div class="list-group-item">Item 1</div>
    <div class="list-group-item">Item 2</div>
    <div class="list-group-item">Item 3</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 6</div>
</div>

<div id="example2-right" class="list-group col">
    <div class="list-group-item tinted">Item 1</div>
    <div class="list-group-item tinted">Item 2</div>
    <div class="list-group-item tinted">Item 3</div>
    <div class="list-group-item tinted">Item 4</div>
    <div class="list-group-item tinted">Item 5</div>
    <div class="list-group-item tinted">Item 6</div>
</div>

new Sortable(example3Left, {
    group: {
        name: 'shared',
        pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150
});

new Sortable(example3Right, {
    group: {
        name: 'shared',
        pull: 'clone'
    },
    animation: 150
});

Below another example, showing how the library can be used also with grid elements:

It also supports different javascript frameworks:

Vue Vue.Draggable
React react-sortablejs
Angular ngx-sortablejs
jQuery jquery-sortablejs
Knockout knockout-sortablejs
Meteor meteor-sortablejs
Polymer polymer-sortablejs

Website

Be more productive with these tools! ❄️ January picks for you

Francesco Leardini — Thu, 09 Jan 2020 14:13:19 +0000

No better way to start the new year than a collection of Javascript libraries and get inspired for your projects! Without further ado, let's see what January brings us.

Sal.js is a scroll animation library, focusing on performance and small footprint. It is written in vanilla JavaScript and doesn't introduce any additional dependencies.

It is based on the Intersection Observer API, which allows to asynchronously observe changes in the intersection of a target element with an ancestor one or with a top-level document's viewport.

Be aware though that not all browsers support this API:

In case your target browser is not supported, you need to use a polyfill.

Usage

In your template file, add data-sal attribute with an animation name as value:

<div data-sal="fade"></div>

<!--
Many other animations are available:
- fade
- slide-up
- slide-down
- slide-left
- slide-right
- zoom-in
- zoom-out
- flip-up
- flip-down
- flip-left
- flip-right
 -->

Then simply initialise the library in the script file:

// ES6 modules
import sal from 'sal.js'

// CommonJS modules
var sal = require('sal.js')

sal();

Sal.js will look for all elements with a data-sal attribute and launch their animation when visible in the viewport. The animation's properties: duration, delay and easing can be customised according to your own needs.

<div
  data-sal="slide-up"
  style="--sal-duration: 3s; --sal-delay: 2s;">
</div>

Website

Headroom.js is a lightweight, high-performance JS widget (with no dependencies) that allows you to react to the user's scroll.

Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the effort required for a user to quickly navigate a site, but they are not without problems…

Large screens are usually landscape-oriented, meaning less vertical than horizontal space. A fixed header can therefore occupy a significant portion of the content area. Small screens are typically used in a portrait orientation. Whilst this results in more vertical space, because of the overall height of the screen a meaningfully-sized header can still be quite imposing.

Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

The library dynamically adds and removes CSS classes from the target element, allowing developers to carefully define what should happen in each case:

<!-- initially -->
<header class="headroom">

<!-- scrolling down -->
<header class="headroom headroom--unpinned">

<!-- scrolling up -->
<header class="headroom headroom--pinned">

<style>
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
</style>

There are plenty of options that you can use to adapt the library with ease:

var headroom = new Headroom(elem, {
  "offset": 205,
  "tolerance": 5,
  "classes": {
    "initial": "animated",
    "pinned": "bounceInDown",
    "unpinned": "bounceOutUp"
  }
});
headroom.init();

// to destroy
headroom.destroy();

You can test it with different demos.

Below an example using the swing effect:

Website

PWA asset generator is a tool implemented by my friend Önder Ceylan and based on Puppeteer. It generates icons and splash screens automatically for your app and integrates them directly into the related files (manifest and index.html).
If you have implemented at least once a PWA, you know how tedious and time consuming is creating icon images for different platforms, while keeping sizes and quality for all of them. Thanks to PWA asset generator you can completely automate this step and be sure to deliver pixel perfect images to the several target devices.

Install & Usage

$ npm install --global pwa-asset-generator

$ npx pwa-asset-generator

PWA asset generator offers several option to customise the generated assets:

  Options
    -b --background             Page background to use when image source is provided: css value  [default: transparent]
    -o --opaque                 Shows white as canvas background and generates images without transparency  [default: true]
    -p --padding                Padding to use when image source provided: css value  [default: "10%"]
    -s --scrape                 Scraping Apple Human Interface guidelines to fetch splash screen specs  [default: true]
    -m --manifest               Web app manifest file path to automatically update manifest file with the generated icons
    -i --index                  Index HTML file path to automatically put splash screen and icon meta tags in
    -a --path                   Path prefix to prepend for href links generated for meta tags
    -t --type                   Image type: png|jpeg  [default: png]
    -q --quality                Image quality: 0...100 (Only for JPEG)  [default: 100]
    -h --splash-only            Only generate splash screens  [default: false]
    -c --icon-only              Only generate icons  [default: false]
    -f --favicon                Generate favicon image and HTML meta tag  [default: false]
    -l --landscape-only         Only generate landscape splash screens  [default: false]
    -r --portrait-only          Only generate portrait splash screens  [default: false]
    -d --dark-mode              Generate iOS splash screen meta with (prefers-color-scheme: dark) media attr  [default: false]
    -u --single-quotes          Generate HTML meta tags with single quotes  [default: false]
    -g --log                    Logs the steps of the library process  [default: true]

Github

UnDraw is a collection of open-source (MIT licensed), constantly updated, sketched images to use in your blog or web app.

The selection available is quite wide, allowing everybody to find easily an image matching almost any context.

Before downloading a file, you can also customise the colours to better fit the target colour palette.

Website

OFFEO is an online animated video maker to create social media videos with ease. It provides many motion graphics elements, templates and more than 500 royalty free soundtracks.

You start by selecting a template from different categories:

And then you continue by adding elements and animations from the libraries available. Below a sample I created in barely 10 minutes (I know it is kind of horrible, but considering the time invested it is not too bad after all 😄):

Anyway, to better understand the true potential behind the tool, watch the official introductory video:

Be more productive with these tools! 🎅 December picks for you

Francesco Leardini — Tue, 17 Dec 2019 14:27:43 +0000

Just a couple of weeks remaining before the end of the year, let's have a look at the last collection for the 2019!!

Many thanks to all the readers who left positive comments about the previous posts, it is always a pleasure to know you could use the suggested libraries in your projects!! ❤️

Medium zoom is a JavaScript library for zooming images on a page and add different effects to them, like a margin or a background color matching the target image.

We have different ways to bind the zoom functionality to an image element:

// CSS selector
mediumZoom('[data-zoomable]')

// HTMLElement
mediumZoom(document.querySelector('#cover'))

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
]

mediumZoom(images)

The library offers several interesting features:

📱 Responsive — scale on mobile and desktop
🚀 Performant and lightweight — should be able to reach 60 fps
⚡️ High definition support — load the HD version of your image on zoom
🔎 Flexibility — apply the zoom to a selection of images
🖱 Mouse, keyboard and gesture friendly — click anywhere, press a key or scroll away to close the zoom
🎂 Event handling — trigger events when the zoom enters a new state
📦 Customization — set your own margin, background and scroll offset
🔧 Pluggable — add your own features to the zoom
💎 Custom templates — extend the default look to match the UI of your app

Website

Progressbar.js is a library to create responsive and slick progress bars with animated SVG paths. Some built‑in shapes are available, but it is also possible to create custom shaped progress bars with any vector graphic editor.

The usage is quite simple:

var ProgressBar = require('progressbar.js');

// Assuming you have an empty <div id="container"></div> in HTML
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0

Semi circle example (check the Result tab):

Custom shape example (check the Result tab):

Website

Tailwind CSS is a utility-first framework for rapid UI development.
Differently from others CSS frameworks, it doesn't provide a set of ready-to-use elements, but rather it offers several utility classes that can used directly in our HTML templates.

For example, the following set of style rules, applied to a sample template:

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

Generate this output:

The idea behind is to not write any custom CSS, but rather style our elements by applying pre-existing Tailwind classes directly to the HTML files.
Moreover every utility class can be applied conditionally at different breakpoints, making it very easy to build complex responsive interfaces.

It is also possible to customize the default settings with ease:

// Example `tailwind.config.js` file
module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

Website

Color Thief can extract the dominant colour from an image and also generate a palette for it. The colour details are returned as an array of integers representing red, green, and blue values that can be used for further processing.

It can be very useful when you need to decide which colours set to use in your web application.

Website

Would you like to generate an ASCII title to give a nerdish touch to your app?
Then give Ascii Today a try, it is an interesting ASCII title generator, you type the title you want and you can select among different ASCII representations of the entered text:

Website

That's all for the December collection! Come next year for new discoveries...

🎄 Advent of Code 💻

Francesco Leardini — Mon, 02 Dec 2019 09:14:48 +0000

Christmas holidays are getting close. Either we are planning to work on some personal side projects, learning some new techie subjects or simply recharging batteries with a well deserved coding pause.

Nevertheless I would like to spread some awareness about the "Advent of code" series, created by Eric Wastl, allowing us to practice our developer skills by solving programming problems on a daily base before Christmas.

What is it about?

Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like. People use them as a speed contest, interview prep, company training, university coursework, practice problems, or to challenge each other.

The challenge for the second day looks like the following:

As you can see the UI is minimal and you do not need any super computer to take part to it. All you need is just some IT background, but without being an expert developer.

You need to authenticate before starting (you can use the most common social media login channels for this) and then you will get the input data to start the challenge and an input field to provide the answer with the solution.

Pretty easy, isn't it? The let's start solving the daily puzzle!!

🏋️ Train your WEB DEV skills with online games 🎮

Francesco Leardini — Wed, 27 Nov 2019 14:52:39 +0000

Learning to code by ourselves can be overwhelming, not only for the difficulty of the subject, but also trying not to get lost in the humongous amount of tutorials and documentation available online. Luckily, there are resources that make things easier and fun, offering educational contents with a gamification aspect.

For a reference you can check out the article I recently published, about learning CSS concepts through online games:

💪 Train your CSS skills with online games 👾

Francesco Leardini ・ Nov 15 '19

#design #productivity #webdev #layout

Afterwards, I got many inquiries about similar games to learn web development and javascript. Below the results of my research.

Checki0

Checki0 allows to learn the basics of Javascript or Python by solving different problems and moving between "floating islands" in an imaginary world. Each island collects around 40 challenges and an increasing level of difficulty.

Free Let's play

Elevator Saga

In Elevator Saga you have to program the movement of elevators, by writing a program in JavaScript. The goal is to transport people in the most efficient manner.
Depending on how well you do it, you can progress through the ever more difficult challenges.

An help and documentation section will help you moving the first steps in this interesting game.

Free Let's play

CodinGame

CodinGame offers free games where you have to solve puzzles and algorithm problems. It is possible to choose which language to learn among a wide choice: JavaScript, Ruby, Java and C#, just to mention some.
To make things more interesting, you can invite friends to play online and - if you want to increase the challenge - you can also participate in international programming competitions.

There are many playgrounds for each programming language and you can choose among different grades of difficulty, so that you can proceed at your own pace.

Free Let's play

Screeps

Screeps is MMO sandbox for programmers with already some experience. The title stands for "scripting creeps". The game offers a wide range of options for players and possibilities to practice real-life code in a fun way.

Screeps is a massive multiplayer online real-time strategy game. Each player can create their own colony in a single persistent world shared by all the players. Such a colony can mine resources, build units, conquer territory. As you conquer more territory, your influence in the game world grows, as well as your abilities to expand your footprint. However, it requires a lot of effort on your part, since multiple players may aim at the same territory.
Unlike some other RTS games, your units in Screeps can react to events without your participation – provided that you have programmed them properly. And, unlike other MMO, you do not have to play Screeps constantly to play well. It is quite enough just to check once in a while to see if everything goes well.

Free Let's play

CodeWars

CodeWars is a portal providing an extensive list of languages you can choose from.

After an initial and simple test, you will be asked to confirm the programming language you are interested in and to select at which level to start your training (from absolute beginner to senior developer). You earn points by solving different challenges, each one covering different coding principles, and compete with other developers for the highest position on the scoreboard.

Free Let's play

Untrusted

Untrusted is an adventure game where you need to use your JavaScript skills to solve problems that arise during the story development. In order to guide the main character (Dr. Eval, the green @ on the screen) between levels, you enter javascript instructions on the right panel to let him escape from the current stage.

Free Let's play

Ruby Warrior

You guide a knight through different levels, coding his moves and learning Ruby along the way. You can choose among an easy or intermediate difficulty.

Note: the game starts with music on! So be aware in case you open the link in the office or at school 😄

Free Let's play

Dungeon & Developers

Many developers like RPG games (I do 😄) and 352 Inc, a digital web agency, used this aspect to create Dungeon & Developers.

It is not exactly a game, but it provides really cool graphics and it is worth a look. You build a talent tree, following the classical RPG tree skills. For each level there is a set of links redirecting to different topics (CSS, Javascript, SEO, etc.), after mastering them - that is, you
study the referenced docs at each step - you unlock the next skillset, adding features points (strength, wisdom or charisma) to your character, exactly as in a classic RPG game.

From the creators:

We came up with Dungeons & Developers as a fun way to assess, promote and learn the skills it takes to design and develop great web sites.

Free Let's play

If you know other games (not just tutorials or docs) to learn javascript or web development basics, please mention them in the comments below, so I will update the list.

💪 Train your CSS skills with online games 👾

Francesco Leardini — Fri, 15 Nov 2019 13:31:02 +0000

As frontend developers we are often called to design a neat and appealing UI for our web app.

Nowadays there are plenty of concepts and technologies to be aware of: SCSS, responsive design, Grid Layout and Flexbox, just to cite some. Even when we use them daily at work, we typically remember only the most common rules.

Therefore why not practicing these concepts while playing and making the learning process fun?

There are several online games that allows us to train our design skills and keep them up to date in an entertaining way. Let's have a look at some of them together.

Basic CSS

CSS Diner

The goal is to use CSS statements to select specific UI elements on the screen. If the entered rules are correct, we can pass to the following level. There are 32 levels in total.
Free Let's play

CSS Grid Garden

In this game, we must water carrot crops by mastering CSS grid. To reach our goal we need to define columns, rows, and grid template areas.
Free Let's play

Gridcritters

This game is a little design masterpiece.
We need to use our CSS Grid skills to save alien critters from extinction! At each level more challenging requirements must be fulfilled to succeed and proceed to the following stage.

The game has been developed by Dave Geddes, ex IT architect, now fully converted into educational platforms developer. You can read here the story behind the project and also the CSS Grid rules used for the game home page. The blog post is already very informative by itself!
Cost: 179$ Let's play

CSS Battle

In CSS Battle we have to replicate a target layout with the smallest possible code and we can compete against other players to get the highest score on the leaderboard.

Free Let's play
👉 Thanks @ Nick Taylor for suggesting it in the comments!

Flexbox Layout

Flexbox froggy

Help Froggy and friends by writing CSS code!

Flexbox Froggy takes inspiration from the classic arcade game Frogger, and web literacy games like the brilliant CSS Diner and Erase All Kittens, where you learn about CSS selectors and HTML markup respectively.

We must bring the frogs home to their lilypads by using CSS flexbox instructions. We need to control alignment, spacing, and wrapping of elements on the webpage to achieve our goal.
Free Let's play

Flexbox defense

Flexbox defense is based on the classic tower defence games, but to place our items we write CSS instructions. We use the justify-content property on the main container to move the single towers into effective positions.
Free Let's play

Flexbox zombies

Also this game has been designed by Dave Geddes (as Gridcritters above). Here we use Flexbox to position the hero's crossbow and hit the zombies and survive along the game.

Have a look at the video below used by Dave for the game launch. Also in this case the graphics and the story are really amazing!

// Detect dark theme var iframe = document.getElementById('tweet-859047278895521792-132'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=859047278895521792&theme=dark" }

Each section unravels part of the plot, gives you expertise over a new flexbox concept, and presents zombie survival challenges that force you to solidify your new skills like your life depends on it.

Free Let's play

Do you know other CSS/Design games?
Write it in the comments below and I will add them to the above list.

Useful references

Below a collection of resources we can access if we need to learn from the basics or simply to have a look from time to time for a reference.

CSS Selectors

An overview about all Css selectors and how to apply them.

Grid CSS

A comprehensive collection of resources (videos and examples) to learn CSS Grid Layout.

Flexbox Layout

A visual guide to CSS flexbox layout (one of the best in my opinion). The guide focuses on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
Link

DEV Community: Francesco Leardini

Pushing the Boundaries of Web Apps: Exploring Advanced Features and Hardware Integration

1. Device Orientation API

2. Page Visibility API

3. Ambient Light (Sensors API)

Live Demo

Conclusion

How Progressive Web Apps Can Benefit our Business

What are Progressive Web Apps (PWAs)?

PWAs Core Parts

Web Manifest

Service Workers

Benefits of Native Apps

Conclusion

Add logic to run *before* current Material Tab changes

Avoid These Terrible Web Notifications Mistakes! 🤦‍♂💥

The benefits of push notifications

E-commerce: a practical case

Common mistakes to avoid

Enhance your web apps with a vibration!!

API Syntax

Cancel a running vibration

Use cases

Browser support

Demo

Conclusion

Create an Angular Rest API Mock with Deno

What is Deno

Install Deno

Install via command

Install via Package Manager

Available modules

Create a Server

Server.ts

Use the standard http module

Use third party module

CORS

Routes.ts

Employee.ts

EmployeeApis.ts

Start the server

Debugging

More about Deno

Create an Angular service

EmployeeService.ts

Environment.ts

Conclusion

Github Repo

Be more productive with these tools! ⛄️ February picks for you

Be more productive with these tools! ❄️ January picks for you

Usage

Install & Usage

Be more productive with these tools! 🎅 December picks for you

🎄 Advent of Code 💻

What is it about?

🏋️ Train your WEB DEV skills with online games 🎮

💪 Train your CSS skills with online games 👾

Francesco Leardini ・ Nov 15 '19

Checki0

Elevator Saga

CodinGame

Screeps

CodeWars

Untrusted

Ruby Warrior

Dungeon & Developers

💪 Train your CSS skills with online games 👾

Basic CSS

CSS Diner

CSS Grid Garden

Gridcritters

CSS Battle

Flexbox Layout

Flexbox froggy

Flexbox defense

Flexbox zombies

Useful references

CSS Selectors

Grid CSS

Flexbox Layout

Add logic to run before current Material Tab changes