DEV Community: Roden

36 YouTube Channels 📺 that will help you become a better Developer 🧑‍💻

Roden — Fri, 17 Sep 2021 20:44:01 +0000

Introduction

The profession of a programmer, like many other professions related to IT, implies constant training. For even if you are a good specialist in your field, this does not mean that you have comprehended all the peaks of your profession. We always have something to learn. You can't just learn certain rules and formulas in order to become a professional.

You can study in different ways: read books and articles, find a mentor who will help you in mastering the knowledge of your profession, and so on.

But as a rule, in most cases we turn to YouTube. The fact is that it is much easier for us to perceive information through video, when there is a person who will explain everything to us simply and easily, how some function or technology works, what types of algorithms there are, and so on. Unfortunately, sometimes it is difficult for us to perceive information through simple text.

But fortunately we have YouTube. What would we do without him? He is our savior.

And that is why today I decided to give a list of channels that could at least help you become a better specialist for a little bit. (But this is not a fact)

1. Traversy Media

Here you can find excellent tutorials on layout, on the programming languages JS and PHP, as well as on the React and Vue frameworks.

2. DevTips

The channel has a number of interesting videos like how to make CSS animation with physics simulation or how to work with legacy code, as well as many interesting videos on CSS animations and React lessons. There are also videos where conversations with other developers are conducted. The only disadvantage is that the videos rarely come out, but they will not clog your tape. 😁

3. Programming with Mosh

Courses on React, React Native, Redux. Videos about Java, Python, MySQL and many other interesting things.

4. DesignCourse

An amazing channel where you can learn various CSS tricks, how to create beautiful animations, how to create SVG, which you can then animate, and so on. A great channel with a very interesting feed.

5. Frying Pan

A young channel where a guy who studies at a university and interns at a big tech company talks about general lifestyle, coding, academics/career paths, tech industry. There are no courses on the channel, but its videos are interesting to watch.

6. Ben Awad

Channel Description

I'm a software developer who makes videos about React, React Native, GraphQL, Typescript, Node.js, PostgreSQL, Python, and all things coding.

7. Fireship

A great channel that contains videos that, from a theoretical point of view, tell you how various programming languages work. There are also a number of videos on the topic of layout and animation creation. There are many great short and informative videos like "Tailwind in 100 Seconds" or "PostCSS in 100 Seconds". I think many people may like this channel.

8. Yuri Artyukh

On the channel you can find a lot of good videos on working with libraries such as Three.js and Pixi.js. There are also videos on Canvas and Webgl. Suitable for those who study 3D on the Web.

9. Adam Wathan

A channel where there are a huge number of videos on the Tailwind Css framework.

10. LevelUpTuts

Channel Description

1000+ free video tutorials created, recorded, edited, published and maintained by Scott Tolinski.

11. Design Medium

Channel Description

Design Medium is all about UI Design and Front-end Development. Here you'll find videos on Adobe XD, Web Design using HTML, CSS and JavaScript and Mobile App Design using React Native.

12. Wrong Akram

The channel is dedicated to creating a user interface using Adobe Xd and Invision Studio. There is also a video on how to implement these interfaces and animations using React.js and Node.js.

13. CodingNepal

Channel Description

Welcome to my channel "CodingNepal". Here I upload videos related to HTML, CSS, JavaScript, and PHP along with creative coding stuff such as CSS Animations & Effects.

I always provide the source codes of each video on my website - codingnepalweb.com for free. I believe my videos or codes help to inspire web designers & developers and also help to improve their skills.

14. dcode

Channel Description

On my channel you can find HTML, CSS & JavaScript tutorials, PHP tutorials, Node.js tutorials and Rust tutorials, as well as many other topics covered in web development. I also enjoy building JavaScript projects every now and then

15. freeCodeCamp.org

The channel is dedicated to everything related to programming. Learning various APIs, React, JS, GIT, browsers, and much more. A very good channel with a lot of useful information.

16. JavaScript Mastery

A channel with videos on how to create various chats, messengers, travel apps and much more using React.js.

17. Brian Design

On this channel you can find a lot of videos on how to create a slider, animation when scrolling, adaptive website design and also a lot of different elements using React.js

18. Kevin Powell

A wonderful channel dedicated to the deep study of CSS. Required for any Frontend developer.

19. Web Dev Simplified

Channel Description

Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers.

20. William Candillon

All content on the channel is strictly only about React.js. Here you will learn how to create interfaces and animations. Also on the channel there are many interesting conversational videos on the topic React.js

21. Coding Tech

The site is dedicated to It technologies. Here you will find videos from the usual videos on CSS, JS, Python and Django to blockchain and microservices. A very informative channel.

22. Hunor Márton Borbély

An interesting channel about the development of games in the browser, as well as the creation of SVG and 3D elements.

23. Code with Ania Kubów

Channel about JavaScript, React, React-Native, Next.js, Node.js, Express, GraphQL, serverless functions, working with databases and much more!

24. Joma Tech

The author of the channel talks about his life in Silicon Valley and about working at big tech companies. Very interesting.

25. Dev Ed

On this channel, you can learn how to create regular animation, and SVG animation using JS or pure CSS, how to create beautiful website templates and folded web elements. There are courses on JS and React. There are also training videos about Figma and Adobe XD, where you can learn not only how to create static layouts, but also learn how to create animations. Well, I just want to say that this is a very interesting channel where the author interestingly submits training material.

Tips from the comments

26. The Net Ninja

27. Coding Addict

28. LearnWebCode (by Brad Schiff)

29. CodeWithHarry

30. Amigoscode

31. Jack Herrington

32. Dennis Ivy

33. Coding Garden

34. Tech With Tim

35. The Coding Train

36. Dev Drawer

A small channel with videos about PHP, Wordpress, JS and CSS.

The End

Thank you for taking the time to my post. I want to warn you right away that in this collection I have made exactly those channels that I like. I am well aware that you may not like some of them, but believe me, they at least deserve attention. Thank you again and you can also offer your options for good YouTube channels in the comments.

I can advise you to subscribe to my Twitter, I also post my works there.

How to create Pure CSS Glitch Animation 🤖 for Images and SVG

Roden — Fri, 10 Sep 2021 18:08:31 +0000

Introduction

A few weeks ago, I made a post about how to make a Glitch Effect on pure CSS. But in that post I told you how to make a similar effect only for text. Today I want to tell you about how to implement such animation for images and SVG.

How to create Glitch Effect 🤖 Pure CSS

Roden ・ Aug 20 '21

#webdev #beginners #tutorial #css

Demo

Images

Here, in fact, everything is very simple. Almost the same technology as with text animation.

HTML

Creating our block with a picture:



<div class="img"></div>

CSS (SCSS)

1) We set styles for it (size and picture)



.img {
    position: relative;
    width: 400px;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(https://rawcdn.githack.com/Kerthin/links/247cc9065bac7d5c23b45ff677bf1d2bceeb4324/img/glitch/imgTV/vanille.png);
}

Vanilla Image

2) We create 2 copies of ours in the form of pseudo-elements using :before and :after with absolute positioning so that they are placed one after the other.



    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 400px;
      height: 300px;
      clip: rect(0, 0, 0, 0);
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }

3) After that, for each pseudo-element, we create our own horizontal margins from the original coordinates.

We also need to specify our own image for each pseudo-element, which is a modified original image using allow filters.

:before bg-image

:after bg-image

And we also need to add the name of our @keyframes animation to each pseudo-element that we will animate using the clip property.



    &::before {
      left: -6px;
      animation: glitch-effect 2s infinite linear alternate-reverse;
      background-image: url(https://rawcdn.githack.com/Kerthin/links/247cc9065bac7d5c23b45ff677bf1d2bceeb4324/img/glitch/imgTV/red.jpg);
    }
    &::after {
      left: 6px;
      animation: glitch-effect 3s infinite linear alternate-reverse;
      background-image: url(https://rawcdn.githack.com/Kerthin/links/247cc9065bac7d5c23b45ff677bf1d2bceeb4324/img/glitch/imgTV/blue.jpg);
    }

4) And now we can just use our clip animation, which we used in the previous post about Glitch Animation for text. But only in the value of the clip property, we must specify the size of our .img element in height and width (see item №1).



$steps: 17;

@keyframes glitch-effect{
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip: rect(random(300) + px, 400px, random(300) + px, 0);
        }
    }
}

Result

SVG

Here the idea is approximately exactly the same, only here it will be more convenient for us not to work with pseudo-elements, but simply to create 3 identical svg elements.

HTML

We create a common container and put 3 copies of our SVG in it.



<div class="svgWrap">
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
</div>

Using the ID #svgGlitch, we refer to our prepared SVG template, so as not to copy the entire SVG code 3 times in a row.

SVG Template



<svg id="svgGlitch" class="none" width="270" height="76" viewBox="0 0 270 76" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.84 38.288C0.84 49.488 4.376 58.48 11.448 65.264C18.52 72.048 27.64 75.44 38.808 75.44C45.048 75.44 50.536 74.224 55.272 71.792C60.04 69.328 63.64 66.56 66.072 63.488L61.176 59.552C58.936 62.624 55.944 65.04 52.2 66.8C48.488 68.56 44.28 69.44 39.576 69.44C30.392 69.44 23.176 66.4 17.928 60.32C12.712 54.24 10.072 46.512 10.008 37.136C9.944 27.888 12.408 20.656 17.4 15.44C22.392 10.192 29.256 7.568 37.992 7.568C41.288 7.568 44.584 8.032 47.88 8.96C51.208 9.888 53.976 11.232 56.184 12.992L61.032 7.376C58.088 5.328 54.584 3.76 50.52 2.672C46.456 1.584 42.248 1.04 37.896 1.04C27.112 1.04 18.232 4.656 11.256 11.888C4.312 19.12 0.84 27.92 0.84 38.288ZM48.312 47.216L57.864 48.896V65.648L66.072 63.488V48.896L72.36 47.216V42.416H48.312V47.216ZM53.016 10.4L55.896 24.032H61.368V2.62399H56.376L53.016 10.4ZM76.5855 74H100.106V70.16L92.5215 68.48L92.4255 48.704L92.5215 1.952L91.4175 0.463997L89.6415 0.367998L75.4335 1.99999V6.512L84.3615 7.952L84.4575 48.704L84.3615 68.48L76.5855 70.16V74ZM107.009 74H130.817V70.16L123.233 68.48L123.137 48.704L123.473 27.872L122.369 26H120.113L106.769 27.632V32.144L114.833 33.584L115.169 48.704L115.073 68.48L107.009 70.16V74ZM112.865 9.824C112.865 11.584 113.409 13.008 114.497 14.096C115.617 15.184 117.089 15.728 118.913 15.728C120.865 15.728 122.353 15.216 123.377 14.192C124.433 13.168 124.961 11.712 124.961 9.824C124.961 8.064 124.401 6.64 123.281 5.55199C122.193 4.464 120.737 3.92 118.913 3.92C116.961 3.92 115.457 4.432 114.401 5.456C113.377 6.48 112.865 7.936 112.865 9.824ZM134.737 32.144L142.561 32.72V48.704L142.225 66.176C142.225 69.056 142.737 71.152 143.761 72.464C144.817 73.744 146.577 74.384 149.041 74.384L160.225 72.608V68.768H153.409L151.057 66.032L150.625 48.704L151.441 19.28L149.857 17.36H147.601C146.545 19.344 145.073 21.488 143.185 23.792C141.329 26.096 138.513 27.696 134.737 28.592V32.144ZM148.801 32.144H161.329V27.248H148.993L148.801 32.144ZM166.385 51.2C166.385 58.304 168.577 64.064 172.961 68.48C177.377 72.864 182.913 75.056 189.569 75.056C195.265 75.056 199.665 74.048 202.769 72.032C205.873 69.984 208.177 67.952 209.681 65.936L207.233 63.056C205.473 64.688 203.457 66.064 201.185 67.184C198.913 68.272 196.113 68.816 192.785 68.816C187.793 68.816 183.585 67.136 180.161 63.776C176.769 60.384 175.057 55.872 175.025 50.24C174.993 43.68 176.385 38.72 179.201 35.36C182.017 31.968 185.377 30.272 189.281 30.272C192.193 30.272 194.657 30.944 196.673 32.288C198.689 33.6 199.841 35.2 200.129 37.088L205.937 31.184C204.177 29.168 201.921 27.632 199.169 26.576C196.417 25.488 193.121 24.944 189.281 24.944C183.137 24.944 177.777 27.472 173.201 32.528C168.657 37.584 166.385 43.808 166.385 51.2ZM199.313 33.2L201.377 42.944H206.129V25.904H201.761L199.313 33.2ZM215.617 74H237.217V70.16L230.593 68.48L230.497 48.704L230.593 1.904L229.249 0.367998H227.713L214.465 1.99999V6.512L222.433 7.952L222.529 48.704L222.433 68.48L215.617 70.16V74ZM230.353 39.44C231.985 36.912 234.113 35.024 236.737 33.776C239.393 32.496 242.001 31.856 244.561 31.856C247.601 31.856 249.937 32.736 251.569 34.496C253.201 36.224 254.017 38.144 254.017 40.256V48.704L253.921 68.48L246.337 70.16V74H269.185V70.16L262.081 68.48L261.841 48.704C261.841 48.704 261.873 47.568 261.937 45.296C262.033 43.024 262.081 40.704 262.081 38.336C262.081 34.176 260.833 30.912 258.337 28.544C255.873 26.144 252.177 24.944 247.249 24.944C243.345 24.944 239.633 26 236.113 28.112C232.625 30.224 230.161 32.864 228.721 36.032L230.353 39.44Z" />
</svg>

CSS (SCSS)

1) First, we need to specify the dimensions of our container and each SVG block separately. It is better to put the original sizes.



.svgWrap {
    position: relative;
    width: 270px;
    height: 76px;
}
.svgWrap__text {
    position: absolute;
    top: 0;
    left: 0;
    fill: #fff;
    background: #000;
    width: 270px;
    height: 76px;
}

2) Further, by analogy with the pictures, we set separate styles for each element. But this time instead of pseudo elements :before and :after, we will use :nth-child to access each child element separately.



  &:nth-child(2),
  &:nth-child(3) {
    clip: rect(0, 0, 0, 0); 
  }
  &:nth-child(2) {
    fill: #fffafa;
    left: -2px;
    animation: svg-glitch-effect 2s infinite linear alternate-reverse;
  }
  &:nth-child(3) {
    fill: #f5f5f5;
    left: 2px;
    animation: svg-glitch-effect 3s infinite linear alternate-reverse;
  }

In the case of SVG, we do not specify different images, but different colors using the fill property.

3) We animate according to the same principle: as with images. We specify the desired width and height of the elements.



$steps: 20;

@keyframes svg-glitch-effect{
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip: rect(random(75) + px, 270px, random(75) + px, 0);
        }
    }
}

Result

The End

Well, that's it. Some of you may have a question, why not just specify all these possibilities for creating Glitch animations in the previous post, if all these soposoby differ little from each other? Or why not just supplement the previous post with this information?

I will answer honestly, I was too lazy.

I can advise you to subscribe to my Twitter, I also post my works there.

18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Project

Roden — Fri, 03 Sep 2021 20:31:32 +0000

Introduction

Today I would like to give examples of good GitHub repositories that will help you implement complex animations, as well as useful functions in your projects.

So let's get started

1. Lottie-Web/Bodymovin

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Lottie for Web, Android, iOS, React Native, and Windows

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. They say a picture is worth 1,000 words so here are 13,000:

View documentation, FAQ, help, examples, and more at airbnb.io/lottie

Plugin installation

Option 1 (Recommended):

Download it from from aescripts + aeplugins: https://aescripts.com/bodymovin/

Option 2:

Or get it from the adobe store https://exchange.adobe.com/creativecloud.details.12557.html CC 2014 and up.

Other installation options:

Option 3:

download the ZIP from the repo.
Extract content and get the .zxp file from '/build/extension'
Use the ZXP installer from aescripts.com.

Option 4:

Close After Effects
Extract the zipped file on build/extension/bodymovin.zxp to the adobe CEP folder:
WINDOWS:
C:\Program Files…

View on GitHub

I want to start with my favorite repository. With this library, you can export the animation you created from Adobe After Effects directly to your website.

Examples:

2. Parallax.js

wagerfield / parallax

Parallax Engine that reacts to the orientation of a smart device

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

Check out the demo to see it in action!

1. Getting started

1.1 Installation

1.1 a) Using the CDN

Add <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> to your markup
Done!

Many thanks to the fine folks over at cdnjs for hosting our library.

1.1 b) Beginners

Head over to the releases Section
Download compiled.zip from the latest release
Extract the ZIP archive and locate the parallax.js and parallax.min.js files
- Use parallax.js if you want to snoop around in the code
- Use…

View on GitHub

With this library, you can create a beautiful parallax effect that you can control with the mouse movement. You can also adjust the speed of moving objects.

3. Flat Surface Shader [FSS]

wagerfield / flat-surface-shader

Flat Surface Shader for rendering illuminated triangles

Flat Surface Shader [FSS]

Simple, lightweight Flat Surface Shader written in JavaScript for rendering lit Triangles to a number of contexts. Currently there is support for WebGL, Canvas 2D and SVG. Check out this demo to see it in action.

Understanding Lighting

Simply put, FSS uses the Lambertian Reflectance model to calculate the color of a Triangle based on an array of Light sources within a Scene.

Light

A Light is composed of a 3D position Vector and 2 Color objects defining its ambient & diffuse emissions. These color channels interact with the Material of a Mesh to calculate the color of a Triangle.

Triangle

A Triangle is constructed from 3 Vertices which each define the x, y and z coordinates of a corner. Based on these 3 Vertices, a forth 3D Vector is automatically derived at the center of the Triangle – this is…

View on GitHub

4. Hover.css

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

5. Video.js Markers

spchuang / videojs-markers

Displays customizable markers upon progress bars of videojs players

Not actively maintained anymore.

Video.js Markers

A plugin that displays customizable markers upon progress bars of the video with Video.js. This could be used to show video breaks and show overlaid text on the video when playback reaches the specific break point.

Demo and Documentation

See here

JSBin Demo can be found here

Features

Display markers on progress bar, with hover-over tooltips
Display break overlays
Flexible styling
Support dynamically adding and removing markers

Download

Download master with git -- git clone git@github.com:spchuang/videojs-markers.git
Download zip/tar files for newest release
Download through bower -- bower install videojs-markers

Quick Start

Add the 'videojs.markers.js' plugin and stylesheet after including videojs script

<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<link href="videojs.markers.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src='../src/videojs.markers.js'></script>

Basic usage: display break markers in the video.

To add breaks in the video, simply add a new time (in seconds) in the list of breaks option.

// initialize video.js
var video

…

View on GitHub

With this plugin, you can place the necessary marks on the video that is present on your site, so that you can easily switch to the time codes you need.

6. Magic Grid

e-oj / Magic-Grid

A simple, lightweight Javascript library for dynamic grid layouts.

Magic Grid

A simple, lightweight Javascript library for dynamic grid layouts.

Creating a dynamic grid layout has never been easier. With Magic Grid, all you have to do is specify a container and listen for changes. A few other configuration options are available for convenience but it's all very simple. Check it out live on JSFIDDLE. You can read about the implementation details on CodeBurst.

Note: Every item in the grid must have the same width.

Sample Usage

Why not CSS Grid?

This question is addressed in the article:

Implementing a grid layout can quickly turn into a tricky task. If you have grid items that are always the same height, then you can probably make do with a Flexbox grid or some other CSS grid implementation. However, if you’re dealing with user-generated content, chances are, you don’t have the luxury of equal height components. One longer…

View on GitHub

This library will help you create an adaptive grid, where you do not have to create separate @media styles. Just specify the container and that's it.

7. Vue/React Content Loader

egoist / vue-content-loader

SVG component to create placeholder loading, like Facebook cards loading.

vue-content-loader

SVG component to create placeholder loading, like Facebook cards loading.

Features

This is a Vue port for react-content-loader.

Completely customizable: you can change the colors, speed and sizes.
Create your own loading: use the online tool to create your custom loader easily.
You can use it right now: there are a lot of presets already.
Performance
- Tree-shakable and highly optimized bundle.
- Pure SVG, so it's works without any javascript, canvas, etc.
- Pure functional components.

Install

⚠️ The latest version is compatible with Vue 3 only. For Vue 2 & Nuxt 2, use vue-content-loader@^0.2 instead.

With npm:

npm i vue-content-loader

Or with yarn:

yarn add vue-content-loader

CDN: UNPKG | jsDelivr (available as window.contentLoaders)

Usage

👀👉 Demo: CodeSandbox

<template&gt
  <content-loader></content-loader>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader,
  },
}

…

View on GitHub

SVG component to create placeholder loading, like Facebook cards loading.

Version for React.js:

danilowoz / react-content-loader

⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Features

⚙️ Customizable: Feel free to change the colors, speed, sizes, and even RTL;
👌 Plug and play: with many presets to use, see the examples;
✏️ DIY: use the create-content-loader to create your own custom loaders easily;
📱 React Native support: same API, as same powerful features;
⚛️ Really lightweight: less than 2kB and 0 dependencies for web version;

Index

Getting Started

npm i react-content-loader --save

yarn add react-content-loader

For React Native

npm i react-content-loader react-native-svg --save

yarn add react-content-loader react-native-svg

CDN from JSDELIVR

Usage

There are two ways to use it:

1. Presets, see the examples:

import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook /

…

View on GitHub

8. React Image Gallery

xiaolin / react-image-gallery

React carousel image gallery component with thumbnail support 🖼

React Image Gallery

Live Demo (try it on mobile for swipe support)

linxtion.com/demo/react-image-gallery

React image gallery is a React component for building image galleries and carousels

Features

Mobile swipe gestures
Thumbnail navigation
Fullscreen support
Custom rendered slides
RTL support
Responsive design
Tons of customization options (see props below)

Getting started

React Image Gallery requires React 16.0.0 or later.

npm install react-image-gallery

Style import options

# scss file import
@import "~react-image-gallery/styles/scss/image-gallery.scss";

# css file import
@import "~react-image-gallery/styles/css/image-gallery.css";

# js file import (using webpack)
import "react-image-gallery/styles/css/image-gallery.css";

Example

Need more example? See example/app.js

import ImageGallery from "react-image-gallery";
// import stylesheet if you're not already using CSS @import
import "react-image-gallery/styles/css/image-gallery.css";
const images = [
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1015/1000/600/",
    thumbnail: "https://picsum.photos/id/1015/250/150/",
  },
  {
    original: "https://picsum.photos/id/1019/1000/600/",
    thumbnail: "https://picsum.photos/id/1019/250/150/",
  },
];

class MyGallery extends

…

View on GitHub

9. WebSlides

webslides / WebSlides

Create HTML presentations in seconds —

WebSlides = Create stories with Karma

Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — https://webslides.tv/demos.

Download

Simply choose a demo and customize it in seconds. Latest version: webslides.tv/webslides-latest.zip.

What's in the download?

The download includes demos and images (devices and logos). All content is for demo purposes only. Images are property of their respective owners.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Features

Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
Slide counter.
Permalinks: go to a specific slide.
Autoslide.
Click to nav.
Simple CSS alignments. Put content wherever you want (vertical centering...)
40+ components…

View on GitHub

10. SVG.js

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG

SVG.js

A lightweight library for manipulating and animating SVG, without any dependencies.

SVG.js is licensed under the terms of the MIT License.

Installation

Npm:

npm install @svgdotjs/svg.js

Yarn:

yarn add @svgdotjs/svg.js

CDNs:

https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js

Documentation

Check svgjs.dev to learn more.

View on GitHub

Open Result

11. React Motion

chenglou / react-motion

A spring that solves your animation problems.

React-Motion

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

Animate a counter from 0 to 10. For more advanced usage, see below.

Install

Npm: npm install --save react-motion
Bower: do not install with bower install react-motion, it won't work. Use bower install --save https://unpkg.com/react-motion/bower.zip. Or in bower.json:

{
  "dependencies": {
    "react-motion": "https://unpkg.com/react-motion/bower.zip"
  }
}

then include as

<script src="bower_components/react-motion/build/react-motion.js"></script>

1998 Script Tag:

<script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
(Module exposed as `ReactMotion`)

Works with React-Native v0.18+.

Demos

Simple Transition
…

View on GitHub

What does this library try to solve?

For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the API.

Examples:

12. RELLAX

dixonandmoe / rellax

Lightweight, vanilla javascript parallax library

RELLAX

Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library. Update: Rellax now works on mobile (v1.0.0).

Demo Website

Getting Started

Using npm

npm install rellax --save

Using yarn

yarn add rellax

CDN

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>

Download Locally

if you're old school like us download and insert rellax.min.js in your html

<div class="rellax">
  I’m that default chill speed of "-2"
</div>
<div class="rellax" data-rellax-speed="7">
  I’m super fast!!
</div>
<div class="rellax" data-rellax-speed="-4">
  I’m extra slow and smooth
</div>

<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script>
  // Accepts any class name
  var rellax = new Rellax('.rellax');
</script>

<script>
  // Also can pass in optional settings block
  var rellax = new

…

View on GitHub

13. Dynamics.js

michaelvillar / dynamics.js

Javascript library to create physics-based animations

Dynamics.js

Dynamics.js is a JavaScript library to create physics-based animations

To see some demos, check out dynamicsjs.com.

Usage

Download:

GitHub releases
npm: npm install dynamics.js
bower: bower install dynamics.js

Include dynamics.js into your page:

<script src="dynamics.js"></script>

You can animate CSS properties of any DOM element.

var el = document.getElementById("logo")
dynamics.animate(el, {
  translateX: 350,
  scale: 2,
  opacity: 0.5
}, {
  type: dynamics.spring,
  frequency: 200,
  friction: 200,
  duration: 1500
})

You also can animate SVG properties.

var path = document.querySelector("path")
dynamics.animate(path, {
  d: "M0,0 L0,100 L100,50 L0,0 Z",
  fill: "#FF0000",
  rotateZ: 45,
  // rotateCX and rotateCY are the center of

…

View on GitHub

14. mo · js

mojs / mojs

The motion graphics toolbelt for the web

mo · js –

The motion graphics toolbelt for the web.

Intro

mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it has a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease.

The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.

Install

Use with a bundler

Mojs is published on the NPM registry, so you can install it through the command line interpreter using your favorite package manager. This is the best way to install the…

View on GitHub

The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way

Click on any circle

15. Reveal.js

hakimel / reveal.js

The HTML Presentation Framework

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com.

The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.

Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.

Getting started

🚀 Install reveal.js
👀 View the demo presentation
📖 Read the documentation
🖌 Try the visual editor for reveal.js at Slides.com
🎬 Watch the reveal.js video…

View on GitHub

16. Animsition

blivesta / animsition

A simple and easy jQuery plugin for CSS animated page transitions.

Animsition

A simple and easy jQuery plugin for CSS animated page transitions.

Demo & Installation

http://git.blivesta.com/animsition/

Development

Install : nodejs npm gulp

$ git clone https://github.com/blivesta/animsition.git
$ cd animsition
$ git checkout -b patch-1
$ npm install && gulp

Build

$ gulp build

Build -> Watch

$ gulp

CDN

cdnjs

dist/css/animsition.css
dist/css/animsition.min.css
dist/js/animsition.js
dist/js/animsition.min.js

Contributing

To contribute to animsition, clone this repo locally and commit your code.
Please check that everything works before opening a pull-request.

Contributors

License

Released under the MIT license.

WordPress plugin

Page Transition

@numixtech
@gauravpadia
@asalamwp

View on GitHub

17. SVG Mesh 3d

mattdesl / svg-mesh-3d

🚀 converts a SVG path to a 3D mesh

svg-mesh-3d

[

](http://mattdesl.github.io/svg-mesh-3d/)

(ThreeJS demo) - (source)

A high-level module to convert a SVG <path> string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs.

Built on top of cdt2d by @mikolalysenko, and various other modules.

Install

npm install svg-mesh-3d --save

Example

Here is an example using a simple path:

var svgMesh3d = require('svg-mesh-3d')

var path = 'M305.214,374.779c2.463,0,3.45,0.493...'
var mesh = svgMesh3d(path)

The returned mesh is a 3D indexed "simplicial complex" that can be used in ThreeJS, StackGL, etc. It uses arrays for vectors and follows the format:

{
  positions: [ [x1, y1, z1], [x2, y2, z2], ... ],
  cells: [ [a, b, c], [d, e, f] ]
}

Or, to load a mesh in…

View on GitHub

A high-level module to convert a SVG string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs.

18. Zdog

metafizzy / zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog

Round, flat, designer-friendly pseudo-3D engine

View complete documentation and live demos at zzz.dog.

Install

Download

zdog.dist.min.js minified, or
zdog.dist.js un-minified

CDN

Link directly to Zdog JS on unpkg.

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

Package managers

npm: npm install zdog

Bower: bower install zdog

Hello world demo

Create 3D models with Zdog by adding shapes. See Getting started for a walk-through of this demo.

let isSpinning = true;
let illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  zoom: 4,
  dragRotate: true,
  // stop spinning when drag starts
  onDragStart: function() {
    isSpinning = false;
  },
});

// circle
new Zdog.Ellipse({
  addTo: illo,
  diameter: 20,
  translate: { z: 10 },
  stroke: 5,
  color: '#636',

…

View on GitHub

With this library, you can create pseudo-3d elements, while you do not need to know geometry or algebra to create geometric shapes. This library is very easy to learn and learning will not take you much time.

You can drag it

The End

Thank you for taking your time to my post. You can also recommend the GitHub repositories you use. Or suggest a better alternative to the repositories that are presented in this post.

I also advise novice frontend programmers not to try to implement some complex task on their own, but it is better to use a ready-made solution so as not to generate a lot of problems in their own and third-party projects.

No need to re-invent the wheel.

I can advise you to subscribe to my Twitter, I also post my works there.

8 Great Developer Extensions ⚙️ for Your Browser 🧑‍💻

Roden — Fri, 27 Aug 2021 16:44:55 +0000

Introduction

Today I would like to talk about browser plugins that help make the life of a web developer easier.

In this post, I decided to give an example of 8 plugins that I often use while working or if I surf in the browser.

So let's get started

1. ColorZilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.

This is a great plugin that will help you determine the code of any color on any pixel that you have pointed at with a special pipette. This works with both websites and images. If you can't point the eyedropper at the image, because the image begins to disappear, then open the image in a separate window.

a) Click Pick Color From Page

b) We point the pipette at the desired area and click

c) Open the Color Picker

2. PerfectPixel

PerfectPixel allows developers and markup designers put a semi-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison between them.

3. Window Resizer

This extension re-sizes the browser's window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.

4. Wappalyzer

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, eCommerce platforms, web servers, JavaScript frameworks, analytics tools and many more.

5. FireShot

Take FULL webpage screenshots. Capture, edit and save them to PDF/JPEG/GIF/PNG, upload, print, send to OneNote, clipboard or email.

6. Pinterest Save Button

Save your favorite ideas online so you can easily get back to them later.

With this plugin, you can add any images you like from any to yours collections to your Pinterest account.

When you hover over the image, you will see a red button in the upper right corner with which you can select the Pinterest collection to which you want to save the image.

a) Choosing the image

b) Save

7. Vue.js devtools

Chrome and Firefox DevTools extension for debugging Vue.js applications.

An amazing plugin that simplifies your work in the browser. Allows you to see your component tree, as well as the data of the components themselves. I believe that this plugin is necessary for any Vue developer.

8. JSON Formatter

A very convenient plugin that makes JSON files more readable, and also makes links clickable.

The End

Thank you for devoting your time to my post. You can also recommend plugins that you use. Or suggest a better alternative to the plugins that are presented in the post.

Transform your browsers

How to create Glitch Effect 🤖 Pure CSS

Roden — Fri, 20 Aug 2021 17:56:07 +0000

Introduction

Today I would like to talk about how to make a Glitch effect using CSS. To do this, I will use one of the most popular options. This is when we use pseudo-elements to create copies of the main element.

Demo

HTML

In the HTML section, we need to create just 1 tag, inside which you should write the text, and also duplicate it in the data-text attribute.

Like that:

<h1 class="glitch" data-text="Glitch">Glitch</h1>

You can specify any tag. It is not necessary to use text tags.

CSS

We need to take into account that the pseudo-elements of our text should be located approximately at the same position as the main text.

Therefore, for pseudo-elements, we need to specify the position property with the value absolute.

.glitch {
    position: relative;

    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
    }
}

Now our text and its copies are on top of each other.

Before we continue creating the Glitch effect, it would be nice to add styles to our text to make it look more beautiful.

To do this, I will make our sans-serif font, the font size is larger, we create shadows and a linear gradient that completely copies our text.

.glitch {
    position: relative;
    font-family: sans-serif;
    font-size: 7em;
    text-transform: uppercase;
    text-shadow: 6px -6px 0px #fd5f00;
    background: repeating-linear-gradient(45deg, #005792, #005792 1px, #fff 2px, #fff 3px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Result:

Changing pseudo-elements

Now we need to shift each of our pseudo-elements in different directions. This is necessary in order to create the effect of shifting the text, as it happens during glitches.

To do this, we need to move each pseudo-element in the opposite direction from each other by a couple of pixels.

  &::before {
    left: 7px;
    text-shadow: 1px 0 #fd5f00;
  }

  &::after {
    left: 3px;
    text-shadow: -1px 0 #fd5f00;
  }

I decided to make the color of the pseudo-elements shadows the same as the main one, but you can make them different, in order to achieve the effect of a broken TV using black and blue colors.

Clip

Next, we need to use the clip property.

The clip property defines the area of the positioned element in which its contents will be displayed. Anything that doesn't fit in this area will be cut off and become invisible.

We use this property to alternately display the cropped parts of our pseudo elements.

Syntax:

clip: rect(Y1, X1, Y2, X2);

The values are the distance from the edge of the element to the clipping area.

clip: rect(top/right/bottom/left);

Therefore, in order to completely crop our pseudo-elements, we set an indent of 900 pixels on the right side. (You can use any value depending on the size of your element)

  &::before,
  &::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: $secondaryColor;
    color: $primaryColor;
    clip: rect(0, 900px, 0, 0);
    overflow: hidden;
  }

It is very important that the background property of pseudo-elements is exactly the same as that of the background, so that they merge and there are no problems with the display.

Clip Animation

In order to qualitatively animate our elements, we need to create a step-by-step animation, where we will change the first and third values in the clip property, so that our pseudo-elements are displayed only in parts during the animation from top to bottom.

In this case, the second and fourth values of the clip property must be unchanged.

$steps: 20;

@keyframes glitch-effect{
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip: rect(random(100) + px, 9999px, random(100) + px, 0);
        }
    }
}

Personally, I use a 20-step animation, but you can specify any number of steps, since the animation is still random and generates changes in the values of the clip property itself. The more steps you specify, the faster the animation will be.

And now we just need to attach our animation to our two pseudo-elements. You also need to specify a different animation playback time for each pseudo-element. To achieve a more chaotic glitch animation effect.

  &::before {
    left: 7px;
    text-shadow: 1px 0 #fd5f00;
    animation: glitch-effect 3s infinite linear alternate-reverse;
  }

  &::after {
    left: 3px;
    text-shadow: -1px 0 #fd5f00;
    animation: glitch-effect 2s infinite linear alternate-reverse;
  }

It's all.

The End

Well, that's it. This was a very simple and very popular way to create a glitch effect on pure CSS. Thank you very much for your time on my post.

Don't switch.

Card Game UI/UX 🐺 Gwent: Witcher + Demo 🍿

Roden — Fri, 13 Aug 2021 19:02:19 +0000

☢️ Warning !!! ☣️ The site is very heavily loaded, be careful. ☣️

Full Portfolio Demo (!!! 15 SECONDS PRELOAD)

Kerthin / gwentReact-templateSait

The template represents the appearance of the 'deck Constructor' menu from the Gwent card game.

Description

In this template, you can see a large list of different cards, each of which has its own personal characteristics (provisions, stats, fraction, bonus, name, description, image). Thanks to internal filters, you can manage this list of cards.

To launch the app
- download the repository;
- log in to the downloaded repository using the command line or terminal;
- enter the command line 'npm run start' or 'serve-s build' and go to the address specified in the terminal.

Note that the project was made using the CREATE REACT APP.
Also, the app is very loaded (due to the abundance of media files), so it is not recommended for zapupsku on mobile devices, although the site is adapted to small tablet screens.

I would like to note that this is just a test project that does not claim anything. I made it solely out of personal interest.
Demo

Use technology.

The following…

View on GitHub

Recomend use 0.5x

Introduction

About 2 years ago, I decided to download a card game called Gwent on my iPad. I am a big fan of the Witcher series of games and it was interesting for me to try a separate project from the Witcher universe. Initially, I didn't have high hopes for the game, but after I played the game, I was extremely impressed. In addition to the interesting gameplay, I couldn't help but pay attention to the visual part of the game. It is executed perfectly.

And first of all, it is the way the playing cards are made that attracts attention. In addition to various bronze and gold borders with a beautiful font and icons, the map is surprised by its animated part.

Well, what can I say, and the gameplay itself in the game looks great

By the way, the game used to look like this.

And after all those pleasant emotions that I experienced, I decided to try to implement part of the interface of this game. Namely, the section with the selection of cards for creating a deck.

Concenpt

The site is a collection of cards, each of which belongs to a different faction (there are only 7 of them). Each of the cards has its own special characteristics, such as: provisions, cost, card type, color, name and faction. Based on this data, we need to create appropriate filters that will help us find the necessary maps.

All information about the maps will be stored in our array.

Design

As for the interface, I decided to recreate it close to the original.

Game UI:

As for the cards themselves, I decided to find the sources of all the elements that are used in the styling of cards.

1. Each faction should have its own color style.

Neutral

Monsters

Nilfgaard

Northern

Scoiatael

Skellige

Syndicate

2. You also need to indicate the cost of the card. To do this, we need special icons.

3. We also need to divide the cards into types.

4. Font.

5. And it remains only to choose bronze and gold borders for .

Create Card

To create a correct card, we need to take into account all the data specified in the array. The fraction (specified as a class), border (specified as a class), the path to the video (specified in src), cost (specified as a class), the name of the card and its description.

The videos for the cards themselves are stored in the build/video folder, where they are all divided into sections with provisions.

class Card extends React.Component {
    render() {
        const product = this.props.product;

        var provPath = String(product.prov.match(/\d+/));

        var factionClass = product.faction;
        var borderClass = product.border;
        var videoPath = `img/video/${product.type}/${provPath}/${product.src}`;

        var prov = <p className="provisionBg__number">{parseInt(product.prov.match(/\d+/))}</p>;

        var cost;
        if (product.usual) {
            cost = 'usual';
        } else if (product.rare) {
            cost = 'rare';
        } else if (product.epic) {
            cost = 'epic';
        } else {
            cost = 'legendary';
        }

        var strengthType;
        var provBlock = <div className="provisionBg">{prov}</div>;

        if (product.type === 'special') {
            strengthType = <div className="strengthBg__special"></div>;
        } else if (product.type === 'artifact') {
            strengthType = <div className="strengthBg__artifact"></div>;
        } else if (product.type === 'strategy') {
            videoPath = `img/video/${product.type}/${product.src}`;
            strengthType = <div className="strengthBg__strategy"></div>;
            provBlock = null;
        } else {
            strengthType = <p className="strengthBg__number">{product.strength}</p>;
        }

        var nameTooltip = <h1 className="tooltip__title">{product.name}</h1>;

        return (
            <div className={`card _${factionClass} _${borderClass}`}>
                <video src={videoPath} poster="img/poster/cursedScroll.mp4" preload="true" autoPlay loop muted></video>

                <div className="borderBg"></div>
                <div className={`strengthBg _${cost}`}>{strengthType}</div>
                {provBlock}

                <div className="tooltip">
                    <div className="tooltip__titleWrap">{nameTooltip}</div>
                    <div className="tooltip__infoWrap">
                        <div className="tooltip__info">{product.tooltip}</div>
                    </div>
                </div>
            </div>
        );
    }
}

SCSS

.card {
    position: relative;
    float: left;
    width: 134px;
    height: 194px;
    margin-left: 30px;
    margin-top: 30px;
    cursor: pointer;
    transition: all .3s;

    video {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    &._bronze .borderBg {
        background-image: url('../../../../img/cardElements/border/borderBronze.png');
    }
    &._gold .borderBg {
        background-image: url('../../../../img/cardElements/border/borderGold.png');
    }

    @mixin cardFactionElements($faction) {
        &._#{$faction} {
            .strengthBg {
                background-image: url('../../../../img/cardElements/#{$faction}/strength.png');
            }
            .provisionBg {
                background-image: url('../../../../img/cardElements/#{$faction}/provision.png');
            }
            .tooltip__titleWrap {
                background-image: url('../../../../img/cardElements/#{$faction}/tooltip.jpg');
            }
        }
    }

    @include cardFactionElements('neutral');
    @include cardFactionElements('monsters');
    @include cardFactionElements('nilfgaard');
    @include cardFactionElements('northern');
    @include cardFactionElements('scoiatael');
    @include cardFactionElements('skellige');
    @include cardFactionElements('syndicate');

    &:hover {
        transform: scale(1.1);
        z-index: 5;

        .tooltip {
            display: block;
        }
        .tooltip {
            &:hover {
                display: none;
            }
        }
    }

    &:last-child {
        margin-bottom: 20px;
    }

    &:nth-child(6n-1),
    &:nth-child(6n) {
        .tooltip {
            left: -177px;
        }
    }
}
.borderBg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.strengthBg {
    position: absolute;
    width: 43px;
    height: 43px;
    @extend %containBg;

    &__special,
    &__artifact,
    &__strategy,
    &__number {
        @extend %containBg;
    }

    @mixin cardTypeIcon($type, $mTop, $mLeft, $width, $height) {
        &__#{$type} {
            margin-top: #{$mTop}px;
            margin-left: #{$mLeft}px;
            width: #{$width}px;
            height: #{$height}px;
            background-image: url('../../../../img/cardElements/type/#{$type}.png');
        }
    }

    @include cardTypeIcon('special', '5', '4', '32', '32');
    @include cardTypeIcon('artifact', '7', '6', '30', '30');
    @include cardTypeIcon('strategy', '8', '8', '25', '25');

    &__number {
        font-family: Gwent;
        font-size: 28px;
        color: $paletteStrength;
        text-align: center;
        line-height: 1.6;
        text-shadow: rgb(0, 0, 0) 0px 2px 5px;
    }

    @mixin cardGemIcon($cost) {
        &._#{$cost} {
            &:after {
                background-image: url('../../../../img/cardElements/gem/#{$cost}.png');
            }
        }
    }

    @include cardGemIcon('usual');
    @include cardGemIcon('rare');
    @include cardGemIcon('epic');
    @include cardGemIcon('legendary');

    &:after {
        content: '';
        position: absolute;
        top: 7px;
        left: 6px;
        width: 7px;
        height: 7px;
        @extend %containBg;
    }
}

.provisionBg {
    position: absolute;
    width: 26px;
    height: 54px;
    bottom: 4px;
    right: 4px;
    @extend %containBg;

    &__number {
        font-family: Gwent;
        font-size: 24px;
        color: $paletteSandPrimary;
        text-align: center;
        line-height: 3.3;
        text-shadow: rgb(0, 0, 0) 0px 2px 5px;
    }
}

Result

{ name: "Draug",
    prov: "pp13",
    type: "unit",
    strength: "7",
    faction: "northern",
    border: "gold",
    legendary: true,
    src: "draug.mp4",
    tooltip: <p>{deploy}: Transform all allied Human units in this row into Kaedweni Revenants, without changing their power.</p>
}

Full View

Tooltip

It remains only to add the description output to each map when hovering.

.tooltip {
    position: absolute;
    top: 2px;
    right: -177px;
    width: 177px;
    display: none;
    transition: all .3s;

    &__titleWrap {
        position: relative;
        padding-top: 3px;
        width: 100%;
        height: 56px;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    &__title {
        margin-top: 10px;
        font-family: Gwent;
        font-size: 17px;
        text-transform: uppercase;
        color: $paletteParagraph;
        text-align: center;
        text-shadow: rgb(0, 0, 0) 0px 2px 5px;
    }

    &__infoWrap {
        background-image: url(../../../../img/cardElements/tooltipInfo/bottom.png), url(../../../../img/cardElements/tooltipInfo/center.jpg);
        background-size: 100%;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding-bottom: 10px;
        background-repeat: no-repeat, repeat-y;
        background-position: center bottom;
    }

    &__info {
        margin-bottom: 6px;
        position: relative;
        word-break: break-word;
        padding: 8px 12px 14px;

        p {
            font-size: 14px;
            color: $paletteTooltioParagraph;
            line-height: 16px;
            font-family: sans-serif;
        }
        span {
            font-weight: 600;
            color: $paletteTooltioKeyword;
        }
    }
}

Result

Since the hint is displayed to the right of the card, it is very important that the hint is displayed on the left of the rightmost cards.

&:nth-child(6n-1),
&:nth-child(6n) {
    .tooltip {
       left: -177px;
    }
}

Filters

The appearance of the filters is made in the form of a side menu with columns of sliding blocks.

function BorderFilterWrap(props) {
    return(
        <label className="sideFilterWrap">
            <input type="checkbox" className="openFilter" />
            <FrontBlock frontFilterIcon={'color'} frontFilterName={'Color'} />
            <div className="popupFilter">
                <RadioButton value={""} radioName={"border"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"gold"} radioName={"border"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"bronze"} radioName={"border"} checked={props.checked} onChange={props.onChange} />
            </div>
        </label>
    );
}

function CostFilterWrap(props) {
    return(
        <label className="sideFilterWrap">
            <input type="checkbox" className="openFilter" />
            <FrontBlock frontFilterIcon={'cost'} frontFilterName={'Cost'} />
            <div className="popupFilter">
                <CheckboxButton value={"usual"} checked={props.checkedUsual} onChange={props.onChangeUsual} />
                <CheckboxButton value={"rare"} checked={props.checkedRare} onChange={props.onChangeRare} />
                <CheckboxButton value={"epic"} checked={props.checkedEpic} onChange={props.onChangeEpic} />
                <CheckboxButton value={"legendary"} checked={props.checkedLegendary} onChange={props.onChangeLegendary} />
            </div>
        </label>
    );
}

function FactionFilterWrap(props) {
    return(
        <label className="sideFilterWrap">
            <input type="checkbox" className="openFilter" />
            <FrontBlock frontFilterIcon={'faction'} frontFilterName={'Fraction'} />
            <div className="popupFilter">
                <RadioButton value={""} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"neutral"} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"monsters"} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"nilfgaard"} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"northern"} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"scoiatael"} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"skellige"} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"syndicate"} radioName={"faction"} checked={props.checked} onChange={props.onChange} />
            </div>
        </label>
    );
}

function TypeFilterWrap(props) {
    return(
        <label className="sideFilterWrap">
            <input type="checkbox" className="openFilter" />
            <FrontBlock frontFilterIcon={'type'} frontFilterName={'Type'} />
            <div className="popupFilter">
                <RadioButton value={""} radioName={"type"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"unit"} radioName={"type"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"special"} radioName={"type"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"artifact"} radioName={"type"} checked={props.checked} onChange={props.onChange} />
                <RadioButton value={"strategy"} radioName={"type"} checked={props.checked} onChange={props.onChange} />
            </div>
        </label>
    );
}

SCSS

@import "../../../../variables/StyleVariables/StyleVariables.scss";

.sideFilterWrap {
    position: relative;
    display: block;
    margin-bottom: 15px;
    width: 95%;
}
.openFilter {
    display: none;

    &:checked {
        + .frontBlock {
            .frontBlock__toogle {
                transform: rotate(180deg);
            }
        }
    }
    &:checked {
        + .frontBlock {
            + .popupFilter {
                max-height: 1000px;
            }
        }
    }
}

.popupFilter {
    position: relative;
    display: block;
    width: 100%;
    max-height: 0;
    background-color: $palettePopup;
    overflow: hidden;
    transition: max-height .5s;
}

.filterBlock__buttonBg {
    @mixin sideFilterIcon($family, $nameIcon, $extension) {
        &._#{$nameIcon} {
            background-image: url('../../../../img/icons/#{$family}/#{$nameIcon}.#{$extension}');
        }
    }

    @include sideFilterIcon('faction', 'neutral', 'png');
    @include sideFilterIcon('faction', 'monsters', 'png');
    @include sideFilterIcon('faction', 'nilfgaard', 'png');
    @include sideFilterIcon('faction', 'northern', 'png');
    @include sideFilterIcon('faction', 'scoiatael', 'png');
    @include sideFilterIcon('faction', 'skellige', 'png');
    @include sideFilterIcon('faction', 'syndicate', 'png');
}

Working Filter

Provision Filter

Now we need to make a filter based on the provisions of the card.

Provisions is the number indicated at the bottom of the card, it indicates the amount of free space needed to put it in the deck.

function ProvisionFilter(props) {
    return(
        <div className="filterBlock__provWrap clearfix">
            <RadioButtonProv value={'p4'} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'0-4'} />
            <RadioButtonProv value={"p5"} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'5'} />
            <RadioButtonProv value={"p6"} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'6'} />
            <RadioButtonProv value={"p7"} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'7'} />
            <RadioButtonProv value={"p8"} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'8'} />
            <RadioButtonProv value={"p9"} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'9'} />
            <RadioButtonProv value={"p10"} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'10'} />
            <RadioButtonProv value={'pp1'} radioName={"provision"} checked={props.checked} onChange={props.onChange} number={'11+'} />
        </div>
    );
}

Result

Text Filter

Well, the last thing left for us is to search by the name of the card.

function TextFilter(props) {
    return(
        <div className="filterBlock__textFilterWrap">
            <input
                    type="text"
                    placeholder="SEARCH"
                    value={props.value}
                    onChange={props.onChange}
                    className="filterBlock__textFilter"
                />
        </div>
    );
}

Responsive

Resize Browser Window

Tablet

The End

Well, that's it. Thank you for your time. I want to note right away that I created this project 2 years ago. This is one of my first projects that I did with React. So take this article as a story about how I tried to copy the interface of the game and nothing more.

I can advise you to subscribe to my Twitter, I also post my works there.

Goodbye

Create Museum Website UI/UX + Demo 🍿

Roden — Fri, 06 Aug 2021 19:15:51 +0000

Full Prado Museum Demo

Kerthin / pradoMuseum-templateSait

Site of the Prado Museum, for viewing paintings.

Description

The template is a site for viewing the works of great artists represented in the famous Prado Museum. You can also find out information about the painting and the artist himself.

To launch the app

download the repository;

log in to the downloaded repository using the command line or terminal;

enter the command line 'npm run start' or 'serve-s build' and go to the address specified in the terminal.

Note that the project was made using the CREATE REACT APP.

Demo

Use technology.

The following technologies were used to create this project:

Software platform

Libraries

Package manager

Documentation

The repository of this project is divided into several sections:

src - this repository is intended for files with the help of which the project is being developed. It is from this repository that all project files are compiled;

docs - a repository that stores all compiled code with all media…

View on GitHub

Introduction

2 years ago, wandering through the expanses of Behance, I saw an interesting work, which was a redesign for the website of the Spanish Prado Museum. The work was called Prado Museum Website with Virtual Reality Experience.

Of course, I didn't want to implement the entire project, because I didn't understand the UI and UX logic very well in the work that I saw on Behance.

Moreover, I just wanted to create a small one-page project. Considering that this was supposed to be my first project on React. Therefore, I want to immediately note that the code here is very lousy, and this post is not a tutorial of any kind. And I was too lazy to break the code into components, so it is written entirely in one file. I'm not going to teach anyone anything, but I just want to tell you about how I implemented this project.

Concept

The idea was simple, I want to implement a one-page website where I can use the menu to select the artist I am interested in and view his works, as well as information about him, which will be displayed on the main page and in a specially side menu.

All information is stored in a special object, which you can see at this link. The object itself consists of three stages.

The Country 👉 The Artist 👉 His Paintings
There are 7 countries in our array, and the total number of artists is 27.

There are 2 menus on the website. One menu is the main one, it presents artists who are in sections with countries. The second menu is auxiliary, it displays information about the selected artist (the menu is located on the side, you can open it by clicking on the portrait of the artist that is located on the main screen).

Realization

01. Main Page

To begin with, I decided to create a main page that will display brief information about the artist.

1. At the very top I have a button to open the menu.

2. In the center there is a very brief information about the artist (years of life, name, country of birth).

3. Just below is a portrait of the selected artist, which is located in a round block. When you click on it, a side menu should open, where the artist's paintings will be presented, as well as broader information about the artist (early life, synopsis).

4. At the very bottom there is information about the picture, which is displayed on the main screen (name, year of creation, artist's name).

02. Artists Menu

The menu was planned to be made full-screen. Therefore, before I output information to it, I need to work out the animation of opening this menu.

1. Animation
The animation of opening the menu should look as if it shifts the main page down when opening it. This was implemented as follows:

The burger menu itself was made in the form of two closing lines that form a cross.

2. Artists
Now it's time to draw lists of artists. To do this, we need to break the information about artists into components and display them in the form of columns, which are divided by country categories.

// ----- Picture Components
function PictureInfo(props) {
  return(
    <div className="picture__textWrap">
      <div className="picture__text">
        <h1 className="picture__date">{props.dateWritten}</h1>
        <p className="picture__name">{props.name}</p>
      </div>
    </div>
  );
}

function PictureImg(props) {
  return(
    <div className="picture__imgWrap">
      <div className="picture__img">
        <div className={`picture__imgBg ${props.imgBook}`}></div>
      </div>
    </div>
  );
}

function Picture(props) {
  return(
    <div className="picture">
      <div className="picture__info">
        <PictureInfo dateWritten={props.dateWritten} name={props.name} />
        <PictureImg imgBook={props.imgBook} />
      </div>
    </div>
  );
}

function Pictures(props) {
  return (
    <React.Fragment>
      {Object.entries(props.pictures || {}).map(([ i, j ]) => (
        <Picture key={i} name={i} {...j} />
      ))}
    </React.Fragment>
  );
}
// ----- END Picture Components


// ----- Painter Components
function PainterInfo(props) {
  return(
    <div className="painter__textWrap">
      <div className="painter__text">
        <h1 className="painter__name">{props.name}</h1>
        <p className="painter__years">{props.born} - {props.died}</p>
      </div>
    </div>
  );
}

function PainterImg(props) {
  return(
    <div className="painter__imgWrap">
      <div className="painter__img">
        <div className={`painter__imgBg ${props.class}`}></div>
      </div>
    </div>
  );
}

function Painter(props) {
  return(
    <a href="#" onClick={() => props.onClickLink(props)}>
      <div className={`painter ${props.active ? 'active' : ''}`} onClick={() => props.onClick(props)}>
        <div className="painter__info">
          <PainterInfo name={props.name} born={props.born} died={props.died} />
          <PainterImg class={props.class} />
        </div>
      </div>
    </a>
  );
}
// ----- END Painter Components


// ----- Сountries Components
function CountryTitle(props) {
  return(
    <div className="countryTitle">
      <h2 className="countryTitle__name">{props.name}</h2>
    </div>
  );
}
function Сountries(props) {
  return(
    <div className="swiper-slide">
      <CountryTitle name={props.name} />
      {Object.entries(props.painters).map(([ i, j ]) => (
        <Painter key={i} name={i} {...j} onClickLink={props.onSelectLink} onClick={props.onSelectWriter} active={i === props.selected} />
      ))}
    </div>
  );
}
// ----- END Сountries Components

And now we need to bring it all to our menu.

But here we have a problem. The fact is that we have 7 countries in our array, and a maximum of 4 fall into our field of view in the menu. To do this, we need to implement the slider function in our menu so that we can scroll through our list of countries.

To do this, I decided to use the Swiper.js. It was possible to simply implement this using CSS and FLEX, but I wanted the slider to be scrollable with gestures.

And here's what happened:

3. Choosing a artist
The last thing left for us is to implement the artist selection function. To do this, we need that when we click on the artist we need, the information stored in the object about the artist is transferred to our side menu, where paintings and more detailed information about the artist are displayed. It is important that the number of paintings is the same as it is prescribed in the object. It is also necessary that the menu closes independently when choosing the artist we need.

03. Side Menu

It remains to implement the side menu. It will be executed in the form of three columns. The first column will display brief information about the artist, the second will display paintings, and the third column will display more detailed information from the artist's life.

Now you need to display information about the artist who was selected in the top menu in these columns.

THE END

Well, that's it. I apologize in advance for the fact that the information was submitted very crumpled. But on the other hand, as I wrote earlier, I was not going to teach anyone anything in this article. In this post, I just wanted to demonstrate my old work and nothing more special.

Full Prado Museum Demo

Kerthin / pradoMuseum-templateSait

Site of the Prado Museum, for viewing paintings.

Description

The template is a site for viewing the works of great artists represented in the famous Prado Museum. You can also find out information about the painting and the artist himself.

To launch the app

download the repository;

log in to the downloaded repository using the command line or terminal;

enter the command line 'npm run start' or 'serve-s build' and go to the address specified in the terminal.

Note that the project was made using the CREATE REACT APP.

Demo

Use technology.

The following technologies were used to create this project:

Software platform

Libraries

Package manager

Documentation

The repository of this project is divided into several sections:

src - this repository is intended for files with the help of which the project is being developed. It is from this repository that all project files are compiled;

docs - a repository that stores all compiled code with all media…

View on GitHub

Thank you for your attention. I hope that each of you has your favorite artist, whose works you can endlessly admire.

See you all later.

⚛️ React Swiper.js Slider

Roden — Fri, 30 Jul 2021 18:43:49 +0000

Introduction

In fact, today's article is devoted not only to how to make a specific slider, which you could see on the preview of this post, but also in general how to implement various simple sliders on React without putting much effort.

The slider that I will give you today as an example is part of my separate project. The slider itself is made in the form of many columns, each of which is a structure that is divided into countries and inside each column there is information about the artists of these countries.

Swiper Slider

Let's Get Started

01. Swiper.js

First, we need to connect the Swiper.js. You can follow the link and download it, or connect it via npm using the line in the npm i swiper console. You can read all the documentation on the official page in the React section.

Since I was creating a slider in CodePen, I connected the link through the settings in the JS section.

To get the links, click on the Settings button, then select the JS section.

We also need to connect Swiper.css for the correct rendering of slides. (You can always change the styles as you like).

To get the link, click on the Settings button, then select the CSS section.

02. Functionality

First of all, we need to create a Slider Class, inside which we will specify the characteristics of the slider and also render a container for slides.

class Slider extends React.Component {

  componentDidMount() {    
    new Swiper(this.refs.slider,{
      slidesPerView : this.props.slidePerView,
      slidesPerGroup: this.props.slidesPerGroup,
      loop: this.props.loop,
      freeMode: true
   });
  }

  render() {
    return (
      <div className="containerSlider">
        <div className="swiper-container" ref="slider">
          <div className="swiper-wrapper">
            {this.props.children}
          </div> 
        </div>
      </div>
    )
  }
}

componentDidMount()

slidesPerView - Number of slides per view (slides visible at the same time on slider's container). (Personally, I specified auto because I wanted the slider to look more natural, but if you don't want to bother with the size of the slides, you can just specify the number of slides that should fit on the screen at a time.)

slidesPerGroup - Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1. (The property is necessary so that when you finish turning the slider to the end, you would be thrown to the very beginning of the slider, so that you do not have to turn back. It is necessary for long sliders.)

loop - Set to true to enable continuous loop mode.

freeMode - If enabled then slides will not have fixed positions. You can stop the slider at any convenient scrolling point.

render()

containerSlider - You can name this class as you like, it is needed in order to set the dimensions of the entire slider.

swiper-container & swiper-wrapper - these classes should be left in the form in which they are written. They are needed for the slider to work correctly.

You can find most of the other properties on the official website in the API section.

03. Creating Slides

After we have created a container for the slider and specified its properties, it is necessary to work out the appearance of the slides. As I mentioned earlier, the slider consists of 7 sections, each of which is a country, and inside each section there is a brief information about the artists of these countries.

I decided to make all the slides 520px in size, but you can set a different size for each slide using the pseudo-class nth-child().

2 artists will be represented inside each slide.

To do this, we need to create a function inside which we will work out the DOM structure of the slide. You can call it whatever you want, I personally called it Сountries.

function Сountries(props) {
  return(
    <div className="swiper-slide">

      <div className="countryTitle">
        <h2 className="countryTitle__name">{props.countryTitle}</h2>
      </div>

      <div className="painter">
        <div className="painter__info">

          <div className="painter__textWrap">
            <div className="painter__text">
              <h1 className="painter__name">{props.name}</h1>
              <p className="painter__years">{props.born}</p>
            </div>
          </div>

          <div className="painter__imgWrap">
            <div className="painter__img">
              <div className={`painter__imgBg _bg_${props.class}`}></div>
            </div>
          </div>

        </div>
      </div>

      <div className="painter">
        <div className="painter__info">

          <div className="painter__textWrap">
            <div className="painter__text">
              <h1 className="painter__name">{props.name2}</h1>
              <p className="painter__years">{props.born2}</p>
            </div>
          </div>

          <div className="painter__imgWrap">
            <div className="painter__img">
              <div className={`painter__imgBg _bg_${props.class2}`}></div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

Inside the function, we have specified special properties with which we can fill in information about our artists.

04. Content

Now we just need to fill the slider with content, inside which we will add the information we need.

To do this, we need to create a class inside which we need to specify the Slider class using the <Slider slidePerView="auto" slidesPerGroup="7"></Slider> tags.

class App extends React.Component {
  render() {
    return (
      <Slider slidePerView="auto" slidesPerGroup="7">

      </Slider>
    )
  }
}

And inside the Slider tag, we must individually insert as many slides as we need. We will do this using the Countries class, in which we prescribed the DOM structure of the slides.

Example:

<Сountries countryTitle="Italy" 
           name="Titian Vecellio" born="1488 - 1576" class="titian"
           name2="Leonardo da Vinci" born2="1452 - 1519" class2="vinci" />

Here's what it looks like in general:

class App extends React.Component {
  render() {
    return (
      <Slider slidePerView="auto" slidesPerGroup="7">
        <Сountries countryTitle="Italy" 
          name="Titian Vecellio" born="1488 - 1576" class="titian"
          name2="Leonardo da Vinci" born2="1452 - 1519" class2="vinci" />
        <Сountries countryTitle="France" 
          name="Louis-Michel van Loo" born="1707 - 1771" class="vanLoo"
          name2="Eugene Delacroix" born2="1798 - 1863" class2="delacroix" />
        <Сountries countryTitle="Spain" 
          name="Bartholomew Murillo" born="1618 - 1682" class="murillo"
          name2="El Greco" born2="1541 - 1614" class2="greco" />
        <Сountries countryTitle="Belgium" 
          name="Jan van Eyck" born="1385 - 1441" class="eyck"
          name2="Anthony van Dyck" born2="1599 - 1641" class2="dyck" />
        <Сountries countryTitle="Germany" 
          name="Rafael Mengs" born="1728 - 1779" class="mengs"
          name2="Franz Xaver Winterhalter" born2="1818 - 1885" class2="winterhalter" />
        <Сountries countryTitle="Russia" 
          name="Karl Pavlovich Brullov" born="1799 - 1852" class="brullov"
          name2="Viktor Mikhailovich Vasnetsov" born2="1848 - 1926" class2="vasnetsov" />
        <Сountries countryTitle="Netherlands" 
          name="Pieter Bruegel The Elder" born="1525 - 1569" class="bruegel"
          name2="Peter Paul Rubens" born2="1577 - 1640" class2="rubens" />
      </Slider>
    )
  }
}

05. Render

It remains only to render the App class and everything is ready.

ReactDOM.render(<App />, document.getElementById('root'));

Responsive

The site is adapted for screen resolutions such as:
@media screen and (orientation: landscape) and (max-height: 780px) @media screen and (orientation: landscape) and (max-height: 630px) @media screen and (orientation: landscape) and (max-height: 540px) @media screen and (orientation: landscape) and (max-height: 460px) @media screen and (max-width: 1600px) @media screen and (max-width: 1440px) @media screen and (max-width: 1366px) @media screen and (max-width: 1280px) @media screen and (max-width: 1024px) @media screen and (max-width: 768px) @media screen and (max-width: 414px) @media screen and (max-width: 375px) @media screen and (max-width: 320px) @media screen and (max-width: 680px) and (max-height: 520px)

The End

Finally, it is worth saying that this is not the most ideal way to create a slider, and I agree with you. If I were making a similar slider in a real project, I would output it through an object, and would create significantly more components. But I wrote this post in order to just give a simple understanding for beginners how to make such sliders.

Thank you for giving your precious time to my post. See you soon.
I can advise you to subscribe to my Twitter, I also post my work there.

Goodbye. Have a good slide.

How to create Geometric objects - 11 Trees 🌳 Pure CSS

Roden — Fri, 23 Jul 2021 18:40:07 +0000

Introduction

2 years ago, wandering through the expanses of Behance, I came across an interesting work from the studio Flöra. And in it I saw interesting geometric objects that reminded me of trees. I really liked the style of these illustrations and decided to try to implement them using CSS.

DEMO

You can also download the project from my GitHub repository. (There is also a demo on GitHub Pages).

Kerthin / trees-templateSait

The geometric representation of trees

Description

This site is an example of work created specifically for the portfolio. If you want to take a look at it, then you can follow the link given below.

Demo

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Libraries

Package manager

Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin Status Description

gulp-sourcemaps Intended for generation of css source maps which will be necessary at debugging of a code.

gulp-imagemin Minify PNG, JPEG, GIF and SVG images with imagemin

gulp-autoprefixer Prefix CSS with Autoprefixer

imagemin-pngquant Pngquant imagemin plugin

gulp-uglify Minify JavaScript with UglifyJS3.

gulp-rigger Rigger is a build time include engine for Javascript, CSS, CoffeeScript.

gulp-minify-css Gulp plugin to minify CSS

rimraf The UNIX command rm -rf for node.

gulp-watch File watcher that uses super-fast chokidar and emits vinyl

…

View on GitHub

Full Page Demo (GitHub Pages)

01. Seedling

Creating this tree took the most time because of the need to create the lower oval dotted lines. Since to create such lines, I needed to create 16 hemispheres, each of which had a different size.

02. Sepal

A very simple tree. There are no complicated shapes or lines.

03. Linden

04. Pine

To create winding lines with two or more corners, it is enough just to use several blocks with rounded corners that need to be connected in the necessary sequence.

05. Palm

To create winding lines, the same method was used here as in the fourth tree.

06. Fir

To create the moon, I used a round invisible block, which had the box-shadow property set with the value 20px 20px 0 0 #000.

I used the same method in my other works with illustrations

CodePen - CSS Illustration (Animation)

Roden ・ May 19 '21

#codepen #css #html #webdev

CodePen - CSS Icons (Animation)

Roden ・ May 21 '21

#codepen #webdev #css #html

In order to create curved lines, you just need to set the properties for rounding individual corners. For example: border-bottom-left-radius or border-bottom-right-radius.

07. Rose

08. Willow

09. Sunflower

To create such petals, you just need to use the border-radius property and set it to 50% 100px 0 80px or 100px 50% 80px 0. Depending on which way you need a slope.

10. Bell

To create winding lines, the same method was used here as in the fourth tree.

11. Poplar

THE END

Well, that's it. I just wanted to share my old work and nothing more. Thanks for attention.

Goodbye

7 Awesome CSS Cards: 🎰 Cuphead Style ☕️ + (animation, pure CSS, tutorual)

Roden — Fri, 16 Jul 2021 18:11:04 +0000

Introduction

A couple of years ago, I happened to play a game called Cuphead. When I finished it, I thought that I would soon forget about it and switch to something else. But everything turned out to be wrong. I liked the style of this game so much that I didn't want to just forget about it. And so I decided to find a couple of GIF images on the internet and create different kinds of CSS Cards for them.

Well, let's get down to the show.

DEMO

For those who do not want to read the entire post, I can suggest taking a look at the finished project right away.

You can also download the project from my GitHub repository. (There is also a demo on GitHub Pages).

Kerthin / cuphead-templateSait

Graphic cards in the style of the Cuphead video game.

Description

This site is an example of work created specifically for the portfolio. If you want to take a look at it, then you can follow the link given below.

Demo

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Libraries

Package manager

Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin Status Description

gulp-sourcemaps Intended for generation of css source maps which will be necessary at debugging of a code.

gulp-imagemin Minify PNG, JPEG, GIF and SVG images with imagemin

gulp-autoprefixer Prefix CSS with Autoprefixer

imagemin-pngquant Pngquant imagemin plugin

gulp-uglify Minify JavaScript with UglifyJS3.

gulp-rigger Rigger is a build time include engine for Javascript, CSS, CoffeeScript.

gulp-minify-css Gulp plugin to minify CSS

rimraf The UNIX command rm -rf for node.

gulp-watch File watcher that uses super-fast chokidar and emits vinyl

…

View on GitHub

Full Page Demo (GitHub Pages)

01. Ribby 🥊

The first card is dedicated to one of the first bosses in the game, a combat toad named Ribby. This card is made in the video of a boxing ring (you can see the tight ropes in the background).

When creating this card, simple geometric shapes such as triangles and cubes were used. You can edit each element on the card as you like (color, size, font, etc.).

This also applies to other cards.

02. Croaks 🥊

Croaks is another of the bosses in the game, who is the brother of Ribby. During the battle, they are together and you need to resist their joint blows.

The card consists of simple elements. There is also a gradient in the background, which forms a brick wall.

03. Chauncey Chantenay 🥕

Chauncey Chantenay is a large, anthropomorphic orange carrot with lanky arms and yellow and white eyes.

The design of this card is completely formed by fonts.

There are also cubes that you could see in the first card.

04. Cuphead ☕️

A simple, but at the same time very good card, which depicts the main character of the game Cuphead.

05. Cagney Carnation 🌸

Cagney is sneaky. He seems to delight in catching his enemies off guard with his appearance, posing as a harmless and adorable flower before roaring loudly and showing his true colors.

This card uses several triangles, inside of which animated linear gradients are placed.

06. King Dice 🎰

King Dice is the right-hand man of the Devil and the secondary antagonist of Cuphead.

The card consists of the simplest elements with images of the character.

07. King Dice: Casino 🎰

The most difficult card in its implementation. The card is an implementation of one of the last levels of the game, which is made in the form of a roulette table on which you can place your bets.

The most difficult thing in this card was to create a table on which the King Dice character relies.

To create it, I used a gradient that forms the illusion of soft upholstery for the table surface. There is also a chain of lots, each of which you can edit separately as you like.

It was also necessary to make a playing table surface on which the main character would run. After creating it, it was necessary to create a perspective for the surface, which affected the depth of the image.

Conclusion

For me, this was a purely creative project, I did not try to create something insanely complex in order to impress someone. Just being impressed by the style of the Cuphead game, I decided to create these cards.

The End

Thank you for paying attention to my post. You can also follow me on Twitter, where I also publish many of my works.

Goodbye

Awesome 🎧 Music Player + tutorial

Roden — Fri, 09 Jul 2021 18:04:47 +0000

Introduction

Last week I posted my calculator made in the style of Neomorphism. Today I decided to continue posting my similar works. Therefore, I want to present to you my music player, also made in the style of neomorphism.

Calculator

Neomorphic Calculator 🧮 + Dark Mode 🖤

Roden ・ Jul 2 '21

#webdev #javascript #css #codepen

Music Player

Full Page Demo

Functional

01. Switching tracks

It is possible to switch your tracks. If you switch a track while playing music, the next track will start by clicking on the "Play" button.

02. Switching tracks

While the music is playing, the animation of scrolling the image of the song will be started.

03. Rewind the song time

You can also rewind the song. The song can be rewound manually using the timeline or using the buttons that scroll the song forward or backward for 5 seconds.

04. Random launch of a track

When you click the lower right button, the tracks will start in random order, and not in order as specified in the array.

This only works if the track ended on its own, and you didn't switch it.

05. Repeat an album or track

If there is a number 1 in the button, it means that the track will be played again at the end (Repeat).
If the button is highlighted, but there are no numbers in it, it means that when the last track is played, the album will automatically start playing again from the first track.
If the button is pale, it means that after playing the last track, the first one will not start.

Responsive

Phone:

The site is adapted for screen resolutions such as:
@media 414px
@media 375px
@media 320px

Desktop:

I also decided to adapt the site to different screen heights so that there would be no problems with the display.

Code

You can add your own tracks through the array.
Here it is:

    const list = [
    {
        id: 1,
        class: 'jerryHerman',
        url: "music/JerryHerman_PutOnYourSundayClothes.mp3",
        author: "Jerry Herman",
        title: "Put On Your Sunday"
    },
    {
        id: 2,
        class: 'elvisPresley',
        url: "music/ElvisPresley_CantHelpFallingInLove.mp3",
        author: "Elvis Presley",
        title: "Can't Falling In Love"
    },
    {
        id: 3,
        class: 'royOrbison',
        url: "music/RoyOrbison_OhPrettyWoman.mp3",
        author: "Roy Orbison",
        title: "Oh, Pretty Woman"
    },
    {
        id: 4,
        class: 'frankSinatra',
        url: "music/FrankSinatra_ThatsLife.mp3",
        author: "Frank Sinatra",
        title: "That's Life"
    },
    {
        id: 5,
        class: 'jimCroce',
        url: "music/JimCroce_TimeInABottle.mp3",
        author: "Jim Croce",
        title: "Time In A Bottle"
    },
    {
        id: 6,
        class: 'redHotChiliPeppers',
        url: "music/RedHotChiliPeppers_DarkNecessities.mp3",
        author: "Red Hot Chili Peppers",
        title: "Dark Necessities"
    },
    {
        id: 7,
        class: 'stephaneGrappelli',
        url: "music/StephaneGrappelli_laMer.mp3",
        author: "Stephane Grappelli",
        title: "La Mer"
    },
    {
        id: 8,
        class: 'evanKing',
        url: "music/EvanKing_Overwatch.mp3",
        author: "Evan King",
        title: "Overwatch"
    },
    {
        id: 9,
        class: 'JR',
        url: "music/JR_SouthSac.mp3",
        author: "JR",
        title: "SouthSac"
    },
    {
        id: 10,
        class: 'theDeli',
        url: "music/TheDeli_Sun.mp3",
        author: "The Deli",
        title: "Sun"
    }
];

It displays information about the track, changes the class for changing the image, and adds the track.
To add an image, you need to create a line in the mixin. The image class must be the same as in the array specified above.

@mixin albumBgMix($albumBgName, $bgPath) {
    .#{$albumBgName} {
        .album:before {
            background-image: url(#{$bgPath});
        }
    }
}

@include albumBgMix('jerryHerman', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/jerryHerman.jpg');
@include albumBgMix('elvisPresley', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/elvisPresley.jpg');
@include albumBgMix('royOrbison', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/royOrbison.jpg');
@include albumBgMix('frankSinatra', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/frankSinatra.jpg');
@include albumBgMix('jimCroce', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/jimCroce.jpg');
@include albumBgMix('redHotChiliPeppers', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/redHotChiliPeppers.jpg');
@include albumBgMix('stephaneGrappelli', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/stephaneGrappelli.jpg');
@include albumBgMix('evanKing', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/evanKing.jpg');
@include albumBgMix('JR', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/JR.jpg');
@include albumBgMix('theDeli', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/theDeli.png');

GitHub

You can also download this project from the GitHub repository.

Kerthin / musicPlayer-templateSait

A music player made in the style of neomorphism.

Description

The project is a working music player made in the style of neomorphism.

In the player it is possible:

to switch tracks;

rewind a track for 5 seconds forward and back;

use the music bar to scroll the track in more detail;

to enable repeat track;

to enable repeat playlist;

you can enable random track launch mode.

Demo

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Package manager

Languages

Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin Status Description

gulp-sourcemaps Intended for generation of css source maps which will be necessary at debugging of a code.

gulp-imagemin Minify PNG, JPEG, GIF and SVG images with imagemin

gulp-autoprefixer Prefix CSS with Autoprefixer

imagemin-pngquant
Pngquant imagemin plugin

gulp-uglify Minify JavaScript with UglifyJS3.

gulp-rigger
Rigger is a build time include engine for Javascript,

…

View on GitHub

Full Page Demo

The End

Thank you for giving your precious time to my post. See you soon.
I can advise you to subscribe to my Twitter, I also post my work there.

Goodbye

Neomorphic Calculator 🧮 + Dark Mode 🖤

Roden — Fri, 02 Jul 2021 16:34:17 +0000

Introduction

Over the past year or even more, it is difficult not to pay attention to how interest in Neomorphism is rapidly growing in web design. And indeed, it is difficult to pass by such an unusual approach in the development of interfaces. Also, many developers have been posting their work on various resources for a long time, demonstrating how using simple shadows you can create beautiful and unusual elements. So I also decided to keep up.

Therefore, today I would like to present to you my calculator made in the style of Neomorphism. It also has a Dark Theme, which you can launch using the switch in the upper right corner.

You can download the project from my Github repository or CodePen.

Kerthin / calculator-templateSait

A calculator made in the style of neomorphism.

Description

The project is a working calculator made in the style of neomorphism.

Demo

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Package manager

Languages

Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin	Status	Description
gulp-sourcemaps		Intended for generation of `css source maps` which will be necessary at debugging of a code.
gulp-imagemin		Minify `PNG`, `JPEG`, `GIF` and `SVG` images with `imagemin`
gulp-autoprefixer		Prefix `CSS` with `Autoprefixer`
imagemin-pngquant		`Pngquant imagemin` plugin
gulp-uglify		Minify `JavaScript` with `UglifyJS3`.
gulp-rigger		`Rigger` is a build time include engine for `Javascript`, `CSS`, `CoffeeScript`.
gulp-minify-css		`Gulp` plugin to minify `CSS`
rimraf		The `UNIX` command `rm` `-rf` for node.
gulp-watch		File watcher that uses super-fast chokidar and emits vinyl objects.
gulp-pug		This `Gulp` plugin enables you to compile your `Pug` templates into `HTML` or `JS`.

…

View on GitHub

Full Page Demo

Dark Mode

CodePen

(See in the format 0.5x)

Responsive

The site is adapted for screen resolutions such as:
@media 414px
@media 375px
@media 320px

The End

Well, that's it. The project is very small, so there is no need to write large texts here. Thank you for paying attention to my article. Goodbye.

I can advise you to subscribe to my Twitter, I also post my works there.

P.S.
After each mathematical action, press the equal sign.

DEV Community: Roden

36 YouTube Channels 📺 that will help you become a better Developer 🧑‍💻

Introduction

1. Traversy Media

2. DevTips

3. Programming with Mosh

4. DesignCourse

5. Frying Pan

6. Ben Awad

7. Fireship

8. Yuri Artyukh

9. Adam Wathan

10. LevelUpTuts

11. Design Medium

12. Wrong Akram

13. CodingNepal

14. dcode

15. freeCodeCamp.org

16. JavaScript Mastery

17. Brian Design

18. Kevin Powell

19. Web Dev Simplified

20. William Candillon

21. Coding Tech

22. Hunor Márton Borbély

23. Code with Ania Kubów

24. Joma Tech

25. Dev Ed

Tips from the comments

26. The Net Ninja

27. Coding Addict

28. LearnWebCode (by Brad Schiff)

29. CodeWithHarry

30. Amigoscode

31. Jack Herrington

32. Dennis Ivy

33. Coding Garden

34. Tech With Tim

35. The Coding Train

36. Dev Drawer

The End

How to create Pure CSS Glitch Animation 🤖 for Images and SVG

Introduction

How to create Glitch Effect 🤖 Pure CSS

Roden ・ Aug 20 '21

Demo

Images

HTML

CSS (SCSS)

SVG

HTML

CSS (SCSS)

The End

18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Project

Introduction

1. Lottie-Web/Bodymovin

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

Lottie for Web, Android, iOS, React Native, and Windows

View documentation, FAQ, help, examples, and more at airbnb.io/lottie

Plugin installation

Option 1 (Recommended):

Option 2:

Other installation options:

Option 3:

Option 4:

2. Parallax.js

wagerfield / parallax

Parallax Engine that reacts to the orientation of a smart device

Table of Contents

1. Getting started

1.1 Installation

1.1 a) Using the CDN

1.1 b) Beginners

3. Flat Surface Shader [FSS]

wagerfield / flat-surface-shader

Flat Surface Shader for rendering illuminated triangles

Flat Surface Shader [FSS]

Understanding Lighting

Light