Design and development environment

Hi! Thanks for stopping by. This is my personal space on the web for building and testing web applications and pages. Currently, I'm primarily focused on using these technologies for my web projects:

React SVG Icon

Gatsby, a super fast framework based on React.

Sass SVG Icon

Sass, probably the most popular CSS preprocessor.

Netlify

Netlify for hosting and continuous Git deployment.

Why Gatsby?

Web performance is very important for overall user experience, and sites created with this static-site generator are immensely fast. Instead of waiting for browsers to render the content when a user clicks on a link or accesses an HTML file, it updates the content with JavaScript, which makes it really performant.

For example, this page performs at almost 100 speed points every time I run Lighthouse, Google's tool for checking the quality of web pages. It also shows great results in terms of SEO and best practices.

Gatsby is well optimized for images and APIs and uses popular technologies such as Markdown, Webpack, and GraphQL. Its open-source, free for commercial or personal use, has a nice documentation and everyone familiar with React can start using it rather easy.


Why Sass?

Sass is a very nice extension of CSS, and by using it in this project I wanted to get more familiar with variables, nested rules, and mixins. In the end, I used only variables for declaring colors. It can be much more useful in bigger projects, as it allows design patterns to be easily shared across the project.

In the future, I want to dive deeper into another interesting options for styling components like CSS Modules or CSS-in-JS.


Why Netlify?

Netlify is a great choice for hosting web pages and applications, mainly for this reason: as your project lives in Git repository, by pushing changes to it you automatically updates your project. As stated in Modern Web Development on the JAMstack (available for free):


Ideally, your automated build process will do the following:

Listen for notifications of changes to your Git repository

Prepare the build environment and fetch any required dependencies

Fetch remote data from APIs (as needed)

Build the site and prepare assets

Publish the final site to a CDN

This hosting provider has so many nice features that I just started exploring like serverless Lambda functions, user-authentication, free form submissions, and much more. This is really an amazing time to be a developer!

This website is open-source and publicly available in this GitHub repository.