DEV Community: Dinys Monvoisin

Flip animation

Dinys Monvoisin — Thu, 01 Oct 2020 10:38:03 +0000

Web development was once about making the website functional; yet, this is no longer the case. Nowadays, it is about the user experience the websites provides. Nonetheless, websites that we design contain some UX inconsistencies like “jump cuts”. Those inconsistencies create some cognitive overload to the users. In other words, the designs are not very intuitive.

In this article, I introduce how you can create a smooth transition using Flip animation. Then, implement the Flip animation using react-flip-toolkit to create an aesthetically pleasing visual. Below is a sneak peek of the result.

Before jumping straightaway implementing a Flip animation, let us understand three basic things:

What Flip animation is
Why choose Flip over CSS animation
Why opting for a Flip library like react-flip-toolkit

Content

Flip animation definition
CSS animation over Flip
Why using a Flip library
Implement Flip animation using react-flip-toolkit
Resources

Flip animation definition

Flip is an acronym that was first introduced by Paul Lewis, which means First, Last, Invert and Play. I would not go in-depth about the reason behind those names. The key takeaway is that those are the steps required to create a Flip animation. An animation where the transitioning component scales or tweens to the final component.

CSS animation over Flip

Usually, to implement any animation, people would use plain old CSS. That can be an option, updating the top, left, right, bottom position and then setting a transition time. But, this way has a considerable performance impact when rendering the web page. It will not be a surprise to find some glitches here and there. Contrarily, using JavaScript to apply a scale transition is more efficient.

Why using a Flip animation library

As with every library that you use, it offers the advantage of not worrying about the underlying implementation. But, to rather focus on your own unique implementation. Flip animation is not hard to implement, but the worst part is that we will need to handle every edge case. Edge cases like browsers compatibility and listening to browser window size changes. For this reason, I chose react-flip-toolkit. A library that offers greater flexibility when creating transitioning animation. Here is a list of examples what you can achieve with react-flip-toolkit. Besides, it is also available for other JavaScript frameworks and JavaScript itself. But you will find it under different names.

Implement Flip animation using react-flip-toolkit

First set up a new React project and add the react-flip-toolkit to it.

npx create-react-app flip && cd flip && npm install react-flip-toolkit

From there, open the React project in your favourite editor. Then head to the App.js file and remove any unnecessary lines. Add the Flipper component that wraps the transitioning component SelectedMode.

import React, { useState } from 'react'
import { Flipper } from 'react-flip-toolkit'

function App() {
    const [tweetMode, setTweetMode] = useState(false)

    return (
    <Flipper flipKey={tweetMode}>
        <MenuScreen />
        {
            tweetMode ? (
                <SelectedMode id={`${modeName}-mode`} mode={modeName}/>
            ) : null
        }
    </Flipper>
    )
}

For this example, I used a ternary operator to display SelectedMode or not to avoid the use of CSS.

The import bit in the code above is the flipkey attribute from the Flipper component. This is how react-flip-toolkit knows when to play the animation. The attribute can be of any type: boolean, string, number.

Next, create a SelectedMode.js file, which is the card mode the user clicks to view the list of tweets. Wrap the content of the screen around the Flipped component and add the flipId attribute to it. The value of the flipId attribute maps to the mode name for the two components that are changing. For example, the card with mode 'at-once' would have a flipId of mode-at-once. So will the flipId of SelectedMode component.

import { Flipped } from 'react-flip-toolkit'

function SelectedMode({ id, mode }) {
    return (
         <Flipped flipId={id}>
             /* Content of the screen displaying list of tweets*/
         </Flipped>
    )
}

Lastly, create the Card.js file and include the code below. You will notice that there is an onClick function to change the tweet mode. In this case, we used the React Context API to create a hook, as we will need to access this value in App.js to trigger the animation. For the brevity of the article, try to implement useTweetModeToggle by yourself. If you find any difficulties, feel free to have a look at my GitHub repository.

function Card({ mode, title, titleHighlight, description, descriptionHighlight}) {
    const toggleTweetMode = useTweetModeToggle()
    return (
        <Flipped flipId={`${mode}-mode`}>
            <div onClick={toggleTweetMode(mode)}>
                 /* Contents of the card mode*/
             <div>
         </Flipped>
    )
}

Resources

The example is from show-me-your-tweets, a web application I am working on for some weeks. There will be further articles coming based on it if you do not want to miss out, follow me on Twitter or Hashnode .

Hashnode Technical Writing Bootcamp

Dinys Monvoisin — Tue, 22 Sep 2020 09:34:59 +0000

It's been three weeks since I joined Hashnode and I can say with no regrets that I did the right thing.

I accumulated a long list of accomplishment in which I will name a few:

Written four blog posts
Participated in the technical writing Bootcamp
Met up with the charismatic Catalin Pit
Engage with the Dev community.

In this article, I'd like to share a summary of Catalin's talk at the Technical Writing Bootcamp. He spoke about target audience, article structure and paid articles. Let's jump right in!

Content

Know your target audience
Article structure
Paid articles
Conclusion

Know your target audience

In this section, Catalin spoke about the importance of knowing your audience. And how in doing so, it can save you from losing it. For example, if you target junior developers as an audience, avoid complicated topics. Instead, choose the right words and appropriate language that best suits them.

Thinking about it, writing a blog is like selling a product to someone to a specific niche. Customising your content to the image of your audience will guarantee you success.

Article structure

It's the little things that count, hundreds of 'em. — Cliff Shaw

This quote sums up how simple tips about writing an article can have a significant impact on the reader.
In his talk, Catalin went over key points to improve your articles. I have combined them into the below bullet points to keep it short:

Add heading and introduce section to your post.
Prefer short sentences over complex sentences.
Favour sentence with an idea and be concise.
Use active voice over passive voice.
DO NOT include acronyms with no definition.
Create an impact on the first paragraph
Use the ordered list for instructions and unordered list for other things like ideas.

In sum, what he was trying to explain is that format matters. A well-structured article with headings, spaces, paragraphs is more comfortable to read.

Paid Articles

Writing is good. Having an audience is good. But what if, you can make some money from it?

Catalin gave two pathways to follow to make some side money. Getting in touch with FreeCodeCamp to introduce your blog post's idea. Or, pitching to potential websites to promote your content and earn some money.

Either way, both demand consistency and hard work to publish on those platforms.

Conclusion

This talk was very informative, and it was the first of a kind that I attended. I hope that this article will help in promoting excellent writers in the future.

If I may add one advice from all what Catalin said is to: read blog posts more often to pick up the TO-DOs to write articles.

Dumb useful tricks

Dinys Monvoisin — Wed, 16 Sep 2020 23:02:39 +0000

Dumb useful tricks
I have written this article as a go-to for junior developers with tips and tricks. Meanwhile, while I finish the "show-me-your-tweet" website for the content of my future blog post. If you want to know more about it or have regular updates, consider following me on Twitter .

Transitioning to an actual job can be overwhelming and difficult for a junior software developer. Far too often, companies have a vast codebase with ten or thousands lines of code, and quite often, it is hard to find what you are looking for. I have seen this first hand.

Over time, I picked up ways to navigate the codebase. It was not that easy; I had to learn from my errors. In this article, I share the tips and tricks to help you avoid the burden I went through and help you to excel at your job.

Content

Know how to search
An error message is there for you to read
Debugging is your friend
Conclusion

Know how to search

Computer vector created by freepik - www.freepik.com

Searching is an integral part of software development. Searching for the appropriate information can save you a lot of time and trouble. But what do you search for in a codebase? How do you find what you are looking for?

Considering that your codebase is huge, trying to read through its entirety can take you several months or years. Thus, this should not be the answer to your problem. What will be the ideal solution is some tool that you can use to find the piece of code that you are looking for. Possibly, a file searching tool. Many of them exist, I use AstroGrep at work. It is a GUI version of grep for Linux. What it helps you to do is: to search for a piece of text through a directory.

What would you look for if you do not know what inside the code? The answer to this is simple. The application that you are developing for might include an interface with some words on it. Use those words to find a match to find the place in the code to apply your change.

Simple, isn't it? Now let's say that you are a web developer working on some websites. You could simply copy the CSS selectors from the inspector tool. From there, using your favourite text editor use Search For All for the text you copied.

All that is to say, just search for clues in the codebase to find what you need.

An error message is there for you to read

Data vector created by stories - www.freepik.com

Yes! You read the title right. An error message is there for you to read. Often without reading an error, people will straight away do a Google search for the error. They did not even spend the time to understand what is the cause of the error. Yet, reading the error message helps you to understand the issue. It also helps you in formulating text search if you need to. Adopting this habit will definitely help you in becoming a better software developer.

An exception with a stack trace is one form of the error message you often receive. If you pay attention to it, you can pick up where the issue is happening and possibly the source of the problem. It's not always the case that the first line of the exception is the exact cause of the problem, therefore, if given a stack trace use it wisely.

What I discuss is simple, but paying close attention to those small details is a time-saver. Eventually, you will become self-reliant and more productive at your job.

Debugging is your friend

Web vector created by stories - www.freepik.com

Code does not always make sense. There are many reasons why: Knowledge gap, the complexity of the system, the experience you have or the wrong mental model.

Instead of banging your head against the wall take a back step and construct a mental model of what the code does. Then, try a simple trick. Try debugging the application by stepping through the code and see how it works. This will help you to have a better sense of what the code is doing.

Conclusion

I hope that you have learned some useful tips by reading this post. And made you ready for your next adventure in your new company.

Whether you agree or not, those simple tips will help you to be a better developer in the future.

Regex isn't that hard

Dinys Monvoisin — Sat, 12 Sep 2020 06:32:51 +0000

Regex is the thing that you only learn when you need it. Unless you are processing a considerable amount of data, you likely won’t use it.

Does that imply that, as a software engineer, we should forget about it and worry about it when that time comes? Are we not supposed to take responsibility to learn it?

Programmers think that Regex is hard. As with every skill, it requires practice to master. To help you with it, I wrote this article to cover the basics of Regex and show a simple application of how you can use it.

Content

Reasons to learn Regex
Understand Regex
Regex structure and special characters
Example using Regex and JavaScript
Resources

Reasons to learn Regex

Stuck in limbo, googling about the Regex pattern to the problem we are trying to solve. Does this sound familiar? I bet at least one of you were in a comparable situation before. But, don't you think it would be easier to know the in and out of Regex? Indeed, this would have reduced the time searching for answers.

Regex provides a more concise way of solving problems that need some form of parsing. An example is the split function. Turning your string into tokens before applying some sort of logic is lengthy to put in place. Turnouts that this implementation is limited compared to using Regex.

Hopefully, the next part excites you as we are going to cover more of Regex.

Understand Regex

Regex is also called regulation expression. It is a set of string characters that define an expression for the patterns of data you are looking for. It has been there for a long time, since the 1980s, and its primary use was for searching and parsing strings.

An example of Regex for looking for email address having a ".com" domain can be: /.+@.+\.com/.

Don't worry if it does not make sense now. In the next part I will cover what the characters in the above expression mean.

Regex structure and special characters
The first thing to know is that there are two ways to define a Regex pattern:
Using a regular string literal

var pattern = /abc/

Calling RegExp constructor

var pattern = new RegExp('abc')

When to use which? Regular string literal is when you know the pattern in advance. Contrarily, RegExp constructor when you use dynamic data during runtime.

Special characters in Regex extend the ability to create more complex Regex pattern. Let's look at some fundamental ones.

The string, "From: dinys18@dinmon.tech", will be used in each of the below scenarios. And to give the result of the Regex pattern, an arrow will be used. But in no way this will work using JavaScript.

^ - The caret symbol matches the start of a string

var re = /^ From: / => From:

$ - The dollar sign symbol matches the end of a string

var re = /tech$/ => tech

. - The period character matches any single character

var re = /.@/ => s@ // Any single character and @ sign

[0-9] - Character set. Matches any character enclosed with the brackets.

var re = /[0-9]/ => 1 and 8, not to be confused by 18

* - Asterisk character matches any character before it, at least one, i.e., either zero or one.

var re = /.*:/ => From: // Any multiple of character until semi column

+ - Plus sign character matches any character before it, one or more times.

var re = /@[a-z]+/ => dinmon // Start at @ sign, include any multiple of lowercase characters

Lastly, characters like asterisks, plus sign and period are special characters in Regex. What if you wanted to use them in your regular Regex expression. Thankfully there is a way by using special characters in your pattern, you would need to escape them. Meaning adding \(slash) in front of them, so that they are no longer considered as special characters, but as the regular character.

var re = /\..*/ => .tech // Start at the period character, include any characters afterwards

Now that we have covered various ways to construct a regular expression let's go ahead and combined it with JavaScript. That will allow us to perform more complex operations like extraction, replacement and so forth.

Example using Regex and JavaScript

In this section I will cover how to use Regex combined with JavaScript to perform an extraction onto a string. For that, I will implement a file simulator that allows the creation of duplicate folder names.

So to avoid duplicate folder name, we need to append a string to the folder name to make the new folder’s name unique. For this will add an index enclosed in brackets to represent the number of times the folder is duplicated.

Before we start constructing the regular expression, let's start breaking down the various scenarios to handle:
A folder's name with any characters, e.g, python
A folder's name with any characters and a digit enclosed in a bracket, e.g python (0)

First, we need to get the of the duplicated folder's name with any characters.

var regex = /.+/

Then look for the enclosed bracket with a number.

var regex2 = /\([0-9]+\)/

You will notice that we escaped the two brackets that surround the number by using a slash. In the middle of the enclosed bracket, we used a character set from zero to nine to define a number. As we need more that one number, we added the plus sign to cater for numbers of two or more digits.

This sounds good but isn’t it redundant to use two Regex expression on a single string we are trying to pass? What if we could do that in one line? To achieve this, will extract both the folder’s name and the number using the curly brackets around them.

The final expression will look like:

var regex = /(.+) \(([0-9]+)\)/

To execute the Regex expression, call the match function with the above expression as an argument.

var name = 'Folder (0)'
var matchFound = name.match(regex) => ['Folder (0)', 'Folder ', '0']

The above result of match function will return null if no value found or the values extracted. Check the match() function reference for more detail.

Note: The first value of the array will be the string you passed in, and the rest is the extracted values.

I leave the next part for you to complete so that the function getDuplicateName return the folder’s name and the index at the end of the folder if it is a duplicate.

function getDuplicateName(list, name) {
            var regex = /(.+) \(([0-9]+)\)/  
            var matchFound = name.match(regex) ?? []

            var [, baseName, index] = matchFound;

            var isDone = (matchFound.length > 0) ? !(!!baseName) : !list.includes(name) 
            var count = index ? Number(index) + 1 : 0
            var newName = name
            baseName = baseName ?? name

            while (!isDone) {
                newName = `${baseName} (${count})` 
                if (!list.includes(newName)) {
                    isDone = true
                    continue
                }
                count++
            }

            return newName
        }

Resources

Regex Crossword - A fun way to learn Regex
MDN Regular Expression - For additional reference to the content covered in here

If you want to look at the full source code, visit the GitHub repository or the demo of the file simulator.

If you like what you read, consider following on Twitter to find valuable content.

SVG made easy

Dinys Monvoisin — Wed, 09 Sep 2020 11:15:36 +0000

SVG is everywhere. Almost every website includes an SVG image, and its popularity keeps on increasing.

This article will try to demystify what is SVG, bridge the gaps on some concepts related to SVG and at last a bit of practice by creating a web page using SVG as a background.

Content

SVG image
Why SVG
Viewport and viewBox
3D Viewer toy analogy
Adding SVG background to web page
Useful Resources for SVG

SVG image

SVG stands for Scaling Vector Graphics. It is a type of image format calculated using mathematical formulas. The benefit is, it is scalable without losing any resolution.

To create an SVG image, use a tag to describe the shape of the image.

Why SVG

There are many reasons why you would like to use SVG. The obvious one is that it scales without losing quality. The sharpness of the image remains unchanged.

That brings us to the next point.

Have you ever surfed a website that has a curvy shape background? Do you think the developers use png, jpg or some other image format? Why not?

SVG uses mathematical formulas to draw its shape. Therefore, the file size is relatively small compared to other image formats.

Before we go any further, we need to understand more about the space SVG is made to be able to change its size and position. That is where Viewport and viewBox come into play.

Viewport and viewBox

Viewport defines what part of an SVG image you see. Think of it as a window frame. It should not be misunderstood as the image content of the picture. Usually, you will define it as the width and height attributes of the tag.

If you have not understood at this point, do not worry; the analogy in the next section will make it clear.

ViewBox is viewed as a viewport. It provides the ability to position and describe the number of units that is perceived. Compared to the viewport, it is an attribute that requires values: min-x, min-y, width and height. The x and y are to move the viewport position. The width and height to "zoom" in and out.

Example of viewBox attribute in an tag:

<svg viewBox="0 0 100 100">

3D Viewer toy analogy

Do you still remember the 3d viewer from your childhood? Where you would, you will stick your eyes to those two views to see the 3d images? And at times you would pull down the handle to switch pictures.

Guess what, when you are pulling down the handle to change the images, it is moving the position of the pictures. That is how you can view a different image. In terms of the viewBox, the values of min-x and min-y are what you change to move between shapes defined in an SVG image.

Another component of the 3d viewer was the circular wheel found in the middle of it to move the image closer or farther from our view. So what I am referring to when talking about viewBox is the width and height value which allows it to zoom in and zoom out.

If you consider the two lenses, in the case of the 3d viewer, it will be the two lenses through which you look. A viewBox has its viewport, and a viewport is also defined for the SVG image using width and height on the tag.

Adding SVG background to web page

Now, get ready to have a bit of fun creating some unique background. For this example, we will create a background that includes two SVG images. The images can be generated and downloaded from blobapp.com.

Step 1: Create an HTML file

Create an index.html file. Inside it, add the below HTML5 code. If you are using VScode, you can add the code snippet by typing html:5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG blob example</title>
</head>
<body>

</body>
</html>

Step 2: Add two DIVs for the SVG image

In the body tag, add two DIVs with the following class names. The bg-blob class selector inherits the style to move our DIV around. And the other class is to specify the exact position of the blob image.

<body>
    <div class="bg-blob bg-medium-blob"></div>    
    <div class="bg-blob bg-large-blob"></div>    
</body>

Step 3: Download and save blob image

Head over to blobs.app to generate a random blob image to your liking and save it to your local directory where the index.html resides.

Step 4: Add CSS Styling

First, add a background colour to your body to make it more attractive.

body {
    background-color: #e2e8f0;
}

Next, add the bg-blob class which set the position to absolute for moving our DIV around. It also has z-index as -1 so that other content appears on top of our image.

.bg-blob {
    position: absolute;
     z-index: -1;
     box-sizing: content-box;
     height: 0;
     padding: 0;
     background-size: cover;
     background-repeat: no-repeat;
}

To use our SVG image as a background, we need a hacky way of using padding so that the DIV content is not treated as part of the HTML document flow. So that is why we set box-sizing and height to 0.

Next, add the below CSS style for the position of our blob image.

.bg-large-blob {
    top: 0;
    left: 0;
    width: 70%;
    padding-bottom: 70%;
    background-image: url(./large-blob.svg);
}

Use the width and padding-bottom to decide how big you want the SVG to render on the screen. Then, using top, left or right position the SVG according to your liking. At last, import the SVG file as background-image.

Step 5: Edit the SVG image

Most of the time, to create a fantastic background using blobs, we tend to cut out the shape a bit. Using only the mix-x and mix-y values of the viewBox, we can achieve this behaviour.

For one of my blob images, I set the viewBox as follows to move the shape to the left and down the web page. The first value of the viewBox, 150, moves the image 150 units to the left. Considering a unit is a px. Same goes for the second value 200.

<svg viewBox="150 200 500 500" width="500" xmlns="http://www.w3.org/2000/svg" id="blobSvg">
    <path id="blob"  d="M482,295.5Q471,341,405.5,340.5Q340,340,330.5,381Q321,422,285.5,449.5Q250,477,222,431.5Q194,386,144,396Q94,406,69.5,370.5Q45,335,48,292.5Q51,250,40.5,204.5Q30,159,92.5,157Q155,155,161,102Q167,49,208.5,55Q250,61,293,52Q336,43,369.5,70Q403,97,394,145.5Q385,194,439,222Q493,250,482,295.5Z" fill="#7fd1ae"></path>
</svg>

The SVG should look as follows:

Useful resources for SVG

Blob Maker and Blobs - SVG generators to create blob shape
Get Waves - A SVG generator to create wavy shape
Scaling SVG Elements - An interactive demo about how viewBox works

If you want to have a look at the source code on my GitHub repository and here is the result.

Below is another example where I used SVG to create a background for a File Simulator project.

I hope that by now, you do not have an excuse not to make your next project background unique. If you enjoy what you read, follow me on Twitter for more tips and tricks like this.

Is ebook a payback to content creators or a hoax?

Dinys Monvoisin — Thu, 03 Sep 2020 15:01:37 +0000

It is a trend now to release an ebook. Many people in the tech industry find it an easy way to reach out and provide value to people. The rise of social media in the dev community associates followers and an active social presence to success. Thus a new sort of ebook has emerged to address the frenzy to grow in popularity. In this post, I share my thoughts about that type of ebook and what it represents for the buyers.

At the start of those ebooks, most likely includes a disclaimer. The disclaimer specifies that the author is not accountable for the reader's success. At the sight of this, I cannot prevent myself from thinking about the first chapter in Your First 100 Million. In this book, Dan Pena describes how people spent their money on books from seminars for advice they already know of.

You should not be misled from what I say above. In no way I am insinuating that those books are wrong but what I want to tell is that I view it in another way. I see the author is trying to relate a story to promote the idea that humans are connected by feelings, and most of its actions are driven by emotions. People being intrigued and curious led them to buy those ebooks.

Up-to-day I have purchased two types of ebooks: one which I already read and the other one which I am awaiting its release. If asked about the question, what are the takeaways of reading those ebooks? I would not be able to answer this without saying that I am more confused than I was before reading it. Why? I am glad you ask. After reading the book, I picked up one or two pieces of advice, or let's say something more reasonable, five. Those pieces of advice are not mind-blowing, and everyone could have thought of it.

Coming back to the authors of those ebooks. On average, most of them have a social media account on twitter which is rather typical among tech people. Often is the case that those tips and advice are available across those social platforms. Awaiting you to apply them.

"You sow what you reap". This proverb describes in simple words the content creators journey. That is, spending countless hours perfecting articles, videos, podcasts, ebooks and interacting with its followers. In the dev community, those efforts touch us. As a payback for the hard work, bonds, and valuable contents, we often invest in those ebooks.

Key takeaways:

I did not write this post to attack anyone in any sort, I am sharing my opinion and feeling about the subject.
Most advice, tips and tricks are simple things that people have come across but did give a second thought at.
Following those people on social media might save you a couple of dollars.
People connect to the success stories of the authors.
Buying the ebook is a support to our cherished content creators.

Now the question to you, would you buy those ebooks? Comment below with your thoughts and opinions. I am delighted to hear them.

If you want to read more of my content, do not hesitate to follow me on twitter .

Why learn Vim?

Dinys Monvoisin — Fri, 01 May 2020 21:51:12 +0000