DEV Community: Atila Fassina

Gradient Texts

Atila Fassina — Fri, 22 Jan 2021 00:00:00 +0000

Recently, I created a landing page where I used a few interesting gradient effects. You can check them at All About NextJS. Though not super complicated or complex, these techniques aren’t widely used. And that’s why they revolve around a CSS property that though it has been around for a while, it has never had reliable support by the rendering engines. I believe this is the reason why it’s partially forgotten.

Background-Clip

When checking on CanIUse the results can be somewhat misleading, each value has a different level of standardized support. And the value we’re about to use does not even figure in that shortlist.

According to Mozilla Development Network the background-clip property:

(...)sets whether an element's background extends underneath its border box, padding box, or content box.

Let’s try to break that technical jibber jabber into plain English. Think of it as a virtual kid‘s hole puncher. And I only say kids because adults are boring and only use circles, but when it’s for kids, they come in all shapes:

I love a good analogy, so let’s ride this one for a little longer. The paper is our browser, the hole-puncher is the rendering engine, and the CSS will define the shape of this hole. In that specific scenario, we want the whole to have the exact same shape of our text. So, guess what? background-clip: text;.

Now it’s just a matter of styling the background as you normally would, and make the actual text transparent with color: transparent. It will remain accessible to screen-readers and crawlers, but our background will handle the graphics. Check the codepen below:

It’s worth noting support is not great on every browser. Webkit and Blink accept only the flagged version: -webkit-background-clip.

Adding some animation

It is not possible to animate background-image, but there is a workaround that will achieve a nice result. We can animate background-position, and since our background is only colours, we can expand the size of our background.

So by stretching our background at 4x the size of our actual container, we can animate its positioning. Like the view passing by your car window as you travel through a road (so poetic!).

.animate-text {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400% 400%;
  background-image: linear-gradient(
    45deg,
    #95f7d0,
    #63b9be,
    #887dc5,
    #d478ff,
    #ff94e7,
    #fec6c0,
    #fdff94,
    #b6f9bd
  );
}

Check it at this pen:

Gradient borders

Now, the most interesting are the 2 above, but this one is so fun that I felt like adding too. When not dealing with text, we can also play around by adding some animated gradient borders. Fancy!

Check it out!

It‘s a similar technique as the ones above, but instead of relying on background-clip it creates an outer-wrapper with the background gradient, and position its only child with an opaque background.

.box {
  /*
  we set border-radius as a custom-property
  this way elements always match
  */
  --border-radius: 5px;
  width: 300px;
  height: 150px;
  display: grid;
  place-items: center;
  /*
    same gradient as above
    hiding in a custom-prop to enhance readability
  */
  background-image: var(--gradient);
  border-radius: var(--border-radius);
  background-size: 400% 400%;
  animation: animateGradient 5s ease infinite;
}

.inner-box {
  width: 95%;
  height: 90%;
  background-color: black;
  border-radius: var(--border-radius);
}

More CSS tips?

Check out my other post

5 Clever tips on CSS

Atila Fassina ・ Aug 7 '20

#css #tutorial #codenewbie #codepen

What about you? Is there any obscure CSS feature that you have used lately? Or can you think about another nice use-case for background-clip ? I’d love to hear from you on this. Reach out on twitter and let me know!

Cover Photo by Elliott Engelmann

Your first NodeJS Executable

Atila Fassina — Thu, 03 Sep 2020 05:10:59 +0000

Whenever you write a NodeJS (.js) file, you can go to your terminal, enter the directory and run node {{file-name}}.js. Ever wondered how some packages written in Node don't need this to run? Jest, Babel, Yarn, etc. A lot of them have their own commands. That's because they're executables.

And turns out, it is quite straightforward to create an executable with NodeJS. You just need to follow a few steps.

Configuring `package.json` ⚙️

The package.json has a property which is specifically to create this executable task, it's bin field. So it will end up looking something like this:

{
  "name": "create-netlify-ts",
  "version": "0.1.0",
  "main": "index.js",
  "repository": "git@github.com:atilafassina/netlify-lambda-ts.git",
  "author": "Atila Fassina <atila@fassina.eu>",
  "license": "MIT",
  "bin": {
    "create-netlify-ts": "index.js"
  }

In that case, my entry file (the one which pulls all other modules and where the task will execute from, is the ./index.js.

Instruct the terminal 🤖

Your terminal runs on bash, or zsh, or fish, ... it doesn’t really matter. Just add a comment to the top of your file specifying it needs to run on Node.

#!/usr/bin/env node

(function () {
  console.log('Executing executable')
})()

Permission to execute 💂‍♀️

As a security measure, files are not executable by default. It's necessary to tap into the access permissions of our entry file (index.js in this example).

If you’re on a UNIX based system (MacOS, Linux), you can go to your terminal, navigate to the working directory of your project and run:

chmod +x index.js

Again, index.js is our example here.

Link for local development 🔗

As a responsible developer, you want to check if things are in place before shipping. Now is the time to tell your package manager (yarn or npm) to instead of look for your package in the global node_modules, to look at your local directory.

You navigate to the root of your project (the directory package.json is located) and run

yarn link

npm link

When you're done, you can unlink and things will go back to normal.

Now you're free to run your command as much as you want in your system, go back, make changes, and changes will pick up instantly (as we don't have a build step involved yet).

What’s next? 🚀

Talking about build steps, it would be cool to add some type safety, maybe even some transpiling to it right?

For sure that would be rad. We’ll check how to do that on my next post, as well as how to publish it properly to npm, so it can work with npx and yarn create.

In the meanwhile, enjoy your first node executable and let me know down in the comments if you enjoyed this post and is waiting for the sequence! 😉

💌

If you found this post useful, please consider sharing it with your network, that would help me a lot to continue creating more content like this. 😁

Cover photo by Joshua Sortino on Unsplash

Introducing: create-netlify-ts

Atila Fassina — Mon, 31 Aug 2020 11:12:04 +0000

From my perspective, the JAMstack is specially appealing to developers with a frontend background. We can now deploy backend services without needing a deep understanding of server-side architecture, scalability, or even caching.

With that in mind, I have started a new project create-netlify-ts. My point with this project is leverage the self-documenting aspect of TypeScript to lower the barrier for Lambda-Functions even more.

How ❓

Well, by using the self-documenting aspect of TypeScript. On strongly typed code (and luckily with an IDE properly configured), your methods will whisper to you what they need.

But, adding TypeScript to a NodeJS adds a new layer of complexity. Node doesn't get types, so the simplicity of writin a .js file and pushing so it's ✨magically✨ live on Netlify goes away.

In comes netlify-lambda to add a build step to your Netlify Function. I wrote a small tutorial on getting this running.

Deploy Netlify Functions with TypeScript

Atila Fassina ・ Aug 10 '20

#codenewbie #serverless #typescript #tutorial

But even if you know this setup inside-out and backwards, it is a bit annoying to make it every.single.time.

I know that feeling. So I made something.

Faster than instant noodles 🥡

With a simple command in your terminal:

# if you use Yarn
yarn create netlify-ts

# if you use NPM
npx create-netlify-ts

A new project is bootstrapped for you, ready to be deployed on Netlify Functions with another simple command.

The boilerplate is a bit more than the minimum requirements for a working Netlify Function. It can give you some opinionated coding style (very little), and also brings the request and response types, so you can easily write the logic of your service without ever alt-tabbing away from the IDE.

atilafassina / create-netlify-ts

👟 Building Netlify Functions with TypeScript has never been this easy

create-netlify-ts

👟 Building Netlify Functions with TypeScript easily

📦 Package Manager agnostic

🐾 No production footprint

🚀 Ready to deploy

❯_

npm

npx create-netlify-ts

yarn

yarn create netlify-ts

❓ Answer the questions and start coding!

🌲 File tree

 {{ package-name }}
  ├── src
  │   └── {{ your-function-name }}.ts
  ├── package.json
  ├── .babelrc
  ├── .gitignore
  └── netlify.toml

🧳 Installed dependencies

All depdendencies are installed as devDependencies, create-netlify-ts has no footprint on your production code.

Required dependencies

Package Name	Why
netlify-lambda	Adds build-step to Netlify Functions
typescript	The compiler for TypeScript (`tsc`)
@babel/preset-env	Tells Babel which JavaScript syntax to output
@babel/preset-typescript	Teach Babel to use TypeScript compiler
@types/aws-lambda	Request/Response types for AWS Lambdas†

†: Netlify Functions runs on top of AWS-Lambdas

Optional dependencies

Netlify CLI To run Netlify Functions locally
Prettier: with some opinionated configuration

🛫 Flying solo

It‘s a dangerous road out there. Take these:

📹 Write…

View on GitHub

Features ✨

Server Rewrite to the root of your domain
Deploy setup
Optional dependencies to streamline your workflow

Requirements ❗️

There are 2 things which I have not been able to workaround if it is the first time deploying to Netlify for you.

You need to:

Manually create your Netlify account beforehand
If using Netlify CLI you need to link your account with the CLI manually as well

Help wanted 🏆

Create-Netlify-TS is on a very early stage, and I welcome any kind of contribution. For example, you can:

offer feedback on your usage
suggest improvements on existing features and configuration
add more testing coverage
automate some needed tasks (package publishing for example)
anything else you can think of, pop an issue and let's talk!

💌

If you found this project useful, please consider sharing it with your network, that would help me a lot to continue and make improvements. 😁

Deploy Netlify Functions with TypeScript

Atila Fassina — Mon, 10 Aug 2020 10:58:59 +0000

Netlify has recently reached 1 MILLION DEVELOPERS. That’s a lot of happy consumers. To celebrate that, here‘s a step-by-step guide to deploy your very own Netlify Function with TypeScript.

📹 If you prefer, you can have this post as a screencast video.

Please don’t forget to 👍 and 🔔 on your way out if it helped you. It would help me a ton!!! 💕

Also, check the whole source code on github/monster-as-a-service

Configuring `netlify.toml`

Our first needed step is to configure our Netlify deploy. If you prefer, you can set this up on the dashboard as well, but I find the configuring file more straightforward. To each their own, though.

[build]
  command = "yarn build"
  functions = "lambda"

# this is actually a Rewrite
# totally optional, but makes up for
# a much better UX
[[redirects]]
  from = "/"
  to = "/.netlify/functions/index"
  status = 200

Teaching TypeScript to Babel

Now we need to setup our .babelrc so Babel can use the TypeScript compiler (tsc)

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      }
    ]
  ]
}

Create your script tasks

Almost done, run over to your package.json and add the two tasks you’re going to need:

"build": "netlify-lambda build src",
"ts-check": "tsc --noEmit --lib ES2015 ./src/*.ts"

The only mandatory one is build, but I imagine you will want to be able to check all your types at some point. For any production level TypeScript code I’d consider a good practice to check your types on CI pipeline, at the very least.

🚨 That's because Babel will not check your types, simply run the compiler.

Bare bones function with TypeScript

The only thing you need to have a working Netlify Function is to export a handler method from your .js or .ts file. Netlify Functions run AWS-Lambdas under the hood. So, to have your handler typed, you can simply add types/aws-lambda and you’re good to go.

Here’s a useful example:

import { APIGatewayEvent, Context } from 'aws-lambda'

export async function handler (
  event: APIGatewayEvent,
  context: Context
) {

  const { msg } = event.queryStringParameters

  return {
    statusCode: 200,
     headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ msg })
  }
}

In that case, if you hit https://your-lambda.netlify.app?msg=BlackLivesMatter if will return the following json:

{ 
  "msg": "BlackLivesMatter"
}

I recommend you to install netlify-dev globally so you can simulate production environment in your machine. If you have the package, you can run netlify dev and it will boot up a server for you and expose your lambda on https://localhost:8888 by default.

If linked to your Netlify Account, the CLI will also allow you to deploy your project without pushing it to anywhere.

Deploy

Netlify offers you a few ways of deploying your code. The most common is by setting Continuous Deployment by integrating it with your Github, Gitlab, or Bitbucket account.

Another way to do it though, is using Netlify-Dev CLI and hitting netlify deploy.

💌

In case you have found this post useful, please consider sharing it with your network, that would help me a lot to continue sharing posts like this and others. 😁

5 Clever tips on CSS

Atila Fassina — Fri, 07 Aug 2020 04:54:41 +0000

The 5 cleverest CSS tips I have collected in the last few months.

Clamp

Perfect for font-size, for example. Replace most of your media-queries for it with that.

What does it do?

Sets a value between lower and upper bounds. It‘s like setting up min/max values and a relative in between.

Open this pen in a new tab and resize the screen horizontally to see it at work.

Emoji as icons

I’ve come across this and used it most as fun experiment. But recently I have used in small standalone side-projects. Where a just wanted to quick and dirty add an icon for visual feedback.

How to do it?

Set your <span> to be transparent, and then use text-shadow to show the silhouette of the icon.

❗️ Remember to add role="img" and an aria-label to the span

Everything can be a list

Every wrapper element can have a counter, and using pseudo-elements (::before, ::after) it’s quite easy to make them like an order list without being restrained by the list-style property. You can also reset the counter at will and start counting from whichever point you want.

❗️ Only recommended in very specific use-cases, always prefer the semantically correct tag. If you do use this technique, be sure to address a11y concerns!

Object Fit

Defines how an image or a video will fit in its container.

What is it good for?

It is extremely useful to preserve aspect-ratio of images on galleries or other kinds of lists.

Play around with the different values it can receive in this pen.

Second Argument of `text-decoration`

Such a basic well-known property. Though I usually only see it being used with a single value while it actually is a shorthand to 4 others.

line
style
color
thickness

This pen emphasis the usage of the second argument. Which you can, in fact, combine multiple values such as underline overline. Both are style values but they do not override each other if declared together.

💌

In case you have found this post useful, please consider sharing it with your network, that would help me a lot to continue sharing posts like this and others. 😁

What about you? What’s a clever CSS feature that you like to use or have recently found out about? Let me know in the comments!! 🏆

Cover Photo by davisco on Unsplash

User Experience 💜 Developer Experience

Atila Fassina — Wed, 05 Aug 2020 12:15:46 +0000

Not long ago, I tweeted something about Developer Experience. Which had the most traction a tweet of mine has ever had, by far.

// Detect dark theme var iframe = document.getElementById('tweet-1268984709855526913-535'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1268984709855526913&theme=dark" }

It means to me I said something more people were willing say, or, at the very least, resonate with.

So, let me try and expand on that. I look forward to some nice debate in case you disagree, or some feedback in case you just have something to say about it. So reach out and let‘s chat! 🙂

What is Developer Experience?

Let‘s not jump to assumptions that everyone has the same understanding about what Developer Experience (DX) is. Some replies from that tweet made it clear to me that we don‘t.

❗️❗️

If you aren’t keen to dig into this definition, you can skip to the next chapter. Otherwise, let’s make a philosophical exercise right now! 🙇‍♂️🙇‍♀️

❗️❗️

There‘s no definitive definition (pun intended), as Chris Coyer has said more elegantly on his What is Developer Experience (DX)? post:

(DX) is a term with a self-declaring meaning — the experience of developers — but it eludes definition in the sense that people invoke it at different times for different reasons referring to different things.

From the article, we can understand that DX is quite nuanced. Let‘s then briefly point out the different aspects of it:

Companies
when the user-base of such company are actually developers. DX become a synonym of UX
Technologies
when talking about experience provided by different frameworks or libraries
Technology Context
when talking about things around said technologies. Documentation, Guides, Tutorials, ...
Technology Offerings
additions to platform on top of the context. CLI and helpers, for example.
Coding
the experience of typing code. IDE integrations, compile-time checks, hot reloading, ...
User Experience (UX)
Some say one degrades the other, some say one boosts the other.
Onboarding
the time a technology takes to be adopted, size of initial investment.

I will excuse myself and shuffle those cards a bit so I can take some out of the deck to level our discussion. First of all, if developers are the consumers of a product, for constraints of this article: they are the users. So I will take the first 4 bullets and throw them on the User Experience pile.

Now we‘re left with Coding, Onboarding, and the relationship with User Experience (UX).
This third one is a paramount aspect of DX, without it our code will crumble down.

It directly impacts the return over investment of the whole product, and therefore to DX. In other words: you can‘t have a good Developer Experience if you don‘t have a product, and you don‘t have a product if your User Experience can‘t retain users. See the chain reaction?

So what does DX really mean?

Let‘s try and summarize what is Developer Experience with our added constraints:

The experience of developers when interacting with a piece of software. How smooth it is to understand, use, and/or alter the code without impacting User Experience negatively.

User Experience

👉 End-user comes first, always!

As we established before: the end-user is the person who keeps the lights on at any business. They not only pay for the product, but they‘re also the reason the company exists (in the most usual cases, at least). It‘s only fair that such a core aspect of a company mission be front and center to your efforts of evolving the product.

So I would say this is the golden rule of Developer Experience:

Don‘t sacrifice UX for DX!
Don‘t hurt accessibility and semantics for easy styling.
Don‘t increase bundle-size to decrease build time.
Don‘t ditch tests for more frequent releases.

Switching gears

Now that we cleared the way by defending UX as the paramount aspect of our products, we can focus on our users. When it comes to Developer Experience, devs are the users.

I consider mostly 5 topics as the most important towards a good DX:

Readability
Extensibility
Performance
Accessibility
Code coverage

Let’s expand on those!

Readability

By transpiling/compiling our code, we‘re now past the time where we had to hand perform most code optimizations by hand. Things like implicit programming and single-letter variables should live only on production code.

We are now lucky enough that we need to write our code exclusively for the humans who will later read or use it, not for the machines who will run it. Of course, to a certain degree! Be sure to write optimizable code, and always check what‘s running on production! Eluding tree-shake for example is quite an easy trap to fall through, for example.

Linting and code formatters are your allies on this, if your code is consistent there‘s a bigger chance it will be more readable and it will make it easier for good patterns to erupt from it.
The more readable a code is, the more productive and efficient newcomers will feel. This kind of perception allows for more confidence in tackling tasks and even offering input for improvements.
I‘d also go on a limb and say: if the code is welcoming, chances are the team also is.

Extensibility

I believe all of us agree that granularity and abstractions are useful tools for creating code that scales. As frontend developers, we all fell in love with modules, arrived in ES2015, or even CommonJS sometime before. And probably have been guilty of creating those 30-line files. So concise. Import everywhere and let the bundler tree-shake them later.

Sorry, that was sarcasm.

Abstractions and modularization are good, I'm not here to deny that. Though, as most good things in life, overuse takes a toll.

Those tiny modules give us the impression our code is highly reusable. But as time goes by, new use-cases emerge. And since the abstraction is already decoupled from business rules, it‘s logical to just create a new use-case inside our abstraction. A new parameter, a new conditional. And our tiny module grows. Or worse: our application grows around it, twisting and flexing to accommodate into the abstraction proper usage. This is an allegory of the Sunk Cost Fallacy and also the foundation of AHA Programming methodology.

On her article The Wrong Abstraction, Sandi Metz describes really well how a wrong abstraction can cost more for to your code maintenance than a little bit of duplication. Don‘t abstract too soon. Allow some duplicated code to live for a while until the patterns emerge. No need to take my word for it, though, Kent C Dodds said it better on his AHA Programming post:

After you've got a few places where that code is running, the commonalities will scream at you for abstraction and you'll be in the right frame of mind to provide that abstraction.

For a good Developer Experience, code needs to be reusable, easily reusable. Plus, I don‘t need to remind you less code is faster than any code, right? Skip those conditionals and extra parameters by creating the right kind of abstraction.

Performance and Accessibility

These two don‘t add much to Developer Experience in usual cases, but because most of us are privileged enough, it‘s easy to forget it is not a norm. And that‘s when we start overlooking the compound of cases that add up to a terrible User Experience.

Remember our golden rule? There‘s not DX without good UX.

So, set your Accessibility tests early, define a Performance Budget sooner than later. This way, it‘s possible to ship better DX with confidence of not messing up the UX as a side-effect.

Coverage

People need to confidently be able to tweak functioning parts of the code, refactor, and improve them without fear of breaking the application in production. We‘re just as good developers as the tests we write. Everybody write bugs all the time, some get caught at compile-time, some on build, others in integration, and worst case scenario: in production.

There are multiple ways of assuring good coverage. The only footgun is trusting the 100% Coverage mark on your library reports. Testing units, is not testing behavior and user-interaction.

// Detect dark theme var iframe = document.getElementById('tweet-807626710350839808-947'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=807626710350839808&theme=dark" }

To be more specific, test what user behavior. No impossible states and no forcing weird edge-cases that won‘t really exist. Focus on how your users will interact and the bits and pieces of your code will integrate with each other. Another very good reference is the Testing Trophy (from Write Tests):

Making things work… well

With proper tests and benchmarks, developers are allowed to raise the bar on the MVP (Minimum Viable Product) of whichever thing they are coding. This happens because tests will assure nothing gets left out. And benchmarks will provide actionable insight on degrading quality of the UX.

Conclusion

With that approach, the fallacy that Developer Experience deviates focus from User Experience and treat them as opposing forces is not only moot, but plain wrong. Better DX paves the way to actually worry about things that matter the most to the end-users.

If you liked this article, please consider sharing it with your network. I‘d also love to hear what you have to say about it down in the comments or on twitter.

Share 💌

In case you have found this post useful, please consider sharing it with your network, that would help me a lot to continue sharing posts like this and others. 😁

References

Thanks

Thank you very much to Eva Dee for reviewing this post and giving the final nudge to actually publishing it! 🚀

Cover photo by Pascal Habermann on Unsplash

Searching topic suggestions for TypeScript screencast

Atila Fassina — Fri, 29 May 2020 11:11:46 +0000

I have a Youtube channel called Scope Leak.

There you will find 5 minutes (aprox) screencast explaining concepts and patterns on web development. I have enjoyed very much recording TypeScript short tutorials for folks from beginner to intermediate level of acquaintance with the language.

And now I want to know from you.
What would like to see next?

// Detect dark theme var iframe = document.getElementById('tweet-1266284802275065861-821'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1266284802275065861&theme=dark" }

As I said on the tweet, any idea will take. If it’s an advanced concept, I will try my best to make it approachable to all levels! If it’s a broad topic, I will take liberty on splitting on multiple videos. I personally find 5-10min videos nicer to watch and that’s what I'm going for on Scope Leak, still open to suggestions though.

❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓
If you are/were getting into TypeScript, what kind of concept/topic would you like to have a quick walkthough on?
❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓

My work thus far:

TypeScript Generics in under 5 minutes
TypeScript Utility Types: Part #1
TypeScript Utility Types: Part #2

📺
You can also binge watch them in the Simplified TypeScript playlist if that’s your thing

Getting started with TypeScript

Starting with TypeScript

Atila Fassina ・ May 17 '20

#typescript #tutorial #beginners

Needless to say, you will help me publishing more of these if you subscribe on youtube, twitter, and/or here on dev.to

Cover Photo by Daniel Kuruvilla on Unsplash

Performance Browser Hints

Atila Fassina — Tue, 19 May 2020 20:32:25 +0000

“Time cannot be bought. But time can be saved.”

This quote may be too deep for a web development post, but it exemplifies well what performance means to User Experience (UX). The most important performance metrics revolve around the first fractions of second between the request of your application and the user interacting with it.

People have built profitable businesses shaving off those little milliseconds. Others have spent considerable amount of time studying the correlation between that loading interval and direct conversions.

It’s not a rumor the position your website shows in Google’s (and other search engines as well) Search Results Page (SERP) is influenced by performance.

Performance not only determines a big portion of how pleasant the UX will be, but also if you’ll even get to pitch your product to that specific user. It also intertwines with accessibility, allowing limited connections to have a seamless experience is as much a business as it is an ethical concern.

Besides optimizing our own code for performance, there are a couple of low hanging fruits which allow browsers to help us on the endeavor of providing fast and smooth navigation.

DNS-Prefetch

Prefetching the DNS means advising your browser a connection to that server will be sought. Therefore, the browser can antecipate the DNS lookup. This decreases the latency between server connections, which are often cause of poor perceived performance in websites.

<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />

⚠️ Needless to say it should only be used for third-party requests. Your own domain will have already been resolved by the time this hint is read.

Preconnect

Adding rel="preconnect" to your <link> will advise the browser you intend to make request towards the domain in its href and you would like the browser to establish a connection with that server as soon as possible. While prefetch only accelerates the DNS lookup, preconnect has a more significant impact:

DNS lookup (just like prefetch)
TCP connection establishment
TLS handshake (for https requests)

It’s worth noting that establishing multiple preconnections may and will cause a bottleneck, degrading performance instead of improving it. Therefore preconnect is only recommended to use on the most important resource. Prefetch, on the other hand, can be used more freely and combining the two can only help.

<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
<link rel="preconnect" href="https://fonts.gstatic.com/" />

Blocking Chained Requests

Starting connections early on can only go so far. Some resources depend on others to be useful, like a font depends on a stylesheet. In the above example (fonts.gstatic domain), connection starts as early as possible. But it still can present a considerable risk and bottleneck to performance.

Most fonts are imported through passing a source in @fontface rule, inside your CSS stylesheet. See the problem? If your CSS is an external resource, it needs to be requested, loaded, and parsed in order to even start fetching your font.

And the issue goes on!

To save users from poorly implemented interfaces where resources are fetched recklessly, the browser does not fetch the font as soon as it finds the @fontface rule (which is usually on top). No, the browser waits until at least one element in the DOM requires that font. And then, it blocks the entire rendering. Fetches the font, loads the font, parses the font, applies the styles. Now the browser can continue to build the rest of the DOM.

Luckily, there is a way of telling the browser beforehand such a disruptive resource will be required.

Preload

This hint declares a fetch request within the HTML. In the Web font example above, the font resource could be linked to directly to the HTML. Eliminating the request chain.

⚠️ Limit the resources to be preloaded to a bare minimum to avoid performance bottlenecks.

<link
  rel="preload"
  href="fonts/webfont.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Preload requires a little bit more configuration than preconnect and dns-prefetch. For a resource to be properly loaded, it needs to have a MIME/TYPE, and the link tag accepts another attribute for indicating a request will be cross-origin.

Two important things to remember:

Font requests are always cross-origin, regardless where they’re hosted
For a cross-origin request to work, you also need to have CORS already configured

It is also possible to pass a media attribute for responsive preloading.

<link rel="preload" href="small.png" as="image" media="(max-width: 600px)" />
<link rel="preload" href="big.png" as="image" media="(min-width: 601px)" />

Managing on the server-side

You can pass these and other <link> attributes as value of a HTTP Response Header as well. The Link field exists precisely for this and can be passed multiple values separated by a semi-colon.

Link: <https://one.example.com>; rel="dns-prefetch", <https://two.example.com>; rel="dns-prefetch", <https://three.example.com>; rel="preconnect"

Which other low hanging fruits are there in web performance that you would also recommend?

Cover photo by Muhd Asyraaf on Unsplash

Starting with TypeScript

Atila Fassina — Sun, 17 May 2020 13:11:48 +0000

It all started with a conversation between my friend Narendran and I. Then, it became a twitter thread🧵.

// Detect dark theme var iframe = document.getElementById('tweet-1260885187828695041-891'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1260885187828695041&theme=dark" }

Now, it’s time to put code out to back those points. If you’ve been interested in TypeScript but haven’t found the time to deep your toes into the water, or you simply didn’t figure it out how to start, or even so: it’s hard to convince your teammates of the tradeoffs. This post is for you!!

In 4 easy-to-follow tips, I’ll remove all blockers you may have for adopting TypeScript. I’ll help you get confident with it and take out the fear of getting started. Ready? Don’t blink or you might miss it!! 😎

1. TypeScript without TypeScript

The title sounds controversial, I wanted to hook you up (🎣). It’s actually quite straightforward and simple.

TypeScript is compiled with tsc (TypeScript Compiler), and the CLI accepts a few configurations. One of them enables tsc to compile also JavaScript, that’s extremely useful for mixed codebases (third party stuff, migration stuff, etc). But it has an additional benefit which I don’t see getting much attention.

When you allow your TypeScript Compiler to read/parse your JavaScript code, it also checks its types.

But, how? 🦆

The answer for that is Duck Typing, you can skip this section if you’re familiar with the term.

If it walks like duck, talks like a duck, quacks like a duck. Then it must be a duck!

TypeScript compiler is able to infer a great amount of types straight from your code, saving you the time to annotate them. Those are the types your JavaScript can be checked against. So, it’s not as complete as full-fledged TypeScript, but it gives you a good start to progressively adopt the language is your familiarity and comfort grow.

Adding the proper config

I believe it goes without saying that you still need to have typescript in your machine for this approach to work. Even if you’re not using the .ts(x) extensions, the compiler still needs to come from somewhere.

Create in the root of your project a tsconfig.json. The bare minimum config you need to have is:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es2019", "dom"]
  }
}

Copy paste this and you’re good to go for some client-side code.

❗️Note:
I recommend using it with parcel, it’s a zero-config, very fast bundler. It takes a bunch of the annoying best practices automation from your hands and allow you to focus on what matters: your app. Perfect for small projects (and perhaps even some big ones).

2. `any` can be a friend

The first commandment of TypeScript is:

Thou shall not use of any

But in all honesty, I don’t really think this applies to beginners (or even in some advanced cases. Let’s save that for a future post, though).

Why is any so terrible?

any is a type value, as you may have assumed: it says that any type value can be assigned to that given key. So, whenever you use any, you’re buying your way out of TypeScript. No more warnings, everything goes. And that’s bad if you look at the specific unit your working on, but it’s even worse if you look at the broad perspective.

An application is as reliable as its least reliable piece. So, a single use of any can compromise type-safety for your entire app. Be aware of that.

So, why the heck should I use it?

For once: can compromise. For numerous possible reasons, sometimes we are confronted with types that are really (really!) hard to declare. These types will eat your time and motivation up if you’re just starting. No one enjoys having a broken build for hours when you know your code works. In these cases, slap an any there, get your task done and come back later with a fresh head.

In a nutshell: use any, but accepts it’s a technical debt for any (pun intended) TypeScript codebase, and be sure to proper evaluate the risk before shipping code to production like that.

3. Pick only the right battles

This section is actually a follow-up from the previous. But integration is a beast of its own (in my opinion) when it comes to TypeScript. Strong-typing code you have no control over is specially tough. Nowadays, many many libraries and frameworks are migrating (or already have) their core to TypeScript. Which is awesome, simply by adding TS to your project you get autocompletion and self-documenting as a big welcome gift.

// Detect dark theme var iframe = document.getElementById('tweet-1260888049958838272-474'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1260888049958838272&theme=dark" }

But in other cases, you may want to refrain from that and strong-type your own code first. Which also smoothly brings us to the last point.

4. Community has your back

As I mentioned above, many frameworks and libraries have migrated their code to TypeScript. What about the ones which didn’t?

No worries, you won’t need to single-handedly strong-type your dependencies in order to migrate fully into TypeScript. 😅

DefinitelyTyped is an open-source repository maintained by the community with virtually every type you may need for other open-sourced projects. You’re a few npm searches away from strong-typing your dependencies.

Seriously! Community 👏 has 👏 your 👏 back!!

5. Bonus

If you want another gentle nudge into getting started with TypeScript, Scope Leak has a playlist called Simplified TypeScript where I take more complex aspects of TypeScript and simplify them in byte-sized videos for you to hit the ground running!

Really, 5 minutes tops, give it a try!! 🔥

I’m eager for feedback and suggestions for the next videos!!

Wrapping up

Which other tips and tricks would suggest someone who’s about to adopt TypeScript in either a new or existing project? Have I forgot anything?

Did you use any of the tips above? How did it work for you?

Let me know in the comments or reach out on twitter @AtilaFassina

Cover picture by James Lee

Array Cheatsheet

Atila Fassina — Wed, 13 May 2020 18:57:26 +0000

A few days ago I came across a very nice post from Emma Bostian, a RegExp Cheatsheet.

And that post looked so useful at the time that it got me inspired to do something similar. So I picked arrays. Here is a small selection of methods which I believe if you keep them at hand, you’ll be a more productive JavaScript developer.

flat
flatMap
every
some
reduceRight
unshift
slice
sort
from
copyWithin
lastIndexOf
find
findIndex
Breaking out of Loops

flat

Reduce the number of layers in an array

const bigArray = [[22], [33, 55, [23, 11], 50], 100, 109]

const oneLess = bigArray.flat()
// [22, 33, 55, [23, 11], 50, 100, 109]

const allGone = bigArray.flat(Infinity)
// [22, 33, 55, 23, 11, 50, 100, 109]

It accepts one param depth: number, which specifies the number of layers you to remove. Default is 1.

⚡️ Check this video on Array.flat() in less than a minute!

flatMap

Opposed to the name suggests, flatMap() is the same as map().flat(1), not the other way around.

🚨 Notice the 1 to flat().
flatMap always runs with a depth of 1.

Because flatMap removes empty arrays, the output array does not need to have the same length as the original.

const mutants = ['Wolverine', 'Storm', 'Jubilee', 'Cyclops']

// React-like environment. JSX 👇
const App = () => (
  <div>
    {mutants.flatMap((mutant, index) => [
      ...(index > 0 ? [', '] : []),
      <span>{mutant}</span>,
    ])}
  </div>
)

// Wolverine, Storm, Jubilee, Cyclops

⚡️ Check this video on Array.flatMap() in less than a minute!

every

Receives a callback in the very same way as the more popular map, filter. Though .every() outputs a boolean stating if every item in the iterated array matches the condition in the callback.

const menu = {
    type: '🍔',
    quantity: 'big',
  },
  {
    type: '🍕',
    quantity: 'big',
  },
  {
    type: '🍜',
    quantity: 'medium',
  },
]

const hasOnlyBigMeals = menu.every(({ quantity }) => quantity === 'big')

// false (🍜 is 'medium')

some

Receives a callback in the very same way as the more popular map, filter (and every right above). In the same way as every, it outputs a boolean describing the matched condition in the callback. Though, some returns true if at least one item in the array matches the condition.

const menu = {
    type: '🍔',
    price: 10.9,
  },
  {
    type: '🍕',
    price: 3.9,
  },
  {
    type: '🍜',
    price: 8.9,
  },
]

const hasPricey = menu.some(({ price }) => price > 10)

// true (🍔 is above 10)

⚡️ Want to know more about checking your array for content? Watch this quick video about some, every, and includes!

reduceRight

This one behaves exactly like the more popular .reduce() with the only exception that it runs in reverse other. Reduce-RIGHT. Get it? 😅

const dogs = [
  'corgi',
  'beagle',
  'schnauzer'
]

dogs.reduceRight((acc, item, index, arr) => {
  return `${acc} ${item}${index === 0 ? ' 🦴' : ', '}`
}, '')

// schnauzer,  beagle,  corgi 🦴

unshift

Adds an element to the beginning of the array.

const xmen = ['Cyclops', 'Jean Grey', 'Storm', 'Beast']
xmen.unshift('Wolverine')

// ['Wolverine', 'Cyclops', 'Jean Grey', 'Storm', 'Beast']

slice

Returns a shallow copy of the passed array from start (defaults to first element) to end (defaults to last element).

const xmen = [
  'Jubilee',
  'Kitty Pride',
  'Storm'
]

xmen.slice(0,2)
// ['Jubilee', 'Kitty Pride']

❗Pro-tip:
very useful for using mutating methods with Functional Programming paradigms

sort

arranges the items in an array at a specific order. Default is ascending. It accepts a compare function as callback, first and second element are the respective params.

🚨 Careful!
elements will be coerced into string

let numbers = [8, 1, 11, 4]

numbers.sort()
//['1', '11', '4', '8']

let numbersAgain = [8, 1, 11, 4]

numbersAgain.sort((a, b) => a - b)
// [1, 4, 8, 11]

numbersAgain.sort((a, b) => b - a)
// [11, 8, 4, 1]

If compare function returns

less than 0: a goes before b
0: everything stays as is
more than 0: a goes after b

from

creates a new, shallow-copied Array instance from an array-like or iterable.

const object = {
  0: 'a'
  1: 'b'
  2: 'c'
  length: 3 // it needs to have length prop here
}

Array.from(object)

// ['a', 'b', 'c']

copyWithin

copies part of an array to the another location inside the same array without altering its length.

const array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']

array.copyWithin(1,4,7)
// ['a', 'e', 'f','g', 'e', 'f', 'g', 'h']

Copy to position 1 elements from index 4 to 7.

lastIndexOf

returns the last possible index of an item in an array.

const xmen = ['J.Madrox', 'Jubilee', 'J.Madrox', 'Wolverine', 'J.Madrox']

xmen.lastIndexOf('J.Madrox')
// 4

find

scans the array and returns the first element which satisfies the callback.


const number = [55, 65, 39, 44]
const multiple3 = number.find(item => item % 3 === 0)
// 39

find Index

scans the array and returns the index of the first element which satisfies the callback.


const number = [55, 65, 39, 44]
const multiple3 = number.findIndex(item => item % 3 === 0)
// 2

Breakout of loops

it isn’t exactly trivial to stop a loop. In order to accomplish that, you need to mutate the array upon which the loop is happening, but you wouldn’t want to mutate when dealing with immutable data (like with the functional methods: map, reduce, filter, flat, flatMap, ...).

Remember slice? Slice returns a subarray of the one it’s passed. We do that before we start, this means loop’s running on a shallow copy of the array.

To break out then, it’s just about using .splice(). Splice removes or
replace elements in an array.

const bigArray = new Array(100).fill(1)

const contentSum = bigArray
  .slice(0)
  .reduce((acc, item, index, array) => {
    if (index === 10) {
      array.splice(0)
    }

    console.log(index)
    return index
  }, 0)

// 10

What other methods would include in this list? Was there one or a few that you had never came across before? Let me know in the comments!!

Also, I hope you have found that useful. Please consider sharing to your network if you did, it would mean a lot to me! If you have any feedback to me regarding this or other posts of mine, feel free to reach out in the comments or on twitter!

Digital Garden

Atila Fassina — Tue, 05 May 2020 00:00:00 +0000

I have decided to create screencasts. My goal is to eventually get good enough on this so I can create a couple of courses, help people level up their career, and learn in public.

So, it‘s only natural I start following up on people already good at it. Recently I started consuming more content from Nicolas Schürmann, Simon Vrachliotis, Tomasz Łakomy, Xiaoru "Leo" Li, and Joel Hooks. Here's why you should follow each one of them:

Nicolas: great guy, motivated, always helpful. He's the one who got me into this whole screencast thing (more on that on a dedicated post, there's much appreciation overdue for this guy)
Simon: This dude is a constant wave of positivity and good mood. He's as experienced as he's motivated, always has something nice to say but never hold back on his opinions.
Tomasz: A prolific content producer. He's pragmatic and straight to the point without dropping his sharp sense of humour. His videos play a big influential role on my own. Also, a genuine approachable nice guy ready to help.
Leo: Another great content producer. Very technical and always eager to help!

And, lastly JHooks, who has me inspired in start writing more. Yesterday I was watching a stream from Party-Corgi on Twitch and when he was asked about the concept of Digital Gardens it all made sense to me and I was hooked by it (pardon the pun, irresistible).

🌿

Digital Garden is a concept of writing for yourself. No need for extra preparation, you write your mind, you let it out. People will find it? Maybe. People will like it? Someone will. People will hate it? Who cares?!

🧠💪

Allow me to add another metaphor for the Gardening one: writing is an exercise for the mind. No exercise is bad, so the mere gesture of writing stuff is already beneficial, at least for yourself. At the very least you’ll get better at expressing your ideas overtime.

And the best part is, there’s no telling what that seed will grow towards. Maybe someone will find it later and like it and that can spark another idea that will help that person in something, like Digital Gardens did for me.

And that’s it. I will be writing more from now on.

📹

While I have your attention, allow me to plug in my Youtube Channel: Scope Leak. Built with the very same concept of a Digital Garden, byte-sized tutorials for you to level up as a Web Developer. Check this ongoing series on Arrays for Efficient Developers. Check out the intro video:

Objects for mapping

Atila Fassina — Sun, 18 Aug 2019 00:00:00 +0000

Mapping key to value attributes has been done the same way in JavaScript for basically its entire existence. Chances are you either wrote or read it more times that you can count:

let dictionary = {
  id: 'foo',
  url: 'bar',
  last_update: new Date()
}

Caveats of Objects

Also, chances are more than once you had to transform that into an array to get around. You see, objects aren't really great for mapping variables because (1) they aren't iterables. Besides the obvious difficulty of iterating through an object (Object.entries(), Object.keys(), Object.values()), there is also an aggregated side effect of they not being iterable, you cannot check the size or length of an object.

Another important point in some use-cases is that the developer is not able to trust the order in which the object will store its keys (at least for numeric keys, where behavior can change depending on engine).

Interlude: Weakmap

A Weakmap holds a key/value reference, but holds a weak reference between them. The point of this, is to allow it to be more easily garbage collected, so if there's no other reference to the key, it can be collected. This means that there's no method to retrieve size nor iterate through a Weakmap.

Also, it carries interesting requirements: the key cannot be of a primitive type, as a matter of fact, it needs to be an object. Though it holds a possible advantage against using an Object as a map: it holds the order of its keys.

⚠️ if you plan on using a Weakmap, be aware that the value of length will always be 0.

Browser compatibility

Map

Differently from object, a map object preserves the insertion order of its keys. And as a counter from both Weakmap which only accepts object as key, and object which only accepts string or number, any primitive type can be a key in a map.

Maps are not only iterables, but enumerables.

let myMap = new Map([['foo', 'bar'], [0, 22]])

let iterator = myMap.entries()

console.log(iterator.next().value) // ['foo', 'bar']
console.log(iterator.next().value) // [0, 22]

console.log(myMap.size()) // 2

Browser compatibility

DEV Community: Atila Fassina

Gradient Texts

Background-Clip

Adding some animation

Gradient borders

More CSS tips?

5 Clever tips on CSS

Atila Fassina ・ Aug 7 '20

Your first NodeJS Executable

Configuring package.json ⚙️

Instruct the terminal 🤖

Permission to execute 💂‍♀️

Link for local development 🔗

What’s next? 🚀

💌

Introducing: create-netlify-ts

How ❓

Deploy Netlify Functions with TypeScript

Atila Fassina ・ Aug 10 '20

Faster than instant noodles 🥡

atilafassina / create-netlify-ts

👟 Building Netlify Functions with TypeScript has never been this easy

create-netlify-ts

❯_

npm

yarn

🌲 File tree

🧳 Installed dependencies

Required dependencies

Optional dependencies

🛫 Flying solo

Features ✨

Requirements ❗️

Help wanted 🏆

💌

Deploy Netlify Functions with TypeScript

Configuring netlify.toml

Teaching TypeScript to Babel

Create your script tasks

Bare bones function with TypeScript

Deploy

💌

5 Clever tips on CSS

Clamp

What does it do?

Emoji as icons

How to do it?

Everything can be a list

Object Fit

What is it good for?

Second Argument of text-decoration

💌

User Experience 💜 Developer Experience

What is Developer Experience?

So what does DX really mean?

User Experience

Switching gears

Readability

Extensibility

Performance and Accessibility

Coverage

Making things work… well

Conclusion

Share 💌

References

Thanks

Searching topic suggestions for TypeScript screencast

Starting with TypeScript

Atila Fassina ・ May 17 '20

Performance Browser Hints

DNS-Prefetch

Preconnect

Blocking Chained Requests

Preload

Managing on the server-side

Starting with TypeScript

1. TypeScript without TypeScript

But, how? 🦆

Adding the proper config

2. any can be a friend

Configuring `package.json` ⚙️

Configuring `netlify.toml`

Second Argument of `text-decoration`

2. `any` can be a friend