DEV Community

John Paul Ada
John Paul Ada

Posted on

This Week I Learned #2

This Week I Learned 2

Stuff I’ve selected to talk about this week!
Disclaimer: There’s no “This Week I Learned #1”, I just sync this with my podcast.

Stimulus

A modest JavaScript framework for the HTML you already have

Stimulus

Stimulus focuses on adding functionality to your existing HTML. This means your code will display immediately even if Stimulus hasn’t loaded yet. This is a different way of approaching front-end web in contrast to React, Vue, Angular, etc. Stimulus was built by Basecamp so we can have some sort of assurance that this project will have some pretty good support.

Begin learning Stimulus with the Stimulus Handbook.

Flutter

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter

Flutter is now, finally, in beta! It allows us to create mobile interfaces with web code using the Dart language. It’s been alpha for quite a while and I’m excited to see how the community grows around this. My only con is that we still have to learn Dart, but then again it’s not that different from JavaScript so it’s probably not that hard to learn. It’s a pretty strong competitor to React Native in my opinion. If you’re a React Native developer looking to try out Flutter, check out this Flutter for React Native devs guide.

React Static

React-Static is a fast, lightweight, and powerful framework for building static-progressive React applications and websites. It’s been carefully designed to meet the highest standards of SEO, site performance, and user/developer experience.

React Static

If you make static websites and like React, you might’ve used Gatsby at one point. React Static promises to be a faster, lighter, and more user-friendly alternative to Gatsby. I’m using it in a blog project and I like the experience so far. It’s pretty easy to use. I encourage you to try it out if you make static sites with React.

Static Gen

Top Open-Source Static Site Generators

StaticGen

While we’re on the topic of static sites, Netlify built a site that lists the most popular static site generators like Jekyll, Hugo, Hexo, Gatsby, among others. You can sort the list via the stars, forks, etc. and filter by language. My personal favorite is React Static.

Publii

Publii is a new kind of blogging experience; an app for building static websites directly on your desktop.

Publii

For people who want to blog but don’t know how to code, Publii is a great option. Publii is a free and open source app for Windows and Mac that allows users to create content offline then upload them later to S3, Netlify, Github Pages, or just FTP to a shared hosting server. It’s pretty fun to use and has great existing themes. It’s a nice blogging app to try out.

headlessCMS

A List of Content Management Systems for JAMstack Sites

headlessCMS

Headless CMS systems allows us to add content easily without coding — especially helpful for content admins that don’t know how to code. The difference with traditional CMS systems with WordPress is that a Headless CMS returns just the data, and not a web page, which makes it very efficient and more optimizations can be added to it. Then you can use a static site generator to parse and render the data returned by the Headless CMS. You now have complete control over the design and the display of the content.

Prismic

The headlessCMS website by Netlify lists the most popular Headless CMS libraries and platforms. You can filter them by type, what static site generator it works with, and what license it has. I’ve tried out Prismic because Google, Ebay, Ford, and other companies use it — and it integrates well with React Static, which has a Prismic starter pack that I prefer to use. My only downside with Prismic is that you have to pay if there are more than 1 users, but since it’s only me, there’s no problem. You definitely have to check this one out.

Skaffold

Skaffold is a command line tool that facilitates continuous development for Kubernetes applications. You can iterate on your application source code locally then deploy to local or remote Kubernetes clusters. Skaffold handles the workflow for building, pushing and deploying your application. It can also be used in an automated context such as a CI/CD pipeline to leverage the same workflow and tooling when moving applications to production.

If you work with Kubernetes, Skaffold is a real treat. Built by Google, it allows you to setup your development and production flows easily, and for me development with Kubernetes is sometimes difficult because you have to set it up a certain way in order to have the changes in the code actually reflect in the dev environment, because you’re working with Docker containers. One of Skaffold’s features is rebuilding the affected containers when the code is rebuilt so we don’t need to use volumes and stuff for this purpose. We just have to setup a skaffold.yml file and run skaffold dev once we’ve installed and configured Skaffold.

Moleculer

Fast & powerful microservices framework for Node.js.

Moleculer

For you Microservice architecture fans and those who want to try it out, Moleculer might be nice choice. It’s open source, pretty fast, and pretty easy to use. Give it a whirl and see what it can do!

Rough.js

Create graphics with a hand-drawn, sketchy, appearance

RoughJS

If you do web design and like fun and lighthearted graphics, this is a nice addition to your toolkit. Using HTML Canvas and Rough.js, you can create pretty graphics that looks like it was sketched.

PageDraw

Effortlessly turn mockups into functional code

PageDraw

PageDraw is definitely one of my favorites this week. It converts your Sketch mockups into React components! Support for other mockup formats, React Native, and other frontend libraries are coming! This is definitely useful if you have designers who don’t code. You can just plug it in to this, configure it a bit, then you get a React component that you can import. Definitely check this out if you’re a React developer!

If you liked this post, hit the emojis below so I'd know! 😁 Thank you!

Top comments (0)