DEV Community: Thalita G.

Step-by-step guide: Pass your cursor position to CSS variables with JavaScript

Thalita G. — Sun, 16 May 2021 14:36:35 +0000

My website has a little illustration that tracks your cursor's position. The only JavaScript that happens there is passing the cursor position to CSS variables. Everything else is in CSS using 2D transforms.

In this tutorial, you'll learn how to pass event behaviour to CSS using CSS variables.

Set up your HTML and CSS

We'll be making a square with a little red dot inside. The red dot will be what will be controlled with transforms later on.

The HTML code is pretty simple:



<div class="container">
  <div class="tracker"></div>
</div>

The CSS will center the square on the window and puts the red dot on the top left of the container. I also like setting up the CSS variables in CSS for a default state. CSS variables generally default to 0, but you may not always want that to be the case.

Here's the CSS:



:root {
    --x: 0.5;
    --y: 0.5;
}

.container, .tracker {
    position: absolute;
}

.container {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #333;
}

.tracker {
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    background: red;
    border-radius: 1000px;
}

This is how it ends up looking like:

Make the event listener and pass the variable in JavaScript

Next, we make the event listener and pass the event behaviour to CSS variables.

Let's declare the position x and y first, and add the event listener itself:



const pos = { x : 0, y : 0 };

document.addEventListener('mousemove', e => { saveCursorPosition(e.clientX, e.clientY); })

As you can see, we'll be making a function saveCursorPosition. This is where we'll be passing the CSS variables. The two arguments will be the event's clientX and clientY, which is the cursor position.

To make the cursor position responsive, we'll divide the values by the innerWidth and innerHeight, like so:



pos.x = (x / window.innerWidth).toFixed(2);
pos.y = (y / window.innerHeight).toFixed(2);

I use toFixed(2) to round the values.

After that, we can finally pass the positions to the CSS variables! To select the root, you use document.documentElement. You may be used to declaring CSS values using the style property, like style.transform = ''. This isn't possible with CSS variables, where you'll have to use style.setProperty() instead due to the unique way CSS variables are formatted. You'll end up with this:



document.documentElement.style.setProperty('--x', pos.x);
document.documentElement.style.setProperty('--y', pos.y);

Put these in your function, and you end up with this:



const pos = { x : 0, y : 0 };

const saveCursorPosition = function(x, y) {
    pos.x = (x / window.innerWidth).toFixed(2);
    pos.y = (y / window.innerHeight).toFixed(2);
    document.documentElement.style.setProperty('--x', pos.x);
    document.documentElement.style.setProperty('--y', pos.y);
}

document.addEventListener('mousemove', e => { saveCursorPosition(e.clientX, e.clientY); })

Add the transform with the CSS variables to your CSS

Now that we have everything ready, we'll now add the transform property to the red dot. This takes a little bit of math, but basically we'll multiply the container's width by the CSS variable, and add that to the -50% that centers the dot.



.tracker {
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    background: red;
    border-radius: 1000px;
    transform: translate(calc(-50% + 200px * var(--x)), calc(-50% + 200px * var(--y)));
}

Optionally, you can add a transition that acts as a stabiliser simply by adding this one line transition: transform 0.1s. It's best to keep the timing lower than 0.3s. I don't recommend using this on too many elements, but it adds a nice effect.

And that's it! The transform will now change according to the CSS variable, thus following your cursor. The final result can be seen on this JSFiddle (including the transition):

Why you should use CSS variables to pass event behaviour

Now you know how to pass event behaviour using CSS variables, but perhaps you still have doubts about CSS variables in general.

Readability

Readability in general is pretty subjective. But I do believe it's the major reason to make use of CSS variables.

My general thumb of rule is always: all style-related features should be left to CSS, everything else to JavaScript.

JS isn't meant for style manipulation. I mean, look at this:



const el = document.querySelector('.a-class');
const pos = { x : 1, y : 0.8 };

el.style.width = (250 * pos.x) + 'px';
el.style.height= (200 * pos.y) + 'px';
el.style.left= (100 * pos.x) + 'px';
el.style.top= (50 * pos.y) + 'px';
el.style.transform= `translate(${50 * pos.x}%, ${50 * pos.y}px)`;

It's just not very elegant, you see? You could use cssText so you'd at least not have this multiline However, this still isn't convenient when this isn't the only inline CSS you use. Besides, readability or maintainability won't be much better even with cssText.

It's also for the same reason that I prefer not to use libraries like GSAP and anime.js. Unless the animation is so complex that these libraries would outperform CSS, I'd rather go for CSS.

Speaking of performance...

Performance

This is where things get a little more complicated, but the tl;dr of this would be: It generally outperforms JS in terms of scripting.

Whether you pass the styling with CSS or JS makes no difference in terms of re-rendering itself. This means that you'll mainly find improved performance in JS itself.

Usually, whenever you want to change the position of an element, you'd do something like el.style.transform= 'translateY(50%)';.

Say you have 10000 divs, you'd loop through each element to add inline CSS to it. With CSS variables, you'd only need to change the value once on the parent element or the root. It should be clear that the latter would have better performance. In case you're doubting this, I did some benchmark testing using Jsben.ch. Some information about what I've done:

Before each test, I've created these 10000 divs, set the CSS variable, and added inline CSS to all of them with el.style.transform= 'translateY(var(--percent))';.
The first test case adds inline CSS with a regular variable.
The second test case changes the CSS variable.

That's a pretty big difference huh.

It may seem ridiculous to add inline styling to all these elements individually, but this is exactly what I see happening on many websites. Whereas in CSS variables you'd typically already have the CSS set beforehand in your stylesheet. All you'd need to do is change the CSS variable.

But hey, what if you use inline styling on both cases? That's when inline styling using a regular variable wins.

I don't see anyone ever doing this though...

When you use CSS variables for a ton of animations and transitions on your page, you might wanna start using JS for animation instead. This isn't so much a CSS variable problem as it is the performance of CSS animations in general. However, you can still use CSS variables to pass the CSS while doing the animation logic itself in JS! Here's a very short article about using CSS variables with GSAP.

How about browser support?

CSS variables are pretty widely used nowadays, and for a great reason too! All modern browsers support this feature at this point. There are just a few things to consider if you need to support legacy browsers as well:

Internet Explorer doesn't support CSS variables at all. If you still need to support IE, you could either opt for a polyfill, but at that point, you're better off just using JS.
Edge 15 (pre-Chromium) has a few bugs that may hinder you. But honestly, it's almost become impossible to keep Edge 15 installed, so there's very little reason to support it.

For more information, check out Can I Use.

A new world has just opened!

Now that you know how to pass these events, there's so much more you can do with it! If you want to make this work on touch devices, you can use the touchmove event for it. Try to play around with other events as well! You could make a complex parallax using JavaScript only to pass the scroll event values and CSS for everything else.

Not only do you know how to use it, but you also understand why you'd use this, and how this would improve performance.

Twitter | Website

DISCUSS: Finding inspiration for new projects

Thalita G. — Thu, 13 May 2021 12:23:14 +0000

Personal projects are a great addition to your portfolio as a way to showcase not only your skills, but also your general problem-solving and interests! It's the reason why so many people are so focused on it, especially when they haven't been able to make any projects for others yet.

Personally, I don't have difficulty thinking of new projects. (it's usually the anxiety to start them but let's not focus on that 😅) So no, this isn't so much about me.

I'd like this discussion to be for those who can't seem to figure out how to find inspiration for new projects. I see this question being asked so often yet I haven't yet encountered any articles that address this. (feel free to share them if you have some! 😉)

✍ Comment below answering the following questions

Where do you find inspiration and ideas to start a new project?
Most of us devs aren't exactly good at designing. How do you go around that?

Twitter | Website

DISCUSS: The blurred line between front-end and fullstack

Thalita G. — Fri, 07 May 2021 14:05:12 +0000

The meaning of a "front-end webdeveloper" has really shifted over the years as more technologies started becoming the norm. Here are two of my favourite articles that talk about this:

Front-ends without frontiers

I've started off as a front-end webdeveloper myself. As I started learning more back-end technologies it was hard for me to tell when I could start considering myself a fullstack. Even today, I'm not actually sure where the front-end ends and where the back-end begins.

The front-end has become such a blurred subject that it made job hunting exceedingly slower. Now you have to carefully read every job description just to determine what kind of "front-end webdeveloper" they're talking about.

I've even seen job descriptions that use front-end and fullstack interchangeably. Yes. Not even sure if that's intentional or they're a little confused themselves. 😶

✍ Comment below answering the following questions

Do you consider yourself a fullstack webdeveloper? Why?
If you could make a clear definition of "front-end" and "fullstack", what would it be?

Twitter | Website

DISCUSS: Climate change and webdevelopment

Thalita G. — Thu, 29 Apr 2021 14:05:55 +0000

I know, I know! Earth Day has already passed and I should've asked this last week. I only realised after I'd posted last week's discussion post that this topic would have been very relevant to that day. Still, this is worth talking about!

I'll be mainly focusing on webdev, but this could apply to any programming field.

How our decisions could impact the environment

It shouldn't come as a surprise that the internet accounts for almost 4% of global emissions. Here's a handy infographic if you'd to know a more!

It's the reason why big companies are starting to opt for green energy. Think of Google running 100% on renewable energy for several years now. It even has a site dedicated to sustainability! By using Google's services, you're essentially running your stuff on green energy.

Then, we've got the other side of the hill, like the NFT craze that's still lingering. One of the major arguments against NFT was its environmental impact due to the computing power required for each transaction. Even the creator of NFT talks about it. But right now, the technical solutions to reduce all that computing power are out there.

That's how we can make a difference. 🌱

Now, I don't want to go in-depth about this topic. This isn't an article to inform you all of it. Giving some examples might give some clarity on where I'm going with this. I mainly want to hear from others what they think they could do about it!

✍ Comment below answering the following questions

Do you think your development process can benefit or harm nature, even if in a small way? If so, how?
Is environmental impact part of your decision-making process when choosing between products for development? (e.g. hosting)
After reading this short post, do you feel climate change should cross your mind more often in your problem-solving process?

Twitter | Website

DISCUSS: JavaScript just DIED! What language should replace it?

Thalita G. — Thu, 22 Apr 2021 12:18:25 +0000

People usually have a love-hate relationship with JavaScript. It's got its beauty and its unavoidable quirks. We're all familiar with them. We can't deny that it's been an absolute powerhouse for the web, though.

You'll always find Js in the top 10 or even top 5 lists of most popular programming languages. It's also the #1 topic on dev.to!

But what if all of that suddenly went, like, POOF! 👻

Now now, where's this coming from?

First of all, special thanks to @technoglot for the inspiration!

Article No Longer Available

Her article asked this simple question: What would your tech stack look like if JavaScript didn't exist?

I'm a webdeveloper through and through. Naturally, I'd start unpacking all CSS-only solutions! However, I started thinking more about the implications of JavaScript's death, like...

✍ Comment below answering the following question

If JavaScript stopped existing, what language do you think should replace it?

Now, I understand that some programming languages aren't quite ready for things like DOM manipulation and such. Imagine these things would be implemented into said languages.

Or perhaps you have a better version of JavaScript in mind? 😮☝ Let me know!

Twitter | Website

DISCUSS: If there's one CSS feature you could add, what would it be?

Thalita G. — Thu, 15 Apr 2021 14:08:16 +0000

CSS has gone a very long way from being a simple stylesheet to something more dynamic. Think of calc() and CSS variables. They haven't turned CSS into a programming language, but they sure are helpful!

But there's still a lot that could be added to CSS! Now, imagine you were a wizard who possesses the entire W3 team and whoever works on our browsers... 🧙‍♂️✨

✍ Comment below answering the following question

If there was one CSS feature you could add that gets instantly supported by all major browsers, what would it be?

This can be a new feature or something that's already in W3 but isn't supported yet. It also doesn't have to be a property, you can think about functions as well. The possibilities are endless!

Twitter | Website

TIP: Never leave your email address raw in the mailto link! Here's what to do instead

Thalita G. — Wed, 14 Apr 2021 17:36:09 +0000

Usually, when you leave your email address on your website for people to click on, you may do something like this:

<a href="mailto:name@example.com">name@example.com</a>

Right?

This is, however, the perfect recipe to get spam into your email!

This is how email harvesting works

In order for spambots to get a nice long list of emails to annoy people to click their suspicious-looking links, they use email harvesters to curate these lists. Emails are typically found on websites where people leave theirs to be contacted.

Some people think this is easy to solve simply by masking the email like name[AT]example[DOT]com. This, however, doesn't solve anything due to two things:

The mailto link still contains the actual email address as you can't replace it with the one above. Since email harvesters look into the source code of your website, they'd still be able to get your email.
Most email harvesters are advanced enough to detect common patterns like [AT] and (AT) and such, so they won't do much.

So, what now?

Encode your email address

Fortunately, there's a way to make your email address unreadable for email harvesters!

You may have seen characters like & and > in HTML before. These are called HTML entities. These are symbols that have been encoded so they won't be mistaken for HTML tags.

However, what not many people know is that you can encode every single character into an HTML entity. And even better, putting these into your hrefs will convert them back into regular text for normal visitors that are visiting your website rather than looking at the source code. It's perfect for this situation!

HTML entities for regular letters are made of HEX encoding. The HTML entities would look like like &#HEXCODE;

Let's do it!

Use this handy tool to convert! Make sure to copy the entire href link, not just your email address!

After that, copy-paste that string into your href and you're done! Here's how it should look like:

<a href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&colon;&#x6e;&#x61;&#x6d;&#x65;&commat;&#x65;&#x78;&#x61;&#x6d;&#x70;&#x6c;&#x65;&period;&#x63;&#x6f;&#x6d;">My email</a>

This makes the whole thing a lot harder to decypher for most email harvesters. That, while still keeping the link clickable for others! On top of that, using inspect element to check the HTML gives you the decoded email, even though the source code has it encoded!

This means that it still ends up being readable for humans.

It's even better if you use some non-traditional way of masking your email address in the actual text, or just don't use your email at all (like in the sample above).

We're all good now! No more disappointments that you think you just got a client but it turns out to be spam!

Twitter | Website

DISCUSS: How would the ideal browser for devs be like?

Thalita G. — Thu, 08 Apr 2021 12:51:50 +0000

Imagine a world where devs have the perfect browser to make and debug websites with... a browser that helps us develop faster and more efficiently... how would it be like?

Firefox is always seen as one of the best browsers among the most popular ones, and there are already dev-oriented browsers like Polypane, but could we go a step further?

✍ Comment below answering these two questions

What browser do you currently use and why?
How do you see a perfect browser for devs? What features would it have? Think of stuff like: an even more advanced CSS debugger than Firefox', an in-built colour picker, accessibility tools etc.

Twitter | Website

How to get a free custom email domain + hosting AND launch your first newsletter

Thalita G. — Thu, 01 Apr 2021 23:29:15 +0000

Receiving and sending emails
Sending newsletter

Many tutorials have become out-of-date, aren't truly free, are unnecessarily complicated, or provide email services that aren't compatible with others. Since I've managed to solve this on my own, I might as well share how I did it!

This website is being hosted on Netlify, which doesn't offer email hosting. Since I wanted to write newsletters, I had to find a way to get a custom email domain!

I'd also decided to use ButtonDown to write newsletters, so I wanted to make sure that everything works smoothly.

Let's get started right away!

Receiving and sending emails

I assume you've already registered your domain (I use NameSilo by the way 😉) and are hosting on Netlify. We'll be adding DNS records through Netlify.

For receiving and sending emails, we'll use Zoho. Zoho's email service has a free plan that includes using your custom domain. If you don't mind not being able to do any IMAP/POP for forwarding, it's the perfect free solution.

1. Register to Zoho

Visit Zoho's pricing page, scroll down to the "Forever Free Plan" and sign up. Write your domain and complete your registration. Don't worry about choosing a name for your admin account, you'll be able to create as many aliases as you like.

2. Add DNS records

Zoho takes you through its onboarding progress, including adding DNS records.

First, we need to verify our domain. Select "Others" from the list of DNS managers. We'll verify the site through a TXT record.

To do to Netlify's DNS settings, go to your Netlify dashboard, select your domain, go to Domain Settings, and then Go to DNS panel under your primary domain's options. Adding a new record gets you a modal where you can fill in the DNS record.

Here's what needs to be filled in (TTL in seconds to be left blank):

Record type: TXT
Name: @
Value: zoho-verification=(code provided by Zoho).zmverify.zoho.eu

It may sometimes take a while before the DNS records get updated, so if the verification doesn't work right away, try again.

Next, we add the MX records. MX (Mail Exchange) records specify the server that should handle emails. Each MX record has its priority number, the lower the number the higher the priority of that server. This means that when an email to the domain is detected, the server with the highest priority will catch it.

Zoho has 3 different MX records in case one of them is down. Here's an overview of all three.

Record type	Name	Priority	Value
MX	@	10	mx.zoho.eu
MX	@	20	mx2.zoho.eu
MX	@	50	mx3.zoho.eu

Zoho is one of the few email services that allow you to have MX records from different services. This is the reason why I decided to go for it as Zoho allows you the most freedom when it comes to DNS records.

Lastly, we add SPF (Sender Policy Framework), which is another TXT record. It allows Zoho to send your emails through its server. You'll only be able to receive emails without adding the SPF.

Here's the TXT record that needs to be added:

Record type: TXT
Name: @
Value: v=spf1 include:zoho.eu ~all

This record needs to be modified later in the tutorial during the newsletter setup, but we'll use this for now.

You can also add a DKIM signature to your domain. A DKIM (DomainKeys Identified Mail) signature is a unique identifier for your email address so your emails won't end up in spam, since it verifies that the email hasn't been spoofed. This is optional but highly recommended.

Click on Proceed to Configure DKIM and you'll be taken to another page to create a new selector. The selector's name can be anything you like. Personally, I go for "zoho" to ensure the name won't conflict with anything else I may add in the future.

You'll then have to create a TXT record that contains the following:

Record type: TXT
Name: zoho._domainkey (or whatever selector name you've chosen)
Value: v=DKIM1; k=rsa; p=(your unique key, don't show this anywhere in public!)

3. Create your email aliases (optional)

Now that everything has finally been set up, it's time to create some aliases if you need any.

To create an alias for your existing account, go to Zoho's Control Panel, go to User Details, and select your account. Then, go to Mail Accounts and you'll be able to manage your aliases there.

Zoho allows you to use as many aliases as you like, so feel free to go crazy there.

And that's it! Feel free to test your new email address by sending an email to it and sending one back.

Sending newsletters

I wanted to go for ButtonDown because it's a very generous newsletter service. It's free when you have under 1000 subscribers. You can also generate RSS feeds, and it automatically creates a newsletter archive for you. On top of that, it's very privacy-friendly. Definitely something to appreciate!

Zoho also has its own newsletter service that has a free plan as well, so feel free to check that out if you prefer to stay in the Zoho ecosystem.

1. Register your account and set up your newsletter

Your username will be used to refer to you in newsletters (eg. in the from field), while your email address will be the custom domain used to send your newsletter. The email address you use for the newsletter can be an alias you made in your Zoho account. It doesn't have to be though, especially if you add ButtonDown's MX records. I just think it's more convenient to receive all your emails in one place.

You can change these any time of course.

2. Add DNS records

Yup, we're doing the DNS thing again.

First, we add the MX records. For the same reason as Zoho, it has 2 records so the second can backup the first. ButtonDown doesn't provide any priority numbers, so we have to choose those ourselves.

ButtonDown's MX records aren't necessary since Zoho already manages inbound mails for you, but since some email services check MX records to see whether the email should be in spam or not, so I'd rather just keep them.

In order to avoid the least conflict possible, we put ButtonDown's MX records in an entirely different subdomain. ButtonDown allows its MX records to be put anywhere on your domain. Feel free to choose any subdomain here. Personally, I went for "buttondown".

Record type	Name	Priority	Value
MX	buttondown	10	mxa.mailgun.org
MX	buttondown	20	mxb.mailgun.org

Next, we add a CNAME record. A CNAME (Canonical Name) record will run a server under the domain you've chosen. In this case, ButtonDown uses Mailgun's CNAME record to be able to track email clicks and opens using Mailgun's API. If you want analytics on your emails, you'll need this.

Lastly, we add a few TXT records. The following is for domain verification:

Record type: TXT
Name: smtp._domainkey
Value: k=rsa; p=(your unique key, don't show this anywhere in public!)

Now we need to do some tinkering. Both Zoho and ButtonDown use SPF for sending emails, and adding both records separately leads to some conflicts, since they check the first SPF that appears and nothing else. This means that all SPFs need to be in one record. We're going have to merge the two.

Delete the current SPF that we've added earlier, since we can't edit records. Instead, add this record:

Record type: TXT
Name: @
Value: v=spf1 include:zoho.eu include:mailgun.org ~all

v=spf1 refers to the type of TXT, ~all refers to the domains being allowed to send anything, and between these two you can include any domains to allow them to send emails.

So now, both Zoho and Mailgun are allowed to send emails. Neat!

Once again, it could take a while for the DNS records to be updated. If the verification doesn't work right away, try again.

And there we go! Not only you have a free custom domain for your email now, you even have an up and running newsletter! ButtonDown is full of options, so make sure to look around and customise it to your audience's needs.

Twitter | Website

DISCUSS: The Locomotive scroll — what do you guys think of it?

Thalita G. — Mon, 29 Mar 2021 12:33:21 +0000

The locomotive scroll is always a bit of a hit-or-miss to designers. Some absolutely hate it due to questionable UX, but many agencies that have Awwwards SOTD sites use it (or something similar) so it's definitely widely loved as well. Others think that it depends on the site and whether it adds to the overall experience.

I don't hear this topic a lot among devs though, so I wonder what you guys think of it!

What is the locomotive scroll?

Github repo

Locomotive scroll is a smooth scrolling plugin made by the web agency (surprise surprise) Locomotive. All you have to do is add the plugin, initialise it, and add a tiny bit of HTML where you'd like the scrolling behaviour to be. It also includes parallax features using the "scroll speed" of your elements.

What it does is replacing the default scrolling behaviour of pages and replace it with a much more easened scroll. This generally gives scrolling through the page a more pleasing feeling.

Here are some examples of sites that use the locomotive scroll (or similar behaviour that looks like it):

✍ Comment below answering the following question

Do you find it mezmerising or are you one of those people who absolutely can't stand it?

Update: Elaborated a bit on how Locomotive scroll works for those who aren't familiar with plugins like this one.

Twitter | Website

Celebrating my website launch

Thalita G. — Mon, 22 Mar 2021 15:07:05 +0000

After a long time, I have finally updated my website and decided to start my blog with it. Here's my first post, explaining the progress that I went through.

I started helping people on the Scrimba Discord server shortly after it was launched. I realised that perhaps my knowledge and explanations could be valuable. I'd also discovered places where you could share your posts, like dev.to. It made me start thinking about starting a blog, a place where I can share my experience with others.

And now, I'm finally writing my first post ever. On a brand-new website.

Goals and constraints

I've just started looking for a new job, so I had to make sure I got a newly updated website as soon as possible, while still making this a comfortable space for myself.

So, the site must:

Be finished within 2 weeks
Show off my personality and what I enjoy
Showcase my skills right off the bat
Use my favourite stack, the JAMstack
Be usable on devices and browsers that block JavaScript

The design

I already had a general idea of the design last year. The website would be made of windows. The homepage including my little bot tracking your mouse position. It'd have the navigation at the bottom since it's a much more logical location on mobile. It'd have theme options that'd always use any shade of red as its main colour. It'd show your current location on the website for easy navigation.

The terminal-like introduction on my homepage came later. So did the little header on top of the window containing your current location. The idea of the latter was already there at the time. I just didn't know where to place it.

Initially, I was planning to add a lot of different particles and motion in the background to add to the tech-like feeling. However, I decided to leave it as it is now as I started to take a liking its current look while developing. My website should be a place for people to read my articles, so a lot of white space and lack of distracting elements would help a lot with that.

The tools

I've been a huge fan of Eleventy for over a year now, so it was a given that I'd use that to make my website. It's a very lightweight and flexible static site generator that doesn't depend on any JavaScript. It's closer to Jekyll than Gatsby, as you create your pages using markdown files while using nunjucks for templating.

So I'd at least already decided on that. Since I didn't have a lot of time to make this, I had to make a few shortcuts along the way.

I wanted to give the website the feeling that it is a single-page web application by making page transitions. The history API was the answer to this. However, after doing some research, I've found that the history API doesn't come without its caveats and edge-case problems. Instead of taking the time to further research and write code for all of that, I decided to use an already existing plugin, Swup. Not only does Swup deal with page transitions, but it also captures pages in advance when you hover over the links using its "preload plugin". Excellent!

The other plugin I've used is SimpleBar. It's a lightweight plugin that adds cross-browser scrollbars. I simply wanted to make sure the scrollbar looked great on any browser, as the default scrollbar would break the look of these little windows.

These two already saved me enough time that I could code everything else on my own. The themes are saved in LocalStorage. The site also checks in SessionStorage whether you've already visited the homepage in your current session. That way you wouldn't have to go through the entire terminal-like experience again.

The blog

This blog is my space for anything I'd like to share. This means that not only will I talk about dev itself, I may also talk about productivity and career life. Since I'm also into illustration, I'd like to add little drawings to my articles whenever they help convey the message.

The content on dev.to and on this website will be slightly different. Dev.to gets only dev and career-related articles and this website gets the full package. Makes sense huh?

What's next?

There's still a lot that needs to be done on this website. I couldn't do most of these just yet out of time constraints.

Here are some things I plan to do:

Making the interactive timeline page
Tackling accessibility
Adding some extra pages such as my work progress
Ability to filter the blog by tag
Adding RSS (it's still relevant, folks!)
Get a newsletter where I share not only my own posts but anything else dev or design-related I've found on the internet

My next posts will mainly consist of tutorials related to things I've made for this website. It's still a bit of a mystery of what I'll be doing after that, but I can say for sure I've got a lot of exciting stuff to talk about.

So, until next time!

Oh, and have a pat pat gif of my bot.

Twitter | Website

DEV Community: Thalita G.

Step-by-step guide: Pass your cursor position to CSS variables with JavaScript

Set up your HTML and CSS

Make the event listener and pass the variable in JavaScript

Add the transform with the CSS variables to your CSS

Why you should use CSS variables to pass event behaviour

Readability

Performance

How about browser support?

A new world has just opened!

DISCUSS: Finding inspiration for new projects

✍ Comment below answering the following questions

DISCUSS: The blurred line between front-end and fullstack

Front-ends without frontiers

✍ Comment below answering the following questions

DISCUSS: Climate change and webdevelopment

How our decisions could impact the environment

✍ Comment below answering the following questions

DISCUSS: JavaScript just DIED! What language should replace it?

Now now, where's this coming from?

Article No Longer Available

✍ Comment below answering the following question

DISCUSS: If there's one CSS feature you could add, what would it be?

✍ Comment below answering the following question

TIP: Never leave your email address raw in the mailto link! Here's what to do instead

This is how email harvesting works

Encode your email address

Let's do it!

DISCUSS: How would the ideal browser for devs be like?

✍ Comment below answering these two questions

How to get a free custom email domain + hosting AND launch your first newsletter

Table of contents

Receiving and sending emails

1. Register to Zoho

2. Add DNS records

3. Create your email aliases (optional)

Sending newsletters

1. Register your account and set up your newsletter

2. Add DNS records

DISCUSS: The Locomotive scroll — what do you guys think of it?

What is the locomotive scroll?

✍ Comment below answering the following question

Celebrating my website launch

Goals and constraints

The design

The tools

The blog

What's next?