loading...
Cover image for Technology stack for your blog in 2019

Technology stack for your blog in 2019

thesoreon profile image Paul Susicky Originally published at thesoreon.com ・4 min read

Personal blog is one of the most popular projects for every developer. It can be done in various ways from plain HTML, CSS and Javascript files to a big codebase with all the best practises you can imagine.

I want to share with you the stack I've used to create my blog, so let's get right into it! 🚀

Quick note: this blog is created as JAMStack solution, so we don't need any kind of server to handle our blog posts creation and so on. So it is possible to host it on any static website hosting such as Netlify, Github pages and more!

React

I guess many of you already know React. It is a Javascript library for creating user interfaces. Application is build using components, which can be composed together and reuse across the project, which makes it very powerful.

It's a core of our application because other libraries listed below depend on React itself.

Available on npm registry
Official docs: https://reactjs.org/docs/getting-started

Gatsby

Gatsby is a Javascript framework (for React.js apps) which helps you to set up your application. It handles most of the boilerplate code you would otherwise handle by yourself (webpack config, "server-side" rendering, GraphQL, and so on..). Apps built with gatsby are really (really) fast.

You can use Gatsby plugins in your application, which enhance your app by features, or you can create a custom plugin for others.

By the way, Gatsby has one of the most "bulletproof" documentation you will find on the internet. If you stumble across some error, try to search the gatsby docs, there is a big chance that it is already covered there.

Available on npm registry
Official docs: https://www.gatsbyjs.org/docs/

Typescript

Known as superset of Javascript. It adds static type-checking on top of Javascript and provides clever IntelliSense in your favourite Text editor/IDE.

Typescript is still evolving, and every new version brings new features, which saves hours and hours of developer's valuable time.

Available on npm registry
Official docs: https://www.typescriptlang.org/docs/home

Emotion

Emotion is a CSS-in-JS library. It has been gaining popularity lately and there are many aspects why! It has built-in scoping for your styles. Working server-side rendering out of the box, or with a little and easy configuration. State-based styling and many more features!

Available on npm registry:

Official docs: https://emotion.sh/docs/introduction

Eslint

ESLint is a tool for identifying and reporting on patterns found in JavaScript (also Typescript) code. It should be a must-have tool in your tech stack because it will force you to use best-practises across the project and if your blog is open-sourced you should definitely be thinking about adding it!

Available on npm registry
Official docs: https://eslint.org/docs/user-guide/getting-started

Prettier

Prettier is an opinionated code formatter, which supports most popular languages. It keeps consistency in your code formatting, which can be very valuable and also time-saving because you don't need to format code manually.

Available on npm registry
Official docs: https://prettier.io/docs

Jest

Is a very popular testing library. It integrates very well with react.

Available on npm registry
Official docs: https://jestjs.io/docs/en/getting-started

React Testing Library

For testing react components you usually go for enzyme, but you should be thinking about going for testing library because it makes your tests to be less dependent on the component's internal state.

Note: if you switch from enzyme to testing library you will need to change (a little) your thinking about writing tests because it is different from enzyme.

You should definitely take a look at blog by Kent C. Dodds (author of testing library) if you want some in-depth knowledge about testing library!

Available on npm registry
Official docs: https://testing-library.com/docs/react-testing-library/intro

Cypress

Is an end to end testing framework, which enables you to write all kinds of tests:

  • Unit tests
  • Integration tests
  • e2e tests

It's a very nicely done framework with amazing documentation (with text and video versions!) and it's very easy to set up.

Available on npm registry
Official docs: https://docs.cypress.io/

Share your tech stack

What is your tech stack for this year? What technologies do you use in combination with Vue or Angular? Tell us in comments! 🧐

This post is published on my blog, see it here!

Discussion

pic
Editor guide
Collapse
brpaz profile image
Bruno Paz

Nice stack.

For me, Vue and Gridsome instead of React and Gatsby. Just a personal taste as I prefer Vue over React. ;)

Gridsome is pretty new and less mature compared with Gatsby but hoping it can catch up in the future.

I am just starting getting my hands dirty on modern frontend technologies so for now, I prefer working with pure Javascript, but plan to give Typescript a try in the future.

ESLint, Prettier, Jest, and Cypress are pretty standard JS tools nowadays so I also use all of them in my frontend projects.

Collapse
thesoreon profile image
Paul Susicky Author

Yes if I had used Vue instead of React I would have taken the same stack!

Typescript is awesome and you should definitely try it! I would say it is a must-have if you are working on a bigger project.

I'm using it for every project (even the small ones), but that's because I came from C# background and I really missed types in Javascript 😀

Collapse
drdougtheman profile image
drdougtheman

I just checked Gridsome it's awesome

Collapse
karataev profile image
Eugene Karataev

Thanks for sharing your stack, Paul.
I think it's great to play with the technologies building your own project, but nowdays I'd go with much simplier technology stack, because I'm tired of endless fighting with combining packages to work together, fixing weird errors, updating dependencies, e.t.c.
After all, it's just a static blog with few posts.

blog

Collapse
thesoreon profile image
Paul Susicky Author

Yes totally agree! However, I think of my blog as a project I can experiment with and it is a great way to test different tools 😀 But nothing can beat plain static blog 😁

Collapse
abdurrkhalid333 profile image
Abdur Rehman Khalid

I am currently working on the Java Technology Stack and following are the part of my work-stack and I am pretty enjoying it as sometimes it gets messy and boring but at the end it is fun.

  1. Spring MVC
  2. Spring Boot
  3. Hibernate for Object Relational Mapper
  4. Angular 8 as Front-End Framework
  5. Visual Studio Code.
  6. Intellij IDEA Ultimate Edition (Getting Benefits from the Students Pack)
  7. Prettier for Code Formatting
  8. Git Lens for Tracking the Team Management
  9. Git Graph for the Ultimate and Fun Way of Knowing who is doing what
  10. JREBEL to keep the Hot Deployment in the Mind as well.
Collapse
drdougtheman profile image
drdougtheman

Where do you deploy the Spring?

Collapse
abdurrkhalid333 profile image
Abdur Rehman Khalid

Currently Our Spring Application is Deployed on Linode Instance as it is easy to handle and the productivity is very effective as well.

Collapse
florianrappl profile image
Florian Rappl

Are you sure about Gatsby? I tried it out like 4 months ago and essentially with TypeScript nothing worked. One error after the other and most plugins I wanted to try also either did not work directly or required more wiring than actually described in the docs. Long story short: I found it horrible.

Collapse
thesoreon profile image
Paul Susicky Author

That sounds totally horrible 😓

I haven't experienced any issues wiring Gatsby with Typescript, did you follow the official docs? It uses gatsby plugin for typescript and everything should be working properly.

I would try some kind of gatsby-typescript-starter, if you decide to try gatsby again, I'll be glad to help!

On the other hand, some plugins might be less documented or even doesn't work at all, because they are made and maintained by other developers (so they might become outdated and so on). However, the most used plugins should be quite good documented.

Collapse
florianrappl profile image
Florian Rappl

Sure I followed the official documentation. My problems started essentially right with import statements and continued to all things possible like bundle splitting. You can read more details on my blog.

Overall, I found that Gatsby is super overkill for just having a blog. Just install parcel-bundler and parcel-plugin-codegen and you can set up a blog in no time with smaller and faster sites as a result.

One of the things that is a mess with Gatsby is that everything must be a plugin. Want to use leaflet? Well, you'll need a plugin. Why can't I just use react-leaflet?!

But enough of the rant :). Loved the article structure and tech composition, even though some comparison (e.g., emotion vs styled components) would have been good. ❤️

Collapse
r_martinezduque profile image
Reyes Martínez

Hi Paul, thanks for sharing your stack!

Have you tried Frontity + WordPress? I'd love to hear your thoughts about it :)

Collapse
michaelairspace profile image
michael roberts

For me C++ WebRTC , Typescript with node and Angular :) I am working on some cutting edge streaming with Computer vision AI and IoT Edge technologies integrated into the solution.

Collapse
thesoreon profile image
Paul Susicky Author

Sounds very interesting! I would be happy if you keep us updated on how it goes 😉

Collapse
gexos profile image
George X.

Brilliant Paul!