Improve your Chrome by enabling these flags

Vladislav Gubarev — Mon, 31 Aug 2020 06:32:53 +0000

Make your Chrome browser better by enabling a few flags.

To enable a flag follow any link below, and select "Enable" in the menu. Then relaunch Chrome.
If you want to deactivate a flag, go to the link, select "Default" or "Disabled" and relaunch Chrome.

1. Hide full URL path (since Chrome 85)

This cool feature was added a week ago in the new version of Chrome. By enabling it any URL path in omnibox will be hidden.
There are two flags. If you choose first, to see the full path you need to hover on omnibox. Otherwise, you need to interact with the page.

On hover: chrome://flags/#omnibox-ui-reveal-steady-state-url-path-query-and-ref-on-hover
On interaction: chrome://flags/#omnibox-ui-reveal-steady-state-url-path-query-and-ref-on-interaction

Before:

After:

2. Tab hover cards

Flag: chrome://flags/#tab-hover-card-images

By enabling this flag, when you hover on the tab there will be a mini-card of it.

Tip: there will be a normal image only if you had already visited the tab. If not, you'll see the world icon.

Example:

3. Smooth scrolling

Flag: chrome://flags/#smooth-scrolling

Sometimes when you're scrolling down a page it twitches a little. With this flag, we can fix it.

4. Tab strip

Flags:
chrome://flags/#webui-tab-strip
chrome://flags/#webui-tab-strip-demo-options
chrome://flags/#top-chrome-touch-ui

After enabling them you'll get the new tab bar and your browser interface will be changed a lot. Your Chrome will be fullscreen!

Examples:

5. Tab groups

Flag: chrome://flags/#tab-groups

Do you have many open tabs in Chrome? Chrome works on the feature, that allows users to group tabs, change the group name, and color. With it, your productivity will increase!
To create a group, right-click on any tab.

Example:

6. "New" badge on menu items

Flag: chrome://flags/#enable-new-badge-on-menu-items

To keep abreast of new features in Chrome, enable this flag and near any new item, there will be a nice badge.

Example:

That's all I want to say. Thanks for reading!

Tools for web developers you need

Vladislav Gubarev — Mon, 31 Aug 2020 06:26:41 +0000

Site Palette

This tool presents you with thousands of different color palettes for the site’s design.

URL: https://palette.site

Advantages:
Many of different colors
Good design

Disadvantages:
Stripped down functionality in the mobile version

Lighthouse

This is a very convenient extension from Google, that can measure your site rank and test it for PWA technology.

URL: https://chrome.google.com/webstore/detail/lighthouse

Advantages:
Clear results
Open-source (on Github)

Disadvantages:
No mobile support
Slow loading speed

Loading.io

If you need modern and cool animation for a preloader, you should visit Loading.io. I can’t count how many animations contain this tool.

URL: https://loading.io

Advantages:
You can customize your animation: change color, background, speed and other
You can download it in different types (GIF, SVG, PNG, CSS code)

Disadvantages:
Need to register to save the animation

Material Design Lite

MDL is a simple framework for making your site look like a native Android app. It contains layouts, buttons, modal windows, snack bars, loadings, and more other cool things.

URL: https://getmdl.io

Advantages:
Some many effects and settings make feeling of native app
Clear templates in the site

Disadvantages:
You can’t set your color manually. In the site, there are 30 colors of the site theme.

Maskable.app

It is a simple and right tool to make the PWA icon maskable. There are many customization settings. You can upload SVG also.

URL: https://maskable.app

Advantages:
Good implementation
Mamy of functions

Disadvantages:
A human can’t set HEX color as the background of the icon, only select from the list or the color picker.

Canva

I think many people know this popular service for making designs. I always use Canva to create cool logos. But there are many other types of designs.

URL: https://canva.com

Advantages:
Cool templates of designs
Comfortable edit controls

Disadvantages:
In the mobile version and the app, there are fewer functions then in regular

Shopify

With Shopify, you can choose the logo and your company name for free. If you want more functions, in Shopify there are Pro version.

URL: https://shopify.com

Advantages:
When a human is searching for a logo, he can choose some categories, that he likes.
The opportunity to customization your logo.
Names’ big library

Disadvantages:
None

PWA Builder

This is Microsoft’s tool for the check site for PWA technology. Unlike Lighthouse, PWA Builder doesn’t show you site measures for speed, best practices, and others. But there you can find components for your PWA like Service Worker or Log in with Google.

URL: https://pwabuilder.com

Advantages:
All results are simple and clear
Mobile version
Collection of components for PWA

Disadvantages:
There are not all types of service workers in the collection
Shows 95 of 100 if push notifications are not in your PWA

Resizer

With Google’s Resizer, you can check the responsivity of your site on a laptop (and PC), tablet, and phone.

URL: https://material.io/resources/resizer/

Advantages:
You can interact with your site on the devices
Fast speed

Disadvantages:
Due to the design of the page, the devices overlap each other

Netlify

Netlify is a free and fast hosting service for your projects with the support of many frameworks like Vue.js.

URL: https://netlify.com

Advantages:
It is free
Supports PHP
You can upload your site from Github Gist

Disadvantages:
I can’t find anything

DEV Community: Vladislav Gubarev

Improve your Chrome by enabling these flags

1. Hide full URL path (since Chrome 85)

2. Tab hover cards

3. Smooth scrolling

4. Tab strip

5. Tab groups

6. "New" badge on menu items

Tools for web developers you need

Site Palette

Lighthouse

Loading.io

Material Design Lite

Maskable.app

Canva

Shopify

PWA Builder

Resizer

Netlify