Hello World,

My name is Godwill Barasa, a Software Engineer based in Nairobi, Kenya.

It has been a while since I last wrote a personal blog, a lot has happened over the past few months. A lot has changed, but some things remain the same. The last article I wrote was about a Day in the life of a software developer three years back. Since then, I have definitely grown as a software developer, teammate, and human being.

Here are some of the highlights from the last year :

a) Dealing with Imposter Syndrome

Earlier this month made a joke about how I wanted to write an article on Imposter Syndrome but was unable to due to Imposter Syndrome.

Godwill Barasa on Twitter: "Was writing an article on Imposter Syndrome, and how I overcame it, but, I stopped, mainly because there was a constantly nagging voice in my head , "Who are you to write about Imposter Syndrome, what authority do you have?" / Twitter"

Was writing an article on Imposter Syndrome, and how I overcame it, but, I stopped, mainly because there was a constantly nagging voice in my head , "Who are you to write about Imposter Syndrome, what authority do you have?"

This was generally part of the reason I did not write as often in the past year. Working for one of the best digital agencies in Africa, meeting up and collaborating with top-tech talents with more experience gave me a deep sense of cluelessness in broad topics such as DNS management, API conundrums, Vue, Laravel, and React.

Made a deliberate effort to get better, bought a couple of courses on Udemy, and studied my heart out. I’m not the best, but I’d rate myself a 6/10 cumulatively from the skills mentioned above.

b) Growth Mindset

Transitioning from a junior role to an associate level was a bit of a hassle. From an entry position, where your time is managed directly by your supervisor to an associate, although this position is not significantly larger than that of a junior engineer, the position carries higher expectations. Associates complete the solution with little or no guidance and also guide junior engineers to get up to speed.

My ego aside, I still have a long way to go but I’m getting better by reading a lot of books such as Execution: The Discipline of Getting Things Done By Larry and Conscious Leadership: Elevating Humanity Through Business by Whole Foods CEO John Mackey. Also having friends whom you could call on in case a conundrum ensues goes a long way. Deep down, I still wish I had a StackOverflow for people.

c) New technologies

For the longest time, I used coupled CMS: it organized development efforts and gave clients the autonomy to manage their sites. This made the handover of web projects and customization by the client easier.

But that was 5+ years ago.

Many web developers have since felt the pains of working with CMS. We became aware that traditional CMSs (WordPress) were too much. We realized how cumbersome and opinionated they were. They also had numerous security problems such as cross-site scripting, brute force attack, file inclusion exploits, and malware mostly from Plug-Ins.

Jamstack Enters Chat

Hiyo haibambi, Jam stack ndio inabamba,

It’s typically comprised of 3 components: Javascript, APIs, and Markup. Its history stems from growing the term “static site” into something more meaningful (and marketable). So while ultimately a static site is the end result, it’s blown up to include first-class tooling for every step of the way. Javascript is for any dynamic programming during the request/response cycle, running exclusively on the client. APIs are for All server-side functions or database actions. They are abstracted into reusable APIs, and accessed over HTTPS with JS. Markup is prebuilt at build time, usually using a site generator for content sites or a build tool for web apps.

d) Consultation

As my finance bros say wearing Patagonia vests over his plain white shirt, two income streams are always better than one.

I was blessed to serve a bunch of brands such as Lawyering Africa, an international conglomerate, a network of legal practices & consultancies within Kenya, the East African region & across Africa, specifically founded to augment a multi-jurisdictional presence for lawyers with small or medium-sized practices and consultancies, while bypassing the huge budget limitations forecasted for such.

I pray for more this year.

Consider this an invitation to reach out for web projects. Proceeds from the projects would go to a good cause (Mazda Demio Diesel 2016 with a turbo)\

Being intentional in 2023

1. Top 10% mindset. This year I want to horn in on Laravel, Vue, and Nuxt platforms to be among the top 10% worldwide.
2. Attending and giving talks. I want to attend 20 events, including Twitter Spaces on industry trends and host at least 5 online and two physical ones. Feel free to also reach out if you’d be interested in a Speaker for your tech events.
3. Collaboration. I am open to collaboration and general meetups to discuss non-technical aspects of the profession such as career advice and imposter syndrome.
4. Project and Time Management. With help from apps such as Linear, Notion for notetaking, and Pomodoro timers, I am re-aligned my whole meaning of being productive. With mentors such Ali Abdaal and Mayuko
5. More stabs at products. I will be launching two products this year. For more details, feel free to follow me on Twitter
6. Graduating in June 2023. ( just had a whole other blog idea of working while on campus)
7. Buying a car (the affirmation Mazda Demio Diesel with a Turbo)

This is all for now. Feel free to reach out on Twitter for connections, banter or if you’d want to join my cult.

You might, or might not have heard of LocalWP. Simply put, it is a game-changer for WordPress theme developers like myself by providing developers with advanced workflow features. It has revolutionized my experience in developing WordPress Applications over the last couple of months that I have been using it.

Backstory

Yes, a couple of months. Before I had the old LAMP stack tutorial-advised XAMPP for the last three years. Everything was super fine until I got a job at an agency where not only was I dealing with a lot of sites, but also mitigating versions of specific packages was literally hell. These projects were mostly from different eras with different dependencies ie PHP versions.

Switching from one PHP version to another during projects on XAMPP, although possible was hell, and doing that concurrently as I switch between different projects during my day was also going to be a definite party pooper!

Adding to this conundrum: UX/UI for XAMPP has not changed over the last 10 years or so. What if I need a database instance that’s not MySQL?

Clearly old XAMPP is not going to cut it. I needed to handle such exceptions more efficiently so that I could hit my KPIs like Will Smith hit Chris Rock.

Separation of concern, do what thou wilt

During a vision, while at Mt. Kenya (I meant, Googled when I was at a cabin in Nanyuki Town), I found the Local, in all its glory, Local sets up WordPress for you. One-click and your site is ready to go, SSL included! It also offers root SSH access, WP-CLI, and the ability to hot-swap PHP environments for easy testing!

Very cool! I thought. I have finessed my way into a very fluid workflow. The Dev-Ops Engineer in me was very satisfied. I felt like a God!

Until !

The Lore of Laravel

Three months down, the line with my perfect setup. The agency I work for started getting a ton of Laravel-related work. I had to modify my current scenario and going back to my ex (XAMPP) was not going to cut it, the relationship was abusive and it did not understand PHP environment variable boundaries

Here is how I did it

Setup LocalWP

1. Head over to Local website and click on the download button

1. Once installed, click that green “+” button usually on the bottom left of your screen
2. Give the site a name (let’s say “CoverLetterGenerator”)
3. Select the environment your want (the Preferred Nginx will work just fine with Laravel)
4. Enter your WP username and password (these are required now but will be deleted later)
5. Click add site.
6. Once the site is created, update the PHP version to the latest 8.0.x (as of today, Local only goes up to PHP 8.0.0, but hopefully this will be resolved soon).
7. Add SSL

Install Laravel and a New Laravel Project

Download composer from here. In addition, I recommend installing NodeJS which comes pre-packaged with NPM.

Those are found here, but the basic command will be:

composer global require laravel/installer

Note: You need to run the above command (and all php artisancommands) from the Local machine. To do this, in the Local app, right-click on your new Laravel site, and select “Open Site Shell”. If you change to the laravel/appdirectory, you’ll be able to run these commands.

Once you have Larvel installed globally you can do the following:

• In Site Shell Terminal, change to the “Laravel” directory you just created (cd ../.. most likely) .
• Delete the currentapp folder (either in your Finder/Explorer window or via command line)
• Then run the following command from the new site directory:

laravel new app

This will create a new Laravel project within the app directory, and will include the public folder where Local will normally look for it.

At this point, you should be able to click “View Site” in the Local app, and it should show you the Laravel welcome page at htts://laravel.local, for instance. If you’re getting a 502, 404, or some other error, you may need to restart the server:

If you get a minimum PHP version requirement

Temporary fix! Local only includes PHP support to 8.0.0, but Laravel’s current dependencies require PHP 8.0.2.

So, on the homepage, if you see a fatal error that says Your Composer dependencies require a PHP version ">= 8.0.2", you can do one of two things:

1. According to the Composer docs here, you should emulate your PHP environment like so in your composer.json file:

{
    "config": {
        "platform":{
            "php":"8.0.2"
        }
    }
}

This adds a spoof to your platform so that even though you’re not really running PHP 8.0.2, it will install dependencies as such.

2. Remove the vendor directory and run:

composer install --ignore-platform-reqs

Obviously, this is a temporary solution to get you going. You can follow this thread to get the latest: https://community.localwp.com/t/add-support-for-php-8-1-in-local/29352/8

Connecting the Database

In your .envfile, you can replace the following credentials (assuming you haven’t changed the default LocalWP

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_SOCKET="/Users/yourusername/Library/Application Support/Local/run/somethinglikethis12312123/mysql/mysqld.sock"
DB_DATABASE=local
DB_USERNAME=root
DB_PASSWORD=root

The above will connect to the Local DB. If you open your database using TablePlus, you can go in and delete the standard wp_ tables.

Finally, you can seed your Laravel database with the command:

php artisan migrate

After running the above command, you can refresh your database in Table+ and see the default seeded database.

Misc

My name is Godwill Barasa, a Senior Web Developer at Belva Digital, Building (and occasionally designing) exceptional digital experiences.

I am currently learning Laravel, trying to get a fundamental understanding of the framework thanks to an amazing course and future content will revolve around this.

Catch me on Twitter, and let’s banter about tech, career advice, cars, women, or anything in between.

My resume is here. Feel free to reach out for side gigs because weuh !

On 12th May, as I was trying to “npm run dev” a react application that I hadn’t pulled from the master branch in a while, I came across the following error when trying to start the app:

Error: No valid exports main found for ‘/node_modules/postcss’

Quick google search, I noticed the problem is because of one or more of the packages was bumped to support a more recent version. So, I checked what is the version I was running:

node -v

Turns out I was running V.10, yet the package was updated for version 13.

Next thing was to install nvm. This piece of software allows you to install and maintain many different independent versions of Node.js, and their associated Node packages, at the same time. visit the project’s GitHub page.

Before piping the command through to bash, it is always a good idea to audit the script to make sure it isn’t doing anything you don’t think might be indifferent from your case

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh

Take a look and make sure you are comfortable with the changes it is making. When you are satisfied, run the command again with | bash appended at the end.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

This will install the nvm script to your user account. To use it, you must first source your .bashrc file:

source ~/.bashrc

Now, you can ask NVM which versions of Node are available:

nvm list-remote

This will list a whole bunch of versions, just select a newer version. In my case I contacted the software developer asked him which version he was using in his dev environment. Turns out he uses v14.5

It’s a very long list! You can install a version of Node by typing any of the release versions you see.

nvm install v14.5

You can see the different versions you have installed by typing:

nvm list

You can switch between installed versions with nvm use:

nvm use v13.6.0

Now using node v13.6.0 (npm v6.13.4)

You can verify that the install was successful using the same technique from the other sections, by typing:

node -v

Output

v13.6.0

Then I,

npm cache clean — force

Delete node_modules by

rm -rf node_modules

delete the package-lock.json file too.

To install the dependencies again.

npm install

Last step was to run, npm run dev which worked perfectly

So, you have chosen the path to become a React Ninja. In that case, I am Sensei, (Seonsaeng) Godwill Barasa, a software developer with 4 years of experience in React. This young warrior is going to be a journey like no other, be ready for a journey of a lifetime.

React (also known as React.js or ReactJS) is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”.

He was influenced by XHP, an HTML component library for PHP. It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.

Why you would want to learn React.

• React uses declarative instead of imperative syntax. It’s a simpler way of developing apps, and you can learn why here. Basically, React is faster to develop because you don’t need to tell the app how to represent the state — you just need to say what you’d like to happen. It’s quick, it’s easy, and there’s less room for human error.
• React Native makes app development easier. It brings that kind of philosophy to React with “Learn once, write anywhere”.Once you understand the basic architecture and thinking behind React, you’ll be able to develop fully functioning apps for both Android and iOS. You won’t have to learn two different ways to represent your app. So after you learn React, you can bring your new product to users not just as quickly as possible, but as widely as possible.
• The React community is amazing. React has a massive community of dedicated developers. The community helps to maintain and grow the open-source library, with everyone able to contribute their own components to the library.

The community is also so strong because of the great tools you can work within React, including React Profiler and React dev tools.

• React is all about Reusable Components. This taps into the current thinking behind ‘Design Systems’. These enable developers to provide a single source of truth for designers, ensuring consistency for large companies working across multiple tech platforms. Talking of which…
• React is used by huge organizations, who pay handsomely for React wizardry
• React is SEO-friendly
• React fully embraces JavaScript. JavaScript is at the forefront of current thinking in the development field. React is a JavaScript library that makes full use of JS’s capabilities.
• React is flexible and back-end agnostic, meaning you can use React no matter what the rest of your tech stack is.
• React is unopinionated. It won’t force you to use certain types of forms or routing. Instead, the choice is yours, so you can respond more dynamically and adapt to your users’ changing needs.
• You’ll increase your earning power. Learning React now will future-proof your career and increase your earning power.
• React has a fast learning curve i.e relatively easy to learn
• BONUS: Little to no breaking changes. Although it’s constantly changing, React doesn’t depreciate or remove APIs very often. With React, you’ll benefit from the core team’s commitment to maintaining backward compatibility. Companies of all sizes can’t afford to change their applications every year to keep up with technological innovation.

Prerequisites
Basic knowledge of HTML, CSS, and JavaScript.
Basic understanding of ES6 features. To get started you should at least know the following features:
1. Let
2. Const
3. Arrow functions
4. Imports and Exports
5. Classes
Basic understanding of how to use npm.

In addition to that, you will need knowledge in the following tools:
Git
HTTP(S) protocol
Linux Command Line Basics
Design Patterns

Fundamentals

Now, this is the main deal. You got to learn React and learn it well to become a React developer. The best place to learn React is the official website, but as a beginner, it can be a little bit overwhelming for you. That’s why I suggest you enroll in a couple of courses like:

React 16- The Complete Guide by Max
Modern React with Redux by Stephen Grider
Beginners guide to React by Kent C. Dodds
Fundamentals of React by Samer Buna

By now, you should have a basic idea of the fundamentals of React. It’s enough to start developing simple web apps in React.

Now, take a look at the React official tutorial: It’s a well-written article covering the fundamentals of React. And it also explains the specific topics very clearly.

Start building some projects
Simple todo-app
Simple calculator app
Build a shopping cart
Display GitHub’s user stats using GitHub API

React Router
React Router helps you create routes to your single-page applications. It’s very powerful and easy to use with your React application.

React Router tutorial by Paul Sherman
React Router and intro to SPA by Learn Code Academy
Routing React apps by Scotch.io

These articles are more than enough for you to get started with React routing.

Projects
A simple CURD application
Hacker News clone

If you are really interested in learning much about Router, check out the following guide: React Router complete guide by React Training

Server rendering
Server rendering is one of the coolest features in React. It can be used with any of the back-end technologies.Server-Side Rendering (SSR) in React helps you to create components in the server and render that as HTML in your browser. And when all the JavaScript modules are downloaded in the browser, React takes the stage. Simple!

I recommend the following for Server-Side Rendering:
Next.js, After.js, Rogue

First of all, take a look at the React-DOM API:And follow the below tutorials to get in-depth knowledge:

React server rendering by Tyler McGinnis
React router server rendering by Roilan Salinas
React Server-side rendering guide by Dennis Brotzky

Redux
Redux is a JavaScript library developed for maintaining application states. When you are building a complex application, it will add overhead to manage states across components. Redux helps you store all your states in a single source. And of course, React plays well with Redux :)

Despite being complicated and introducing a lot of boilerplate code for even the most simple data fetch,

Redux is still a very popular and widely used state management library in the industry.

You should learn how to do the following:
Set up a project with Redux
Use Redux for data fetching and managing state
Optionally, look into Redux Thunk

To get started:

Redux tutorial by Learn Code Academy
Redux tutorial for beginners by Valentino Gagliardi
React Redux by CSS Tricks

API Clients
In today’s world, you will rarely build an isolated GUI, instead, there is more chance that you will build something which communicates with other application using APIs like REST and GraphQL.

Thankfully, there are many API clients available for React developers, here is a list of them:
REST — Fetch, SuperAgent, axios
GraphQL — Apollo, Relay,urql

Apollo Client is my favorite and provides an easy way to use GraphQL to build client applications. The client is designed to help you quickly build a UI that fetches data with GraphQL and can be used with any JavaScript front-end.

Btw, if you don’t know GraphQL and REST, I suggest you spend some time learning them. If you need courses, the following are my recommendations:
GraphQL with React: The Complete Developers Guide
REST API Design, Development & Management

Desktop
There also exists some React-based framework to build desktop GUI like React Native Windows which allows you to build native UWP and WPF apps with React.
The Framework suggests the following libraries:
Proton Native
Electron
React Native Windows

Virtual Reality
If you are interested in building a Virtual Reality based application then also you have some frameworks like React 360, which allows you to exciting 360 and VR experiences using React. If you are interested in that area, you can further explore React 360.

Conclusion
Feel free to reach out on Instagram or LinkedIn for random conversations about geeky stuff. I am also lea
https://www.instagram.com/godwllb/
https://www.linkedin.com/in/gdwllb/

My name is Godwill Barasa, a software developer, writer, and designer based in Nairobi, Kenya. In case you are interested to know how I undertake my daily work, find my previous viral article here.

I write this article at 2 am, with an Operating System exam tomorrow morning at 8 am. Thanks to Ali Abdaal, I finessed my study plan, and I believe am ready for the exams so no need for a last-minute rush.

Enough of the self-reassurance, I have been writing code for almost most of my life. When I was younger, it was more of a fun-rebellious kind of hobby I adapted from my big brother Nikki. By 16 years, I was writing code for my high school website, in return they let me work late in the computer labs When I turned 18, I got my first job as a System Developer intern in Nairobi, Kenya.

Fast forward, a couple of years later, As I celebrate my 23rd birthday in two weeks, celebrating five-year career experience. I feel old, it feels like the older I get the quicker time passes. Regardless, we have to look back on it so that we can make better choices.

I’ve been a student at JKUAT, Juja, University of Cape Town, and currently JKUAT, CBD Campus. I am also a developer at Legibra Holdings with proficiency in PHP, Javascript, Laravel, React. I’m currently an active community member of the JAMstack movement. Check out my article on the movement.

Here are my lessons:

Let research lead your intuition

Before making major career moves, always consult Google, Google tells us all from why there is a spot on the tip of your nose to regex functions. From salary details to reputable hiring managers, you know, the ones who actually mail back in case you fail an interview.

In an interview, you are not being interviewed by the company. You also interview them. Know as much as possible about the job and the firm before making the deal. This will help you assert self-worth, and help you find work that you enjoy doing. That will in turn bring you a lot of happiness, which is something we all need more of.

Network

Get access to tech events with like-minded people. It’s amazing how smiles and shaking hands can really propel your career. I personally suggest Nairobi Metta, Nairobi Garage, and iHub. I’m considering joining the Nairobi Garage the one on Lower Kabete Road. Ikigai is also nice.

Such hubs have amazing events from a wide array of subjects, from entrepreneurship to personal finance. From career advice to trade fairs. Trust me, your Saturdays will always be booked with events, which lead to connections, which lead to lead generation, which lead to profit.

Set Goals, but don’t be afraid to aim higher.

Two people really inspire me on this. One of them is Bruce Lee, with his legendary quote “Be like water my friend”. Be willing to change, in fact, the most productive decisions are the ones that make you get away from your comfort zone. The second one, is, a dear friend, UX Designer, Genet Wendy. She inspired me to make mood boards. A mood board is a visual tool that communicates our concepts and visual ideas. It is a well-thought-out and planned arrangement of images, materials, pieces of text, etc. that is intended to evoke or project a particular style or concept.

Reasons you might need a mood board:

• To give us a process to build a clear design story that we want to use in the space.
• Using a mood board helps you to express the vision you have in mind for the project.
• Sometimes it is very complicated to express your visual ideas to others. A mood board is a very efficient visual communication tool.
• A mood board is a good starting point to get things done. It will help you collate and focus your ideas, and help to define the project

As with most design processes. There is a ‘standard’ process that’s useful to follow. But as we are designing, I believe that being creative and not following the rules exactly will always give you the best result.

Creating a mood board will help you to explore and ‘find your own style’ too. The best way to learn about something in design is to do it. This is why I want you to take some time to create a mood board that represents your own style.

Think about your home, your clothes, your office, your holidays, things you dream of. What do they look like? What do these things feel like? What are the common threads? Is it a color? A texture? A pattern? A feeling/emotion?

Collect images that represent these thoughts. These images will tell your story and when they come together will start to show you your style. The collection of images will represent your lifestyle and personal style. You can take your time with this.

Move the images about on the board to create different compositions. Play around with the images until you are happy with the images that you have.

I know that this is hard to do when you’ve not done it before, but we all start at the beginning. My first few mood boards weren’t very impressive but I started learning how they worked while doing it.

This isn’t something you can learn by reading about it. You need to do it.

Another important element to mood boards that can help beginners to convey their message very effectively is to use keywords to help tell your story. 2 or 3 well-selected keywords that help you to describe the abstract message you’re trying to get across.

It’s always better to start earlier, heck, it is better to start now.

Like fitness, mostly progress in your career is done when you practice. When you start working out in the gym, the first weeks might feel very taxing with little or no result. This is why many people who get gym memberships only get to go the first week. After that, they feel they have put in too much yet get very little in return since they don’t have their dream body like Arnold Schwarzenegger

This is further from the truth, The First weeks are important to develop your form, condition your motor skills from normal body movements to unusual body movements such as Deadlifts, Squats, or the Bench press. This is a learning phase, you get to learn so much about how your muscles feel, being sore after a workout, being sore during a workout, shocking muscles on leg day, etc. These basic things form the ultimate conditions for your body to grow.

Similarly, when you start learning that new language, you might not develop advanced algorithms in your first week. You might even write a bad “spaghetti” code. This is important since you don’t know what you don’t know. The only way to know what you don’t know is to attempt.

Otherwise, you will be like a spectator in a football match. You will know all the players in the game, know all the moves, you might even know the jargon, and have strong opinions about the game, you never got in the field.

Be consistent

Consistency is when you become fixated on a particular goal. Like writing a novel. Or losing weight. For the first couple of days, you ride that wave of motivation. You show up, do the work, move on. Another day won.

But then the novelty wears off. You start skipping practice. You stop being consistent. A day here and a day there and before long you haven’t written a word for days or been to the gym this month.

Sounds familiar?

Every year people make new resolutions. Do they follow up on them? Most don’t. Why? They lack consistency. The only thing they are consistent at is starting and stopping.

But it doesn’t have to be that way. You need to develop the skill of being consistent.

Grades matter

Your grade only really matters for the traditional path and for a small number of research jobs and careers. What matters a lot more is your approach to life:

• Do you always try to do your best? (Do you actually try at all?)
• If you get stuck do you try to solve the problems other ways or just give up? (Also called “grit” which is the current in word.)
• Are you willing to try things and see if it works out?
• Are you curious about new things?

The thing is that if these are true then students almost always have fairly good grades. These are the things that matter not grades most of the time.

That being said here are the times that grades matter:

• Your high school grades matter when applying to university BUT if you wait a few years or even just do a few university subjects then try to transfer (assuming they accept transfer students) then your high school grades don’t matter any more than your entrance exam matters or the grades for the university subject you do.
• Your university grades matter when you apply for your first job BUT after the first job, everyone cares about your work experience NOT your grades.
• You need good grades for academic scholarships.
• For research students your grades matter (a lot) until you publish a research paper then your previous research matters more.

Basically grades matter at a few specific instances in time when transitioning between phases in life. Grades can save you a few years of “catching up” but in the long run, there are other paths to the same thing that take a little bit longer if you are willing to try.

This is why some high school dropouts succeed. At school, they don’t have the correct attitude to life. They fail, hit rock bottom, go through the school of hard knocks and relatively quickly learn and change who they are then succeed without traditional schooling. The grades try (sometimes badly) to reflect what is important.

As I make a mood board for my next five-years, I need to make new habits, know new people, and delve into subjects I have not delved into before. I’m in search of new vibes. You can find me on LinkedIn, ask me about anything, or pitch new ideas or even new vibes.

I won't celebrate my birthday but do wish me a happy birthday in the comments section.

Regards,

Godwill Barasa

JAMstack is quite popular right now in the developer world. But what exactly is it? Should you use JAMstack for your next project?

Termed as a new approach to make our websites faster and more secure, does it live up to the hype?

This is quick guide to JAMstack.

What is it?

It’s typically comprised of 3 components: Javascript, APIs, and Markup. Its history stems from growing the term “static site” into something more meaningful (and marketable). So while ultimately a static site is the end result, it’s blown up to include first-class tooling for every step of the way. Javascript is for any dynamic programming during the request/response cycle, running exclusively on the client. APIs are for All server-side functions or database actions. They are abstracted into reusable APIs, accessed over HTTPS with JS. Markup is prebuilt at build time, usually using a site generator for content sites, or a build tool for web apps.

JAMstack is revolutionizing the way we think about workflow by providing a simpler developer experience, better performance, lower cost, and greater scalability.

This is all great. But in practice, what does it really mean?

The problem with the legacy web

For a long time, web developers used coupled CMS: it organized development efforts and gave clients the autonomy to manage their site. This made the hand-over of web projects and customization by the client easier.

But that was 5+ years ago. Many web developers have since felt the pains of working with CMS. We became aware that traditional CMSs (WordPress) were too much. We realized how cumbersome and opinionated they were. They also had numerous security problems such as cross-site scripting, brute force attack, file inclusion exploits, and malware mostly from Plug-Ins

How JAMstack works

Decoupling the frontend from the backend

Unlike the large legacy apps, Jamstack projects neatly separate the frontend pages and UI from the backend apps and databases. Freed from backend servers, the frontend can then be deployed globally, directly to a CDN.

Prebuilding all pages for speed

Before deployment, the entire front end is prebuilt into highly optimized static pages and assets. This happens in a build process (before being deployed/hosted).

Dynamic content via APIs

The global front end uses Javascript and APIs to talk to backend services, allowing pages to be enhanced and personalized.

Advantages of JAMstack.

• Faster performance
• Serve pre-built markup and assets over a CDN
• More secure
• No need to worry about server or database vulnerabilities
• Less expensive
• Hosting of static files are cheap or even free
• Better developer experience: Front end developers can focus on the front end, without being tied to a monolithic architecture. This usually means quicker and more focused development
• Scalability

If your product suddenly goes viral and has many active users, the CDN seamlessly compensates.

When building Jamstack projects, you can really get the most out of the stack if you stick to a few best practices.

Entire Project on a CDN

Because Jamstack projects don’t rely on server-side code, they can be distributed instead of living on a single server. Serving directly from a CDN unlocks speeds and performance that can’t be beaten. The more of your app you can push to the edge, the better the user experience.

Everything Lives in Git

With a Jamstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction and also simplifies staging and testing workflows.

Modern Build Tools

Take advantage of the world of modern build tools. It can be a jungle to get oriented in and it’s a fast-moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends.

Automated Builds

Because Jamstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically.

Atomic Deploys

As Jamstack projects grow really large, new changes might require re-deploying hundreds of files. Uploading these one at a time can cause inconsistent state while the process completes. You can avoid this with a system that lets you do “atomic deploys,” where no changes go live until all changed files have been uploaded.

Instant Cache Invalidation

When the build-to-deploy cycle becomes a regular occurrence, you need to know that when a deploy goes live, it really goes live. Eliminate any doubt by making sure your CDN can handle instant cache purges.

So, what tools should you use for a JAMStack?

The good news here, there are a ton of tools currently available and a ton more on the way. They might still be a little rough around the edges, but that’s because this is a brave new world of tooling and that takes some smoothing out to get just right.

Pick your favorite flavor of the UI framework and get off the ground running.(Gatsby, or Scully for Angular fanboys)

Tools like Netlify make it easy to configure by hooking into your Github repo and building anytime a new commit gets pushed, but of course, you have options like AWS if you want more control.

Making your app dynamic

I’m not going to list a bunch of examples per type, even better, here are a few tools and places you can find some resources.

• Auth0 — Authentication
• Cloudinary — Media management
• Google Analytics — Web traffic analytics
• headlesscms.org — Endless list of headless CMSs
• Sanity — CMS
• Serverless Framework — DIY, easy to deploy serverless resources
• Snipcart — Ecommerce
• Stripe — Payment management
• And a bunch of other resources…
• And a bunch of other CMS choices…
• And some general info and tools…

Missing your favorite JAMstack tool or an awesome example? Connect with me on LinkedIn

Here is a little context, My name is Godwill Barasa. I am a 23-year-old software developer based in Nairobi, Kenya. I live in Roysambu, TRM Drive. More often than not, when people during family gatherings, ask me what I do for a living.

Perhaps is the casual wear I am known for having after trying to go to my sister’s wedding with a hoody ( don’t worry it did not happen ). I am going to give everyone a picture of how a 23-year-old software developer based in Kenya undertakes his dailies.

5:00 AM

I wake up at 5:00 am. I jog to my local gym which is not far from my apartment. I do a 40-minute work out with my trainer (who is also my neighbor). I take a shower at around 5:50 am and make breakfast which is almost always an egg, four slices of Festive Bread, and Tea.

6:30 AM

I put on some mood music usually something like 30 Seconds to Mars or a podcast. I browse my emails, check my LinkedIn for new connections. I do not use Facebook or Instagram because they make me anxious. I get why people employ social media managers. I am not inactive though, I try to post content to keep my brand on point.

7:00 AM

My meals are normally pre-packaged which is a pro-move since food prices near the office are pricy and tasteless. I pack them and then pre-heat them in the company kitchen. I take my Acer, Charger, and Notebook and throw it into my olive backpack. Earphones are also definite must-have essential.

7: 20 AM

I board a matatu bound to tao. It is almost always chilly and grey in the morning in Nairobi( however, it becomes hotter as the day continues). More mood music and a novel, right now am reading Harper Lees, To kill a mocking bird. Harper Lee believed to be one of the most influential authors to have ever existed, famously published only a single novel (up until its controversial sequel was published in 2015 just before her death). Lee’s To Kill a Mockingbird was published in 1960 and became an immediate classic of literature.

8:00 AM

On a good day ill be at the CBD by 8:00 AM. I would then check-in at the Jomo Kenyatta NCBD Campus, my university. I am a student class representative for my Bachelor of Business Information & Technology class. Make sure I have my schedule mapped out. I also water the plants at the reception, sometimes. The receptionist is a middle-aged woman who is so motherly everyone calls her Nana. I call my classmates and send them the days schedule on Slack and WhatsApp.

8:30 AM

I’ll arrive at the office. I make a coffee for a little more energy. I take this time to assess my to-do app. I check what has been done and what has not. I also send work emails and alerts on slack teams. This is when I reply to other work emails that require further discussions. These issues are the ones which rise in the next hour.

9:00 AM

We have a scrum meeting with designers, project managers, sometimes the CTO (but mostly not). It is designed for teams who break their work into goals that can be completed within timeboxed iterations, called sprints, no longer than one month, and most commonly two weeks. The Scrum Team tracks progress in 15-minute time-boxed daily meetings, called daily scrums. At the end of the sprint, the team holds a sprint review, to demonstrate the work done, and sprint retrospective to continuously improve. Some good ol’ Software Engineering

9:30 AM

Problem-solving mostly( very little coding ) just trying to solve problems from a very high level of understanding. This is very important to me as it helps me treat my code as art. Very in touch with what is needed by the user or investor.

10:00 AM

Id stack working on the code. My set up is a dual-screened monitor. I also have a very slow purple Acer, Intel Celeron. However, being a Ubuntu Fan-boy this does not lag at all for writing Javascript code. About Javascript, the stack we use is React.js, GraphQL, Gatsby, Strapi, or WordPress Headerless CMS. popularly known as the Jamstack. The Jamstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and better developer experience.

Dev lives matter. Loose coupling and separation of controls allow for more targeted development and debugging, and the expanding selection of CMS options for site generators removes the need to maintain a separate stack for content and marketing.

I listen to Frank Sinatra and finish what I had set out to do on that day as per the daily scrum.

1:00 pm LUNCH

Or gaming

2:00 2 HOUR CODING SESSION

Also A short meeting with Human Resource, she says I might be exhausted from school and work. She gives me a go-ahead to work from home on Friday.

I love working from home. Roysambu is treating me too nice, 15,000KES rent. This is almost a third of what I make. It’s worth it, closeness to CBD, Security. Its also close to Andela ( I need Andela Merchandise, guys.) home of very cool tech events usually Saturdays. Very beautiful minds truly top 1 percent talent

4:00 PM

I stop working on the site. Make notes on the day and start thinking of tomorrow’s sprint meeting. For now, I would open my Codecademy account and learn up to around 7:00 pm. Most people I have met have a problem with this, say I spend too much time at work. I use that moment to make sure am at the top of my game in web development. From dealing with JSON data from APIs to Querying data with SQL. I also have a data science course (but font tell anyone)

I also have evening classes at this time so whenever am not at work, am in school.

7:00 pm

School Work. sometimes classes

8:00 PM

A matatu ride back to Roysambu. There are usually no jams in Thika Road at that time. It takes around 10 minutes. It costs around 60 bob and uber costs around 500 bob.

I cook something and watch a series as I eat. I doze off watching cartoons by around 11 pm.

Thats it. That's the story about the software engineer in Nairobi, Kenya

https://www.instagram.com/godwllb/

linkedin.com/godwillb