DEV Community: Ezequiel_Caste

Color generator 🎨

Ezequiel_Caste — Wed, 04 Aug 2021 00:27:05 +0000

If you ever want to build a color generator app please don't try to reinvent the wheel. There are many npm packages to help and assist you and most importantly, save you a lot of time. Sometimes it can be good practice to write your own script but don't let it get too complicated.

I found an interesting package called values.js that provides us with tints and shades of a given color. Before I discovered this package I was going crazy converting colors from HEX to RGB and later to HSL, wasting time when I could have done a simple google search for: "npm color shades and tints"

Installation

npm install values.js --save

Usage

import Values from 'values.js';
let color = new Values('#aaa');

// Generate the tints and shades of the base color as specified by weight 10.
console.log(color.all(10));

For my case of the Color Generator, I needed 10 tints (lighter) and 10 shades (darker). The all() method returns an array of color objects. Each object contains several useful properties such as weight, type, and rgbString, but for this particular case, I used the hex string to extract the HEX color code and the weight to represent the percentage of light/darkness.

Next Step: Copy to Clipboard

Let's add some additional functionality to this app by allowing the user to copy a color to their clipboard. Be careful 🚧 You may come across

document.execCommand();

but this method is deprecated. The alternative to use is Clipboard API:

navigator.clipboard.writeText('text to copy');

Remember to change the style of the color divs so that it shows it can be clicked on (hint: cursor: pointer).

Now the tricky part is showing a message to the user that the color code has been copied to their clipboard. This message should only appear for a couple of seconds, and it will have to disappear. Here I used the setTimeout method that will hide the message after 2 seconds:

const showMessage = (id: string) => {
  // show message
  document.getElementById(id).setAttribute('style', 'display: block');
  navigator.clipboard.writeText(`#${id}`);
  // wait 1 sec
  // hide message
  setTimeout(() => {
    document.getElementById(id).setAttribute('style', 'display: none');
  }, 2000);
};

The id parameter is the HEX Color String and is included in each of the color divs:

<p id="{color.hex}" className="color-box-copy">COPIED TO CLIPBOARD</p>

Live Color Generator: https://color-generator-drab.vercel.app/

Find the code on GitHub: https://github.com/EzequielCaste/react-projects/tree/main/color-generator

Good luck! 🥳

Credits & References

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

https://noeldelgado.github.io/values.js/

Check your head 🤔

Ezequiel_Caste — Mon, 14 Jun 2021 13:54:18 +0000

There are many steps to follow when designing and building a webpage, choosing a color scheme, determining which technologies to use, which hosting site, domain name, etc. That is why it is important to plan before you start writing any line of code. But sometimes we're in a hurry, we want to build a quick webpage and get it uploaded fast. This is where mistakes are made. Like the saying goes:

errare humanum est

To err is human, we as humans will make mistakes, it is better to plan ahead and prevent them in the first place. Sometimes we focus so much on the design and functionality of a website that we forget to check if our <head> contain the basic recommended <meta> elements.

So what's the problem? No problem at all... This just goes to say that it's ok to make mistakes, we all do, Trainees. Juniors, Seniors and even those LVL +9000. You're not the only one. Take a deep breath, relax, do some Google researching about the error, read some documentation or ask a fellow developer for help.

Let's get back to the main topic of this post, checking your so that it has all the right metadata.

What are meta tags?

Meta tags are fragments of text content that provide an outline or summary of the webpage. The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

Why are meta tags important?

The information provided in the meta tags will appear in search results and when someone shares a link to your site on social media or in chats.

What metadata should you include?

Charset

<meta charset="utf-8" />

This element specifies the document's character encoding.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The viewport is the user's visible area of a web page. Set the viewport to make your website look good on all devices.

Title

<title>Ezequiel Castellanos | Front-end Developer</title>

The title element represents the title of the HTML document (not the content).

Author & Description

<meta name="author" content="Ezequiel Castellanos" />
<meta name="description" content="Personal website and Blog" />

These two elements specify the author and provide a brief description of the page.

Open Graph Protocol (og)

Facebook invented the Open Graph protocol to provide more metadata for our websites to display when we share a link in social media. The link will now appear along with an image and description, much more captivating than a simple word link.

<meta
  property="og:title"
  content="Ezequiel Castellanos | Front-end Developer"
/>
<meta property="og:type" content="website" />
<meta
  property="og:image"
  content="https://avatars.githubusercontent.com/u/51804994?s=400&amp;u=efe88c4acafeb4fe560f666482b1454dca508408&amp;v=4"
/>
<meta property="og:url" content="https://ezecastellanos.com.ar" />

<meta property="og:site_name" content="Ezequiel Castellanos" />
<meta property="og:description" content="Personal Website and Blog" />

Preview of how a link to a blog post would look like if posted on Facebook

Twitter Cards

Similar to Open Graph Data, Twitter Cards allows you to attach images and description to Tweets.

Whenever a user Tweets a link to your content, the tweet will include a “Card” that will be visible to their followers.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Ezequiel_Caste" />
<meta name="twitter:creator" content="@Ezequiel_Caste" />
<meta name="twitter:title" content="Ezequiel Castellanos" />
<meta name="twitter:description" content="Personal Website and Blog" />
<meta name="twitter:url" content="https://ezecastellanos.com.ar" />
<meta
  name="twitter:image"
  content="https://avatars.githubusercontent.com/u/51804994?s=400&amp;u=efe88c4acafeb4fe560f666482b1454dca508408&amp;v=4"
/>

Preview of a Twitter Card for a blog post

Once your twitter card tags are up and running you can use this validator to check-out how it would look. The validator checks for the correct tags and gives you this message if everything went ok:

INFO:  Page fetched successfully
INFO:  24 metatags were found
INFO:  twitter:card = summary tag found
INFO:  Card loaded successfully

Favicons

This is the icon that will appear in the user's Bookmark or Favorites in their browser.

Adding your favicon to the

of your site:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

I highly recommend using https://realfavicongenerator.net/ you only have to upload the image you want to use as favicon and the site automatically generates the meta tags and provides a zip file with all the necessary icon files of different sizes.

Don't have a favicon yet? You can make your own icon with https://www.canva.com/ It's really easy, mine only took 10 minutes to design.

Original design made with Canva

Favicon appears to the left of your webpage title.

Check your `<head>`

Once you have your meta tags, open graph, twitter card and favicon included in your webpage, you can verify how the links to your site will appear in search engines and social media posts. Check your URL with this site:

Meta Tags - Preview, Edit and Generate

This site will also generate all the required meta tags in case you missed any.

Good luck! 🥳

Credits & References

Meta Tag

The_head_metadata_in_HTML

Twitter Cards

https://ogp.me/

https://metatags.io/

https://realfavicongenerator.net/

https://www.canva.com/

Scriba's Weekly Web Dev Challenge

Ezequiel_Caste — Wed, 06 Jan 2021 15:06:37 +0000

Like solving challenges? Love working with HTML, CSS and JavaScript? Scriba has got you covered:

Get a coding challenge in your inbox every Wednesday. Free of charge.

Sign up here.

Don't forget to share your solution on Twitter with the hashtag #WeeklyWebDevChallenge

My Solutions to the Weekly Web Dev Challenges:

Photo by Jukan Tateisi on Unsplash

JavaScriptmas Solutions

Ezequiel_Caste — Sat, 19 Dec 2020 16:10:53 +0000

Hi! 🖐
My name is Ezequiel.
I've been learning JavaScript for a couple of years and when I found out that Scrimba was having a JavaScriptmas Advent Calendar I signed up right away.

Challenges are a great way to flex that coding muscle and learn some new methods you were not familiar with.

One of my favorite challenges was the The Rolling Dice. It seems easy but it had me thinking of a way to show all Dice faces using just plain CSS.

Another challenge I enjoyed was Carousel. The tricky part was trying to get the carousel to start at the correct position when it reaches the end of the array.

Here is the list of all the #JavaScriptmas Challenges:

Day 1. Candies
Day 2. Deposit Profit
Day 3. Chunky Monkey
Day 4. Century From Year
Day 5. Reverse a String
Day 6. Sort by Length
Day 7. Count Vowel Consonant
Day 8. The Rolling Dice
Day 9. Sum Odd Fibonacci
Day 10. Adjacent Elements Product
Day 11. Avoid Obstacles
Day 12. Valid Time
Day 13. Extract Each Kth
Day 14. Maximal Adjacent Difference
Day 15. Carousel
Day 16. Insert Dashes
Day 17. Different Symbols Naive - using Set
Day 18. Array Previous Less
Day 19. Alphabet Subsequence
Day 20. Domain Type
Day 21. Sum of 2
Day 22. Extract Matrix Column
Day 23. Social Media Input
Day 24. Test Your Agility

What a ride! I loved all these challenges!
Good luck to all those you participate in the Contest!

Photo by Tim Gouw on Unsplash

DEV Community: Ezequiel_Caste

Color generator 🎨

Installation

Usage

Next Step: Copy to Clipboard

Live Color Generator: https://color-generator-drab.vercel.app/

Find the code on GitHub: https://github.com/EzequielCaste/react-projects/tree/main/color-generator

Credits & References

Check your head 🤔

What are meta tags?

Why are meta tags important?

What metadata should you include?

Charset

Viewport

Title

Author & Description

Open Graph Protocol (og)

Twitter Cards

Favicons

Check your <head>

Credits & References

Scriba's Weekly Web Dev Challenge

Sign up here.

My Solutions to the Weekly Web Dev Challenges:

JavaScriptmas Solutions

Check your `<head>`