DEV Community: Patrik Kiss

20 of the best/largest icon libraries.

Patrik Kiss — Tue, 14 Jan 2020 10:51:45 +0000

In this article I will introduce you to 20 of the best and largest available icon libraries for web. Many of these offer you thousands, if not millions of icons, so you will definitely find what you need.

I'd like to make it clear first: these are not the 20 best libraries, but 20 of the best ones, so of course there might be, and probably are other great libraries besides these, that I didn't mention/don't know about.
Also, this is an ul, not an ol.

Quick message: if you know about other great libraries, feel free to mention it in a reply, and I might include it if I extend the list.

The Noun Project

The Noun Project is a huge icon library claiming to have over 2 million icons. These icons are all made by contributors. It has a huge and still active community, which you can be a part of as well.

Free content: true
Paid content: true
Customizable icons: true
Registration required: true

Highly recommended!

icomonstr

iconmonstr is an icon library offering over 4000 icons sorted into 300+ different collections. This library is maintained by one person. A good thing is that you can get the code directly from the site, so download is not necessarily required.

Free content: true
Paid content: false
Customizable icons: true
Registration required: false

Highly recommended!

Good Stuff No Nonsense

Good Stuff No Nonsense is an icon library created by only one person, and all of the available icon are hand-drawn.

Free content: true
Paid content: true
Customizable icons: false
Registration required: false

Orion

Line, Solid, Color & Flat icons with a precise and unified style.
Adapts to any type of project with different stroke weights,
color control and great legibility.

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

Highly recommended!

IcoMoon

Available as both a website and an app, IcoMoon offers more than 4,000 free icons and offline storage of icons. Each icon pack features detailed licensing so that designers and developers know exactly how icons can be used. Users can also make their own custom icon fonts.

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

Highly recommended!

Pictonic

All of the icons are designed using a precise pixel scale so that they can be resized without loss to quality or integrity. Because they are offered as font sets, the icons in this collection can also be stylized using CSS elements.

Free content: true
Paid content: true
Customizable icons: false
Registration required: true

icons8

With over 100,000 icons and daily updates, the Icons8 collection is hard to beat when it comes to selection and diversity. Users can search icons by tags or can browse more than 50 different thematic collections to find graphics that meet their needs.

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

Flaticon

2,000,000+ Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT. Thousands of free icons in the largest database of free vector icons!

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

Highly recommended!

Note: you don't need to register to download and browse icons, but for icon customization you need to.

Font Awesome

Of course I need to put Font Awesome on this list, since it might actually be the most well-known icon library.
Once I had made an article about this library, check it out to learn more about all the features Font Awesome provides you. Trust me, it is worth it.

Font Awesome guide and useful tricks you might not know about.

Patrik Kiss ・ Dec 21 '19

#webdev #html #beginners #tutorial

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

Highly recommended!

iconscout

iconscout is a collection of millions of different icons, in every possible category you can just imagine. Users here have the option to create and share their own icons and create collection which the visitors can view later.

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

Highly recommended!

ICONFINDER

Iconfinder is currently one of the largest icon libraries with over 4 million free and premium icons. Additionally, they also offer 25,000+ icon sets.

Iconfinder provides high-quality icons to millions of creative professionals. We are a small international team based in the lovely city of Copenhagen, with some of us working remotely. Together with a passionate community of icon designers, we are building the world's most popular icon site.

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

PixelLove

With more than 15,000 icons for iOS and Android platforms, PixelLove is a go-to icons collection for designers creating mobile sites and apps. All icons are available in a variety of pixel sizes.

Free content: true
Paid content: true
Customizable icons: false
Registration required: false

Streamline Icons

Over 10,500 in three different weights. 53 categories, 720 sub categories, and over 30,000 something in total.

Free content: true
Paid content: true
Customizable icons: true
Registration required: true

Grabhic Burger

Graphic Burger is a special and unique website that provides a large number of free and paid icons and other graphic elements. All of the icons that are available on this site are well optimized, compatible with all kinds of websites, applications and other graphic uses. The selection and variety of icons that are available is very big and there are icons suitable for almost any theme.

Free content: true
Paid content: true
Customizable icons: false
Registration required: false

Smashicons

Smashicons offers an extremely comprehensive collection of icons with over 175,000+ icons currently in their library. However, unlike some of the other icon libraries metioned, not all of these icons follow the same style. Therefore, if you want to keep a consistent look and feel on your website, app, etc. you’ll need to ensure that all of the icons you required are within a particular icon set.

Free content: true
Paid content: true
Customizable icons: true
Registration required: true

pngtree

In just 3 short years, Pngtree has managed to accumulate millions of unique graphic design resources. Amongst them: illustrations, vectors, templates, backgrounds, and most importantly, icons.

All icons are categorized, providing seamless and very quick access to a design that meets your needs.

Upon finding an icon, you are able to download it as a PNG or SVG file with a maximum dimension size of 512×512.

Free content: true
Paid content: true
Customizable icons: false
Registration required: true

iconshock

2 Million+ professional icons library with over 400+ icon sets in more than 30 styles, including Flat, Material, iOS, Glyph, Colorful, Window 10, Revamped Office, 3D Realistic, Isometric, & more!

Apart from having a library of 2 million icons, Iconshock also specializes in custom styles. Specifically, favorites like Material, iOS, Flat, Modern, and countless others.
You can choose between downloading a single icon, or downloading the whole icon set.

Free content: true
Paid content: true
Customizable icons: true
Registration required: false

Material Design Icons

Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. It has been around for many years and is compatible with many technologies and frameworks.

Free content: true
Paid content: false
Customizable icons: true
Registration required: false

Highly recommended!

Material Icons

Upon selecting an icon, you can change color from Black to White and vice-versa. You can also download it in either SVG or PNG format. Though, if you do download SVG format, you can always adjust the color to be exactly what you need for your specific project.

Not to mention that there’s hundreds of free icons you can choose from, ideal for both website projects and any kind of graphic design outside of websites as well.

Free content: true
Paid content: false
Customizable icons: false
Registration required: false

freeicons

Similar to one of the sites we already looked at, FreeIcons is dedicated to highlighting only the most prominent of Icon Packs.
Each pack consists of up to 100 icons, and most are incredibly well-designed.

But rest assured that you can find icons also on subjects such as travel, food, women, country-specific, and more.
And, you can choose from styles such as 3D, Cartoon, Hand Drawn, Badges, Smooth, and many others.

Free content: true
Paid content: false
Customizable icons: false
Registration required: false

Debug your website on Android with Chrome Remote Debugging.

Patrik Kiss — Mon, 13 Jan 2020 16:06:12 +0000

Most of us have probably encountered cases when your website works perfectly fine on your desktop, and even when viewing it in mobile resolution, but when you actually open it on your phone, it's just not the same, something's off.

The problem is that a mobile version of a browser might work slightly differently than the desktop one, so these bugs don't occur on desktop at all.

I encountered myself a case like this a few weeks ago, and I used Chrome's Remote Debugging tool for the first time, and with it I could finally solve a problem I couldn't for weeks.

So in this article I'm showing you how you can use it, in case you don't, so you won't have to struggle too much in the future.

1.Enable USB debugging on your phone

For this, go to your phone's system setting and open developer options.

If this is not available for you yet, open "About phone",

and there tap the build number a few times, and you will get a notification something like "You are a developer now".

In the developer options, enable USB debugging.

I think it's obvious, but connect your phone with your PC/Laptop via USB.

2.Go to remote devices in developer tools

Now on your PC/Laptop, open developer tools, and go to remote devices.

Make sure you have "Discover USB devices" checked, it won't work otherwise

3.Allow debugging

If you have enabled USB debugging, the connection is successful and you have checked the option above, you should get this notification on your phone

Needless to say, but you must to allow it.

If everything went correctly so far, you should be seeing a list of the opened tabs on your phone.

4.Start debugging

Finally, to start debugging, click Inspect next to the tab you want to open.
But before that, you need to open it on your phone as well, because you can only view active tabs.

If everything works perfectly, then a new Chrome tab should open on your PC/Laptop with the active tab on your phone.

This is now the actual view of your phone. Not just a simple tab with mobile resolution of the site, but it's actually what you see on your phone, in live.

In the following gif, I'm using DEV on my phone, and you can see it in live on your dekstop/laptop.

From now on, it works exactly the same way as on PC/Laptop.

Why do you write on DEV?

Patrik Kiss — Fri, 10 Jan 2020 16:08:54 +0000

What's your reason for constantly writing on DEV, sometimes spending even hours or days on a single post?

Are you seeking attention, want to get lots of reactions?
Do you want to share your experiences/ideas?
Want to help others with your posts?
Maybe for future references?
Or something completely else?

Let's discuss, tell us why you write here 😄

30+ Sublime Text 3 shortcuts to code a lot faster.

Patrik Kiss — Thu, 09 Jan 2020 07:44:47 +0000

I have seen several posts about keyboard shortcuts for VS Code, and they were all really informative and well-written.

But unfortunately I haven't seen any about Sublime Text yet, even though those who use it, like myself, would probably find it very useful.

So since there isn't one yet, I decided to write one myself.
I've collected 30+ shortcuts for Sublime Text 3 I find the most useful.

Before every shortcut you will find an arrow which leads back here

Post content

Jump to file
Jump to line
Open command prompt
Reopen last closed file
Toggle Distraction-free mode
Search methods
Toggle clipboard
Toggle sidebar
Select line
Select duplicates
Duplicate line
Select content of an element
Move active line/selection up/down
Add cursor to next/previous line
Insert new line before/after
Replace two selection
Jump by words
Select by words
Delete from cursor to the start of active line
Delete from cursor to the end of active line
Sort
Select all occurrences of selected word(s)
Delete tab
Jump to matching brackets
Lower/uppercase selection
Close HTML tags
Skip selection
Wrap selection in HTML tag
Find/search
Find and replace
Find/search in all opened file

General

⇧1.Jump to file

Windows	MAC
`CTRL+P`	`⌘ + P`/`⌘ + T`

You can directly jump to any of the opened files quickly. Also, as you are typing the name of the file, ST3 opens the most relevant one by itself.
It also keeps a track of which files you have opened the most often, so it will automatically put them on the top, thus opening it already.

⇧2.Jump to line

Windows	MAC
`CTRL+G`	`⌃+G`

You can directly jump to any line you want easily.

⇧3.Open command prompt

Windows	MAC
`CTRL+Shift+P`	`⌘ + ⇧ + P`

With this you can open the command prompt where you can execute various commands, such as install package controll or package for example.

⇧4.Reopen last closed file

Windows	MAC
`CTRL+Shift+T`	`⌘ + ⇧ + t`

Accidentally closed a file? Yeah we all do that sometimes. So instead of opening the current folder(CTRL+O) and start looking for that file, just use this shortcut to open the file you have last closed.

⇧5.Toggle Distraction-free mode

Windows	MAC
`Shift+F11`	`⌃ + ⇧ + ⌘ + F`

⇧6.Search methods

Windows	MAC
`CTRL+R`	`⌘ + R`

This will toggle a list of all methods in your active file, and you can search them.

⇧7.Toggle clipboard

Windows	MAC
`CTRL+K+V`	`???`

With this you can toggle a popup with the last 15 of your copies.

⇧8.Toggle sidebar

Windows	MAC
`CTRL+K+B`	`⌘ + K, ⌘ + B`

Many might not know, but Sublime Text has a sidebar too. Might not be as advanced by default as that of VSCode, but it can still be useful.

Editing

⇧1.Select line

Windows	MAC
`CTRL+L`	`⌘+L`

Selects the current line. By repeating this command, you can keep on selecting the next lines.

⇧2.Select duplicates

Windows	MAC
`CTRL+D`	`⌘+D`

By repeating this command, you can select the occurrences of the current selection in the file.
Each time you use it, the next occurrence is being selected as well. By holding down the keys, it works a lot quicker.

⇧3.Duplicate line

Windows	MAC
`CTRL+Shift+D`	`⌘ + ⇧ + D`

Duplicates the current line, or the selected area.

⇧4.Select content of an element

Windows	MAC
`CTRL+Shift+A`	`⌘ + ⇧ + A`

You can easily select the whole content inside an element in HTML.

⇧5.Move active line/selection up/down

Windows	MAC
`CTRL+Shift+Up/Down`	`⌘ + ⇧ + Up/Down`

Move the active line or your selection up and down simply like that.

⇧6.Add cursor to next/previous line

Windows	MAC
`CTRL+Alt+Up/Down`	`⌃ + ⇧ + Up/Down`

You can add another cursor at the same position as the original one to the next/previous line.

⇧7.Insert new line before/after

Windows	MAC
`CTRL`(`+Shift`)`+Enter`	`⌘ +`(`⇧`)`+↩`

With CTRL+Shift+Enter you can insert a new line before the cursor, with CTRL+Enter you insert one after the cursor.

⇧8.Replace two selection

Windows	MAC
`CTRL+T`	`⌘+T`

Simply replace two selections with this command, instead of doing it manually all the time.

In case you don't know how to make multiple selection, just hold CTRL when selecting something.

⇧9.Jump by words

Windows	MAC
`CTRL+`(`Left`/`Right`)	`⌘+`(`Left`/`Right`)

Instead of simply just holding down the right arrow to get the cursor where you want, just use this command to get there much quicker by skipping a whole word with each jump.

⇧10.Select by words

Windows	MAC
`CTRL+Shift+`(`Left`/`Right`)	`⌘ + ⇧ +`(`Left`/`Right`)

You can also easily select multiple words easily by using the same method as above, but also holding Shift down. With this you will still jump by words, but you will also select everything.

⇧11.Delete from cursor to the start of active line

Windows	MAC
`CTRL+K+Backspace`	`⌘ + K + ⌫`

This will delete everything from the cursor's position to the start of the currently active line.

⇧12.Delete from cursor to the end of active line

Windows	MAC
`CTRL+K+K`	`⌘ + K, ⌘ + K`

This will delete everything from the cursor's position to the end of the currently active line.

⇧13.Sort

Windows	MAC
`F9`	`F5`/`⌃ + F5`

You can sort the selected area by the first characters with a simple keypress if you want to.

⇧14.Select all occurrences of selected word(s)

Windows	MAC
`Alt+F3`	`⌘ + ⌃ + G`

Similar to CTRL+D, but this will select all occurrences of your selection if the active file.

⇧15.Delete tab

Windows	MAC
`Shift+Tab`	`???`

Simply delete a tab before the selected area.

⇧16.Jump to matching brackets

Windows	MAC
`CTRL+M`	`⌃ + M`

Why you select an opening bracket, with this shortcut you can jump directly to the closing tag.

⇧17.Lower/uppercase selection

Windows	MAC
`CTRL+K+`(`U`/`L`)	`⌘ + K, ⌘ +`(`U`/`L`)

You can quickly transform the selected section to lower or uppercase.
For lowercase, use CTRL+K+L, for uppercase use CTRL+K+U.

⇧18.Close HTML tags

Windows	MAC
`Alt+.`	`⌘ + ⌥ + .`

Simply close all the tags that are missing the closing tag.

⇧19.Skip selection

Windows	MAC
`CTRL+K+D`	`???`

When selecting duplicates, you can skip the next with this shortcut.

⇧20.Wrap selection in HTML tag

Windows	MAC
`Alt+Shift+W`	`???`

Easily wrap the selection in a HTML tag. It is wrapped in a p tag by default, but just start typing and you will rename both the opening and closing tag

Find/replace

⇧1.Find/search

Windows	MAC
`CTRL+F`	`⌘ + F`

This is a basic search command, to quickly find what you're looking for in your currently active file.

⇧2.Find and replace

Windows	MAC
`CTRL+H`	`⌘ + ⌥ + F`

With this you can find each occurrence of something in your active file, and can replace it with something else, one by one, or all of them immediately.
Use CTRL+Shift+H to replace them one by one, and CTRL+Alt+Enter to replace all.

⇧3.Find/search in all opened file

Windows	MAC
`CTRL+Shift+F`	`⌘ + ⇧ + F`

If you want to search for something in several/all files, this is your option to do it.
You can quickly search for anything in all opened files, and the search results will be opened in a new tab, listing all the matches, the file name and the line where the search value occurred.
Quickly open the results with Alt+Enter shortcut.

10 of the best CSS animation libraries.

Patrik Kiss — Sun, 05 Jan 2020 12:28:56 +0000

In this article I'm showing you 10 of the best CSS animation libraries I have found/encountered so far.

I have tried around 30 overall, majority of them were just smaller ones, some were larger, but in the end, these 10 are the ones I had found the best.
Note that these are all libraries that require no JS to work.

Content of the post

1.Animista
2.Animate CSS
3.Vivify
4.Magic Animations CSS3
5.cssanimation.io
6.Angrytools
7.Hover.css
8.WickedCSS
9.Three Dots
10.CSShake

Content of each one

Cover image
Short introduction
Usage and functions
Github embed(if exists)

1.Animista

This is actually a site I have discovered not too long ago, but I've fallen in love with it immediately. Honestly, this would deserve its own post.

Animista is an online animation generator and library at the same time, which provides you the following features:

1.Choose from various animations

You can choose what type of animations you'd like(like entrance/exist), besides that you can choose a certain one(eg: scale-in), and even more, you can even choose different variants for that animation(eg: scale-in-right).

2.Customization

Animista also provides you a feature which allows you customize certain parts of the animation, such as

duration
delay
or direction

What is even better, you can choose the object you want to animate
It can be:

a simple centered block
a character
background
or even an image.

3.Get the CSS code

After you have chosen an animation, adjusted to your needs, you can get the code directly from the website.
You can even choose to minify your code.

4.Download selected animations

Another amazing feature is that you can like a certain animation, which basically puts it to your list, and you can download the code of only the ones you have liked. Or you can also choose to copy the code of the those animations together.

But what's even better in this site, that's it's fully responsive, meaning, even if you are on phone now, you can go and try it.

2.Animate CSS

Of course, I must mention Animate CSS too, probably one of the most well known animation library.
I will give a short guide to the usage of it.

1.Usage

You always need to add animated class to any element you want to animate, and then the name of the animation.
Example

<div class="animated slideInLeft"></div>

If you want the animation to be consistent, you can add the infinite class, so the animation will repeat itself nonstop.

With Javascript

document.querySelector('.my-element').classList.add('animated', 'slideInLeft')

With Jquery

$(".my-element").addClass("animated slideInLeft")

2.Extra features

Animate CSS provides you some basic classes to manipulate the delay and the speed of the animation.

delay

You can add delay to your animation with the delay class

<div class="animated slideInLeft delay-{1-5}"><div>

speed

You can also control the animation speed by adding one of the classes listed.

Class name	Speed time
slow	2s
slower	3s
fast	800ms
faster	500ms

<div class="animated slideInLeft slow|slower|fast|faster"><div>

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css

If you need the old docs - v3.x.x and under - you can find it here.

Just-add-water CSS animation

Installation

Install with npm:

npm install animate.css --save

Install with yarn:

yarn add animate.css

Getting Started

You can find the Animate.css documentation on the website.

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

Core Team


Daniel Eden	Elton Mesquita	Waren Gonzaga
Animate.css Creator	Maintainer	Core Contributor

License

Animate.css is licensed under the Hippocratic License.

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code…

View on GitHub

3.Vivify

Vivify is an animation library, which I have always considered an enhanced version of Animate CSS. It works exactly the same way, has most of its classes, but extended with some more. Instead of adding animated class to an element, you add vivify. For example

<div class="vivify slideInLeft"></div>

With Javascript

document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')

With Jquery

$(".my-element").addClass("vivify slideInLeft")

Just like Animate CSS, Vivify also provides you some classes to control the duration and delay of your animations.
Both delay and duration classes are available in the following intervall:

<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>

Note that these values are in ms. 1000ms=1s

Martz90 / vivify

Vivify is free CSS animation library.

Vivify web presentation

Vivify is free CSS animation library.

Usage

Simply include vivify css file into your document's <head>

<link href="vivify.min.css" rel="stylesheet" type="text/css"/>

Add class vivify to the element you want to animate. If you want your animation to be infinite, you can also add infinite class.

List of class names you can add

ball
blink
driveInBottom
driveInLeft
driveInRight
driveInTop
driveOutBottom
driveOutLeft
driveOutRight
driveOutTop
fadeIn
fadeInBottom
fadeInLeft
fadeInRight
fadeInTop
fadeOut
fadeOutBottom
fadeOutLeft
fadeOutRight
fadeOutTop
flip
flipInX
flipInY
flipOutX
flipOutY
fold
hitLeft
hitRight
jumpInLeft
jumpInRight
jumpOutLeft
jumpOutRight
popIn
popInBottom
popInLeft
popInRight
popInTop
popOut
popOutBottom
popOutLeft
popOutRight
popOutTop
pullDown
pullLeft
pullRight
pullUp
pulsate
rollInBottom
rollInLeft
rollInRight
rollInTop
rollOutBottom
rollOutLeft
rollOutRight
rollOutTop
shake
spin
spinIn
spinOut
swoopInBottom
swoopInLeft
swoopInRight
swoopInTop
swoopOutBottom
swoopOutLeft
swoopOutRight
swoopOutTop
unfold

Preview all animations here

delay and duration classes

If you want to quickly change delay or duration you…

View on GitHub

4.Magic Animations CSS3

This animation library has some really nice and smooth animations, I especially like the 3D ones.
Not much to say about it, go try it yourself, play with the animations.
Here you add
magictime {animation_name} to your element.

<div class="magictime fadeIn"></div>

With Javascript

document.querySelector('.my-element').classList.add('magictime', 'fadeIn')

With Jquery

$(".my-element").addClass("magictime fadeIn")

miniMAC / magic

CSS3 Animations with special effects

🎩 magic

CSS3 Animations with special effects. (→ 3.1 kB gzip)

Demo

Checkout the demo for the animations here

Installation

GitHub Package Registry - Package url

npm install @minimac/magic.css

NPM - Package url

npm i magic.css

YARN - Package url

yarn add magic.css

Getting Started

Include the file magic.css or include the minified version magic.min.css

<link rel="stylesheet" href="yourpath/magic.css">

<link rel="stylesheet" href="yourpath/magic.min.css">

Usage with JavaScript

This is a sample code for on hover effect with JavaScript. First, Include the class magictime and then a desired animation class.

const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')

If you…

View on GitHub

5.cssanimation.io

cssanimation.io is a collection of a whole bunch of different animations, probably around 200 overall, which is amazing.
If you don't find the animation you need here, then you will find it nowhere.

It works similarly to Animista. For example, you can choose an animation and get the code directly from the site, or you can download the entire library too.

Usage

Add cssanimation {animation_name} to your element.

<div class="cssanimation fadeIn"></div>

With Javascript

document.querySelector('.my-element').classList.add('cssanimation','fadeIn')

With Jquery

$(".my-element").addClass("cssanimation fadeIn")

You can also include the infinite class, so the animation will keep on repeating itself.

<div class="cssanimation fadeIn infinite"></div>

Moreover, cssanimation.io provides you a feature to anime letters as well.
For this, you will need the letteranimation.js file included in the head tag, as always, then add le{animation_name} to your text element.

<div class="cssanimation leSnake"></div>

To animate the letters in order, add sequence class, to animate them randomly, add random class.

<div class="cssanimation leSnake {sequence|random}"></div>

Sequence

Random

yesiamrocks / cssanimation.io

CSS Animation Library for Developers and Ninjas

Getting started with cssanimation.io

In modern web concept, cssanimation.io is the best controlling animation library for CSS and GreenSock, Moving forward with this library, you need to have a basic idea on HTML and CSS3. We believe you have that. If you are pretty confused, just refreshing your idea from here to go along more easily.

This library is too easy to install and implement. Anything you can be done with our relevant animation class name. So Download and let’s get started with this library.

We also offer to you GreenSock animation, just fly over here to get the guideline.

To get started, from the outset you download the complete library or use a CDN hosted version by jsDelivr. All CDN URLs below:

cssanimation.css: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/cssanimation.min.css
cssanimation.min.css: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/cssanimation.min.css
letteranimation.js: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/letteranimation.js
letteranimation.min.js: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/letteranimation.min.js
cssanimation greenSock version: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/gsap-version/cssanimation-gsap.js
cssanimation greenSock min version: https://cdn.jsdelivr.net/gh/yesiamrocks/cssanimation.io@1.0.3/gsap-version/cssanimation-gsap.min.js

Usage

Include the cssanimation.css or cssanimation.min.css stylesheet into the…

View on GitHub

6.Angrytools

Angrytools is actually a collection if different generators, which includes CSS animation generator as well.
It may not be as complex as Animista, but I found this pretty great too.
This site also provides you some features to customize the animation, like its duration or delay.
But what I like about it, is that you can add keyframes yourself on a so called timeline, then you can write the code directly there. Also, you can edit the existing ones too.

You can get the complete code of the animation when you're finished, or you can download it you want to.

7.Hover.css

Hover.css is a collection of a lot of CSS animation that unlike the ones above, get triggered everytime you hover an element.

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

It has some really amazing animations. And what is more, it also has classes to animate icons as well, such as font awesome.
Read about Font Awesome in my previous article

Font Awesome guide and useful tricks you might not know about.

Patrik Kiss ・ Dec 21 '19

#webdev #html #beginners #tutorial

Usage

It is very simple: just add the name of the class to you element, like

<button class="hvr-fade">Hover me!</button>

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Demo | Tutorial

Download/Install

NPM: npm install hover.css --save
Bower: bower install hover --save
Download Zip

How To Use

Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd…

View on GitHub

8.WickedCSS

WickedCSS is a small CSS animation library, it doesn't have too many animation variants, but the ones it has at least are great. Most of them are the basics we are already familiar with, but they are really clean.

Its usage is simple, just add the name of the animation to your element.

<div class="bounceIn"></div>

With Javascript

document.querySelector('.my-element').classList.add('bounceIn')

With Jquery

$(".my-element").addClass("bounceIn")

kristofferandreasen / wickedCSS

A library for CSS3 animations. The animations are more vibrant than most simple animations.

wickedCSS

A library for CSS3 animations.

The animations include regular CSS3 animations to be used in all settings Additionally, the library includes a number of wicked animations, which aren't applicable in all situations They can be fun to play with.

For examples and documentation View Project Page.

Usage

To use the library, simply download and link to the file in your header.

<link rel="stylesheet" href="wickedcss.min.css"/>

Or the non-minified version.

<link rel="stylesheet" href="wickedcss.css"/>

Simply add the animation class to your element and it will perform your wicked animation.

<div class="barrelRoll"> Place your content here </div>

In this case, the contents of the div will perform the barrelRoll animation. All the classes can be found on the Project Page.

The classes can be applied to all elements including images.

<img src="images/mushroom.png" class="spinner"/>

Classes

floater
barrelRoll
rollerRight
rollerLeft
heartbeat
pulse
rotation
sideToSide
zoomer
zoomerOut
spinner
wiggle
shake
pound
slideUp
slideDown
slideRight
…

View on GitHub

9.Three Dots

Three Dots is a set of CSS loading animations created with three dots which made by just single element.

Usage

Just create a div element, and add the name of the animation

<div class="dot-elastic"></div>

nzbin / three-dots

🔮 CSS loading animations made with single element.

Three Dots

Three Dots is a set of CSS loading animations made with just single element. I think the project can not only enhance your CSS skills but also improve your imagination.

Installation

npm install three-dots --save

Usage

Import the styles in your Sass file:

@use 'three-dots';

Add just one div tag:

<div class="dot-elastic"></div>

Here’s the list of three-dots classes you can choose from:

dot-elastic
dot-pulse
dot-flashing
dot-collision
dot-revolution
dot-carousel
dot-typing
dot-windmill
dot-bricks
dot-floating
dot-fire
dot-spin
dot-falling
dot-stretching

Customization

Customize the dot's size ( color, spacing, etc. ) with Dart Sass API.

@use 'three-dots' with (
  $dot-width: 20px,
  $dot-height: 20px,
  ...
);

The available variables and their default values.

$dot-width: 10px
$dot-height: 10px;
$dot-radius: $dot-width/2;

$dot-color: #9880ff;
$dot-bg-color:

…

View on GitHub

10.CSShake

And finally, some shaky shake.
As its name suggests, CSShake is a CSS animation library that contains different types of shake animations.

Usage

Add shake {animation_name} to your element.

<div class="shake shake-hard"></div>

With Javascript

document.querySelector('.my-element').classList.add('shake','shake-hard')

With Jquery

$(".my-element").addClass("shake shake-hard")

elrumordelaluz / csshake

CSS classes to move your DOM!

CSShake

Some CSS classes to move your DOM!

Live Demo

Download Center

You could download the complete csshake.css file or separated files for each shake animation (i.e csshake-little.css). Each one expanded or minified.

Why

I had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS. After finish it I discover this cool jQuery plugin by @jackrugile. Then I started to think in made this little CSS project

Install

Fork this repo

  $ git clone https://github.com/elrumordelaluz/csshake.git

or via Bower

  $ bower install csshake

or via npm

  $ npm i csshake

scripts

  $ npm run watch
  $ npm run build:raw
  $ npm run build:min

CDN

Now is also available in cdnjs for each shake animation: https://cdnjs.com/libraries/csshake

How to use

First include the CSS file

<link rel="stylesheet" type="text/css" href="csshake.css" />`

Then call the different classes on the element you want to shake!

<div class="shake"></div&gt
<div

…

View on GitHub

Font Awesome guide and useful tricks you might not know about.

Patrik Kiss — Sat, 21 Dec 2019 10:12:12 +0000

Many of you have probably at least heard about Font Awesome, or maybe even use it on daily basis.

But in case you don't know about it, Font Awesome is an amazing icon library for web, with thousands of icons in different styles.

It uses SVG to create icons, but don't worry, you don't need to know anything about SVG! Let's begin then

FA icons have 4 styles

Solid
Regular
Light
Duotone

Out of these, solid is free most of the time, the rest are in the pro version only.

To use any feature of Font Awesome, first you need to include this line in your HTML's head tag.



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

Or the minified version



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

And this is how the formula looks like for an icon



<i class="fa[first letter of style(s|r|l|d)] fa-[name of the icon]"></i>

The icons always use the i tag, and everything goes in the class attribute.

Now that we went through the very basics, let me show you some really useful features that Font Awesome provides you!

1.Sizing icons

That's right! FA allows you to size their icons without using any CSS, by creating their own classes, which you just need to add to the icon



<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

fa-#x classes are available from 2-10(fa-[2-10]x). Here's the font size of each class

Isn't it much easier this way?

2.Icons in a list

You can easily add icons before the list elements by adding fa-ul class to your list and wrapping the icon in a span with the fa-li class



<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

3.Rotating icons

You can also rotate your icons without the use of CSS's transform property, only adding one more class!



<div class="fa-4x">
  <i class="fas fa-snowboarding"></i>
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>
  <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  <i class="fas fa-snowboarding fa-flip-vertical"></i>
  <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

Here's what these classes do

4.Animating icons

Also by only adding a simple class, FA provides you some basic animations to add to your icons, such as spin(fa-spin) and pulse(fa-pulse)



<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

5.Stacking icons

For this, you just need to add fa-stack class to the parent element, and inside it just regularly put icons, like this



<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

The following features require the JS version of Font Awesome!
Include this inside your head tag.



<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>

Or the minified version



<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>

6.Scaling icons

Scaling affects icon size without changing or moving the container. To scale icons up or down, use grow-# and shrink-# with any arbitrary value, including decimals.

So you can change the size of an icon, without affecting the parent element.

Here's an example:



<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

7.Positioning icons

Positioning affects icon location without changing or moving the container. To move icons up, down, left, or right, use up-#, down-#, left-#, and right-# with any arbitrary value, including decimals.

You can also position the icons, without affecting the parent element. It's almost like an absolute positioning in CSS.

Example



<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

8.Masking icons

This feature allows you to combine 2 icons into 1, similar to stacking.



<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
</div>

There, we have combined



<i class="fas fa-comment"></i>

with



<i class="fas fa-pencil-alt"></i>

How it works
In the class attribute goes the name of the inner icon, fas fa-pencil-alt, following the above example. In the data-fa-mask attribute goes the name of the outer icon. In this case fas fa-comment

9.Text over icons

You can add a text over an icon.



<span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
  </span>

You need to wrap the icon into a span for example, and add the fa-layers class to it.
Inside it add the icon, and another span element, which contains the text, with the fa-layers-text class.

10.Adding counter to icons

You can also add a counter to an icon. Good example is to display the number of messages received on an envelope icon.



<span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>

It works the same way as putting text over an icon, but instead of fa-layers-text, you need to add the fa-layers-counter class.

The counter is positioned at the top-right corner by default, but you can position it elsewhere too.

Can be positioned with fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right. Overflow text is truncated with an ellipsis.

Awesome, isn't it?

Is there any plan for adding polls to DEV?

Patrik Kiss — Fri, 20 Dec 2019 21:23:09 +0000

Is there any plan on adding an option to create a poll in DEV posts?

DEV has really a lot of features, and even though I'm relative a new member, sometimes I'm missing the opportunity to create a poll.

What's one of the ugliest piece of code you've written so far?

Patrik Kiss — Thu, 19 Dec 2019 16:51:12 +0000

We have all written ugly code so far, that's a fact. Some are just bad, some are worse. And some other ones are just disgusting. Naturally, I'm no exception either.

For me, it's probably this one(prepare yourself):

function S1E23(){
    document.getElementById("Season3div").style.display="none";
    document.getElementById("Season4div").style.display="none";
    document.getElementById("director").style.display="block";
    document.getElementById("directorname").innerHTML="<a target=blank href=https://www.imdb.com/name/nm0236173/?ref_=tt_ov_dr>Dermott Downs</a>";
    document.getElementById("episode23buttons").style.display="block";
    document.getElementById("episode2buttons").style.display="none";
    document.getElementById("episode3buttons").style.display="none";
    document.getElementById("episode4buttons").style.display="none";
    document.getElementById("episode5buttons").style.display="none";
    document.getElementById("episode6buttons").style.display="none";
    document.getElementById("episode7buttons").style.display="none";
    document.getElementById("episode8buttons").style.display="none";
    document.getElementById("episode9buttons").style.display="none";
    document.getElementById("episode10buttons").style.display="none";
    document.getElementById("episode11buttons").style.display="none";
    document.getElementById("episode12buttons").style.display="none";
    document.getElementById("episode13buttons").style.display="none";
    document.getElementById("episode14buttons").style.display="none";
    document.getElementById("episode15buttons").style.display="none";
    document.getElementById("episode16buttons").style.display="none";
    document.getElementById("episode17buttons").style.display="none";
    document.getElementById("episode18buttons").style.display="none";
    document.getElementById("episode19buttons").style.display="none";
    document.getElementById("episode20buttons").style.display="none";
    document.getElementById("episode21buttons").style.display="none";
    document.getElementById("episode22buttons").style.display="none";
    document.getElementById("episode1buttons").style.display="none";
    document.getElementById("Season2div").style.display="none";
    document.getElementById("Season1div").style.display="block";
    document.getElementById("review").style.display="block";
    document.getElementById("reviewlink").style.display="block";
    document.getElementById("reviewlink").innerHTML="<a target=blank href=http://www.ign.com/articles/2015/05/20/the-flash-fast-enough-review>Read here</a>";

    document.getElementById("trailer").style.display="block"
    document.getElementById("promo").style.display="block"
    document.getElementById("promo").innerHTML="<a target=blank href=https://www.youtube.com/watch?v=Qx90DwHjIvk>Watch here</a>";

    document.getElementById("episodeinformation").style.display="block";
    document.getElementById("episoderate").style.display="block";
    document.getElementById("episodedate").style.display="block";
    document.getElementById("episodelength").style.display="block";
    document.getElementById("date").innerHTML="19 May 2015";
    document.getElementById("star").style.display="block";
    document.getElementById("length").innerHTML="44 min";
    document.getElementById("ratenumber").innerHTML="9.6";
    document.getElementById("episodeimage").src="s1e23.png";
    document.getElementById("episodetitle").innerHTML = "<div id=episodetitle>Season 1 Episode 23:Fast Enough</div>";
    document.getElementById("episodedescription").innerHTML="<p> Once the preparations were set for Barry to travel back in time,"+
" he traveled back to the night Nora died. However, despite this,"+
" Barry's alternative future self saw Barry and signaled him to not to interfere and proceeded"+
" to transport his younger self 20 blocks away.<br><br> Barry, in tears, obeyed. He spoke to Nora once last time,"+
" revealing his identity to her, and assured her that he and Henry are okay in the future."+
" In the present, Eobard gets into the time machine Cisco made,"+
" remarking that Rip Hunter first designed it.<br><br> Cisco warns him never to return."+
" Suddenly, a helmet with wings on top comes out of the wormhole, which Eobard takes as his signal to leave. "+
"However, Barry returns, destroying the time machine with a supersonic punch.</p>";

}

I'd written this back when I just started programming, I was a total beginner, and I made a static website about The Flash. Back then I'd thought it was really good, but now I obviously know it's not. It is seriously terrible, like for real.

And if it's not enough, I had repeated the function above around 70 times, only changing 1 line, where I set the display of the current episode to block. Thus the JS file consisted of thousands of lines of ugly code.

It's your turn now, share the worst piece of code you have written so far :D

Have you ever been tasked to work with a language/framework you were not familiar with at all?

Patrik Kiss — Wed, 18 Dec 2019 19:21:09 +0000

Have you ever been tasked to work with a programming language/framework you either knew only a very little about, or almost nothing at all?

If so, how did you deal with it?

What are the most common mistakes you make as a programmer?

Patrik Kiss — Sat, 14 Dec 2019 16:06:19 +0000

We all make mistakes from time to time. Most of the times we learn from it, to avoid making it again in the future.

But in some cases, we just can't learn the lesson, and we keep making the same stupid mistakes over and over again.

For you, what are those mistakes you keep making, be that typo, not calling a function or anything else.

Being alone in the programming world is really bad.

Patrik Kiss — Thu, 12 Dec 2019 22:45:53 +0000

So this will be a post about my personal experience, about what it's like to be alone as a programmer.

So first, by alone I don't mean being alone as a person, not having friends, family or anything.

What I mean is coding alone everytime, not having any other programmers around you, not knowing other programmers, who you could discuss programming related topics with.

And unfortunately, my situation is like that as well, since I have no job yet, and I code at home alone. And here are some reasons why it is really bad.

1. Can't ask anyone for help

This is probably the worst part of it. Whenever I'm either stuck with a bug, or simply can't figure out how to solve something, I can never ask anyone for help directly. Sure I can ask a question maybe here, or mainly Stack Overflow, but that's just not the same. Even if I get an actual response, that won't happen immediately. And it's also not the same as discussing the code in person and real time.

So many times I can't solve something, it either takes more time to solve it, or I'm forced to do it in another way, which would work, but the quality of the code wouldn't be as good.

2. Can't discuss code with anyone

I kind of mentioned it above, but I thought this should be another point too.

This is also a big problem. Even if I have a working piece of code, I can't discuss it with anyone, like how it could be improved yet. If I come up with an alternative solution for something, I also can't ask for the opinion of another programmer.

3. I don't get any feedback

This one is just as bad as the previous one.
For more experienced programmers, like seniors, it's probably not as important to get feedbacks on their works and code as often as possible, since they are already well aware of their skills and capabilities as a programmer.

But for juniors like myself, it is very important to get constant feedback on our work and code, either a good or bad one.

Everytime I code something I'm actually proud of, it feels really bad that I can't brag about it to anyone, can't show it off, to get any kind of feedback, or praise. But in fact, it would feel really good if someone sometimes just said "good job"/"great code", etc.

It would also be great if someone would correct my stupid mistakes, tell me if I needlessly over complicated the code, thus constantly learning new things.

So without any feedback, everytime I write a code I believe to be good, I feel like this

4. Learning is much slower

And as I mentioned above, since no-one can correct stupid codes, mistakes, I won't know they are actually bad, and won't learn anything new. I won't know the better way to do something.

Maybe the way I coded XY thing is really terrible, but being a beginner, how would I know?

And there is no-one who would come up to me and say "what a terrible code"

Yes it would be harsh, and would probably make me feel bad at first, but hey, reality often hurts.

Of course it's not a good practice to scold a junior like this when s/he's still new to the job, but eventually it's necessary sometimes in my opinion(only if there's a reason for it).

5. It's more difficult to understand something new

Whenever I encounter something new, like a piece of code, obviously I'm trying to understand it, but many time so would fail, and just give up. And that's bad.

In cases like this, it would be really great if there was someone I could ask "hey, what does this code block do? I just can't understand it"

That's all I think

I really just shared my thoughts and experiences. Thanks for reading!

Does being an introvert influence the chance of getting hired at a job interview?

Patrik Kiss — Wed, 11 Dec 2019 17:28:43 +0000

As the title say, if someone is an introvert, how does that influence their chances of getting hired at a job interview?

Do the interviewers consider or a good or bad trait? Or they don't really care about it?

Since there are a lot of stages of being introvert, let's take myself as an example.

I am an introvert myself, but I don't feel nervous around crowds at all, and it never causes any problem to talk to strangers at all if they initiate a conversation, but if not necessary, I don't start talking by myself.

So let's say I'm at a job interview, and obviously questions will be asked, I can easily answer them(as long as I actually know what to say at all), although it wouldn't be hard for them to realize I'm an introvert, since I would definitely not force a conversation.

Although if the topic is something I'm interested in, I can talk a lot.

So being this kind of introvert, would it influence my chances in any way?