DEV Community: Ricardo Moreira

CSS Units - rem vs em

Ricardo Moreira — Mon, 11 Jul 2022 07:39:47 +0000

CSS Relative UNITS – EMS vs REMS
When using CSS, units are something you deal with every time. The question is which one should you use and when and for what.

I will not focus in this post on absolute length units (pixels, cm, and others) but the relative units. Relative units are like the name suggests relative to something. Relative to what is important. There are many relative units, but probably the most used are VW and VH which correspond to viewport width and height respectively, and em and rems that is what I am going to talk about (write?) here today.

Spoiler alert, EM is relative to the parent(or element), and REM relative to the root element

Em units

So when you use em, you need to know that em can be related to the font size of the parent, if we are talking about typography but can be related to the font size of the element if you are talking for example of margin or width.

So let’s go to an example:

<div class="second-box">
  <h1>First box</h1>
 </div>
 <div class="box">
   <h1>Second box</h1>
 </div>

.box {
    border: 3px solid orange;
    width: 50%;
    margin: 0 auto;
    font-size: 15px;
    margin-bottom: 2%;
}

h1 {
    text-align: center;
    font-size: 2em;
    /* margin-left: 2em; */

}

body {
    font-size: 10px;
}

I created a box with an h1 outside the box and an h1 outside the box. Both of them have the same font-size: 2em, but as you can see, they are different sizes. Why is that? I defined the body to have a font size of 10 px, while the font size of the box is 15px. Therefore the 2 em are relative to the font size of each parent respectively. So it ends up that the font size of the h1 outside of the box is 20px, while the one inside the box is 30px.

What about if we are talking about with or margins? Another example :

Text with different margins

.second-box {
    border: 3px solid orange;
    width: 50%;
    margin: 0 auto;
    font-size: 10px;
    margin-bottom: 2%;
}


h1 {
    text-align: left;
    font-size: 2em;
    margin-left: 2em;

}

To be more clear ( I hope) I put each text in one box. I kept the same font size then as before and both justified left. Then I gave the h1 a margin-left of 2em. As you see in the image, the second box text has a much bigger margin than the first one and that is because the margin is relative to the font size of the element. I hope it makes sense to you. For me at least is the type of example that made me understand better this unit.

So let’s go to rem.

Rem Units

h1 {
    text-align: left;
    font-size: 2rem;


}

Text using rem units

With rem, is in a way more straightforward, as is always relative to the font size of the root. So keeping with the same example, with rem the only difference that I did was to give the body font size, each box has its own. Then I changed the font size of the h1 from em to rem. Just like that both the margin and the font size are now the same on both boxes as with rem is relative to the root. Doesn’t matter what font you put in the box if the h1 has rem font size and that is relative to the font size of the root.

When to use one or the other?

That all depends on what you are comfortable with and understand better. With rem is easier to plan your website or project easily as everything is related to the root element. With em, especially in the beginning might be tricky to make it work the way you want when adding different viewports. Besides that, I believe that both are good options to try and play around with.

This is the first of 3 posts on small topics of CSS, so follow for more if you are interested.

Failed to login in Netlify CMS website

Ricardo Moreira — Mon, 18 Oct 2021 20:43:35 +0000

This was not my first time. I don't know if I lost the password or I changed it in the past and didn't update it, the truth is that I try to login into my website admin and nothing seems to work.

Then the case get's more strange when I reset the password but the email that is sent to me to reset it opens my website with a token as a link.

To add an extra layer to this small challenge my two months computer just died basically and nothing inside was salved. Why does this matter?

Because during those 2 months I changed some backends of my website and end up creating a new one with the front end that I add.

So I think that in the middle of that, I had lost some pieces of info here and there.

So let's talk about solutions.

After some search on our old friend Google, I end up in this thread that leads to here. Then I remember that I did in fact put on my header the code that is mention there.

So first thing you have to do is include in the header of your website this script:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

After that, I realized that nothing was working still as the recovery email was still sending me to my website.

The thread says that we need more steps but then I start to remember, I did this before but not from here but from the snippet injection. How does this work?

First, go to the Netlify website, and inside the dashboard of your website in Netlify go to Site Settings -> Build & Deploy. Scroll till you find Snippet Injection and add snippet and chose insert before the body. Past this code:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

And just like that, when you press again the link to recover the email it directs you to the page where you can change your password. Happy days. This widget basically is what sends the information from the backend to the frontend about your token and identity.

And that's all. You are back on your admin page again. If you want more tips about code and productivity, or read about the products I am launching follow me on Twitter where I keep posting and updated almost daily.

Setting private-friendly web analytics into your website

Ricardo Moreira — Tue, 04 May 2021 09:11:48 +0000

Knowing the analytics on your website is important. Know what pages people go, what pages people don't, etc, from where (in the case you work with an international website) makes you understand better your website and your customers for example.
Normally analytics come with privacy issues and cookies and pop-ups, so when I was developing my websites, even that I would like to have analytics on them I would not want to track people or wanted their data shared so I have been avoiding putting analytics till I found an easy solution.
That where Plausible comes in. There are more solutions, some more expensive, others more cheap or free but Plausible at least till now offers a great solution for a great price.

It's based in Europe ( Estonia), doesn't track or use any cookies so you don't need to add any cookie statement to your website and you get a full report of your website. If that is not enough I also can say that Plausible is open source and easy to install and manage.

What follows is for websites made with Nuxt, but you can find in Plausible website info to install into other websites.

First I installed Plausible into my project:

npm install vue-plausible

After installed open your nuxt.config.js and in the module section:

modules: [
    [
    'vue-plausible',
  ]

Now that you set the module you need to put your domain set. Still in the nuxt.config.js, for example right after the modules put this:

plausible: {
    domain: 'yourdomain',
  },

In there don't put the https just your domain. In my case is ricardomoreira.io.

And that's all you need to do. Of course that you also need to go to Plausible website, register your account and put your website there.
In case you have more than one website, Plausible lets you add as many websites as you need at the same price.
You can try the trial version, just register and you are free to go.

I am happy with Plausible until the moment and gives exactly what I want, easy analytics with zero trackings.

If you like this post, feel free to follow me on Twitter and send me a message in case you have any doubt about this post 😊

Web sustainability - Benefits and Resources

Ricardo Moreira — Thu, 29 Apr 2021 02:29:12 +0000

I love to create websites and products, but I also need that the customers love their product because in the end is for them.

Deciding to go to a more sustainable approach can be trickier when talking to a customer and some benefits are necessary to be said. Also because sustainability as a whole sometimes is not explained in a way that people want to take action. Or because It’s (or one might think it is) difficult to implement, understand, or too expensive.

So let’s talk about the benefits of a more sustainable website:

Reduce Video Calls – Yes this is not so much as a website itself but indirectly it affects. By reducing the number of video calls, not only your co-workers are more productive but also happier. And yes it’s good for the environment.
I talk about this before but better performance leads to better SEO. With better SEO, your chances of having more and better customers grow.
By focusing on the content and in the user, you create a better user experience and of course a more happy client.
Branding. There is no way to deny it but being sustainable is trendy and creating a business and a website that is also focused on sustainability is good for your brand, therefore is good for your business.
Faster websites. We have all been there. You go to a website, it takes centuries to load (in this century equals 3 seconds) and we just go to a different website. If your website is faster you have more chances for your customer to hold into your website.

I hope these benefits have made you at least thinking about having a better approach towards web sustainability. If not think that all these benefits bring more benefits and the sooner you apply some of the solutions said before the faster you are on the right track.

Resources.

Sustainable Web Manifesto – Read, sign it and start making part of the solution
One percent – One percent at the time
Mightybytes – Digital Agency and Certified B Corp committed to sustainability
Ecograder – How green is your website
Website Carbon Calculator – How your website is measuring the planet?
Green Web Foundation – Green hosts around the world
Books – Sustainable Web Design and Designing for Sustainability

If you have more resources than you know feel free to share them and we all win something out of it.

Say tuned and follow the ride.

Web Sustainability - Practical Solutions for your website

Ricardo Moreira — Wed, 21 Apr 2021 08:35:59 +0000

Last week, I talk about what is web sustainability and why we need it. I also mention some of the problems that affect the internet to become more sustainable.

Today I will talk about the good parts. The solutions, the small steps that can lead to a better website that can lead for a better company that leads to the benefits.

Green Hosting

That is given, you need a green host, a hosting service that is 100% powered by renewable energy and/or carbon offsets.

The decision to choose one might be trickier than you think. You can find a green hosting data center but it’s on the other side of the world. So all your data has to travel around the world to be accessed ending up not be really energy efficient. You can check here to find green hosts around the world. They try to become updated as some hosting might stop becoming green hosting or can start become one.

Development

One of the great ways to achieve a website more sustainable is building with a modern tech stack or in case you use Wordpress for example, use a newer version and updated plugins.

For example, PHP 7 ( Wordpress is based on PHP) is almost twice as fast as PHP 5.6. The faster website delivers better performance do more efficiency.

Designing

One of the best if not the best way to start thinking about a website focusing on sustainability is building for mobile. By focusing on mobile-first, you focus on what is important for the customer saving them time. The content needs to be easy to find, never use “dark pattern” systems( Have you tried to close your account to Amazon?).

A more accessible website is also a great way to a website more sustainable. Why? By reducing inequality you are checking a sustainability goal from United Nations. The truth is that web sustainability is not closed only to how to make a website more efficient but is related to anything related to sustainability as a global goal.

Images and Videos

Are also a big topic when it comes to planning a website. Many believe that a website with lots of images and videos in the background is pretty and it’s what the customer wants but, most of the time the simpler the better. If you need to use images and /or videos, if you think that they add value to the user, take always into consideration compressing images and reducing the videos.

Fonts

Fonts can make your website look prettier but you know you can achieve a great design with fonts build up in the system and that you don’t need many different fonts for your website?

One, a maximum of two is more than enough.

Wordpress

Around 20% of the internet uses wordpress and sometimes is there that some of the problems exist. There are some ways you can achieve a better and more sustainable website with wordpress. Take into consideration that all that was said above is also 100% useful to Wordpress sites:

Fast and light theme
Limit Plugins – choose the necessary ones.

I could go deeper (I will in the future) about more solutions and how to implement them, but this is a short series about a huge topic so I want to mention and talk about the most important.

Next week will be my last about this topic and I will focus on the benefits and resources to put in practice sustainable web development.

I am here if you want to follow or just have a chat.

Web Sustainability. What is it and how to approach it?

Ricardo Moreira — Wed, 14 Apr 2021 08:55:38 +0000

It was not long time ago when I first heard about web sustainability. I never thought deeply about how much the internet we use, and how we use it can affect the planet. We are just using our computer right?

It’s true and, by using the computer and the internet, we save paper and time but where is the catch?

It all started when I read that if the internet was a country would be the 6th most polluted country in the world (Now it's the 7th).

Then I decided to go deeper into this subject that I was not aware of it, therefore this month I will focus on Web Sustainability and I will divide it into 3 posts for easier reading:

Definition and Problem – Today

Solutions – 21/04/2021

Benefits and Resources – 28/04/2021

What is Web sustainability?

Gary Cook leads the campaign from Greenpeace to challenge global IT companies to become 100% renewably powered. He once said that:
“This (the internet) is something that if we build it the right way, with the right sources of energy, could help power our transition to renewables. If we build it the wrong way, it could exacerbate the problem.”

A sustainable web can be defined by designing an internet that focuses on the needs of the present time but without compromising the future and the future generations. When creating digital products with web sustainability as a method you put people and the planet first.

In the Sustainable Web Manifesto, a public declaration that you can also be part of, they call for internet that:

· Clean: Services provided and used will be powered by renewable energy.

· Efficient: Products and services will use the least amount of energy and material resources possible.

· Open: Products and services will be accessible, allow users to control their data, and enable the open exchange of information.

· Honest: Products and services will not mislead or exploit users.

· Regenerative: Products and services will support an economy that nourishes people and the planet.

· Resilient: Products and services will function in times and places where users need them most.

The Problem(s)

Energy/ electricity

The big or the more direct problem with web sustainability is electricity. Internet is run on electricity. To have your website running you need electricity. The server that runs the hosting of your website needs to run 24/7 so of course that electricity can become a problem because it can be “dirty” electricity that runs on fossil fuels not using renewable energy.

Globally renewables made up 26.2% of global electricity generation and should expect to raise 45% by 2040. So as you can see much electricity is still running on non-renewable energies making your webpage (maybe) not running on renewable energy.

Many hosting providers are quite secrete about mentioning the sources of the energy used, and greenwashing is practiced by many, so it becomes quite difficult to choose the right hosting for it ( In the last post of this series I will focus on resources to check that situation).

So by not running your website on green hosting (hosting that is served by renewable energy), the Carbon footprint of it becomes bigger.

Even that many big companies nowadays use exclusively renewable energy for hosting ( and sometimes it can be difficult to achieve that) the truth is some bigger players are not yet fully committed to it.

Web Performance

Web performance is also a problem when it comes to sustainability on the web. I know, I am back at it again but with a website optimized for performance you can achieve much more than you might think.

If your website is slow if you are misleading your customers to stay more time on your website then they should make it difficult to access some button or info. Your customers will spend more( unnecessary) time on your website, spending more time on the internet and spending more electricity, therefore a bigger carbon footprint. I will address more this topic when I will talk about solutions in the next week.

The energy of your website is also determined by the size of the page and that means that the more files, images, and videos your website has, the bigger the size, the slower it gets and more electricity it will consume.

I believe that not from the developer side or the client side, nobody wants to build a website that is going to be heavy and consuming a lot of energy. The truth is that adding a new picture, a carousel of images, more videos, unnecessary pages makes step by step your website slow and more energy-consuming.

Emails and Video Calls

We’ve been sending emails for a long time and we don’t even realize anymore. We write and press send and there it goes. Truth is that a simple (unnecessary) email can spend 1 gCo2 and an email with attachments and long text can reach up to 50. And that’s per email. Only in 2020, over 300 billion emails were sent in total.

Video calls are not recent but Covid made them a must every day at all times. But are they all necessary? An hour of streaming can use up to 1000g of CO2. An ultra-definition video call is an equivalent of driving 23km.

These are just a few examples of how “small” things we do in our website and/or company can affect the environment and our or in this case your company's carbon footprint.

Next week I will focus on the solutions that we apply to a website/ company that can reduce the environmental impact.

Web sustainability is a world inside a world and needs to be addressed fast to the majority of people.

I am no expert myself but by sharing I am learning and hopefully reach someone to also start taking small steps that lead to big steps into a better sustainable world.

You can follow me on Twitter where lately I have been focusing on building a project/ product by sharing all the processes.

Why SEO is important for your business

Ricardo Moreira — Fri, 26 Mar 2021 07:36:45 +0000

What is SEO?

You probably heard it before the word SEO, and how important it is for your site but how can we define SEO?
SEO stands for Search Engine Optimization. In other words, SEO is the tactics and practices that make your website stands out among other websites. Those tactics increase the quantity of traffic in your website but also the quality.

That’s why SEO is important for your business because it’s with SEO that your page shows up in a better place in search results in Google or any search engine.

There are many search engines, but the fact is Google takes almost 90% of all over web results so the majority of your customers will search for your product/service/information there. We also know that the first three results that show up in Google results are where around 70% of people click. We don’t know what goes into the algorithm of Google ( and it’s always changing) that makes or not makes your page stands out but we know what we can do best to optimize your website to make it more favorable to show up.

So how SEO works? Search engines have bots, small software programs, that crawl all over the internet and all the information that they found the gather, and index it. The same way that you open a book and go to the index and search the topics of every book, Google and all search engines do that to all pages and all info. So the better your webpage is optimized and the better content it has, the more chances you have to show up in better results on Google. How we do that? I will talk about it in a moment but first, let’s just take something out of the way.

You might are thinking, so if I pay for advertising for my website, does that affect the SEO of my page? Well in this case we are talking about SEM. Let’s see the differences between…

SEO VS SEM

SEO is what optimizes your website for ORGANIC search results. It’s all about your content and how your website is made and prepared for SEO. SEM, on the other hand, SEM uses paid strategies that make your website stands.

Many consider that SEM includes both, organic and paid results because even that you buy a lot of ads for your website, in some instances the website has to be optimized to take these results. To create a clear distinction, if you are paying for an ad you are using SEM, while if you are optimizing your website content, metatags, etc you are working for organic search SEO.
Now that we take this out of the way, let’s see what are the best…

SEO Best practices

We know now that if we want that our website stands outs, we need good SEO but how we do that?

Seo is not a one-time job thing. SEO practices take time to take effect and need improvement always. Yes, you can when making a website, for example, create the website to be fully optimized for SEO, but that optimization needs to be grown. The good thing is, SEO takes time to implement but stays for long. So imagine that you have some blog posts that hit the point and it’s getting many hits and start show-ups in Google results, those good results will take effect for quite some time most of the time.

There are many tactics and SEO is a big world so I will mention the biggest tactics and explain briefly.

Keywords

So keywords are important and should be put (in a smart way) on your webpage. So if you have a webpage that talks about organic vegetables, you should use these keywords in your content. Where you use that content is also important, for example, the title of the webpage and even the link. I will say it again: the title and the link of your webpage are really important for SEO and should contain the main keyword.

Don’t overdo it also. It doesn’t help that you just put as many keywords as possible in your title or content. Search engines also know that and when you are stuffing keywords doesn’t help your webpage to show up in results

Uniqueness

Your content, your title, your description of the webpage have to be unique. Google doesn’t like if you have content that is not unique so the chances that don’t show up in results are bigger.

Webpage not website

You might have realized that I am writing a webpage and not a website. That’s because if your website has 2 pages, each page should be optimized individually.
For example, if you have 2 different services, you should use 2 different pages as it better for SEO.

Speed

In these 4 weeks, I have been talking about web performance and all the topics connected. So a website that is not optimized for accessibility might not be mobile friendly and it will decrease the speed of the website on mobile. Therefore it will affect the SEO of the page. Yes, all is connected.

So a fast website, especially in mobile is a ranking factor for SEO for Google at least.

Images, videos

Again, something that was mentioned in a late article, but when you have images or videos on your webpage they need to be optimized. Not only the size but also give a description, and an alternative text to each one of them.

Content

You want better SEO? Write (good) content. Not only content. A long bad blog post worth less than a short but amazing one. So it’s important that you feel your webpage with content but more importantly, it’s that content is unique and insightful to one is reading but also to your business.

On-Site Seo vs Off-Site Seo

On-site-SEO is all you can do to make your website optimized and with better performance to rank higher in search results. That includes all that I mentioned above and much more.

Off-site-SEO is what is made outside your website that gives a good impact on your website rankings. These off-site SEO tactics are not necessarily controlled by you, but all the good tactics that you do as on-site SEO affects the off-site SEO.

The main topic of off-site SEO is backlinks that are links outside your website that point to your website/blog post, etc. That can be links that you don’t have any influence there – someone that likes a post or your company and decides to share the link. These are the best are they are natural links.

There are also more manual links or self-made. Those are good but they have to be treated lightly as Google and other search results, know this and can see it as bad SEO, and instead of adding value to your website, it takes it away. What are they?

Are links that you put in your customer's website that point to your website, are the links that you create in a forum or blog that points to your website.
All those of them create backlinks but if not backed up with some content they might even affect negatively your SEO.

Also bought backlinks…Please don’t.

SEO Measuring results

So you know you have all these tactics above implemented, how do you measure it?
It’s not straightforward the measurement, as I mentioned before, to see results in SEO, like measuring results you need Patience.

Think about SEO as the relationship between your website and Google and other search results. Like any relationship, it takes time to create bonds. You don’t ask your future partner to marry you on the first date right?

So yes patience is necessary to see any results.

Besides that how can you measure?

Organic Traffic

Is your website getting more hits? When you do search for your company or something related you see any change in the search results? If so that is a good sign that your SEO is in practice and you start to see some results.

You can do that with Google Analytics or there are some other options, more private that you can use

Keywords measure

Like organic traffic, measuring the power of your keywords is a great way to know who your website is ranking.

Conversion Rate

From this organic traffic how much of it is converted into real paying customers? That is the conversion rate and the bigger the better.

Time, mobile, backlinks

There are many other ways to measure SEO. How much time your customers spend on your website? How many people go to your website through mobile? Do you have a lot of backlinks to your webpage? These are other ways to measure your results.

You might think that this is only for big companies that want to be in first on Google results, but the fact is SEO is everywhere and you can be the first in search results in one term (keyword) but not even show up in the 3 pages on another.

For example, imagine that you have a barbershop in Helsinki If you go to Google and write barbershop the chance of you show up in the first results might be slim in the beginning, but you don’t need that barber shows in results in London or even maybe in Turku. So you might want that your business shows when the search is for example barbershop Helsinki, or even barbershop Punavuori right?

That’s why we also talk about…

Local SEO

Yes, there is local SEO. Some businesses don't want or need that their business shows up in google results globally. Don’t think that local SEO is not important as almost 50% of the searches in Google need information about local services/products…

Did you know that 76% of people that search for something on a mobile visit a business within 24h?
How you make your website prepared for local SEO?
The tactics said above are all necessary, just more adapted to a local search but other things are important for Local Seo.

For example having your business in google maps, in Google My Business, or and not less important reviews of your website are great ways to grow your local SEO

Is not only your website SEO

To end this post I need to refer that SEO is not only used for your website but for all the platforms you use. If you have a Youtube channel you also have to optimize the SEO of your channel to show up in the results. The same goes for Instagram, etc.
Yes, SEO is everywhere basically online and it’s important to know about it and to know how to use it on your behalf.

I hope you had liked this series and more will come

Feel free to follow me on Twitter to know more about my projects and ideas.

What is Web Accessibility and why it is important?

Ricardo Moreira — Fri, 19 Mar 2021 09:54:29 +0000

Have you heard about accessibility in websites and apps and why it’s important? So what is accessibility?
Accessibility as generally speaking can be defined as making your workplace, city, the public building where you work accessible to as many people as possible no matter what is their disability.

Does your favorite restaurant have a ramp for a wheelchair? Has the city hall building text in braille? Are people with disabilities given the same chances to work as a person with no disability?
That is accessibility in the world, right?

On the web, it works the same way. Accessibility on the web is how well prepared your website/app is for a person with a disability ( we will focus on main points on the next topic). Can a person with any disability access the website and have access to the same information as a person with no disability with the same amount of work?

If you are thinking that not many people with disabilities go to your website, think again -

"Over 1 billion people in the world live with some form of disability (around 15% of the population)”

The important thing to retain is that accessibility is having the content of your website available to anyone.
Many websites are still not improved for accessibility but every day more, developers consider that and hopefully also entrepreneurs when they decide that want a website for their business.
When it comes to the public sector, in Europe since 2016 all apps and websites are required to have an accessibility statement for each website and provide people with disabilities better access to the website.
Ok, so now that we know that accessibility is important we need to check…

How it is applied

Where and how you apply accessibility standards on your website? For example, if you go to any website can you navigate through the main points of the website without touching your mouse, using only the tab button?

That is an example of how accessibility can be applied to a website.

The accessibility topics list would be long if I would explain it all. No matter how much I am learning about this subject, there is still much more for me to learn and discover.

There are tough main topics that need to be followed when it comes to accessibility.

I will talk slightly about the most important:

Color choice

The color pallet of your website that you choose can be difficult to understand for many people. So it’s important to choose colors that provide maximum contrast. So between background color and text try to give enough contrast and choose colors that can be easy to read.

Link Style

Links should explain what the link you are pressing is about. A link saying “click here” doesn’t help much. If you use an image as a link, works the same. That image has to have an alternative text explaining what that link does.

Buttons

One feature that almost every website has, is buttons. And many of them when they are created, for stylish purposes, are not developed as buttons in the HTML. Therefore when a person is using the screen reader to access the website and is passing that "button", because was not created as a button, the screen reader would not say it’s a button.

The solution would be or create the button as a button, or in the case, that this is not possible ( it’s almost always is), give a role to the element created as a button.

Form

Almost every website has a form no matter if it's in for contact or subscription they are really important.

Consequently, when building the form, every input should have a label for the user to know what the input is for. When grouping more than one form element, you should also label that group.

If you use checkboxes or radio buttons, tag them as what they are.

Alternatives

When building a website use the “alt” text on an image. So you have an image on your website, but if a person with blindness or some vision disability goes to your website might not see the image, so images must have an alternative text to it, for these cases. The same goes for audio or video content. They also need an alternative.

But accessibility is not only made for people with disability. In fact...

Accessibility for all

Let's give the example of a vision disability, it's important to reiterate that we're not only talking about people that are blind but also people that are visually impaired (e.g. low vision or color blind). The same goes for people with motor/cognitive disabilities, etc.

For example, carpal tunnel affects many people and it might not be your first thought when thinking of disability but the fact is that someone with carpal tunnel will be accessing your website mostly with the keyboard only, so is your website prepared?

Therefore temporary disabilities should also be taken into consideration.

Even that you don’t have any disability when going to a website and if for some reason the image doesn’t load, you don’t know what is there. But if you have an alt text on it, even that the image would not show up, there will be the text about that image.

Another example is people that have a small phone with a small screen, they deserve as much to access your website as someone with a big mobile (this was also covered in last week post).

We only now need to discover about...

How it can improve the SEO

Even that you think that is a lot of work for a small website (that is not), what if I tell you that having

a website accessible improves SEO and of course, good performance of your website leads to more clients finding you online.

"Alt" text we talked a coupled of times here but the truth is one main topic of good SEO is having alt text on all images. The same goes for video

Using page titles and headings to define your pages. That also is accessibility has helped people with some disability know what the page they are is about.

Anchor links are also important both for SEO and for accessibility as help the user and Google 😊 know what link it is and where it leads.

Great now if you want to know more here are some...

Links

Below are some links to test the accessibility of a website and as well know more about it.

Hope after this I may have reached someone to have another approach about accessibility on the web. Next week will be my last post for this series and will focus on SEO.

If you want to know more and follow my next projects and topics to talk about, follow me on Twitter and feel free to contact me with any questions, comments, or anything.

Dom Manipulation with 3 examples

Ricardo Moreira — Tue, 16 Mar 2021 08:51:07 +0000

When you are starting learning javascript I believe that one of the first things you will hear is about DOM Manipulation. Unless you are only using the console, you will need some knowledge of how to use javascript within the Dom.

I don't want to focus too much on the theory as I learn more by doing and creating things, but let's define the DOM and what it means to "manipulate it".

DOM stands for Document Object Model and works as a tree and in that tree, there are all elements of the page. That tree has different relationships(parent, children, sibling, etc) depending on their position. If a tree is difficult to imagine, think about a family. There are the parents, so when they have a kid their kid is their children right? If they have another, that child is going to have a sibling. Makes sense? So are the parents the main parents of that family? Well, it depends. Those parents are children of someone, so then they became children and their parents are the main parent element...

So the main parent is the HTML document but every element has its own direct parent element. The main idea to get here is it's good to know where you are in the DOM to be able to manipulate it.

Now let's go to our project:

Links

Some things we will not cover in this post: The CSS, and the show the code function ( note at the end of the post).

So what topics are we going to cover in this post?

Accessing the DOM
Manipulating the DOM
Creating new elements DOM
Adding event listeners

We will cover all these topics with 3 small examples:

We have some text, we will select it and add changes to it
We have a picture and add some different style to it
Insert a recipe into the Dom

Take this html:

     <section class="query-selector-all">
      <section class="queries">
        <article class="first_element">
          <h2 class="first__title">Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
        <article class="second_element">
          <h2>Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
      </section>

We have a section that inside as 2 different sections. Inside of these sections there is an article with a div. The magic of Dom is that you can access the elements that exist on the DOM. How we do that? There is a couple of methods we can use:

document.getElementsByClassName();
// If instead of an id your element has a class, this is the method where you can access it.

document.getElementsByTagName();
//You don't even need to add a class name or id, you can access the element straight from the tag

document.querySelector();
document.querySelectorAll();

//The most used to access the DOM, because with it you can access class, id and tag. So each case would be:

document.querySelector('#id');
document.querySelector('.classname');
document.querySelector('section');

These are the ways to access the DOM. I only use the querySelector and the querySelectorAll as it gives me all the info I want.
To access the section with the class query-selector-al. we go to our js and write:

const allElements = document.querySelectorAll('.query-selector-all');
console.log(allElements)

Why the querySelectorAlland, not the querySelector? Because this class name has more than one element, so with querySelectorwe only access the first element and we want to access all.

But if you check your console we see that allElements return a Nodelist, so it returns all the elements inside that class. Ok, so we access the DOM and the section we wanted to manipulate but how we do it when it returns a Node list? You have to loop all over those elements with a forEach for example:

allElements.forEach(eachElement => {
 console.log(eachElement)
});

If you open the console you see that now you have access to all elements that are inside the class Name. I want that when we load the page the all the text changes color. First, we go to our CSS and create that style inside a new class. Let's name it selector__all.

.selector__all {
  color: #edbd54;
  transition: all 2s;
}

Basically, we just add color to the text with some transition to have some delay.
We just need to add this class name to all elements inside the section and because we already loop over them and have access we just need to go to the loop and add the class:

allElements.forEach(eachElement => {
  eachElement.classList.add('selector__all');
});

What we are doing here? Because we are looping each element we have access to each one of them when looping. Then we are just adding the class, that has the code of color change, to each of the elements.
And just like this, our text now shows in a different color after 2 secs.
The main thing to remember, when you want to access/manipulate more than one element at a time, use the document.querySelectorAll() and loop over it to access each of the elements inside.

What if you only have one element?
It's easier and you probably know the answer now.

This is your HTML:

 <section class="query-selector">
      <article class="image"> <img class="first__image" src="https://picsum.photos/420" alt="random image from picsum "></article>
      <article class="black__board">
        <div class="second__code">
          <h2>How to select one element?</h2>
          <button class="code__show__second">Show me the code</button>
        </div>
      </article>
    </section>

We have a section, and inside of it, there are 2 articles. But we only want to access the image that is inside the first article.
The image has the class first__image Then in your js:

const firstImage = document.querySelector('.first__image');

If we console it we see that we have access to the image. I want that by clicking on the image, it will turn 360 degrees and the borders will be round.
We talk about access the DOM, manipulating the Dom, now we go add event listeners.

Event listeners are basically to some element you attach some action(event) that will trigger something. In this case, we will add an event(click) that will trigger the manipulating of the image.

How we do that?
we have now firstImage. To add the event listener we need to:

firstImage.addEventListener('click', () => {
  console.log("hello")
});

First, you write the element. In this case, is the firstImage, then you add event listener; in this case, is the 'click' function. There are plenty more.
And then has any function, you write the code you want to add inside that function. I just console a "hello" for now. If you open the console it should show up there every time you click the image

Ok, now we add an event listener to the image when we click on it. So we go to our css and :

.round {
  border-radius: 50%;
  transform: rotate(360deg);
  transition: all 10s;
}

Like we did in the first example, we create a class, in this case, names round and add the style we want. Here we add a border-radius of 50% to make it round and rotate 360 degrees.
Now that we have the class we go to our js event listener and rewrite:

firstImage.addEventListener('click', () => {
  firstImage.classList.toggle('round');
});

And just like that when you reload the page, and click the image, it became round while rotating 360 degrees.
Great right? With a couple of lines of code we already talk about 3 of the 4 topics I mentioned above about DOM Manipulation

Now we go to the more fun for me that is creating new elements on the DOM.
How?
Let's say you have a recipe app that you want to add a new recipe and show up on the page. By adding a new recipe to the dom you are indeed creating new elements on it.

Here is our html:

<section class="recipes-manager">

      <article class="recipes-manager_docs">
        <div class="recipe-background">
          <section class="first">
          <label for="name">Recipe Name</label>
          <input class="name" type="text" id="name" >
          <label for="cuisine">Type of cuisine</label>
          <input class="cuisine" type="text" id="cuisine">
        </section>
        <section class="second">
          <label for="number">How many people</label>
          <input class="number" type="number" id="number">
        </section>
        <section class="buttons">
          <input class="image" type="file"  accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;">
          <label class="upload" for="file"  tabindex="0" style="cursor: pointer;">Upload Image</label> 
          <button class="button-recipe">Show recipe</button>
        </section>
      </div>


      </article>

      <article class="recipe-menu">
        <div class="recipe" id="output">
        </div>
      </article>

    </section>

Let's explain what we have here.
There is a big section with the class recipes-manager.Inside that section, there are 2 articles that include the form to add the recipe and the "area" where the recipe is going to show up. The first is the article with the class recipes-manager_docs. Inside of it, I add also an event to be able to upload the image from your pc( onchange="loadFile(event)").
How we do this?

First, we add to our js, our recipe name, cuisine, and for how many people

const recipe = document.querySelector('.recipe');
const buttonRecipe = document.querySelector('.button-recipe');
const recipeName = document.querySelector('.name');
const recipeType = document.querySelector('.cuisine');
const numberPeople = document.querySelector('.number');

We also add the button to show up the recipe and also the div where the recipe is going to sit.
To add new elements there are some ways like for example this but I will focus only on the template strings that is the most forward way for me.
Note: In production be aware ofCross Site Scriptings when using the template literals.

How do template literals work?

const myHTML = ` I am a templare literal`

You create a variable and inside backticks, you write some text. Now you want to add that text on the HTML, in this case to the recipe
So you would do:

recipe.innerHTML = myHTML

And just like this, the text that is inside the variable myHTML will show up on the page ( in the end I will explain the inner HTML with the text Content).
We just add the first text into the DOM. Can we make it better? Of course

Instead of the text above we could put for example :

const myHTML = ` 
<h1>This is a heading</h1>
<p class="style-me">This is a paragraph</p>
`

Now we create a template literal that has a heading and a paragraph. We even add a class to the paragraph that we can style on CSS.
For me that is really useful and great has with only one string template we can completely change the DOM.
So back to our example, let's make it work.

Before we add to our javascript our input but that doesnt get the value that is going to be inserted. To get that value we can easily do:

  const recipeNames = recipeName.value;
  const typeOfRecipe = recipeType.value;
  const numberPeoplePerRecipe = numberPeople.value;
  const image = document.querySelector('#output');
//image we get to the function loadFile and then we add it to the output that is going to where we are going to add the recipe

By doing this now, recipeNames, typeOfRecipe, and numberPeoplePerRecipe will get the real value that the user will put.

Now we create our template string:

const myHTML = `
<section class="recipe-card">
  <div class="card">
    <p class="recipe-name">${recipeNames}</p>
    <p class="recipe-type">${typeOfRecipe}</p>
    <p class="recipe-number"> Serves ${numberPeoplePerRecipe}</p>
  </div>
  <div class="recipe-image">
    <img src="${image.src}" alt="ola" class="recipe-image"/>
  </div>

</section>
`

We created now a new piece of HTML with template string interpolation. Interpolation means that we get the value from Javascript and then send it to HTML. How we do that? We know that recipeNamesgets the value of the name of the recipe the user puts. We have that value in Javascript. Because we are using template literal to "send" back that value to HTML inside the backticks we have to use the ${value}.
Makes sense? Now we have the template and it will show up in the DOM as we before set to :

recipe.innerHTML = myHTML

But we want that this happens when the button Show Recipe it's pressed.
Let's refactor our code.
We create a function called insertRecipe where we add the code that we wrote before

function insertRecipe() {
  const recipeNames = recipeName.value;
  const typeOfRecipe = recipeType.value;
  const numberPeoplePerRecipe = numberPeople.value;
  const image = document.querySelector('#output');
  const myHTML = `
<section class="recipe-card">
  <div class="card">
    <p class="recipe-name">${recipeNames}</p>
    <p class="recipe-type">${typeOfRecipe}</p>
    <p class="recipe-number"> Serves ${numberPeoplePerRecipe}</p>
  </div>
  <div class="recipe-image">
    <img src="${image.src}" alt="ola" class="recipe-image"/>
  </div>

</section>
`;

  recipe.innerHTML = myHTML;

  return myHTML;
}

We now add an event listener to the button that when the button is clicked this function is run:

buttonRecipe.addEventListener('click', insertRecipe);

It should work now. Fill up all the info for the recipe, press the button and it shows up.

Before we finnish this tutorial some notes:

InnerHtml vs Text Content vs outerHTML

To understand better the differences between these 3 properties nothing is better than see an example.

So our html is like this:

section class="queries">
        <article class="first_element">
          <h2 class="first__title">Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
        <article class="second_element">
          <h2>Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
      </section>

In our js we select the querieselement and console each one of the properties:

const content = document.querySelector('.queries');
console.log(content.textContent);
console.log(content.innerHTML);
console.log(content.outerHTML);

TextContent as the name it says it returns the content of elements that were selected. No there are no tags involved only the text.
It's useful also when you want to change the text of the DOM. Imagine that when pressing the button the text changes. We can use text Content for this.

InnerHtml returns the HTML that is inside of what we select. So what is inside the section with the class named "queries"? It is the article and then the heading and the paragraph and then it's what's is shown. That is why it's used with template literals. In our recipe example, we selected the div where we want to insert the recipe. So we want our recipe in the inner part of our div :)

OuterHTML includes the element that is selected. In this case the class "queries".

Parent Element vs Children vs Child Element Count

It's always good where we are in the DOM. One way to know what is using the parentElement and the children's property.

Let's look to another HTML:

 <section class="query-selector-all">
      <section class="queries">
        <article class="first_element">
          <h2 class="first__title">Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
        <article class="second_element">
          <h2>Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
      </section>
        <article class="black__board">
          <div class="first__code">
              <h2>How to select all elements?</h2>
            <button class="code__show__first">Show me the code</button>
         </div>
       </article>

In our js

const blackBoard = document.querySelector('.first__code');
console.group(
  blackBoard.parentElement,
  blackBoard.children,
  blackBoard.childElementCount
);

What we get here? with the parentElement we can see who is the element that is a parent and the children... Well, the children Element.
You can even do:
blackBoard.parentElement.parentElement
to see who is the element above if any. You can do this till it reaches the HTML element.
In the last one chilElementCount you can check how many children elements the parent has.

Show me the Code section

As you see in the final project, there are 2 sections where is a section to see part of the code that got to manipulate the DOM, as explained above. I will not explain here what was done as it's the same almost as the template literal that was used for the recipe.

Even though, if you want to know more, or if something that is not well explained please get in touch and I try to make it more understandable.

*Performance and Responsiveness

I tried that in all posts they are optimized for performance. So that includes SEO + Accessibility mostly. Also, I make the effort that the final project is available also on mobile. It's not 100% perfect but I believe you can access and understand it.

If you like this post or want to know more follow me on Twitter. There I talk about programming, entrepreneurship and occasionally food and parenting :)

Prismjs + Nuxtjs -Easy set up

Ricardo Moreira — Mon, 15 Mar 2021 11:43:33 +0000

This website is an ongoing project. It's not perfect, and it never will be; in fact, as you search the website you will see many things that you might see me advocate that I am not doing on the website.

I know it might seem an easy way out, but the fact is that I want to upgrade the website as I upgrade myself, so I want to share when I update the website with something new. Like that, I learn better, get documented and hopefully, it helps someone in the future.

So expect many posts about things I did on this website.

Today it will be about code snippets and their highlight while writing for example a code post.

When I created this website and started to write code posts I realize that the code was not highlighted and would not look good.

The best solution was adding Prismjs and after some fast search was easy to implement.

So let's do it:

First, we install Prismjs:

npm install --save prismjs clipboard

Then in the file nuxt.config.js add the plugin:

  plugins: [{ src: '~/plugins/prism' }]

After that go to your plugin folder in Nuxt and create a file named prism.js. Open it and write this code:

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css' // You can add other themes if you want
export default Prism

There are many options besides the ones above, but there are the basics to make it work.

So now Prism is installed and we informed Nuxt about it we just need to add it to the page we need, normally _slug.vue

<script>
import Prism from '~/plugins/prism'
mounted() {
    Prism.highlightAll()
}

And that is all. With a few steps, you have nice highlights on your blog page.
If you like this post, feel free to follow me on Twitter and send me a message in case you have any doubt about this post 😊

Mobile Friendly vs Responsive Design

Ricardo Moreira — Fri, 12 Mar 2021 11:15:05 +0000

When creating a website, not only the desktop version counts but also the mobile version. One of the reasons behind that is the mobile traffic worldwide has grown over 220% in the last 7 years. Nowadays more people use mobile over desktop.

A website that features their content and product or service easily and attractively on mobile is a way to go. Not only for the user but the company, for the SEO, and even for the search engines.

What is looking good on mobile? The answer is not straightforward but let’s try. Image a website that on the desktop looks great. Then you think that you want to get that look also on mobile but what is the best way? We “shrink it up” till all fit on one page? Many websites are still like that and it’s not a good experience. It’s difficult to find or press the buttons, the information is all clumsy., etc...

What are the main features of your product or service? What is the most important call to action you want to show? Figure that out and then you can plan how is going to look on mobile. But you need to make it responsive, hence the responsive design, that more than 50% of websites are now using.

Let’s focus then on 3 aspects of mobile development, what they are, and should you use them or not:

Mobile Optimized vs Mobile Friendly
Responsive design vs Adaptive Design
Mobile-First Approach

Mobile-Friendly vs Mobile Optimized

Mobile-Friendly is the minimum that your website should have. Normally that is enough for Google. You can check if your website is mobile “approved” here.

Mobile-friendly is not enough, as what happens, in that case, is that the mobile version gets a scaled-down version of your website. You can access all the features but not in an easy way leading to a bad user experience. Also, this approach is not adapted to different screens.

Because that mobile-optimized came to the rescue. With mobile optimization, the mobile version is taken into consideration. What does that mean? It means that the images, buttons, text, links are adapted for the mobile version. Can be size, place, color, or any other feature to make it look better on mobile. I mention before that for mobile is important where and what content there is on mobile. That is mobile optimized. So the website on mobile is more minimalist but as or more functional than the desktop version.

Normally mobile-optimized website is only a column website, which makes it easier to scroll So a mobile-optimized website is mobile-friendly but not the other way around.

The winner here: Mobile Optimized.

Responsive design vs Adaptive Design

What is adaptive design? A mobile website with adaptive design changes the appearance based on the browser width, but so responsive design.

The important feature is that adaptive design adapts the browser width at a specific point while responsive not. What I mean is when an adaptive design is created, that browser adaptation is based on mobile screen sizes for example. So that browser adaptation is based on fixed sizes. It works and it’s used on desktop websites that are created before and you have to create a mobile version.

It’s a good way but it’s not fluid as even that it has multiple layouts( one for each type of screen size), these multiple layouts are with fixed sizes.

What is responsive design? Responsive design has only one layout and that layout will be adapted to the screen size in percentage normally. Is easier to implement and it’s most used nowadays. Instead of focusing on straight sizes of the screen, the layout will adapt to the % of the size. Responsive has much more to it than that, but without going too much technical I leave it here.

I think there are no winners here as both of them as great advantages and can be used accordingly with the situation. Remember that you know better where your customers are and what they want. If they use your website on mobile then it makes all sense to use...

Mobile-First Approach

The name kind of says it all so no plot twist here. The Mobile-first approach means that when a product/website/service is created is focused on how it looks on mobile-first.

Why? Because of progressive enhancement. Progressive enhancement put simply focus on the content. So when you are on mobile is important that the right content is displayed in a straight and simple way for the user. That is difficult, as you have to know what to focus on to show off first.

First, you focus on the content that is important to show no matter what, and then you build the website based on that.

Is it challenging but after that is done, all the other layouts became easier. You have put the important content and information on the lowest browse, so now you “ have to scale up”.

Simply mobile-first approach builds the website with the users that are on mobile on their mind by improving their user’s experience. This was my short approach to websites on mobile. What are your experiences on mobile and what is for you a good mobile experience when visiting a website?
Follow me on Twitter where I talk more about programming, entrepreneurship among other subjects.

Next week I will focus on the next topic of web performance: accessibility.

Attributions:

image: Freepik.com

Web performance - What is it and how to improve it?

Ricardo Moreira — Fri, 05 Mar 2021 10:34:16 +0000

This post was originaly posted in my website.

Web performance is a keystone of any website. Your website might look amazing but if it doesn't have a good performance, does it show on google search results? Might be a challenge.

So what is web performance? Putting simply, Web performance is the measure of the page speed of your website. User doesn’t have much patience when going to a website, and if that website is slow you know what happens right? They seek another alternative. Of course that this is not linear but more and more everyday web performance is important.

Some statistic to back it up:

If your e-commerce website is too slow, the basket abandonment can reach 75%
74% users leave the website on mobile if it doesn’t load after 5sec
44% of customers will tell their friends about a bad experience online
Amazon realizes that “only” one second in their website could cost 1.6 billion in sales each year

Besides the load speed, all site performance is important to determine how your website stands among others.

If your website has a bad performance, no matter how good is your product, you have few chances to show up good in the search results of Google. Therefore, a website with good performance has much more chances to show up in many searches. Web performance in the most basic form, or put differently, a website with good performance is a website with minimal waiting time load. Even that your website is fast but on mobile is not responsive, your customer ends up going to a different website right? Thus responsive website, i.e. a website that is mobile friendly is a good check web performance checklist for any website.

Then what makes a website with good performance? Web performance focuses not only on speed but on many different topics. All those topics are possible to achieve on your website.

For now, I will just mention the 5 main topics about web performance that you should take into consideration, in my opinion, on your website. Let’s go through them.

Mobile Friendly 📱

A responsive website has more chances to show on Google search results. When you have a website with a good user experience on mobile your customers are happier. Nowadays many websites are built with a mobile-first approach design

Statistics : 94% of People Judge Websites on Responsive Web Design

Accessibility 🦻🏻

Since a directive from 2016, all websites or apps of the public sector are demanded to meet technical accessibility standards. Most private companies are now also implementing the same standards to their websites. What does this mean? Accessibility is when a website or apps are designed that people with disabilities can use them. Can be color contrasts, images with no alternative text, no enough labels in the forms, etc. Main point: Your website has to be accessible.

Statistics : About 217 million people worldwide have moderate to severe vision impairment, which is expected to triple from 36 million to 115 million by 2050. In addition, 826 million people live with a near-vision impairment

Speed 🚄

Well, this is the first one that comes to everyone's mind right? Your website has to be fast. The load time. How fast? For mobile, your website should load in 1-2 seconds. It’s crazy but pages that take more than 3 seconds tend to be abandoned by the users ( around 53% of mobiles sites).

Statistics: 1 sec delay reduces customer satisfaction by 16%

Images 🖼️

Everyone likes images on their websites. The bigger the better right? Well, when images are not optimized they take too much space, and by taking too much space what happens to your website? Yes, it goes slow, really slow.

On the other end if you shrink all images to the point that the products are not appealing, then sales can be affected again. It’s all about finding the sweet spot .

Statistics: 39% of people will stop engaging with a website if images won’t load or take too long to load.

Deserve be mentioned 🍢

There are other topics you should ask/discuss when it comes to web performance:

Not the best web hosting
Delete plugins or ask if you need that plugin
Remove not used CSS
Minify files(js, CSS, HTML)

This was a small and fast introduction to web performance. What are for you, your main topics about web performance? I will go back to this subject focusing on each topic in the next posts. You can always follow me on Twitter where I talk about web development and entrepreneurship among other subjects 😊.