DEV Community: Dima Prohorenko

Add ... when text is too long

Dima Prohorenko — Fri, 19 Mar 2021 13:59:34 +0000

Hi, in this post I'm gonna show you how to add ... instead of wrapping text on multiple lines.

Here's what we're gonna be building.

Let's start by adding html

<div class="container">
    <div class="card">
        <div class="card__image">
            <img src="https://lekorna.com/images/products/yummy-cup2.png" alt="">
        </div>
        <div class="card__content">
            <p class="card__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum facilis voluptatem impedit nemo consequatur voluptates ipsum a voluptas quo deserunt?</p>
            <p class="card__price">35.99$</p>
            <a href="#" class="btn">Buy</a>
        </div>
    </div>
    <div class="card">
        <div class="card__image">
            <img src="https://lekorna.com/images/products/yummy-cup2.png" alt="">
        </div>
        <div class="card__content">
            <p class="card__description truncate">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum facilis voluptatem impedit nemo consequatur voluptates ipsum a voluptas quo deserunt?</p>
            <p class="card__price">35.99$</p>
            <a href="#" class="btn">Buy</a>
        </div>
    </div>
</div>

and css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
        /* Center the container */
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

img {
    max-width: 100%;
}
.container {
    width: 100%;
    max-width: 800px;
    display: flex;
        /* Flex items will wrap on to new line if the can't fit */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.card {
    width: 45%;
    min-width: 350px;
    padding: 5px;
    display: flex;
    aling-items: flex-start;
    border-radius: 5px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

.card__image {
    width: 40%;
}

.card__content {
    width: 60%;
    padding-top: 20px;
}
.card__description {
    margin-bottom: 10px;
}

.card__price {
    font-size: 18px;
    color: teal;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    padding: 8px 25px;
    font-size: 1rem;
    text-decoration: none;
    background-color: cadetblue;
    color: white;
    border-radius: 5px;
    transition: opacity 400ms linear;
}

.btn:hover {
    opacity: 0.8;
}

Now the interesting part:

Add truncate class to the second card__description

<div class="card">
        <div class="card__image">
            <img src="https://lekorna.com/images/products/yummy-cup2.png" alt="">
        </div>
        <div class="card__content">
            <!-- Right here -->
            <p class="card__description truncate">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum facilis voluptatem impedit nemo consequatur voluptates ipsum a voluptas quo deserunt?</p>
            <p class="card__price">35.99$</p>
            <a href="#" class="btn">Buy</a>
        </div>
    </div>

and css

.truncate {
    /* Avoids text being rendered outside the container */
    width: 100%;
    overflow: hidden;
    /* Avoid text going to multiple lines */
    white-space: nowrap;
    /* Sets the ... once the text overflows */
    text-overflow: ellipsis;
}

and that's it. You can find working pen here

Zoom in/out slider with Swiper js

Dima Prohorenko — Wed, 17 Mar 2021 11:05:42 +0000

Today I'm gonna show you how to create simple zoom in out effect with Swiper js.

First we need to import necessary files.

Include styles in the head and script in the end of the body tag.



<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Add required markup.



<div class="container"> <!-- container to center and set slider width -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-zoom-container"> <!-- All "zoomable" images should be wrapped with the div with swiper-zoom-container class. -->
                    <img src="http://pngimg.com/uploads/bottle/bottle_PNG2095.png" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="http://pngimg.com/uploads/bottle/bottle_PNG2093.png" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="http://pngimg.com/uploads/bottle/bottle_PNG2081.png" />
                </div>
            </div>
        </div>
    </div>
</div>

Styles



body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 600px;
    height: 600px;
}

.swiper-container,
.swiper-wrapper,
.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: 80%;
}

And now it's time to add JavaScript.



// Initialize new Swiper instance
const swiper = new Swiper(".swiper-container", {
        // Setting default settings
    grabCursor: true,
    centeredSlides: true,
    loop: true,
        // Setting minimum and maximum zoom ration
    zoom: {
        maxRatio: 1.2,
        minRation: 1
    },

});

// Use built in zoom.in() and zoom.out() function to scale images
// When slide starts to change slideChangeTransitionStart event fires and we use it to scale down the image. 
swiper.on("slideChangeTransitionStart", swiper.zoom.out);
// And when transition has finished scale it up.
swiper.on("slideChangeTransitionEnd", swiper.zoom.in);

That's it. Hope you liked it:)

Comma operator in JS

Dima Prohorenko — Fri, 12 Mar 2021 12:07:18 +0000

Comma operator allows you to put multiple statements, where one is expected.

for (let i = 0, j = 0; i < 5; i++, j += 2) {
 console.log(`i=${i}, j=${j}`); 
}  
// Output
// i:0, j:0
// i:1, j:2
// i:2, j:4
// i:3, j:6
// i:4, j:8

When placed in an expression, it evaluates every expression from left to right and returns the right most expression.

const a = () => 'a';
const b = () => 'b';
const c = () => 'c';

const x = (a(), b(), c());

console.log(x);

// Output c

Also , operator has the lowest priority, so without parenthesis the expression would look like const (x = a()), b(), c();.

Note that the ,operators in assignments may appear not to have the normal effect of , operators because they don't exist within an expression. In the following example, a is set to the value of b = 3 (which is 3) and c = 4 is evaluated and its result is returned to the console(4).

let a, b;
a = b = 3, c = 4; // Returns 4
console.log(a); // Output 3

Super useful JavaScript tips

Dima Prohorenko — Mon, 08 Mar 2021 12:22:06 +0000

Here is a list of useful tricks for JavaScript developers that will definitely help you one day.

Removing Falsy Values From Arrays

Falsy values are values in JavaScript which evaluate to FALSE. There are only six falsy values in JavaScript and they are:

undefined
null
NaN
'' (empty string)
0
false The easiest way to filter out these falsy values is to use the below function.

array.filter(Boolean);

Keep in mind that filter returns new array and does not modify the original array.

The difference between target and currentTarget in the event context.

target refers to the DOM element that triggers an event. Otherwise, currentTarget refers to the DOM element that the event listener is listening on.

<ul class="list">
  <li class="list__item">Study JavaScript</li>
</ul>

const list = document.querySelector('.list');

list.addEventListener('click', (e) => {
    console.log(e.target); 
        // Output: "<li class='list__item'>Study JavaScript</li>"
    console.log(e.currentTarget); 
       // Output: "<ul class="list"><li class="list__item">Study JavaScript</li></ul>
});

Copy to Clipboard

It’s easy, the bad thing is that we must add an with the text to be copied to the DOM. Then, we selected the content and execute the copy command with execCommand. execCommand('copy') will copy the actual selected content.

<input type="text">
<button>Copy to Clipboard</button>

button.addEventListener('click', () => {
    input.select();
    document.execCommand('copy');
});

Or if you don't want to use input, there's a way to copy content from div, span, p.

<p>Some text to copy</p>
<button>Copy to Clipboard</button>

function copyToClipboard (el) {
    const r = document.createRange();
    r.selectNode(el);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(r);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
}

button.addEventListener('click', () => {
    copyToClipboard(paragraph);
});

Truncate an Array

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

That's it for today. Hope you learned something new:)

CSS tricks you probably didn't know about.

Dima Prohorenko — Mon, 01 Mar 2021 08:48:18 +0000

Today I'm gonna share with you some cool css selectors.

Let's start with counter.

To style numbers in a numbered list, we need to play with properties called CSS counters. CSS counters let you adjust the appearance of content based on its location in a document.

<ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

li {
    font-size: 40px;
    margin-bottom: 20px;
    counter-increment: li;
}

.list li::before {
    content: counter(li);
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    background-color: #f3b70f;
    color: white;
    text-align: center;
    line-height: 50px;
}

::selection.

The ::selection pseudo-element applies to highlighted elements on the DOM. This is one of my favorite pseudo-elements. The syntax looks like this:

p::selection {
  color: white;
  background-color: green;
}

Next is the attr() function.

It's used to retrieve the value of an attribute of the selected element and use it in the stylesheet.

<h2 class="title" data-count="01">Section</h2>
<h2 class="title" data-count="02">Section</h2>
<h2 class="title" data-count="03">Section</h2>

.title {
    font-size: 35px;
    letter-spacing: 3px;
}

.title::before {
    content: attr(data-count);
    font-size: 1.2em;
    color: steelblue;
    margin-right: 10px;
}

Adding Stroke to Web Text

<h2>Css is Awesome</h2>

h2 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px tomato;
}

Turn your website into SPA with barba js

Dima Prohorenko — Sat, 27 Feb 2021 16:18:21 +0000

Today I’m gonna show how you can create smooth transition between website pages.

This is the result:

This time I’ll be using barba/css plugin, which let’s create transitions without javascript animation library.

Also you can find starting and finished files on my github

Let’s start by importing barba, css plugin and app.js file.

 <script src="https://unpkg.com/@barba/core"></script>
 <script src="https://unpkg.com/@barba/css"></script>
 <script src="app.js"></script>
~~~

Add required barba markup: data-barba=“wrapper” and data-barba=“container”.
~~~html
 <body data-barba="wrapper">
    <main data-barba="container" class="bg-blue">
      <div class="transition"></div>
      <div class="container">
        <h2>This is the first page</h2>
        <a href="second.html" class="btn">Next Page</a>
      </div>
    </main>

    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://unpkg.com/@barba/css"></script>
    <script src="app.js"></script>
  </body>
~~~

Everything inside the wrapper that is not inside the container won’t change and everything within container will. Also container must be inside wrapper.

### How it works:
When we click on the link barba makes a request to get the container from the next page and injects it into the current page, changes the url.

### Add javascript.

~~~javascript
// Tells barba to use css plugin
barba.use(barbaCss);
// Initializing barba
barba.init({
  transitions: [
    {
      name: 'home',
      // Code inside won't run with css plugin, use beforeOnce or afterOnce
      once() {},
    },
    {
      // specifies classname to be applied
      name: 'cover',
      // Code inside won't run with css plugin, use beforeLeave, afterLeave or the same with enter
      leave() {},
      enter() {},
    },
  ],
});
~~~
Transition is an array of objects in which we specify the transitions.
Name property specifies class name that are applied to container on transition.

Methods in barba are called hooks. Once hook specifies the transition which runs once on initial page load. Leave and enter hooks specify that we want to have leave and enter transitions. 

Now let’s add css

~~~css
/* Adds transition to the container */
.home-once-active {
  transition: opacity 300ms linear;
}

/* Starting state */
.home-once {
  opacity: 0;
}

/* Ending state */
.home-once-to {
  opacity: 1;
}

/* Overlay transition */

/* Barba listens to transitions on the container, that’s why we need to add transition to container as well */
.cover-leave-active,
.cover-enter-active,
.cover-leave-active .transition,
.cover-enter-active .transition {
  transition: transform 0.5s ease-in-out;
}

/* Cover in */
.cover-leave .transition {
  transform: translateY(-100%);
}
.cover-leave-to .transition {
  transform: translateY(0);
}

/* Cover down */
.cover-enter .transition {
  transform: translateY(0);
}
.cover-enter-to .transition {
  transform: translateY(100%);
}
~~~
That’s it for today, hope it helps. Also if you have any questions feel free to ask, I’ll try to help;). 

In the next post I’m gonna add animejs library.

Awesome HTML tags and attributes

Dima Prohorenko — Fri, 26 Feb 2021 13:50:40 +0000

In this post I'm gonna share with you some cool html tags and attributes.

The title attribute specifies extra information about an element.The information is most often shown as a tooltip text when the mouse moves over the element.

<p title="I'm a tooltip">I have a tooltip</p>

mark tag - everything wrapped between opening and closing brackets will be highlighted. The presence of the mark element is not announced by most screen reading technology in its default configuration. Here's a good post on how to fix it.

<p>This is a <mark>paragraph</mark></p>

HTML contenteditable attribute indicates if the content should be editable by the user.

<p contenteditable>Write your name here</p>

The meter element is used to display a gauge. The meter element should not be used to indicate progress (as in a progress bar). For progress bars, use the progress tag.

<h4>Disk usage</h4>

    <div>
        <label for="disk-c">C:</label>
    <meter id="disk-c" value="0.6"></meter>
    </div>

    <div>
    <label for="disk-d">D:</label>
    <meter id="dist-d" min="10" max="50" value="40"></meter>
    </div>

base tag specifies the base URL and/or target for all relative URLs in a document. There can only be one single base element in a document, and it must be inside the head element.

<head>
    <base href="https://example.com/">
</head>

<img src="images/example.svg" alt="">

That's it, hope you've found some usefull info here. Stay safe and have a great day :)

How to style broken images with css

Dima Prohorenko — Fri, 26 Feb 2021 09:42:59 +0000

Broken images are ugly, but we can style them to provide a better user experience.
Here's what we'll be creating today:

But before we begin let's take a closer look at how images behave.

1. We can apply typography styles to images.

They will be applied to the alternative elements.

2. You can use pseudo-elements on broken images.

Typically ::before and ::after elements won't work on images, however, when image is not loaded this elements can appear.

Let's get to the interesting part.

Create an image tag and set a broken url and an alt attribute.



<img src="https://imag.unsplash.com/photo-1509021436665-8f07dbf5bf1d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHw%3D&w=1000&q=80" alt="Good book">

This is what we get in the browser:

Apply styles for the image element itself.



img {
     display: inline-block;
     font-family: Arial, sans-serif;
     font-weight: 300;
     line-height: 2;
     text-align: center;

     min-width: 300px;
     min-height: 50px;
     position: relative;
}

Add ::before element to create a background for the broken image



img::before {
     content: '';
     width: 100%;
     height: calc(100% + 10px);
     background-color: #ccc;
     border-radius: 10px;
     position: absolute;
     top: 50%;
     left: -2px;
     transform: translateY(-50%);
 }

Here's what browser renders

After this add ::after element to create text and icon.



img::after {
     content: "\2639" " " attr(alt);

     font-size: 18px;
     color: rgb(100, 100, 100);

     display: block;
     position: absolute;
     z-index: 2;
     top: 5px;
     left: 0;
     width: 100%;
     height: 100%;
}

Final output

Also in order to use html symbols inside a pseudo-element you have to first get the symbol number and then convert it to Hexdecimal value. Here's a nice tutorial on achieving this.