DEV Community: Tomer Ovadia

My 12 Favorite Chrome Extensions as a Web Developer ⚡🚀

Tomer Ovadia — Sun, 11 Oct 2020 00:26:35 +0000

The way to gain your expertise in web development can be done more quickly with the help of the following Chrome extensions ✌️

1. PixelZoomer

🔗 View on Chrome web store

Dimension and Size Checker

PixelZoomer takes a screenshot of the current website and provides various tools for pixel analysis. You can zoom into websites (up to 3200%), measure distances and pick colors with an eye dropper.

2. Colorblinding

Accessibility: colour-blind generating

🔗 View on Chrome web store

This extension simulates the website as a color vision impaired person would see.

3. URI Splitter

Productivity

🔗 View on Chrome web store

Easily and quickly edit the URL/URI from the current page.

4. dataslayer

Productivity

🔗 View on Chrome web store

Debug and test tag management (Google Tag Manager, DTM, Tealium) and analytics implementations.

5. Night Eye

Accessibility: Dark mode on any website

🔗 View on Chrome web store

Night Eye enables dark mode on any website using its proprietary algorithm, instead of inverting the colours like its competitors.

6. BrowserBuddy

Productivity // Developed by me :)

🔗 View on Chrome web store

BrowserBuddy lets you view all the data available about you when browse a page. The extracted information will include your browser details, supported features, page activity, device, screen sizes, storage, geolocation, ip and more!

7. The Great Suspender

Productivity

🔗 View on Chrome web store

A lightweight extension to reduce Chrome's memory footprint. Perfect if you have a lot of tabs open at the same time. Tabs that have not been viewed after a configurable length of time will be automagically suspended in the background, freeing up the memory and CPU being consumed by that tab.

8. JSONView

Productivity

🔗 View on Chrome web store

Validate and view JSON documents

9. Fonts Ninja

Font Identifier

🔗 View on Chrome web store

Speed up your design workflow! Identify fonts from any website, bookmark, try, and buy them.

10. ColorZilla

Color Picker and Generator

🔗 View on Chrome web store

Advanced Eyedropper, Color Picker, Gradient Generator and other colourful goodies

11. Momentum

Productivity

🔗 View on Chrome web store

Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration.

12. Checkbot

SEO, Web Speed & Security Tester

🔗 View on Chrome web store

Test SEO/speed/security of 100s of pages in a click! Check broken links, HTML/JavaScript/CSS, URL redirects, duplicate titles...

I hope you find this helpful as I am 😊
If you have any comments or suggestions to add, feel free to comment! 💬

If you liked this article...

Please click the ❤️ below so other people will see it on DEV.to :) ! 👤 Feel free to follow me on Github

Making these times less confusing for travellers

Tomer Ovadia — Sat, 01 Aug 2020 18:06:44 +0000

The current period is very complex for us travellers. Lots of confusion, frustration and uncertainty. How can you consider planning a future trip? You should check out the next website I have created safe2travel.club which helps you to reduce uncertainty and gives you full visibility before booking your next trip!

Coronavirus disease (COVID-19) has impacted every country in the world since the virus was first identified in December 2019. From the start of 2020 international travel has been severely disrupted.

We are in a new reality where planning any trip must start with checking travel restrictions for your destination.

Information

The website provides you dynamic information around travel restrictions, starting with a global risk level, self-quarantine info, health certification requirements, airlines and transportation updates and other international and internal restrictions.

The source of the information is collected from various sources: IATA, media, national sources, WFP internal or any other public sources.

Risk Level

Each country has a risk level score which is in 0-5 range. Each value is classified to one of the next 4 levels:

Extreme warning
High risk
Medium risk
Low risk

Screenshots

If you liked the article, please click the ❤️ below so other people will see it on DEV.to :) ! Feel free to follow me on Github

Google Chrome’s new update finally allows you to organize and group tabs!

Tomer Ovadia — Sat, 18 Apr 2020 12:43:15 +0000

Are too many tabs cluttering up your Chrome browser? Google Chrome’s new update, Chrome 81, introduces the Tab Group feature, allowing users to finally be able to organize tabs! The Tab Groups feature provides neat, color-coded labeling for all your tabs.

Here is how you can set up Tab Groups on your Google Chrome and maximize its features:

1. Enabling the feature

Make sure you have the latest version of Google Chrome installed on your machine (should be 81+). To check this go to Settings/Chrome and then select About Chrome. Otherwise:

If you can update, do it.
If can't, you can turn on this feature by navigating to chrome://flags and looking for tab groups. Make sure it is Enabled.

2. How to create a new tab group:

Just right-click a tab and then select Add to New Group option.
Tabs will change colours depending on their group while a dot will also appear as a group header.
If you want to change a Tab group name then simply click on the group.
You can also change the colour of the group using this method.

3. If you want to add (remove) a tab to (from) a group:

Simply right-click each tab and then select Add to an existing group.
You can also drag and drop the tabs into groups, and drag and drop to remove a tab out of a group.
To create a new tab in a group, just right click the group label and select New Tab in Group

Some credits goes to howtogeek

Enjoy and stay organized :)

If you liked the article, please click the ❤️ 🦄 below so other people will see it on DEV.to :) ! Feel free to follow me on Github

A productive web developer needs a buddy in his browser (Chrome Extension)

Tomer Ovadia — Mon, 06 Apr 2020 06:25:11 +0000

We all want to be productive web developers.

As a Fullstack Web Developer I find myself debugging a lot the same things over and over again. This is used for both making logic around the results and especially to understand that everything behaves as expected and that there is nothing unusual on the client's end. Things like:

Browser details (User Agent, Languages, ..)
Page details (History, Location, Protocol, Host, Origin,..)
Supported Features (Geolocation, Canvas, Touch device, ...)
Screen sizes (Window, Body, Document, Resolution, ...)
Storage (Cookies, localStorage, sessionStorage, ...)
Geo IP / Position (Latitude, Longitude, ..)
CSS supported features (Animations, Transforms, Media queries, ...)

As you can see, the above list is endless, and we don't want to end up opening the DevTools each time, we just want this information available to our needs in a 1-Click distance! For this need, I created a new Chrome Extension called BrowserBuddy to easily give you a full visibility on these.

So it's now easy to view the info available and stored about you in the browser!

Screenshots

Clicking any row will also tell you what code can retrieve the value:

I hope you find this helpful as I am 😊
If you have any comments or suggestions to add, feel free to comment!

If you liked the article, please click the ❤️ below so other people will see it on DEV.to :) ! Feel free to follow me on Github

Not just another Coronavirus (covid-19) dashboard with live statistics

Tomer Ovadia — Sat, 04 Apr 2020 13:05:39 +0000

So many Coronavirus statistics websites are built these days!

Sharing with you mine which is a responsive dashboard website I created presenting Coronavirus (COVID-19) pandemic live statistics and news tracking historical data, daily charts, graphs, a per country view and more! coronavirus-epidemic.com

Note: VPN/Antivirus policies might block this website because the domain includes the word "virus" (how stupid is that?), so you can also use try using this alternative link.

So besides the obvious which is sharing with you some screenshots and the list of technologies used, I added some fun-to-read coronavirus guide for humans (which of course includes lots of emojis!) - Just slide down this article to see it 😃 Feel free to suggest some of yours!

In any case, if you have some questions, feedback or recommendations - You are welcome to leave any comment

Screenshots

Desktop

Mobile

Tech Stack

Backend:

TypeScript
Express.js (Node.js) - Web server
Redis - For background tasks & caching needs

Frontend:

HTML & CSS
jQuery
jQuery Plugins & Widgets:
country-emoji - Easy conversion of a country name into a flag/code and vice versa
Lovely design by Themeforest

Hosting:

Heroku

APIs

And since we all like emojis..

🦠😷 Coronavirus Humans Guide

Some of the credit goes to: https://emojipedia.org/coronavirus/

🚫🤦 Don't touch your face
🚫🤧🤲 Don't sneeze into hands
🚫🤝 No handshakes
🚫🧑‍🤝‍🧑 No close contact
🚫🏟 No large gatherings
🚫🛒😡 When using local shops, don't buy literally everything on the shelves. Leave enough for others!

✅🤧💪 Do sneeze into your elbow
✅😷 Do put a medical mask
🧼👏⏲2⃣0⃣ Wash your hands regularly, for at least 20 seconds
🧴🤲 If soap is unavailable; use alcohol-based handrub / sanitizer
✅📦😌 If practical, have groceries and other items delivered to your home

🧍↔🧍 Keep a reasonable distance from others
🧍▫▫🧍 Stand 2m (6ft) apart
🧍🏠 Stay at home

If you liked the article, please give it a ⭐ on web-coronavirus-stats repository and click the ❤️ below so other people will see it on DEV.to :) ! Feel free to follow me on Github

Create Booking.com logo only using CSS

Tomer Ovadia — Tue, 31 Mar 2020 15:07:31 +0000

I recently joined Booking.com, apart from the fact that this is a very interesting company that faces complex challenges every day, for me it was an opportunity to look at the colourful side of the company. I chose to take a small technical challenge and create the company's brand logo only using CSS, that is, without the use of images, minimal coding and of course in an innovative & optimal way.

In this post I will walk you through a step-by-step guide and share with you code examples, thoughts and knowledge that will also make you experts who can implement this logo (or similar ones) in 4 easy steps.

First, lets get impressed with the outcome we are going to achieve:

What technologies are being used here?

Flexbox // css-tricks flexbox guide or this practical guide
Responsive web design using Media Queries // W3C Doc
SCSS // https://sass-lang.com/guide.
Some more advanced features of CSS.

Step 0/4: Defining the colours palette & requirements

Like a good handyman or a shoemaker, before actually doing the task, we, too, as client side developers needs the right tools for the right job.

Luckily, this is only a design implementation exercise, however, we are aiming for a perfect result that requires both using the precise colours and implementing rest of the design characteristics elements in the logo. For the benefit of these, we will extract the necessary colours and understand the requirements & the overall look needed for the logo.

This is a colours palette presented in a nice way but we won't really need this visual presentation in the next step, besides the hex colours itself.

Step 1/4: Creating the responsive layout

Let's set the right layout for the logo, first we will split the background into two items, then, we will colour each item in a different colour and make it aesthetic to our needs.

The main body of the HTML has some built-in browser styles applied to it and these can conflict with our design, so let's reset these and style it with margin: 0.
Thinking Mobile-first:
Markup: We would like to have a nice markup that can be used for both Mobile and Desktop while on both devices we basically have the same idea - two items which are contained either inside a row or a column. Note: we would not want to manipulate the DOM for any device change but simply adjust the stylings accordingly.
Styles: We are going to take the advantage of the mobile-first approach and basically style it for mobile with 1 column and 2 rows, and have few more additional styles to be used when the desktop is targeted so it can have instead 1 row with 2 columns.
HTML markup: We would have a basic div container (with container class) that has two div items nested within it (each should have item class). Note: since we are using here block-elements, div item one will occupy the first line of its containing element (the container) followed by the second div item - which is exactly what we need for the Mobile!
Desktop Target: To apply styles to Desktop - we will use a media query that let us scope styles according to a media device (by minimum width of pixels) when targeted: @media screen and (min-width: 600px) { /* styles for Desktop will be placed here */ .
Desktop Stylings: These can be achieved in many ways (floats & clear, grid, flexbox), while I find it easier to implement using Flexbox. The main container will act as the "flex container" (which sets the context for the flexbox layout) and the div items will be the "flex items" (the actual elements we layout using flexbox). It worth mentioning that any element (block-level or inline-element) can be a flex container.
The flex container: let's set the container div with display: flex (this will get the two items as columns to be side by side) and to make sure it fills up the screen we will also add height: 100vh (W3 Doc about viewport height). What about the flex-direction (which sets the direction of the main-axis)? Basically we don't need to set it since the default value is row (that fits our needs), but since we want this to be clear we will set it ourselves with flex-direction:row.
The flex items: Each div column item should have 50% of screen size. The flex way of doing this would simply be by applying to it flex: 1 . Note: (1) We could set any number we want (for example: flex: 100, as it will be equal for each column anyway). (2) Yes, we could use width: 50vw instead of the flex styling (but let's avoid it this time..).
To colour the items, we will add the SCSS colour variables and use its accordingly:

$bg-left-color: #feba02;
$bg-right-color: #1875dd;
//...
&:nth-child(1) {
    background: $bg-left-color;
}
&:nth-child(2) {
    background: $bg-right-color;
}

Final result would be:

/* Mobile first approach */
.container {
  min-height: 100vh;
.item {
    min-height: 50vh;
&:nth-child(1) {
      background: $bg-left-color;
    }
    &:nth-child(2) {
      background: $bg-right-color;
    }
  }
}
/* Desktop */
@media screen and (min-width: 600px) {
  .container {
    display: flex;
    flex-direction: row;
.item {
      flex: 1;
    }
  }
}

Step 2/4: Shaping the logo

Let’s add another div to our layout (the logo container) with a logo class and place it inside the main container.
Shaping this container as the logo requires the following styling:

 height: 100px;
  width: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -50px;                 // Place it in middle
  border-radius: 17% 17% 17% 0;  // Making fancy borders

Note: Make sure you understand how we were able to place in the middle of the screen using both left: 50%; top: 50%.

Finally, let’s colour it! Add $logo-bg-color: #003580; variable and apply it on the .logo class using: background: $logo-bg-color;

Step 3/4: Adding the “B” letter

Though we don’t need to add extra HTML markup for the B content, we do want that the inserted B content of the logo will be fully owned and styled by the logo. A nice way to achieve this would be to use the ::before selector which is available in CSS. Before using it, let’s add first the colour variable needed: $logo-text-color: #fff; (white colour).
Adding the “B” text can be done using the following styling:

.logo:before {
  color: $logo-text-color;
  content: "B";
  display: block;
  font: bold 70px BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 10% 0% 0% 20%; 
}

Note: The “B” text is written as string in the content property (W3 Doc) which can be used only with the ::before and ::after pseudo-elements.

Step 4: Adding the logo’s dot shape

Ok so we are almost done, it is time to add the extra “dot” in the logo to finalise it’s look:

Add the needed colour $logo-dot-color: #009fe3; and continue on to the next step. This time we are going to use another pseudo-element — ::after, and apply the following styling:

.logo:after {
  background-color: $logo-dot-color;
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  top: 66px;
  right: 18px;
  position: absolute;
}

Focusing on what we just implemented — At this step we were using ::after and on the previous step (when we added the “B” text) we used ::before — this kinda makes sense as we progressively created the entire logo.

Interesting point to think about: What would happen if we switched between these two pseudo-elements (and keep the stylings as is), will the stylings be applied correctly? In other words, this step would use the ::before and the previous one would use ::after — can this achieve the same result? — Try it and make sure you understand what happens...

Cheers! We finally have our nice logo :)

Note: I have set the proper font (used in the “B” letter) only for the final result.

If you liked the article, please click the ❤️ below so other people will see it on DEV.to :) ! Feel free to follow me on Github