Fresh Resources for Web Designers and Developers (July 2020)

At the time of this writing, Google has just completed web.dev live webinar. A 3-day event featuring the latest of web development, performance, and tools to build the web.

So, in today’s post, we’ll feature a couple of the interesting outputs of the event as well as a number of handy tools to ease your work and workflows as web developers.

Fresh Resources for Web Designers and Developers (June 2020)

Fresh Resources for Web Designers and Developers (June 2020)

PHP turns 25 this month, and the alpha-stage of PHP 8 will be released this year. PHP was... Read more

Core Web Vitals

An overview of Google latest performance metrics for the Web called Core Web Vitals. The Core Web Vitals feature metrics such as as Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) which revolve around the user experience of the site rather than just the download speed.

It is said that this Core Web Vitals metric will also be part of the Google ranking signal so you might want to keep up.

Core Web Vitals presentationCore Web Vitals presentation

Github CLI

A CLI to use Github. This means that you can have commands to use Github in Terminal to do what you’d normally do on the Github site such as creating a Pull Request (PR), checking the PR status, list and view issues on a repository, and a lot more.

The Github CLI tool would be very handy and could streamline workflows for many developers.

Github CLI animated command on the homepageGithub CLI animated command on the homepage

Tellina

A site where you can search a collection of handy commands for some common tasks in Terminal with natural language. You can find from a simple command such as creating a directory and listing files on a directory to complicated ones like showing the third line of each file in a directory that contains an odd number of lines.

Tellina example list of bash commandsTellina example list of bash commands

Bundlers Tooling Report

A comprehensive feautures and capabilities comparison of bundlers: Webpack, RollUp, Parcel, and Browserify. The list can help determine which bundler will suit your needs.

Bundler Tooling table comparisonBundler Tooling table comparison

Vite.js

Vite.js is Evan You – the Vue.js creator’s new initiative that aims to make web development environment and build tool easy without juggling too much on the configuration.

Vite.js comes with some capabilities right out-of-the-box, including Hot Module Replacement, TypeScript support, PostCSS and CSS Pre-processors, and HTTPS/2.

ViteJSViteJS

Reakit

A framework to build rich web applications with React.js. Apart from being fast and customizable, Reackit follows strictly the WAI-ARIA specification which makes it accessible right out-of-the-box and is distinct to similar frameworks.

Reakit UI homepageReakit UI homepage

Espanso

Espanso is a free cross-platform text expander application. It allows you to type code or text faster by wrapping it to a text shortcut. You can also run custom script with a shortcut instead of just outputting plain text.

This makes the app more powerful for power users like developers. This can be a good alternative to the TextExpander app.

EspansoEspanso

Testing Playground

A simple online playground to get your hands on Document Object Model (DOM) testing. The playground provides direct feedback when adding and removing specific attributes, labels or aria labels from the elements.

This allows you to get started with testing quickly and easily before implementing it on the test suite of your project.

Testing setup exampleTesting setup example

WordPress Lando Dev

A preconfigured WordPress development environment based on Lando. Developed by the WordPress team from Google, you can use it for core, plugin, and theme development.

WordPress Lando Dev respository page on GithubWordPress Lando Dev respository page on Github

wp-env

Alternatively, you can use this NPM package. Built by the WordPress team and numerous contributors, the wp-env provides an easy way to spin up a localhost environment for core, plugins or theme development with Docker.

wp-env repository in NPMwp-env repository in NPM

Web Stories for WordPress

Web Stories is part of Google AMP initiative aimed at providing a beautiful and more engaging experience of web animation and tappable interaction. It enables you to put images, audio, videos, GIFs, and animation.

You can find some live examples of Web Stories from big publisher like USA Today, WIRED, and CNN.

WordPressDev repository page on GithubWordPressDev repository page on Github

UberSuggest Chrome Extension

UberSuggest is one of the popular tools for keyword research. It’s comprehensive and best of all, it’s free.

You can install this extension in Chrome to get immediate output from UberSuggest on Google SERP. This allows you to have a more streamlined workflow while performing keyword research.

UberSuggest tool in action in the Google SERPUberSuggest tool in action in the Google SERP

Github VSCode Theme

An official Github theme from Github. It provides two options of themes: Dark and Light. While you might have heard that many web developers mostly opt for a dark theme for their code editor, the light theme from Github is one of the nicest looking.

Github VSCode dark and light theme previewGithub VSCode dark and light theme preview

TLDR Pages

TLDR is a utility CLI that aims to make the traditional manual page (Man Page) of command line tools commonly available in UNIX system such as e.g. stat, sed, and ping friendlier. It provides simpler descriptor, and most logical order of the parameters along with an example of the usage.

TLDR CLI in terminalTLDR CLI in terminal

VSCodium

VSCodium is a community intiative to build Visual Studio Code without the telemetry and tracking bits that send usage and personal data to Microsoft. It is cross-platform; you can use it in Windows, macOS, and Linux.

VSCodium app preview in macOSVSCodium app preview in macOS

Chakra UI

A collection of simple, modular, and accessible component library that provides the foundation to build React applications. Chakra UI is easily customizable, you can configure the font size, font family, breakpoints and everything will be adjusted accordingly.

Chakra UI code example of creating a boxChakra UI code example of creating a box

Fluent UI

Fluent UI is an attempt to consolidate design consistency across products. One of their initiatives is this collection of React-based components which you can use to build your own web application using the Fluent Design Language.

Fluent UI component of a calendarFluent UI component of a calendar

Tabler

A template of ready-made components to create an admin panel with beautiful UI. Tabler code is HTML5 and CSS3, carefully crafted to comply with W3C validation, and works perfectly on Chrome, Firefox, Safari, Opera, Edge and mobile browsers.

Example of dashboard with AnalyticsExample of dashboard with Analytics

Advanced New File

A CLI tool that adds advancement on creating directories and files that cannot be simply achieved with the built-in command like mkdir. With this, you can create directory recursively and multiple directories or files with just a single line of command. Pretty handy.

File tree in TerminalFile tree in Terminal

Eureka

Eureka is a CLI tool to write note right from within Terminal with the editor of your choice such as Vim or Nano, and then automatically save it to Git. A perfect tool for those who like to keep their workflow in Terminal.

Adding note in Terminal with EurekaAdding note in Terminal with Eureka

The post Fresh Resources for Web Designers and Developers (July 2020) appeared first on Hongkiat.

Comments

Post a Comment

Popular posts from this blog

A new kind of pollution — wildfire smoke — can cause health issues

It’s a domino effect Southern Californians know all too well: When there’s extreme heat, there are fires. And when there are fires, there’s smoke. And when there’s smoke, there is insidious air pollution. The pattern, caused by four fires still burning in Los Angeles, San Bernardino and Riverside counties, is producing columns of smoke that collapse, spreading lung-damaging soot for hundreds of miles. After record-breaking heat and explosive fires over the Labor Day weekend, lingering fire clouds lowered temperatures considerably Tuesday, Sept. 8, by blocking the sun. But a moderate Santa Ana wind event starting Tuesday afternoon was expected to send desert winds through mountain canyons and into beach communities through Wednesday afternoon, the National Weather Service said. The Santa Anas are not good news for firefighters battling the two most troublesome fires, El Dorado near Yucaipa, and Bobcat above Duarte . A red flag warning went into effect late Tuesday. Homes could be th
Read more

30 Priceless Blue Screen of Death (BSoD) to Chuckle About

Image
It can come when we least expect it, when we are happily playing our favorite game and diligently working on the report due tomorrow. Then, all of a sudden, when we are just right about to save our progress, the blue demon appears, stares at you straight in the face and tells you that some sort of fatal, non-recoverable error has occur. You can cry, curse or swear, but nothing will change the fact that your hard work has all gone to the drain. Nobody will mistake that mocking blue screen for anything but a big FAIL. Yes, it’s the infamous blue screen of death, or BSoD for short. Oh, how we dread seeing one. Due to its widespread unpopularity, some victims of BSoD have make it a point to capture instances of BSoD for a good laugh (a laugh at their own plight, perhaps?). Others have even photoshopped BSoD into actual images and turned them into jokes. Whatever it is, we all find them hilarious because we’ve experienced them from time to time. To celebrate our contempt for BSoD, we hav
Read more

Mountain High to open Saturday, Nov. 14, for pass holders, followed by Snow Valley Monday

After a short delay this week following four employees who tested positive for coronavirus , Mountain High announced it will open on Saturday, Nov. 14, for season pass holders. The Wrightwood resort will sell tickets to the general public on Sunday, Nov. 15, according to the website. Tickets must be purchased 24 hours in advance. Amenities will be limited on opening weekend, including no lessons or rentals and limited food and beverage, though people can bring their own snacks onto the mountain. “It’s going to be a beautiful weekend so come enjoy your lunch on the sun deck. Indoor access will be limited,” the announcement said. “Guests should be prepared to enjoy an outdoor experience this winter, no matter the conditions. Lodges will be available for restrooms and retail purchases only.” Snow Valley in the San Bernardino Mountains announced Friday its season start date will be Nov. 16. The six-person chairlift will accommodate a whole family and groups that arrive together, or two
Read more