Forem: codedgar

How to create a dark theme system in 5 minutes or less with vanilla JS.

codedgar — Sat, 17 Oct 2020 05:56:01 +0000

A long time ago, in my old blog, I wrote an article called "How to create a dark theme system with jQuery". And I think this is the perfect moment to create a simpler, cleaner and better dark system, free of jQuery.

I use this same system (But expanded) on my own website! You can find all the code in this GitHub repo.

codedgar / darkmode-in-5-minutes

Tutorial of darkmode with vanilla JS and vanilla CSS

To make the article simpler to read, I've cut up the article in chunks, check this out:

Intro - CSS variables.
The basics - Toggling classes.
Summing it up - Saving and retrieving the setting.

Intro - CSS variables

CSS Variables are exactly what they sound like, variables, and this comes very handy for our system. It means that we can define all the colors in one CSS class, instead of nesting the colors that we are going to use all across our website.

Wrong

.dark_mode>body{
    background: #000;
}

Nice

.dark_mode{
    --body_bg: #000;
}

Using CSS variables prevents you from having to use child selectors, but rather use a class. This makes it easier to have even several themes and helps to have all of your colors defined in just one class.

This also means that you now will have to defined colors this way:

:root{
    --text-color: #000;
    --body-bg: #fff;
}
body{
    color: var(--text-color);
    background: var(--body-bg);
}

So, go ahead and find every color you want to change in your CSS, and do it this way. This is the perfect moment to open up the developer tools and select the colors you want your website to have in dark mode and defined into a class called "dark_mode".

You just did the intro, hooray!

The basics - Toggling classes.

Now that you have your CSS redefined, it's time to get into JS territory, are you ready? Let's do it.

The main thing we need to do is create a button, and retrieve it element, we can do that by just using a simple:

document.querySelector('#theme_toggler');

Now that we have the element, we have to define it in order to add an event listener:

let theme_toggler = document.querySelector('#theme_toggler');

Ok, so what do we do on our friend the theme_toggler? We need to add an event listener that toggles the class on our body tag, and that's pretty easy, we do it like so:



let theme_toggler = document.querySelector('#theme_toggler');

theme_toggler.addEventListener('click', function(){ 
    document.body.classList.toggle('dark_mode');
});

As you can see in the example, is working kinda nicely!

"Cool, it is ready? Can I leave? Could you let go my arm?" Sadly the answer is sort of, no and no... You see, it toggles the class, but if your user recharges the website or leaves and comeback, there's nothing telling the browser to store it, so you would have to click again... And again, and again. Which takes us to our last step!

Summing it up - Saving and retrieving the setting.

Ok, now that we are toggling the class, we have just one step left, and that's saving the setting with our good buddy and pal, localStorage.

localStorage comes perfect in this kind of situations because it's simple to use. We just need to do 3 main things:

Save the setting
Retrieving the setting
BONUS: Adding an event listener to the localStorage event

Saving the setting

Let's start with saving the setting, and this is very simple:

localStorage.setItem('website_theme' , 'dark_mode');

Here we're are setting the dark_mode, but not disabling it, to toggle the dark_mode on and off we need to do the following:

if(document.body.classList.contains('dark_mode')){
    localStorage.setItem('website_theme','dark_mode');
}else{
    localStorage.setItem('website_theme','default');
}

This checks if the body element has the dark_mode class. If it doesn't it sets it to a default class theme.

Retrieving the class

This is even simpler, we first need to verify if the item of the localStorage exists, and if it does we just apply the class that we saved on the localStorage, being default or dark_mode, then we call it as a function.

function retrieve_theme(){
    var theme = localStorage.getItem('website_theme');
    if(theme != null){
        document.body.classList.remove('default', 'dark_mode'); 
        document.body.classList.add(theme);
    }
}
retrieve_theme();

And that's pretty much it! If you reload the page, the theme will be saved! Now just a bonus, because you deserve it.

BONUS: Adding an event listener to the localStorage event.

Surprisingly enough, adding an event listener to the localStorage is fairly simple. And what does this do? This makes all of the tabs open of your page synchronized, TLDR: Change it on one tab, and it's gonna change in all of them.

Ok and how do we do that? Simple, we do it like this:

window.addEventListener("storage",function(){
    retrieve_theme();
},false);

Piece of cake? Am i rite? That's all you need to know! And this is our final result:

codedgar / darkmode-in-5-minutes

Tutorial of darkmode with vanilla JS and vanilla CSS

Conclusion

With dark themes becoming more and more popular, creating dark better dark themes with less code is great, and I hope you can add your amazing theme and make your website super cool. See ya around!

Why should you create your own framework. - Presenting Puppertino!

codedgar — Sat, 27 Jun 2020 18:04:27 +0000

OK, I know you don't know what Puppertino is, and in short, it's a CSS framework created by me! What makes it special? And why should you create your own framework? Keep reading to know!

Hi! I'm Codedgar and today I'm gonna talk about Puppertino and why you should consider creating your own framework!

First: "But why?"

Some people might say "Ugh, another CSS framework, why?", and I understand that there are a lot of CSS and JS frameworks around nowadays, but the main reason why I'm developing Puppertino is...

KNOWLEDGE

I love to say that coding knowledge is a never-ending mountain, the more you climb, the more you realize that the top isn't near. And that's the main reason why I'm creating Puppertino. But let's dive inside why I think you also should create your own framework!

Why?

1- Knowledge
2- Use it yourself
3- Give something to the community

1- Knowledge

I already said this, but I wanna emphasize a little bit more about it.
By having an open project, people can see what you have created, allowing them to modify and suggest changes to make your code faster, more appealing, and maybe teach you something you didn't know.

You might find also a lot of challenges across the way, and crossing them will increase your knowledge!

2- Use it yourself

Maybe this isn't the case for everybody, and I get that. But for me, sometimes I find myself doing the same things or adding the same styles, that's why I'm using Puppertino also as a platform to create elements for my own projects and upcoming things. And if you can benefit from it, maybe someone else can too! Which takes me to my next point...

3- Give something to the community

Let's keep this a secret, but whenever I create something for the community, like a tutorial, a codepen, or anything, I come back to it and copy the code from it. And if you use it, maybe someone else will use it too, and you will be helping people to get the results they want more easily and faster.

"Okay that's cool, that's cool, but what about Puppertino?" That's an amazing question! Let's talk about it!

What About Puppertino?

1- What is it?
2- Ok, so an Apple-like framework?
3- Is it ready to use?
4- How can I contribute to it?

1- What is Puppertino

Puppertino is a CSS framework. Its name comes from Puppy and Cupertino. Which I find to be a funny mix of words. It's supposed to take elements and inspiration from the Human Guidelines and other design fundamentals to create a robust framework of elements that you can use on your apps or websites.

2- Ok, so an Apple-like framework?

NOPE, it's not an Apple-like framework. Not all the elements of the macOS and iOS IUs will be created into Puppertino, it will not be an exact copy with the exact colors and exact elements. Some of the components will be excluded, and non-existing components will also be added if I find them useful!

3- Is it ready to use?

I don't think so, there's a lot of things to add yet, but maybe if you wanted to use it in a landing page or something like that, it might work for you, for now, you'll have to wait a bit :)

4- How can I contribute?

You can always check the code and suggest any modifications! If you are feeling generous you can even create your own Puppertino Components and I'll review them and add them!

If you desire to contribute monetary way, there's currently no way of doing it (I also think that Puppertino currently does not deserve it), but if in the future I add some, I'll publish an article about it!

Conclusion!

While there are a lot of frameworks outside, don't let this put you down. By creating a CSS framework you will not only be learning more but also you will be contributing to the community! So go ahead and create amazing things C:

Step up your native HTML form validation with these 3 simple CSS classes!

codedgar — Tue, 12 May 2020 00:11:25 +0000

Form validation most of the time is done with Native HTML (Using the type attribute) or with JavaScript. And if you want to add fancy effects when the user has done a mistake, you most probably would choose JavaScript, but lemme change that for you.

Hi! My name is Codedgar and today, I'm going to present you 3 CSS selectors that will change the way you look at form and input validation with native HTML! Let's get to it!

During the development of the Input Forms for Puppertino, my own CSS framework, I came across a problem, I wanted to have native validation inputs, but creating a JS would be more work, not only for me but for people who would like to use the framework. So I investigated and found these lovely CSS Selectors.

Using "type" attribute.

By now you might be familiar with the "type" attribute in input elements, this helps the browser to know if the user has inserted valid information on the input and/or limit the type of information the user can insert (i.e Number Inputs).

The problem with these is that if you want to add a certain styles when the input is invalid or valid you would have to create a JS for that... Or do you?

This is something I would have loved to know before, so without further do, let's meet these 3 CSS selectors!

Introducing the :invalid Selector

The invalid selector, is a very powerful one, the styles in it will be applied to an invalid input, allowing you to add styles like another border-color or background to the element that has an invalid input based on attributes like "type", "max", "maxlength", "pattern" and so on. And it's used like so:

"Ok Edgar but that's just a tiny tiny bit of validation, what else do you got?" Glad you asked! Let's meet our other friend, the :valid selector!

The :valid Selector

The valid selector works as you would expect, if the input meets the criteria of the attributes, it will apply the styles of it. Simple right? And you can use it like so:

"Nice Edgar" I hear you say "But now my input is either red or green, how do I fix that?" And that's because if the input is empty, it doesn't technically meet the criteria of the attribute, but fear not! Let's open the doors for our last selector, the :placeholder-shown!

The :placeholder-shown Selector

Last but not least, the :placeholder-shown Selector it's going to help us to maintain a neutral style if the input is empty, but keep in mind, this selector works only when, as the name implies, the placeholder is shown, so if there's no placeholder, the input will get the styles of the :invalid selector. Remember that! And the placeholder selector is as easy as:

OK now that we have this:

And it looks like this:

Want to play with this? Check it out in Codepen

Beautiful. Now, let's talk about the pros and cons of using this and compatibility!

The compatibility

Great enough, the compatibility is pretty strong and all the modern browser support it without any type of problems! Check this amazing capture of CanIUse:

Pros

Using these selector implies no use of JS, so you can forget of adding and deleting classes after parsing the text of the input (Which I used to do).

Once, I created an app which validated the inputs on keypress (It was 4 years ago don't judge me haha), but this meant that you would have to press a key and delete it to validate the inputs, and this was particularly annoying when you where going to login, because if you had the information saved, it would throw an error, so everybody used to tell me how awful that was. But with this, you are free of that judgement.

Cons

This applies for simple input types such as "number", "tel", "email" and so on, and if you are trying to create something more complex you might have to resort to adding and deleting class back and forth. But for simple things, simple answers :) .

Conclusion

If it wasn't for Puppertino I maybe wouldn't be searching on how to validate information of inputs with just CSS, but now that I know that, I'm pretty confident that I'm going to start using this in all my next projects. What are you thoughts on this amazing CSS selectors? Let me know down in the comments!

What is like to be a developer in a third world country.

codedgar — Fri, 06 Mar 2020 17:48:03 +0000

Being a developer is considered a great career in most places around the world. But how true is this in a third world country?

Hi, my name is Codedgar and today I wanted to talk about how is like to be a developer in a third world country, and show how is life for a developer in the country I live in.

(Funnily enough I'm writing this article during a blackout, which are have become very common)

Before we start

Please don't make this a political thing, it doesn't matter what your position on the political compass is, the crisis cannot be hidden.

Where am I from?

I'm from Venezuela, you may have heard from it in the news, it has been mentioned several times on TV and news, talking about how destroyed the country is. Lack of electricity, gasoline or any type of basic service to live normally.

So how Venezuela's crisis has impacted on the world of developers?
I want to break this article in several parts to illustrate you better:

Work.
Salaries.
Hardware.
Basic services.

If you think I missed something ask it in the comments! I will answer you and if the question is great I will add it to the post.

Work

I wanted to start with the hardest thing, work. Because the truth is most developer works you can find here suck. It doesn't matter if you are working for someone here or someone outside of the country, being Venezuelan you are lucky to land a great job.

People in the country will search for an all doing person, designer, fullstack developer, but try to pay you almost nothing.

So you can either get someone who wants to exploit you (for a so-so amount of money), a stupidly low salary or both if you have bad luck. Which takes me to my next point.

Salaries

When I was looking for a job outside, I contacted several companies in the USA, and some of them offered me 1$/hour claiming that "It was a lot in Venezuela" which, obviously, is not...

Works inside the country vary, but I've seen people looking for developers as low at 35$ per month. Obviously you can't use this to afford anything so you will have rely on "matar tigritos" (Do small freelance jobs) to live some form of a 'normal' life.

"Ok Codedgar, but how much do you get a month?" I can't tell you because I could become a target of kidnap, but I can assure you is a very very low amount.

Hardware.

If you are a developer, you will need something powerful to keep your computer from interrupting you or adding extra time to development. But you can't find this in Venezuela, most computers will be high on price just because of the brand, and people will sell you broken parts for what the actual normal hardware would cost (i.e 90$ for a busted monitor). I've seen prices of a dual core with 1GB Vram and 8GBs of RAM as high 600$. And this in other countries would be considered just an office computer.

Basic services

The basic services are the main things a developer needs, such as:

Internet

Internet on Venezuela sucks, and not only that but it's extremely pricey. I've tried to add a private internet to my house, but you need an antenna (100$) and the maximum speed I've seen where I live, is 8MBps (Shared between other 8 clients) for 80$ a month. You can also pay mainstream providers, but most of the time you will have to pay under the table to get an almost decent speed.

This doesn't means that it will be a constant though, you can go from 5MB to 50KB in a matter of seconds, making it almost impossible to talk to clients via Skype or Whatsapp.

Electricity

1 year ago Venezuela suffered the biggest blackout on it's history, 5 days of pure blackness, and then 2 days more. Since then, the electrical system hasn't worked properly and everyday (In almost every state) there are blackouts up to 12 hours. This is to avoid the capital from having blackouts, but there have been multiple blackouts recently that feature all of the entire country.

You can also rent an office with a power plant or in places where there are no blackouts, but is really expensive just because of that.

Electricity also suffers from low and high current spikes, so if you have bad luck, you computer can fry or your disk can corrupt (Last one happened to me once).

Security

Is non-existent, you are out by yourself and no one can do anything for you. I personally have seen cases of the military and police being the ones who steal people.

This means you shouldn't carry your phone around and have to be very careful where you are and be alert of people around you.

Transport

Transport is really hard to find where I live. And taxis are really expensive. Most buses will work from 7am to 6pm. Meaning that you can't do night shifts without calling a cab to your house.

Education

One of the hardest things to find in Venezuela is good local education. There are no bootcamps, and no good courses. People is not so familiarized with technology, so they just get misinformed. Once I heard that "Blogspot was the BEST platform to start a blog", so yeah...

And our credit cards will not work to purchase any online course, making it harder to get online courses to expand our knowledge.

Conclusion

I believe that Venezuelans developers, do it because they just love to code. But really this is not only applicable to developer, this is the same for any type of creative and freelance job.

It's important that we talk about this because I always see in the media people talking about how Venezuela is destroyed, but I haven't seen a person come out and talk openly about how this crisis affects real people and real jobs.

I think that this illustrates more in a person factor, instead of a number factor how hard it is to have a normal job and be a developer here.

I've been thinking on creating some type of community to help people in Venezuela to land better jobs, find better courses and overrall try to fix some of the problems that we always have to go through... But that remains being an idea for now and I will make an update if it becomes a reality.

Anyways, if you liked it, or have any questions feel free to ask them, I will respond to all of them :)

The 5 golden rules for becoming a better leader.

codedgar — Mon, 10 Feb 2020 17:34:47 +0000

Leadership is hard. We always want to become better leaders and try to get the best of our team members, wether is on a programming team or any other thing. But only by having strong bases you can become a better leader that can impulse and guide a team of people to get the best out of them.

Hi, I'm Codedgar and today I wanted to talk about Leadership, and the 5 five rules of leadership you can start using today to become a better leader.

All of these tips that I'm going to give, come from my experience being in several programming teams and my experience leading my team for almost 4 months now.

Before we start.

Keep the following in mind: I'm not saying that these are the only rules that exist, but having these rules in mind can make a whole difference in the way that you manage people and they perceive you.

Also, consider following me on twitter at @codedgar_dev

5 - Be careful with your words.

Think twice, talk once is one of the most common things I say to this. I see a lot of managers and team leaders going "You're stupid", "You should know this by now", "How can you do this". And it always strikes me that they should be more careful with what they say, and how to say it. Remember to always treat people with respect, no matter who they are or what have they done.

And this is also true if you are delegating tasks. If you don't make a good work at explaining what it needs to be achieved, you will have people failing or misunderstanding what you said. So no matter how many times you have to explain it, or how, you will save more time if everybody knows exactly what to do.

4 - Be transparent.

One of the main problems I had with someone I worked for, is the fact that they didn't tell me what was going on. I didn't know if the client liked the interface, if it needed anything else, I just got tasks and that was all. And I feel like I could do a better job if they told me what could I improve, get better at or what mistakes I've made.

If you are transparent with your team, they will feel like really a part of it. Not only that, but they will help you with ideas and get a sense of responsibility, they will know what to do more, what to do less, and what to improve.

3 - Be open to proposals and listen.

The difference of opinions and how to approach problems are inevitable in every team. how you tackle them is the real difference. If you put your vision over everybody else and don't listen to anyone, you will surely get something wrong, forcing everyone to rethink a strategy.

Even so, if you are having problems making a decision, draw a table, and put in perspective what you think are the pros and cons of any decision, and listen to cons and pros that your team suggests and suggestions of what to do.

Imagine that someone on your team has the answer to your dilemma, but they will keep it to themselves because they fear a harsh "No". This is why you should keep an open mind.

2 - Make your team work with you, instead of working for you.

Every time I talk about this people ask me "What's the difference? Isn't it the same?" and the answer is no. A person who works with you, is interested in how the project is going, how to make it better, gives ideas and proposes new things. While someone who works for you, is only interested in the paycheck.

Having the team motivated and interested in the project is one of the key factors of being a good leader.

1 - Be careful with your team member's health.

Health is ultra important for every member of your team. And I constantly see leaders of teams just pushing and pushing on how to make team members more "productive" to the point of sleeping in the office almost all the time. And this is not healthy, not only for every member but for the ambient of the office. People will become most hostile and it can be less probable for them to work correctly together.

Instead of that, try to understand them more. It is better to have a motivated team that works less, that sleepless zombies that work all day (Hey that rhymed! Click open in a new tab to tweet it :) ). So next time someone tells you that they got a headache, just let them leave.

BONUS: Be friends with your team!

"But I have 50 team members!" Cool! Now you will have 50 new friends!! Ha, just kidding. What I mean by this, is care about other people. If you see them somewhat sad, ask them what's going on, ask them how was their day, and how do they think that everything is going in the team. From my experience, talking and caring for your team can make a big difference in how they see you and how they see the projects you are doing.

Conclusion

If you scan this article you will realize that almost every aspect of it comes down to have great communication and working correctly with your team. And that's really what it essentially is, if you have great communication with your team and understand them, that's it!

I know that there's more, and it will be great if you could share it in the comments. But for me, these are the main things you should have in mind.

Stop programming to become a better developer.

codedgar — Tue, 14 Jan 2020 20:15:15 +0000

Have you ever stayed up at night trying to fix a problem, just to realize the other day that it was just a simple mistake? Or do you feel that everything in your work gets more complex and complex everytime? Maybe it's time for you to stop programming.

"What?! Like... Forever??" No! Not at all. What I'm trying to say, it's that is time for you to rest. Resting, will not only make you a better developer, but it will help you have your mind clear when you come back to code.

Hi! I'm Codedgar and today I want to talk about resting, and how to stop programming for a while, which can make you a better developer.

Do you know how many people say "To become the best, you should always practice, and never stop until you are the best"? For me, that's a big, big lie.

Just think of the following: If you are doing exercise, and everyday you push your body to the limit, eventually, you will exhaust yourself, and maybe have to rest for a long time, making all the effort almost worthless. I did bboying for almost 2 years and I can tell you for sure that you need to find a balance between doing and resting, and it's the same for programming or any other thing you want to do.

I'm going to break down this article in several parts, so it becomes easier to read. First, I'm going to talk about what problems can bring you bad resting, then, I'm going to talk about how to fix bad resting behaviors and health tips that will help you get better at programming by resting correctly.

Disclaimer

"Where does this information comes from? Are you a doctor?" No. This information comes from 2 courses (Prevention of accidents and Working security in industrial environments) that I made in 2016 and 2017, part of my technician degree in electronics, and my personal experience dealing with burnout.

What problems can bring you programming without proper rest

You may have seen a lot of memes out there being like "Haha we programmers don't sleep", and I think this is one of the main problems with us, sleeping is one of the key factors to keep your mind clear and work correctly, but if you don't sleep and keep yourself stressed, you can have permanent problems, such as:

Burnout

Burnout is one of the most harmful problems you can find and I think it often goes unnoticed. In a nutshell (Jumping some details), burnout can bring you permanent problems if it's not treated in time, burnout in people can manifest itself in several ways, including extreme stress and tiredness. If you suffer from Burnout for a long period of time, it can lead to heart diseases and circulatory problems.

General irritation

This one really can mess up your social connections. I used to work on a place that led me to a lot of stress and general irritation, I got home to be angry with everyone and no one could talk to me without me expressing just angriness. People around you may not have the fault of how work is going, but if you are stressed all the time people will notice, and maybe will leave you alone.

Loss of passion

Passion is really important for programming, but if you are constantly stressed, you may start to think "Is this really for me?". And I've heard people that had abandon completely programming just because of this. The end result of your work can also be affected by this.

Loss of productivity

If your stress is building up, not only you, your friends, family, and work can be affected, but your productivity too. The work you did in one day or a few weeks can transform in months. Leading to general demotivation.

Now, we know that we as people, our friends, our family, our work and productivity can be affected. What can we do about this? It starts with noticing and stopping behaviors that affect our rest, which leads me to my next point.

Bad habits that get in the way of resting.

We often unknowingly get in the way of our rest, and even if you don't know it, you may do some of the things from the next points, and I'll help you fix them.

I had a dream of the fix! I'm gonna go and code it!

Don't do this. In your dream maybe it worked perfectly, but you may have to spend a few hours implementing this and therefore interrupting your sleeping, or whatever you were doing.

What can we do?

My dad actually suffer from this. And my mother used to hide the computer cable so he couldn't turn it on after they went to sleep, he complained and my mom told him "Just write it down, and do it tomorrow". She told me this after seeing me waking up in the middle of the night to code something I dreamt about that would fix my bug. And if I'm out in the street, dream with it or anything, I just write it down, and later take a better look at it.

I'm not going off work or to sleep without finishing this

While sometimes this may work for you, it will eventually lead you to rest incorrectly. Just think of this, the later it becomes, the less energy your brain has to actually think on how to finish what you are doing.

What can we do?

Recopilate as much information as you can about what you are doing, write about it, think about it, but don't stay woke all night. If you wake up in the morning with your mind clear, it will take you less time and you won't sacrifice your rest :)

These are just 2 examples to give you an idea, I'm pretty sure you can come up with other ways in which we sometimes neglect our rest. But just as there are bad habits, you can start building up good habits to keep your mind from overworking itself and rest correctly.

Good habits to rest correctly

We touched 2 examples of bad resting, but I also want to talk about great habits to help you rest and don't overload your brain.

Can't figure the answer? Stand and walk for a second

In all my time working as a developer, I cannot find something more relaxing after hours of coding without success than walking and taking a cup of cold water. Walking and standing for a while is great for your legs and circulation. But is also great to take a second to think about what were you doing and what other approaches you can try.

Take one day of the week to rest completely.

This may be hard to achieve if you are working on several projects at the same time. But if you take one day for your brain to cool down completely you will start with the right feet the next day.

Do exercise!

If you are all day sitting at your desk, most of your physical energy will be untouched, so at the end of the day, you might have problems sleeping. So what I recommend, is balancing the mental effort with physical effort. Do a sport, go to the gym, or bboying too!

Take your time

Yeah, I know, deadlines are scary and all. But don't overwork yourself. Try to find a pacing that feels easy on you, this way you won't overload of work even if you have a ton of things to do.

Conclusion

Coding is great, but it requires a lot of mental effort. And if you add an extra layer of stress on top of it, it can become a nightmare easily. And these tips are meant to help you start your day full of energy and with zero stress, which will increase your productivity, passion and overall mood. Making you a better developer in the process :)

Please, use modals wisely.

codedgar — Thu, 26 Dec 2019 01:33:40 +0000

The main thing I think whenever I see a modal taking all of my screen is: "What. What is so important that requires every possible space available on my screen". Is it a modal to sign me up into the website's "World Best Handbook of X"? Maybe it's a modal to tell me "How dare you using AdBlock, deactivate it, now!" or "Do you accept our cookies policy". And when I see these, I just think "Why.".

Hi! I'm Codedgar, and today I want to talk of the cons of having a UI with a ton of modals and what can we do to stop this and give the user a more pleasant and fluid experience on our website.

First, let's get 2 things straight:

1- Are modals bad?

Nope. Modals are surely needed if the users are about to press a button that they might not be sure to press, so in cases of "You are about to delete your entire account!" or "You will delete this file and you can never access it again" are totally needed.

2- Do I hate modals?

I only hate the modals that interrupt the flow of the user without actually needing to, and I think that modals are being abused by marketers, and I can't stand some of the usages to they given them. Modals are very important, but the misuse of them lead to a lot of people hating modals no matter what they show.

Now that we took that out of the way, let's talk about ways that modals are used incorrectly, and what can we do to replace them with something better. I've separated this article on two parts: How to know when to show information in modals and examples of modals used incorrectly and how to replace it with something more natural.

When should I display information on a modal?

To know if you should display information on a modal, I would advise you to ask yourself these questions:

Could the action of the user be mistaken or dangerous?

If the user clicked "I want to delete my account" or "I want to delete this forever" a modal is totally needed. Because it will stop the user to think about the action that will take place and check twice.

Is the information that I'm showing urgent or really important?

When I say important, it doesn't mean "Hey I'm giving this book out". I mean things like "We are moving to another domain soon", "This article is old, here's a new version" or "This is a beta of the app". This is information that can have an impact on what the user is seeing and how interacts with the content directly. And is something that needs to be said before the user continues the journey through the website.

Do I need all the attention of the user?

There's a big con to modals and it's that modals take all the attention of the users out of whatever they were doing, so if you are interrupting whatever the user is doing, make it worth it.

Examples of bad usage of modals.

Email collecting modals

I hate these. Don't get me wrong, sometimes email collecting is necessary but I do believe that this is a really "In your face" approach. And allow me to elaborate with an example:

I'm reading an article that says "It is safe for cats to eat soup?" but that doesn't mean that I want to download the book/guide for "impressive cat training", and the moment I stop scrolling it gets all of my screen telling me if I want it. My cat just jumped on the table and took some soup, I just wanted to know if it was safe (No cats were harmed during this example).

This approach of showing everybody that you are giving away a book/guide is really bad because you are just telling them that you are giving a free book/guide on the main topic of the website, but it might not have anything to do with the topic of the article.

What can we do instead?

We can tell the user in a section of the article that the information we are telling also appears on our book/product or whatever, like so:

"If your cat constantly eats your food, we have a section that talks about what your cat can eat in our free book 'Impressive cat training'". Now I know that if I put my email, I will have more information on the specific topic that I'm currently visiting, so if I'm looking to know more about this specific topic, this is nice. And this works great for segmentation of audiences.

Also, this is a great moment to tell you that if you are liking this article you should totally follow me on Twitter ( @Codedgar_dev ) because I will drop more articles on the topic "Please use wisely" and I will post them in Twitter when I publish them. (See? Way more subtle than a big modal, haha).

Login or Register modals

I once had the opportunity to work helping to create a frontend where the login, register, add a product, add a series of products, and everything was on modals. And this was horrible from a developer and user perspective since it required several steps to do anything, which meant several modals changing between them. If the user reloaded the website, the modal would close and he would have to open it again, so a user would be one click away from being where they were. Plus, if the user where to click outside of the modal, it would close, so he would have to open the first modal, and click next and next to reach the section of editing.

What can we do instead?

Create a dedicated subpage for these things. Where the focus is only and completely the action that the user is currently doing, and if the user reloads the page, it will appear exactly where it was. You don't need your user to stay on the same page at all times.

"Why are you using AdBlock?" modals

One thing I really believe is freedom of choice. I have entered websites that completely block you if you use AdBlock, and I evade them entirely. While opening new websites I tend to have Adblock enabled so I won't enter an ad-filled article or website. And if the number of blocked ads is really low, I deactivate AdBlock on that site. But if a user comes to your site and it's not allowed to see your website because it has an adblocker, your bounce rate may go up.

What can we do instead?

I know that for some people the ad revenue is their primary source of income, but blocking users entirely from using your website just for that it's not cool. In some websites, I've seen banners that say "We run thanks to ads" and I find this nice, they tell you "It's okay that you use Adblock, but if you like our articles consider deactivating it" and in a lot of times I've found myself disabling Adblock in that website because I enjoyed the article and don't mind seeing others with ads.

"Changed of focus" modal

This is the one that I hate most of all. You go and change the song you are listening on Spotify, and come back to the website and a big modal telling you "BEFORE YOU LEAVE..." is there. This is very invasive and it cuts completely the flow of the website and journey of the user.

What can we do instead?

If you are going to use this modal, please allow the users to click outside of it to close it, instead of having to search for a small "x".

But what if I have to use modals?

If you need to use modals, try to follow these tips to make it less hard on your users:

1- Make the info as specific and short as you can:

Don't try to over-explain everything in a modal. This applies even more if the content of the modal does not fill all the space. Keep it short and clean.

2- Don't make a modal open another modal:

Think of this: If the user clicks outside of the modal and it has been 4 modals at this point, the user will have to reopen the first, then the second, the third one and so on.

3- Make modals close when you click outside of them:

This an easy way of helping the users cancel an action fast if they didn't meant to click the button. And also in modals like "Download my book" or "Before you leave" it makes people that are not interested continue with their journey.

4- Make the close button accessible:

One of the main issues I have with modals is that some of them have really really small close buttons, so I have to precisely put my mouse over it and close it, instead of going fast to the close button and clicking it simply.

Conclusion

Please remember and have in mind that modals are a powerful tool, that should not be used in everything. If we are going to interrupt a user, try to make it for something important and make it easy for the users to click outside of it if they are not interested in the information of the modal.

Why I don't use Bootstrap anymore.

codedgar — Fri, 20 Dec 2019 03:23:46 +0000

For many web developers, Bootstrap is the way to go when you have to create a Website or App. But in the five years I have making websites, I have found things that made me change my decision of using Bootstrap at all, and I've changed the way I create websites almost completely.

Hi! My name is Codedgar and today I wanted to talk of why I don't use Bootstrap anymore. Since it's a question that students, coworkers, and people, in general, have been asking me a lot recently: Why I don't use Bootstrap?

Let's start with my history (I'm gonna be short, promise C: ) When I started working on frontend web development, the first thing I crossed upon was Bootstrap. And with that, I thought I had frontend developing mastered, it was easy, fast to use and it has a lot of components! Nice!

But as my work progressed and the websites became more and more custom, I started to find Bootstrap a little bit unuseful, and that's when I came to a conclusion as to why I would not be using Bootstrap in my new works.

For easier understanding, I have divided this post in the reasons of why I don't use it, enjoy:

1- Weight
2- Components and Utilities
3- Styling

1- Weight:

"Weight? But Bootstrap is less than 500KB". Yes, I'm aware of that. But let's take on consideration how much of Bootstrap we actually use. And using Bootstrap means that you have to use also jQuery, so if you were to create a landing page with Bootstrap, you would have to use jQuery, Bootstrap CSS, and Bootstrap JS. All of these resources will not be used even in half if you use Bootstrap. And that brings me to my next problem.

2- Components:

"Lack of?" Nope, not at all, is actually the opposite. Bootstrap has so many components and utilities, that you are almost certain to never use even half of them. And you may argue that with NodeJS you can compile and use only the CSS that the website uses, but with plain HTML for a server with Cpanel, this is not possible (At least that I know). So there's this vast quantity of components that you will maybe not use and they will be there anyway.

This is not a problem just of Bootstrap, but of many frameworks I've seen, like Materialize or UiKit, where there are components that most people wouldn't use and there are classes that can be broken down into only one style, like:

.modal-top-left{top:5%;left:5%}

And so on for modal-top-right, modal-bottom-left, modal-bottom-right. If you wanted to change the position of the modal you could totally do it with only one class, adding these classes is just dumb.

3- Styling:

While Bootstrap is easy to use, it's not so easy to customize as you might think. Some components will require you to use !important several times, which is not ideal when creating CSS. And having to override the default styles of Bootstrap is just like having to create your own CSS from start.

What do I use then?

Most people at this point just say " So what? You make CSS from start and don't use any framework?" And well, I don't create my CSS from scratch, and I do use a framework, but only for managing the columns of the website. The framework I use is called Flexbox Grid and it justs comes with columns and rows, nothing more. And it only weights 1.9KB! So, on a website with 1 homepage and 4 subpages, the total CSS (including Flexbox Grid) is only 5KB. For me, that's amazingly fast!

And should I use Bootstrap?

Well, there's something I can't deny and it's that if you need to develop something incredibly fast you can use Bootstrap. And if you are thinking if you should, or should not use Bootstrap, ask yourself:

1- Will I use several components of Bootstrap?
2- Am I in a rush to develop this frontend?
3- Is the design important for this?

If your answers are: Yes, yes, and no; Go ahead and use Bootstrap without shame.

Extra: Do I hate Bootstrap?

Of course not. I think that is amazing to develop websites quicker and easier, but I just would not be using it anymore because I prefer to make my own components and craft almost everything by hand. I know that Bootstrap will live along a still be used by a lot of people, and that's totally fine :)

What do you think? Do you use Bootstrap?

Download button animation

codedgar — Sat, 08 Jun 2019 13:19:42 +0000

Everytime I see an animation or a microinteraction, I'm used to ask myself how much time would it take me to do something similar. So when I crossed myself with this GIF from the amazing Pablo Stanley, couldn't help myself to think a lot on how I could archieve this effect.

And I'm going to walk you through the creation process!

1. Thinking to move concept to code.

Alright, this was maybe the hardest part of everything, because I had to think in ways to, for example, moving the text cannot be acomplished with the normal text of a button, and how could I make the button smaller in height without affecting all the other components in a website? I didn't know.

2. The HTML.

After all the answers where clear. I moved on to create the HTML for the button, I had in mind something simple, I didn't wanted empty divs o spans anywhere. So I came up with this:

            <div class="cool_holder">
             <button class="coolass_button" id="coolbutton"></button>
            </div>

Not so interesting, right? That's because I wanted it to be real simple. And while the button doesn't have text, it as an explanation in...

2. The CSS.

Here's where things get a little bit messy, since this is an animation, I needed to have multiple classes to hold these states and work together, I would like to give and extend explanation of it, but the post would be huge!
In short, I added the "Download" and "Success!" text using :before and :after .
And for the height of the button, our friend cool_holder has a 100px height, so the button can be smaller but it won't affect the overrall composition of a website.

Note: I didn't add the CSS because it was too big for this small post haha.

3. The javascript.

This is the wrap up of everything, and in esence, it's just a bunch of SetTimeouts that keep adding after a certain time the other classes, maybe it's not the best, but I didn't thought of anything else at the time.

The result!

After everything was done, I couldn't be happier with the result, and uses are limitless! Download pages, make it a "Post" or "Publish button"! And... Well, maybe not limitless, but I was happy to archieve a cool animation, and here it is:

And well, this is my first post! So I may have slipped here and there, but I wanted to show my small acomplishment to this great community, thanks for reading!

If you wanna follow me on Instagram you are completely welcomed! I post my advance on microinteractions there, along with some web posts C:

Forem: codedgar

How to create a dark theme system in 5 minutes or less with vanilla JS.

codedgar / darkmode-in-5-minutes

Tutorial of darkmode with vanilla JS and vanilla CSS

Intro - CSS variables

The basics - Toggling classes.

Summing it up - Saving and retrieving the setting.

Saving the setting

Retrieving the class

BONUS: Adding an event listener to the localStorage event.

codedgar / darkmode-in-5-minutes

Tutorial of darkmode with vanilla JS and vanilla CSS

Conclusion

Why should you create your own framework. - Presenting Puppertino!

First: "But why?"

KNOWLEDGE

1- Knowledge

2- Use it yourself

3- Give something to the community

What About Puppertino?

1- What is Puppertino

2- Ok, so an Apple-like framework?

3- Is it ready to use?

4- How can I contribute?

Conclusion!

Step up your native HTML form validation with these 3 simple CSS classes!

Using "type" attribute.

Introducing the :invalid Selector

The :valid Selector

The :placeholder-shown Selector

The compatibility

Pros

Cons

Further reading

Conclusion

What is like to be a developer in a third world country.

Before we start

Where am I from?

Work

Salaries

Hardware.

Basic services

Internet

Electricity

Security

Transport

Education

Conclusion

The 5 golden rules for becoming a better leader.

Before we start.

5 - Be careful with your words.

4 - Be transparent.

3 - Be open to proposals and listen.

2 - Make your team work with you, instead of working for you.

1 - Be careful with your team member's health.

BONUS: Be friends with your team!

Conclusion

Stop programming to become a better developer.

Disclaimer

What problems can bring you programming without proper rest

Burnout

General irritation

Loss of passion

Loss of productivity

Bad habits that get in the way of resting.

I had a dream of the fix! I'm gonna go and code it!

What can we do?

I'm not going off work or to sleep without finishing this

What can we do?

Good habits to rest correctly

Can't figure the answer? Stand and walk for a second

Take one day of the week to rest completely.

Do exercise!

Take your time

Conclusion

Please, use modals wisely.

1- Are modals bad?

2- Do I hate modals?

When should I display information on a modal?

Could the action of the user be mistaken or dangerous?