Albert Walicki

Sign in

Google is the best friend of every developer. Let’s use it to boost productivity

the word “google” spelled out in colored letters

Knowing how to google is the most important skill for a developer. Everyone uses Google — junior developers, mid, or senior. It’s not cheating to google everything! But do you really know how to google efficiently? Let me show you some google hacks.

Explicit Phrase

Search for an explicit phrase by enclosing it in quotation marks.


A look at the new UI design trend from a developer’s point of view

Editing a video

Design trends are like JavaScript frameworks — there’s a new one every day. Today, I would like to introduce you to a design trend called Aurora UI. My friend Michal Malewicz came up with the name, and you should read his article on the topic.

Let’s take a look at Aurora UI.

What Is the Aurora Trend?

This trend is not that new. For example, Stripe has been using it in their header for a long time. It’s getting more popular on services like Dribbble and Behance.


A short tutorial on how to create images in CSS

Single-div timelapse

I’ve always admired people who create single-div illustrations in CSS. One div, multiple background layers, tons of CSS code, and boom! You have an illustration. I always thought that it must be challenging and I could never create such a thing. I was wrong.

To create a simple image, you only need to know one thing: how backgrounds work in CSS. That’s it. You don’t have to use CSS variables. They help to maintain clean code. It’s much easier to read those images with variables, but it’s not required.

Simplest Illustration

Let’s start with something straightforward. …


HTML5 added a lot of new tags. Let’s discover a few that you might not know

Colorful form with empty fields

HTML5 achieved W3C recommendation in 2014 and added a lot of new tags. Some of them, like <main>, <nav>, <header>, or <footer>, are semantic replacements for the commonly used <div>. Everybody was talking about those tags, but there a lot of different and lesser-known ones. In today’s article, let's discover six form-related HTML elements you might not know.

1. Progress Bar


These days, it’s hard to get your first tech job without impressing your employer with your portfolio

A lot of new developers create identical landing pages from the same template (I wasn’t any different). As a result, job applicants are drowning in a pile of CVs and other portfolios.

Create Interesting Projects for Your Portfolio


Many people build weather apps to show off their new skills. Don’t let yours be boring

image of a storm cloud emitting a flashing bolt of lightning

Nowadays, it’s hard to get your first job without impressing somebody with your portfolio. Everybody is creating weather apps, but does everybody have custom CSS-based images in theirs? Let’s create unique images to boost your portfolio.

There are multiple shapes that we can create in CSS, so why not create custom CSS images instead of stock photos? These will cut some unnecessary requests and speed up your website; moreover, they allow you to bring some life to your site.

I don’t want to create the entire app here, only images that you can use to build one. …


And an intro to glassmorphism

a vivid, multi-coloured pastel screen on which part of the word “glassmorphism” is transparent

Last year’s neumorphism trend was horrible and awful. In 2020 I expected something even worse, but Michał Malewicz, the creator of the neumorphism style, wrote about something fresh and good-looking — glassmorphism style.

Let’s take a look at it.

New Trend

Glassmorphism is a new trend which is getting more popular on services like Dribbble and Behance.


CSS gives us the opportunity to create multiple Shapes.

Making various shapes in CSS is easy. Squares and rectangles are the most common and natural shapes in web development. You need to add width and height, and that’s it. Then add border-radius and you have circles and ovals.

More complex shapes require using :before and :after pseudo-elements or more HTML. That gives us two more shapes to create something complex. In terms of creating different shapes, your best friends will be transform and position.

Most of the shapes below designers would export as an image, but as we know — we should replace simple images with CSS to speed…


A lot of images can be replaced with CSS

Improving the performance of a website is serious business. Most people don’t realise how much standard stock photo weight.

My blog was built in Gatsby because I wanted it to have the best performance with images. High-quality images are huge and very heavy; that’s why we should always optimise them.

How images slow down my page?

  • Heavy images: a website with large images will load much slower. Each image is an additional request to the server and extra seconds to wait.
  • Wrong dimensions: Each image should have a few different sizes. …


Add some life to your website

Example of gradient color button

Most buttons are boring. Solid, standard borders. Most of them are not aligned correctly. In today’s article, let’s learn how to create a gradient colour button with animated borders and text! One single CSS property will handle all the animations.

Outline Button — Easy, Straight, and Boring

Let’s start with a basic outline button with hover. It can be created like this:

HTML:

<a href="/" title="Hello button" class="btn">Hello</a>

CSS:

Albert Walicki

Frontend developer, entrepreneur, biker. 👉 My Frontend book: www.frontendunicorn.com 👉 We build apps at www.hype4.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store