Forem: Marco Agas

Top 5 CSS Chrome Extensions

Marco Agas — Tue, 15 Nov 2022 08:16:43 +0000

While going through my front-end journey, I realised that I have picked up quite a few useful Chrome extensions that help me understand how website are built.

1. WhatFont - Find fonts fast

I use this on an almost regular basis, along with Font Ninja (see below). So often, I see a beautiful site but I don't know what font they're using. WhatFont is very basic, but there is beauty in that. Simply click on the icon and when you hover over fonts, it'll show you what they are.

2. Fonts Ninja - Save fonts you love

Same as WhatFont, but with some added perks. These include the following:

Lists all the fonts on a page
Allows you to try out the font in a small text box
Saves your favourite fonts
Detailed info about the font
Download fonts straight from your browser using the Fonts Ninja application ($29/year, but allows you to download 20 fonts as a trial)

Personally, I find it a bit bulky for simple day-to-day tasks, but it's useful when you want to save a bunch of fonts to use later.

3. ColorZilla - Find a color on a site

This was used multiple times per day, but eventually it was taken over by Microsoft's Color Picker. Again, simple and to the point, ColorZilla allows you to quickly find a color on a site. Clicking on the colour also copies the HEX code, so you can easily use it on another application.

ColorZilla also saves all the most recently found colours, so you can always go back to find the ones you need. It also comes with a page colour analyser, so you can find all the colours used on a website. There are some other features too, however, I didn't find them to be of much use (CSS gradient generator, palette browser).

4. BuiltWith Technology Profiler - Find what's under the hood

After finding myself continuously right-clicking to inspect various website components, I realised that there must be a quicker solution. BuiltWith does have a website, but the Chrome extension works just as well and you don't need to leave the site you are currently on.

BuiltWith gives you a breakdown of the tools and technology used for the following categories:

Analytics and tracking
Frameworks
Content Delivery Network (CDN)
Mobile
Verified Links
SSL Certificates
Web Servers
Document Encoding
Document Standards

It also comes with a range of other features (i.e. Meta, Details, Relationships, Redirects and more), however, it requires you to be signed into their services. It's free, but, it does the job I require so I felt it wasn't necessary to be signed in.

5. VisBug Technology Profiler - Open source browser design tools

There is almost too much to cover with this extension. It essentially allows you to open up a websites CSS and allow to edit or simply view information about it.

For example, you can do the following:

Inspect - hover over elements to view their classes and CSS properties
Guides - Verify alignment and measure distances
Accessibility - hover over elements to view its contrast ratio and WCAG compliance
Move - click on an element and drag it around its parent container
Margin / Padding - click on an element to add some margin or padding to it
Flexbox Align - Create or modify flexbox direction, distribution, order and wrapping
Hue Shift - Change background or foreground hue, brightness, saturation and opacity
Shadow - Create and adjust position, blur and opacity of a box shadow
Position - move elements around
Font styles - Change the size, alignment, weight and more
Edit text - edit the text within an elements

Conclusion

There are many great front-end Chrome extensions out there, and these are just a few. I be releasing more over the next few days, but if you have a favourite - let me know below!

Improve your SEO through Google Data Studio

Marco Agas — Mon, 10 Oct 2022 12:18:48 +0000

While improving your front-end skills, a good way to collect your data is through Google Data Studio. I have been using it for a year now and I'd like to share some ideas for you to try.

1. Connect your Google Analytics and Google Search Console sources

If SEO is a big importance to you, why not collate everything into one report? Yes, you could create an API to connect everything, but for basic reports, Google Data Studio makes it a lot easier.

To connect Google Connectors, simply select Add Data from the top bar.

I usually connect a variety of Google services to one report. If you created a portfolio site, you could do the following:

See where people are coming from when viewing your site
View top keywords people are typing in Google to be used as blog post content
Set up conversion tracking through Google Tag Manager and then view those conversions within the report (e.g. how many people are contacting you each month and from which sources)

2. Build visualisations to help understand your website

Often when you have built a website, it might be hard to see how people are interacting with your website. You can use services like HotJar or Clarity, but those only show some of the whole story.

Charts and tables play a great way in analysing various parts of your website. As mentioned above, connecting to Google Analytics or Google Search lead you into seeing what is happening under the service. For example, your engagement rate can be viewed when determining how effective your pages are.

You don't have to rely on one set of datasets though. Google Data Studio also allows you to blend data, which takes your analytics one step further.

On-site and even Technical SEO can be measured in Google Data Studio, so playing with the various services can go a long way in improving your website.

3. Social Media analytics can be combined too

Usually, website analytics only show off one slice of the pie. Another piece comes from your social media. For example, if you have created a blog site but get annoyed manually going to each platform, why not do it all under one roof?

Google Data Studio allows you to connect to other 3rd party connectors (e.g. Power My Analytics). Although most aren't free, if you are part of an agency, you get get the clients to pay for these services.

Off-site SEO can still be monitored in Google Data Studio, and services like these really help.

Summary

I'm coming from a SEO perspective when it comes to front-end design. Therefore, services like Google Analytics, Google Tag Manager, and now Google Data Studio play a big role in improving the SEO of my websites.

For any questions about Google Data Studio let me know below or read the full post about the pros and cons of using Google Data Studio here.

What is your coding music?

Marco Agas — Wed, 31 Aug 2022 06:14:01 +0000

I love finding new music to code to! I usually add songs to my work/coding playlist, but enjoy finding new fresh songs.

Link to my main playlist

Playlist mood: Instrumental and Electronic
Top Genre: Dance/Electronic
Top sub-genre: Tech House

Leave yours in the comments below!

People who went from WordPress to HTML/CSS/JS/etc - what's your story?

Marco Agas — Fri, 18 Feb 2022 05:05:45 +0000

I've been building WordPress sites for around 2 years in my digital marketing agency. It helps because I can get a site up and running quickly and editing is simple. However, I've wanted to expand my web development knowledge and want to slowly move away from pure WordPress sites.

Has anyone here ever done this? Or did you just get better with WordPress? Is it better to join a web development company and grow in there as a junior web developer?

Using reduce to find the oldest age in an array

Marco Agas — Wed, 16 Feb 2022 06:23:08 +0000

In this post, I will explain how to find the oldest person in an array. Because it is an array, we can make use of the reduce method in order to return a single name, i.e. the oldest person.

The following was taken from The Odin Project JavaScript example for findTheOldest with help from iVuDang's method.

Step 0 - Create the Initial Array

Let's start with the array:

const people = [
    {
      name: "Carly",
      yearOfBirth: 1942,
      yearOfDeath: 1970,
    },
    {
      name: "Ray",
      yearOfBirth: 1962,
      yearOfDeath: 2011,
    },
    {
      name: "Jane",
      yearOfBirth: 1912,
      yearOfDeath: 1941,
    },
  ]

Step 1 - Get Age Function

Next, we want to work out who is the oldest year. If someone didn't have a year of death, then we would like to return the current year.

We can start with a function to calculate the age of each person:

const getAge = function(birth, death) {
 if (!death) {
death = new Date().getFullYear(); // return current year using Date()
}
return death - birth; // else just return age using death minus birth

Step 2 - Find The Oldest

Now we'd like to create a function in order to find the oldest person. We'll use reduce to return a single value, i.e. the person's name.

Reduce Syntax

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Find The Oldest Function

  const findTheOldest = function(array) { 
// Use reduce method to reduce the array by comparing current age with previous age
  return array.reduce((oldest, currentPerson) => {
    // oldestAge gets the age of the oldest person's year of death and birth
    const oldestAge = getAge(oldest.yearOfBirth, oldest.yearOfDeath);

    // currentAge gets the age of the current person's year of death and birth
    const currentAge = getAge(currentPerson.yearOfBirth, currentPerson.yearOfDeath);

    // return name if current age is older than the oldest age, else return current oldest age
    return oldestAge < currentAge ? currentPerson : oldest;
  });

};

console.log(findTheOldest(people).name); // Ray

Conclusion

I'm still learning JavaScript day-by-day, but using reduce was quite tricky. I learnt that you don't need to use all the parameters for reduce if you don't need to, you can simply use the previous value and the current value.

Also, you can use something like an if statement to compare the current oldest to the new oldest age, and return the oldest one from there.

Hope you learnt something today, happy coding! 🎉

Here's my GitHub profile if you'd like to follow my journey 🗺️

Photo by Naassom Azevedo on Unsplash

How to Create Horizontal Background Text on Scroll

Marco Agas — Mon, 31 Jan 2022 20:14:34 +0000

I was struggling to find a way to do this after seeing it in Pierre's portfolio page. I really enjoyed the look of it, and wanted to try recreate it.

I'm still very early in my front-end skills, but thought I'd share it anyway.

Step 1: HTML

Create a simple HTML page and add your text content

<body>
<header>
<h1>
This can be any text you want, can be interesting, 
fun, exciting, or just something about yourself
</h1>
</header>
</body>

Add a div beneath it, this will be your scrolling text and call it something useful like scroll-text.

<body>
<header>
<h1>
This can be any text you want, can be interesting, 
fun, exciting, or just something about yourself
</h1>
</header>
<div class="scroll-text">
      <span class="bg-text">WELCOME</span>
</div>
</body>

Step 2: CSS

For the sake of this post, I just made the body very long, so that you can see the effect of the scrolling.

body {
  height: 5000px;
  background-color: #272727;
  font-family: "DM Sans", sans-serif;
}

Then I added in some elements to make the main text look better. I used min-height as to keep it in the center when full screen on desktop, but preventing it from going off screen on mobile.

header {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 0 14rem;
}

For the text, I wanted it to be quite fluid. I used this site called Utopia to get a fluid type scale.

header h1 {
  font-size: clamp(2.85rem, 2.18rem + 3.37vw, 4.58rem);
  color: #fff;
}

Last, I edited the scroll-text container and bg-text to make sure it was large and outlined. I used white-space: nowrap to prevent any wrapping of the text, and transition: all 0.5s to make sure it scrolled nicely. For bg-text, I added in extra functionality to make sure the fill-color matched the background.

.scroll-text {
  position: fixed;
  top: 0;
  left: -800px;
  white-space: nowrap;
  z-index: -1;
  transition: all 0.5s;
}

.bg-text {
  font-size: 40rem;
  color: rgb(122, 122, 122);
  -webkit-text-fill-color: #272727; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(70, 70, 70);
}

Step 3: JavaScript

This is the easy part. I added a querySelector for the .scroll-text class.
I then created an on scroll event function that checks the position of the window.
Then a simple style change in JS which changes the horizontal position by x pixels depending on your preference.

let scrollText = document.querySelector(".scroll-text");

window.onscroll = () => {
    let pos = window.scrollY;
    // console.log(pos);
    scrollText.style.left =  `-${pos/2}px`;
}

And there you have it. I might have made a few errors or poor practices, but I'm still new and learning as I go. Hope you learned something at least :)

CodePen Link

Building Motivation through Coding Affirmations & Achievement Lists

Marco Agas — Mon, 31 Jan 2022 05:56:28 +0000

I've started my front-end developer journey, and decided I'd share my way of helping get through the times I'm feeling demotivated and unsure I'm going into the right direction.

I feel that affirmations and achievement awareness are a great way of helping here. It's definitely helped me realise that I'm making progress so far.

Affirmations

You can write these down, just say them out loud, or put them into a spreadsheet in Notion (that's what I did).

How to use these affirmations

Either say these out loud or just in your head
Go through each one, think about it, and then move onto the next one. Don't rush the process
Repeat each one, total time can be just 5 times each. Start slow, and then you can build up to 2-5 minutes if needed
Recommended - write down how long you've spent doing your affirmations and try to slowly increase this time

My affirmation list - C.A.R.E

🐢 Consistency - I can’t expect to rush my learning, only through consistency
👀 Always learning - I understand that progress is always being made, even if I can’t see it
🏖️ Relax - I'm busy enjoying my life, I don’t need to stress about coding
🎉 Enjoyment - The more I learn, the more I enjoy coding

I use Notion, so here is an example below (every time I complete an affirmation I tick off a box and increment the times I've completed one).

Note: these can be added/edited/removed as you see fit. These are just a few simple affirmations to help get you going and motivated.

Achievement List

Another way to help keep you motivated is through an achievement list (or lists). Writing down your achievements helps you realise that you are learning and making progress, no matter how much or little it is.

The process is simple:

Write down daily (or weekly) what you have completed in your coding journey. It can be as simple as "Writing 10 lines of code" or more complex, e.g. "Completed my to-do list app"
Make sure to keep consistent and don't get discouraged if some days aren't as good as others. The point is to highlight your progress.

Below is an example of how I track it using Notion. Very simple and can be edited later.

Note: don't get discouraged if you miss a day. Consistency is key, but so is not stressing if you miss a day.

I usually complete my affirmations and then my achievement list afterwards every day (except maybe weekends).

If you have any other tips for motivation, let me know in the comments section.

Happy coding! 🎉

Special thanks to Camille Daligand for the idea and suggestions!