Hello folks 👋
This is me trying the new Sketch Block from the Gutenberg Block Experiments project.
Hello folks 👋
This is me trying the new Sketch Block from the Gutenberg Block Experiments project.
I had a phone call yesterday with someone I admire. We were speaking about various matters. Then the discussion came down to my career and how I got to be where I am. We were discussing the significance of a college degree to a successful career in software engineering.
I understand many factors lead to success, and it is wrong to say this is the only way or another path leads nowhere. A lot of the time, success can be attributed to just “being in the right place at the right time.”
However, I remembered one thing that is crucial to getting anywhere with coding or any job that requires a laptop, which is:
Sitting in front of a computer, staring at a screen for 4+ hours a day, every day, for the rest of your life.
This might be scary for some, and understandably so. At the same time, it could be fascinating to someone else.
I was listening to an audiobook by James Clear called Atomic Habits. In this, he says pretty much the same thing. He narrates:
He goes on to say, “The greatest threat to success is not failure but boredom.” Because habits become less interesting and less satisfying as they become routine.
Anyone can work hard when they feel motivated, but what makes the difference here is to continue when it is no longer interesting.
Like James says in his book:
While it is certainly true for programming, it is also true for pretty much anything we want in life that has meaning, purpose, and value.
Having said that, there are ways and means to make your job interesting. But that would be a different post altogether.
I will be completing 2 years at rtCamp soon 🎉 and here’s a post on my life here.(more…)
You would have heard of LAMP stack or MEAN stack or even MERN stack. So, what is this new term?
Gatsby is part of the larger umbrella called JAMstack. What does it mean and how is it going to change the way we develop sites?
JAM stands for:
Markup – Content mark up is prebuilt when deploying. This is where Static Site Generators like Gatsby come in.
For a site to be a JAMstack site, there should be no tight coupling between client and server like in a typical WordPress site.
Gatsby is a blazing-fast static site generator which uses React for rendering the markup. It is rising in popularity now and developers, both experienced and newcomers love the experience it brings. To be specific, Gatsby has a phenomenal Developer Experience (DX) and even better User Experience (UX) with its instant load times and more.
Big businesses have understood the benefits of Gatsby and are using it to power their front-ends. For instance, the React library’s docs are powered by Gatsby! There must be a reason why React themselves chose Gatsby for their documentation site. Let’s continue exploring why.
One of the cool things about Gatsby is that it pre-builds all your pages at deploy time. This means it fetches your raw data via REST API, GraphQL or file system and uses your JSX templates to create static files. So, your generated /public folder will contain HTML, CSS and JS files ready to be served. This happens due to Server-Side Rendering (SSR) at build time, which increases the performance of your site by order of magnitudes.
Thanks to many under the hood optimizations with Gatsby such as route-based code-splitting and prefetching, you are able to get great speeds for your site. Throw in a CDN, and you are all set for the ultimate speed optimization.
Since Gatsby serves only static files, it is extremely light on resources. You can literally get free hosting for your websites. Yes, you read that right. A few hosting providers like Netflify offer free hosting for static sites and thanks to Gatsby, you can leverage that. As a bonus, you can make use of Netlify Forms and Netlify Functions for free up to a certain limit.
A company was able to bring their server costs from $5000/month to $5/month, thanks to Gatsby. Don’t believe me? Take a look here.
Every other day, you hear news about a WordPress site being hacked. Some webmasters unknowingly set their credentials as ‘admin’ and ‘password123’, making them sitting targets for the bad folks.
What about with Gatsby? Well, since you do not have a live connection to the server and database, there is little a hacker can do. While you need to be mindful of keeping all doors locked, if someone with malicious intent does get in, recompiling the site with Gatsby and restoring it will be swift.
The early versions of React may have put off designers and traditional developers, but Gatsby (which uses React) is very welcoming even to newcomers. For example, their tutorials are very much suited to those getting familiar with web development.
GraphQL is the new hot topic in APIs and is poised to replace REST API. It is essentially a way to create a schema of your backend data in a graph-like format. It will allow you to query data by only asking for the properties that you need (QL stands for query language). This is in contrast to REST API which returns all fields related to an endpoint. GraphQL will have a single endpoint and you can query data all sorts of ways – even from multiple objects or tables.
The advantage with Gatsby is that you don’t have to learn how to set up a GraphQL backend. For instance, if you use a source plugin (we’ll get to it soon) such as
gatsby-source-wordpress, it will convert your WordPress REST API endpoints to a stitched GraphQL schema from which you can query for data.
You will be able to get up to speed with GraphQL in no time – thanks to the GraphQL browser-based IDE that you get when you run
gatsby develop on your development environment.
Gatsby uses Reach Router under the hood for routing between pages. This has support for accessibility (a11y) where the tab index gets reset to the top of the page after clicking a link.
“Reach Router provides out-of-the-box focus management so your apps are significantly more accessible without you breaking a sweat.”
Moreover, it has a cool check for the alt attribute for <img> tags. It essentially forces you to add alternate text when your image may not load or when a visually-impaired person is unable to see the image.
One of the big advantages I saw when building sites with Gatsby is that you get all the benefits of PWAs out of the box. Gatsby does the heavy-lifting for you and has support for offline support and a lot more out of the box.
One of the main components to good SEO is good performance. Thanks to the nimble Gatsby, you get great Search Engine Optimization which almost always scores 100 on Google’s Lighthouse audits. Your end-users care a lot about SEO and you can now boast about it and tell them to just write good content.
Hello, Progressive Enhancement!
So, Gatsby has the performance of a static site and the power of a React app.
Hopefully, you are now convinced about using Gatsby for your next project. So, you ask yourself, “How do I get started?”.
Gatsby is synonymous with speed, and getting started is speedy as well. The default starter will get you up and running in a few minutes.
Below are the steps you need, assuming you have node and npm installed.
# Install the Gatsby CLI. npm install -g gatsby-cli # Create a new site. gatsby new gatsby-site # Change directories into site folder. cd gatsby-site # Start development server. gatsby develop
In addition to that, there are starters for pretty much any feature combination you can think of. Be it Bootstrap, AMP, any of your favorite CMSs or even a simple MDX blog – the awesome open-source developers have you covered. Head over to the Gatsby Starters page and choose your favorite to get up and running in no time.
If you don’t want to go the starter route and choose to go with a bare minimum setup – perhaps you want full control – what do you do to fetch your source data?
You’re in luck because Gatsby has made it simple for authors to write their own source plugins in addition to the existing source plugins. A source plugin is an npm module that allows you to turn your data into a GraphQL schema from which you can fetch data at build time. For example, the plugin
gatsby-source-graphql allows you to select any remote GraphQL endpoint and will create a stitched local schema from it. You can then query from it when coding your Gatsby site.
Another example is
gatsby-source-contentful. These allow you to fetch data from a headless CMS like WordPress or Contentful and convert them to a queryable GraphQL schema respectively.
We just saw what source plugins do. A source plugin is a subset of Gatsby plugins. These range from styling plugins to analytics and more. At the time of writing, there are 753 Gatsby plugins on the Gatsby site and this number is growing at a rapid pace.
A popular plugin that comes with most starters is
gatsby-plugin-offline. This adds offline support to your Gatsby site.
Another is the
gatsby-plugin-react-helmet and allows you to add SEO capabilities to your site with custom <meta> tags and more markup within your site’s <head> section.
Yet another example would be
gatsby-image which is pretty awesome. It allows you to query images using GraphQL and displays them with a placeholder when the image is being loaded (with the help of a couple other plugins). It also has a cool traced SVG effect which will show up an SVG of the image while it is being loaded. Two more examples would be
gatsby-plugin-sass which allow you to add Google Analytics tracking and support for SASS styles respectively.
Gatsby introduced Themes in late 2018 and this has opened a whole new way of developing Gatsby sites. You can abstract away data sourcing, transformation and page creation, and concentrate only on content.
You can further have multiple themes for your Blog, Docs and eCommerce sections and tie them up with common design system tokens. You can extend themes with child themes. The possibilities are virtually endless.
Themes are currently in experimental stage and will be out to production soon. I’m working on a project with educator Zac Gordon and a few others where we are porting popular WordPress themes over to Gatsby themes. We call it GatsbyWPThemes. The first project, Twenty Nineteen Gatsby Theme was released recently, and I was the lead developer. Check it out here.
The answer would be no. As an avid fan Gatsby, it’s a difficult question but as developers we have to sell the best solution to the client.
Here are some instances I wouldn’t generally reach out to Gatsby and their alternatives:
Let’s say you want an eCommerce solution where products and other information are updated frequently. Gatsby has to rebuild the whole site every time you make a change for it to be reflected and this can be a huge bummer. The team is working on
incremental builds and when it comes out, it will be a game-changer to devs like myself.
For the above problem, you would need Server-Side Rendering at run time since it has better performance and SEO. Since Gatsby does SSR only at build time, I would reach out to a frameworld like Next.js. Next is better when you have a complex problem which requires React SSR. In short, you are better off using Gatsby for websites and Next.js for web apps.
You may have to opt out of Gatsby when your team is not keen about learning and using a library like React. Although I love React and have been using it passionately, there are instances where it may not solve your problem.
Here are some options if you are looking for other Static Site Generators. If the developers are cool with VueJS, then Gridsome is something new which you can check out. Otherwise, you can look at Hugo or Jekyll.
Gatsby has won the hearts of many a developer and my prediction is that it will continue to set the trend for fast, secure, scalable and indexable websites. I encourage you to hop onto the bandwagon and see if it’s worth all the hype!
Hint: you will have some fun times ahead.
Something that I read about early on in my career was emotional intelligence. It was trending around the time I got into the “real world” and I took the opportunity to get familiar with that concept. As someone who was more fascinated by Maths and working on “hard things”, the knowledge about emotions and empathy aka “soft skills” was a breath of fresh air. I am no expert on this topic. However, it did help me navigate some of the challenges of work and life.(more…)
I was working on a website to change its font files yesterday. I had done everything correctly to the best of my knowledge. However, it did not seem to work – no matter how many times I looked over my pull request to see if everything was in order. I decided to call it a day and check back the following day.(more…)
Soon after I was done with college in 2016, it was the period when hustling was in vogue. Getting by with little to no sleep was a badge of honor and entrepreneurs like Elon Musk were looked up for their 100+ hour work weeks.(more…)
I have heard the phrase “ignorance is bliss” multiple times and I did not really understand it at first. Now that I think I have some understanding, let me do a bit of a brain dump!(more…)