By Boris Cherny, Creator of Claude Code at Anthropic
Originally posted as a thread on X:
I'm Boris and I created Claude Code. I wanted to quickly share a few tips for using Claude Code, sourced directly from the Claude Code team. The way the team uses Claude is different than how I use it. Remember: there is no one right way to use Claude Code -- everyones' setup is…
— Boris Cherny (@bcherny) January 31, 2026 I’m Boris and I created Claude Code. I wanted to quickly share a few tips for using Claude Code, sourced directly from the Claude Code team. The way the team uses Claude is different than how I use it. Remember: there is no one right way to use Claude Code – everyone’s setup is different. You should experiment to see what works for you!
Turning browser-automated AI into a 60-day ranking weapon — according to one of the world’s top-ranked SEO experts
I don't understand why people aren't using Claude Cowork to crush local SEO.
I CAN OUTRANK YOUR LOCAL BUSINESS IN 60 DAYS WITH JUST CLAUDE COWORK.
Here's how I would do it:
— Sarvesh Shrivastava (@bloggersarvesh) January 31, 2026 In late January 2026, Sarvesh Shrivastava — Favikon-ranked #1 SEO professional worldwide, TEDx speaker, and founder of Alventra Marketing — published a viral X thread that caught serious attention in the SEO community. The core claim was bold:
I had so much expectations for this year’s conference. Did I achieve them, No? Did I have a good time, for Sure!
https://me.chrisdevcode.com/posts/2025/djangocon-africa-2025-my-expectations/
Note:
As I write this in November, only a few months past DjangoCon Africa, my heart is heavy. It has been a difficult month for my Tanzanian brothers and sisters. To all my friends and everyone I met at the conference: I hope you are safe. Please know that I am standing with you in spirit during these politically turbulent times.
Disclaimer: Written by Chris, Editted and Audited by Gemini
Mastering the Art of the Professional Email: A Step-by-Step Guide In the modern workplace, your email etiquette is often the first impression you make. A well-crafted email commands respect, avoids confusion, and gets results. A poorly written one leads to misunderstandings, wasted time, or worse—it gets ignored completely.
Whether you are emailing a colleague, a client, or a prospective employer, following a standard structure ensures your message is received exactly as you intend. Here is your guide to writing professional, standard emails every time.
I had my reasons when I wanted to self-host my technical articles. I just didn’t like the constraints most blogging platforms would put on users before they could actually read my content. One thing I hadn’t figured out was the SEO and the performance of my posts and site. I used to get some paid articles to post on my blogs, and those two factors were a major selling point.
This is a talk I gave at DevFest Mt.Kenya, in November, 2025.
AI Ethics in Africa: Building for Communities, Not Just Corporations — DevFest Mt. Kenya Region
What Do I Feel? Ever seen a really good ad, could be about a music video that’s really cool, or maybe an application that helps you do some cool shit, then when you click on the link, you get that annoying message: “Not available in Your Country”, that’s exactly how I feel about most of these AI things that are happening.
this might be too early for a 2025 year review, but thankfully, this isn’t a technical one, so i can just do it whenever i feel like.
What’s Up? i’m not sure if it’s imposter syndrome, blockers, or just that phase where you feel like no matter what effort you put in, things don’t work out as planned. not really sure how to classify that.
but hey, i’m alive, that’s all that matters, right.
TL;DR Please join our Mombasa, Kenya chapter of Ubuntu LoCos (we are planning for an Extended Ubuntu Summit, 2025):
https://launchpad.net/~ubuntu-mombasa
I had no idea that Ubuntu (from Canonical) had such a community! I only learnt about that during DjangoCon Africa x UbuCon Africa.
It was from a great and an inspiring talk by Sebastian Trzcinski-Clément, From Einstein to monkeys: learnings for successful leaders.
Ooh, and btw, Sebastian had an amazing and very engaging session that made me think about something … (well, not a billion-dollar idea). It sparked a great reflection on how developer communities are run and all that!
Article Banner — This image is AI generated, looks great right! I suck at Canva (imagine that)
The ideal topic would have been:
The Secret Life of ChatGPT: What 700 Million Users Reveal About AI but that feels too “AI” generated.
(another but …) but first
Nerds for Stats Category Statistic Adoption 700M weekly active users (WAU) by July 2025 (~10% of world’s adult population) Message Volume 18B messages per week (~2.5B per day) by July 2025 Growth Factor 5× increase in daily messages between Jul 2024 and Jul 2025 Work vs Non-Work (Jun 2024) 238M non-work (53%), 213M work (47%) per day Work vs Non-Work (Jun 2025) 1.91B non-work (73%), 716M work (27%) per day Main Usage Categories Practical Guidance, Seeking Information, Writing = ~80% of all conversations Writing Use 40% of work-related messages; ⅔ editing/critique/translation vs ⅓ generating new text Tutoring/Education ~10% of all messages Programming 4.2% of all messages (contrast: ~33% of Claude’s work-related conversations) Relationships/Companionship 1.9% (personal reflection), 0.4% (games/role play) Interaction Types Asking = 49%, Doing = 40%, Expressing = 11% Work-Specific Breakdown 56% of work-related = Doing; ~75% of those are Writing tasks Work Activities (O*NET) 81% of work use = (1) getting/interpreting info, (2) making decisions/solving problems/creative thinking Demographics – Gender Early (2022): ~80% male names. By Jun 2025: 48% male, slight female majority Demographics – Age ~50% of all messages from users <26 years old Geography Faster growth in low- and middle-income countries Economic Value Estimated consumer surplus ≥ $97B in 2024 (U.S. alone) Oooh and if you hate numbers, I have some good graphs for you …
I had some good time playing around with Google’s NotebookLM, and I remembered there’s this project I do with Green World Campaign Kenya, that is somehow really hard to explain to normies(non technical people).
So … Here’s something that may help …
What is AIRS? The abbreviation? Sure, it’s Automated Incentives for Regenerative Stewardship
Now, what really is AIRS? Automated Incentives for Regenerative Stewardship (AIRS) is an initiative that leverages satellite technology, on-ground observations, blockchain, and smart contracts to transparently reward Kenyan farmers for regenerative land stewardship, transforming their environmental achievements into tradeable digital assets.
I’ve been working with Green World Campaign Kenya on AIRS—Automated Incentives for Regenerative Stewardship. One recurring challenge: how do you connect real‑world events (like verified land restoration) to smart contracts without rebuilding everything on‑chain? The answer: oracles.
What is a blockchain oracle? An oracle connects a blockchain to the outside world. It delivers data or computation results from off‑chain sources (APIs, sensors, other chains) to smart contracts, and can pass on‑chain outcomes back out to external systems.
The wait is almost over(that’s if you’re reading this before Aug 11th, 2025).
This is the second DjangoCon Africa I will be attending, the first one was a few years ago, and I wrote about it here:
https://me.chrisdevcode.com/posts/2024/djangocon-africa-2023-a-year-later/
A lot has happened ever since, got to learn about stuff(LOL) about how Django and the DSF. I cannot wait for this year’s edition.
You can also checkout the official DjangoCon Africa 2023 report: https://2023.djangocon.africa/news/report/
From my past post:
https://me.chrisdevcode.com/posts/django-architecture-models-views-templates/
In Django, a model is what defines your database table. It’s basically a python class that maps to a single table in your database. For example, class Users will simply be the Users table:
class Users(models.Model): full_name = models.CharField(max_length=200) bio = models.TextField() def __str__(self): return self.full_name Django’s documentation on models: https://docs.djangoproject.com/en/5.2/topics/db/models/
In Django, a model is a special type of object that represents and stores data in the database.
A database is simply a structured collection of data — where you keep information such as users, blog posts, and more.
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
At its core, Django follows the MVT architecture: Model, View, and Template — which is similar in principle to the traditional MVC (Model-View-Controller) pattern.
Side note, you can build your Django application using your desired architecture. Django doesn’t necessarily specify any particular form of architectural layering.
This article is an extension of the previous post: https://me.chrisdevcode.com/posts/django-project-structure/
Before we proceed, it’s important to understand how a typical Django project is structured.
Django’s project structure is thoughtfully designed to make your code clean and maintainable.
Whether building a simple blog or a complex web application, understanding this structure is critical for managing your project efficiently as it grows.
Below, we’ll explore the key components of a typical Django project and how they work together.
Assumptions This post will assume that you have your development already configured for Django/Python development.
this is my go to documentation for editing posts on this hugo site. it still uses markdown, but with some touch of style here and there.
Article frontmatter: Use front matter to add metadata to your content.
https://gohugo.io/content-management/front-matter/
--- author: ["Hugo Authors", "PaperMod Contributors", "Aditya Telange"] title: "Comprehensive Frontmatter Example" date: "2019-03-11" description: "A comprehensive guide showcasing Markdown, shortcodes, syntax, and formatting for HTML elements." summary: "Sample article demonstrating various frontmatter fields and their usage." tags: ["markdown", "shortcodes", "privacy", "syntax", "code", "gist", "css", "html", "themes", "emoji"] categories: ["themes", "syntax"] series: ["Themes Guide"] FAtags: ["markdown", "css", "html", "themes"] FAcategories: ["themes", "syntax"] FAseries: ["Themes Guide"] aliases: ["migrate-from-jekyl"] cover: image: images/msg.png caption: "Generated using [OG Image Playground by Vercel](https://og-playground.vercel.app/)" social: fediverse_creator: "@[email protected]" math: true weight: 2 ShowToc: true TocOpen: true ShowBreadCrumbs: false --- Inline Code This is Inline Code
Only pre This is pre text Code block with backticks <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example HTML5 Document</title> <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements." /> </head> <body> <p>Test</p> </body> </html> Code block with backticks and language specified <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example HTML5 Document</title> <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements." /> </head> <body> <p>Test</p> </body> </html> Code block with backticks and language specified with line numbers 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example HTML5 Document</title> <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements." /> </head> <body> <p>Test</p> </body> </html> Code block with line numbers and highlighted lines PaperMod supports linenos=true or linenos=table 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example HTML5 Document</title> <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements." /> </head> <body> <p>Test</p> </body> </html> With linenos=inline line might not get highlighted properly. This issue is fixed with 045c084 1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Example HTML5 Document</title> 6 <meta 7 name="description" 8 content="Sample article showcasing basic Markdown syntax and formatting for HTML elements." 9 /> 10 </head> 11 <body> 12 <p>Test</p> 13 </body> 14</html> Code block indented with four spaces <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example HTML5 Document</title> </head> <body> <p>Test</p> </body> </html> Code block with Hugo’s internal highlight shortcode <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example HTML5 Document</title> </head> <body> <p>Test</p> </body> </html> Github Gist The gist shortcode has been deprecated in Hugo v0.143.0. For GitHub Gists, you can embed them directly using HTML script tags:
<script src="https://gist.github.com/user/23932424365401ffa5e9d9810102a477.js"></script> To display a specific file within the gist:
<script src="https://gist.github.com/user/23932424365401ffa5e9d9810102a477.js?file=list.html"></script> Note: The gist shortcode is deprecated and will be removed in future Hugo versions. Use the HTML script approach above instead.
Emoji Emoji can be enabled in a Hugo project in a number of ways.
i put a pause on writing technical articles.
mainly because the platforms i love have become a hustle to use and they don’t make it easier for people not registered on those platforms to read content.
i’m trying out some static site generators, would love to have content publicly accessible without any unnecessary stuff
i put a pause on writing technical articles. mainly because the platforms i love have become a hustle to use and they don't make it easier for people not registered on those platforms to read content.
i'm trying out some static site generators, would love to have content…
— 🍉 (@achinga_chris) May 18, 2025
There’s no shortage of advice on how to deliver amazing talks or workshops at tech conferences, not to mention tips for preparing killer proposals and navigating the call for speakers.
But what about attendees? Sure, there are guides on becoming a good listener or an engaged participant, but this piece is different. This is about my experience and what makes a great attendee and listener.
Organizers & Speaker’s Sweat: A Behind-the-Scenes Look Before we dive into how to be a top-tier attendee, let’s take a moment to appreciate the efforts it takes to organize a tech event or deliver a talk.
The Announcement I only saw Django Conferences happening in European and American countries. From the content and updates shared on X and by speakers/attendees, I realized that these events had serious content to share. I envied that.
This right here, the X(tweet 😂) on May 10th.
Hello World 👋🏼 We are more than excited to announce the first-ever DjangoCon event in Africa. It will take place this year in Zanzibar, Tanzania, from 6th - 11th November 2023!
Please visit https://t.co/qC69TfKnPt to learn more!
1/3 🧵#djangoconAfrica #djcafrica #djangocon pic.twitter.com/gypAJD07hX
It’s normal to have a back-end on your website for your forms to be functional. Say no More!
Netlify offers hosting to static websites and serverless technologies, and it comes with super great features including form handling without a back-end.
Let’s build a form with Netlify:
What you will need:
Netlify account GitHub account First off let’s start with a simple html form:
Create a new html file and paste the snippet below:
gh cli web
Working with GitHub has never been boring, as a matter of fact, it’s the best part of the development process on my side. As usual, we use git and other distributed version control systems like Mercurial and many more.
I have been using the GitHub cli since February this year, and it is great. So let me show you how I got to use it. I’m on Ubuntu by the way. But I guess the process is the same on other OS, I’ll check it out.
The GitHub CLI (gh repo clone) GitHub CLI beta version was released a while ago, and it comes with really cool features. I have been using and interacting with GitHub without necessarily visiting the website, that’s fun right.
An alternative to using GitHub CLI is HUB, which was there before GitHub cli was introduced.
GitHub CLI is an open-source project, here on GitHub.
I had an article before on using GitHub CLI and its commands, so this is kind of like an update because the cli is up on version 1.x.x right now, better to stay on the know/updated. To get the latest releases of the cli https://github.com/cli/cli/releases
Access the best real-world tools, learning events, and training to shape the next generation of software development, using student benefits from GitHub Education
GitHub Education helps students, teachers, and schools access the tools and events they need to shape the next generation of software development. %[https://education.github.com/]
Well as a student whose goal/dreams or maybe ambitions are to prosper in the developer zone, GitHub Education offers the bridge to your success using the GitHub Student Developer Pack. Really cool tools available for free of course.
Installing git Install git from here Choose a selection based on your operating system. For Linux and Ubuntu OS, you may use this alternative: Open your terminal and paste the command below:
sudo apt-get install git Ensure you have a GitHub account. If not, create one here Join GitHub. First of all, we’ll configure your details to git. “Assuming your GitHub username is DevAcc, and the email used on GitHub is [email protected]” On your terminal, use the following commands:
GitHub offers more than just a host for your code. In this short tutorial, I will walk you through deploying a static react app/project on GitHub Pages.
I will be using one of my React projects from GitHub:
%[https://github.com/achingachris/myRepos]
A programmer’s learning tool is by practicing –I said that…
Let’s Get Started:
This tutorial assumes you already have your react project setup and ready to deploy
Step 1: Install the Dependencies (gh-pages): I use npm for my projects, so while in your project root directory, open the project on your terminal or cmd (windows).
React is a front-end JavaScript library. So you probably want to know the basics of JavaScript before diving into react, otherwise you will end up having a rough journey which isn’t good for your productivity.
I wouldn’t advice you to fully rely on my article, I had a quite rough journey and after I finally understood React, I better document it for a future me.
In this article, I’ll highlight the essentials and most important things to learn and provide a link to the resources as we gear up to creating your first React application.
Seeding data in a Django project can be essential for development and testing. Faker, a Python library, provides a convenient way to generate placeholder data realistically. This guide will explore how to seed data using Faker in Django.
Here is an example model:
First, let’s consider an example model consisting of Skill and Category.
from django.db import models import uuid class Skill(models.Model): id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False, unique=True) title = models.CharField(max_length=200, unique=True) def __str__(self): return self.title class Category(models.Model): id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False, unique=True) title = models.CharField(max_length=200, unique=True) def __str__(self): return self.title Creating a Seeder Command To seed data easily, we’ll create a custom management command.
Application Programming Interfaces (APIs) are crucial in the world of software development. They serve as the backbone for communication between different software applications. This article explores how to interact with a simple API using Python. We’ll use a dummy server set up using JSON-Server, a package that allows you to create a fake API for testing and development purposes.
Setting Up the Dummy Server Before diving into Python code, let’s set up our dummy server. JSON-Server provides a full fake REST API with zero coding in less than a minute(not literally). Here’s how you can set it up:
Progressive Web Apps(PWA) are basically sites that use modern web tools to provide app-like experiences to users.
https://web.dev/explore/progressive-web-apps
Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase: https://web.dev/articles/what-are-pwas
PWAs is a very interesting topic when it comes to user experiences and why businesses would use it. It comes down to users needs and organization goals and agenda, but hear me out:
Next.js, a React framework for server-side rendering, provides a solid foundation for creating fast and efficient web applications. In this article, we will explore the process of creating an installable Next.js application, taking advantage of the PWA features offered by modern browsers.
What is a Progressive Web Application (PWA)? A Progressive Web Application is a web application that utilizes modern web capabilities to deliver an app-like experience to users. PWAs are built with web technologies such as HTML, CSS, and JavaScript and can be accessed through a browser without installing an app store. PWAs offer several advantages, including offline functionality, push notifications, and the ability to be added to the user’s home screen for quick access.
The Dad Jokes App: Spreading Laughter One Click at a Time
Humor has a unique way of brightening up our day and creating moments of joy. In the digital age, countless apps cater to various interests, and one app that stands out is the Dad Jokes App. This lighthearted application brings a collection of witty and groan-inducing dad jokes to your fingertips, ensuring laughter is just a click away. In this article, we’ll explore the features and development of the Dad Jokes App and its impact on users’ daily lives.
Deploying a Django project on PythonAnywhere lets you make your web application accessible online. With PythonAnywhere, you can create a web app, configure it with a WSGI file, and host your Django project seamlessly.
Prerequisites: Pythonanywhere Account
An existing Django project is ready for deployment.
GitHub (Code Repo)
Basic Familiarity with Django and the command line interface
For demo purposes, please refer to the following project: It’s a voting app from the official Django Tutorial
Telegram bots are automated applications that run inside Telegram. Users can interact with bots by sending messages, commands, and inline requests. Today, we’ll walk you through how to build a simple Telegram bot using Node.js that provides weather and time information for any city.
Prerequisites Before we start, make sure you have the following:
Node.js and npm are installed on your machine. A Telegram account to create and manage bots. An API key from OpenWeatherMap. Setting Up Your Project Firstly, install the required Node.js packages: dotenv, node-telegram-bot-api, axios, and moment-timezone.
Appwrite is an open-source, end-to-end Backend-as-a-Service (BaaS) platform designed to simplify the process of building web and mobile applications.
%[https://appwrite.io/]
Core Components of Appwrite User Authentication and Management Appwrite offers built-in user authentication and management services, supporting multiple authentication methods such as email and password, OAuth2 providers (e.g., Google, Facebook), and more. It also provides APIs for user registration, login, password recovery, and session management. This simplifies the implementation of secure user management in your app.
GraphQL is a powerful query language for APIs that allows developers to request and receive the data they need efficiently. In this step-by-step guide, we will walk you through the process of building a GraphQL API using Node.js, using airport data as a sample for the demo. Whether you’re a beginner or an experienced developer, this tutorial will provide you with the necessary knowledge to easily create your GraphQL API.
Now that Next.JS is an awesome frontend tool. How can we get HTML/CSS/JS Templates to work perfectly in a Next.JS project? This article will take you through the steps.
Requirements To fully grasp the content, it’s highly recommended that you have the following tools installed on your development environment:
NodeJS
Text Editor (Maybe VIM?)
Basic React.js and Next.JS knowledge
Finding a Template For the demo, we will use one of the open-sourced templates from Startbootstrap. We will use the Freelancer theme, a perfect template for a personal portfolio website.
A headless content management system (CMS) is a back-end-only content management system (CMS) built from the ground up as a content repository that makes content accessible via an API for display on any device. In this article, we will explore the benefits of headless CMS and how it can unlock the full potential of your content delivery strategy.
Before we list out examples, let’s see what makes Headless CMS has to offer;
2022 has seen growth in Developer communities and Tech events in Kenya. There are now many communities that developers can benefit from just by being a part of. This article will list some of them and how to join the communities.
Only Devs Only Devs is a developer Community from Mombasa. It started from a Payment Integration Hackathon, and they have been active ever since. They have weekly sessions on Fridays at Techbridge Invest, where they share skills and knowledge and hold hands-on code sessions.
2022 was a great year for my career and personal growth. I had my most “first times,” and memorable moments were made. Here is a sneak peek into my 2022:
Career Growth Technical Writing I started getting money from writing articles in February 2022. It’s something I had not planned for at all. A friend of mine, who we used to co-manage a developer community, Meta Developer Circles, referred me to Hackmamba as a Technical writer.
Imagine testing APIs using your mobile device, either iPhone or Android. All APIs, including REST, GraphQL, WebSocket, SOAP, JSON RPC, XML, HTTP, and HTTPS.
This article will show how we can test APIs on mobile devices using API TESTER.
Prerequisites
API TESTER Mobile Application Ready to Use API endpoints The API TESTER application is freely available for the following devices:
iOS: Download Link Android: Download Link Huawei: Download Link This article will use demo API endpoints from JSONPlaceholder, which offers free fake REST API.
Bootstrap is one of the simplest and most used CSS libraries. This article will guide you on configuring a NextJs project with Bootstrap SCSS and JS files.
Codesandbox Demo
%[https://codesandbox.io/p/github/achingachris/next-bootstrap-template/draft/zealous-archimedes]
GitHub:
%[https://github.com/achingachris/next-bootstrap-template/tree/config-bootstrap-scss-and-js]
Creating a Next.js Project If you already have a NextJS project, skip to the next step.
On a terminal, run the following script to set up a NextJs project:
npx create-next-app@latest After installation, run:
npm run dev A successful setup will run on localhost:3000.
json-server is a tool for creating mock REST API fast! To get started, ensure you have the following requirements:
NodeJS (npm) Let’s get started!
On an empty folder, initiate a nodejs application by running the following on your terminal/CMD:
npm init -y Once that is complete, you install the following packages:
json-server json-serve cors nodemon (as a dev dependency) npm install json-server json-serve cors npm install -D nodemon After the installation, create a new file: index.js. This is the entry point for the json-serve. Add the following inside the file:
In my first week in phase 2 of Moringa School Software Engineering classes, I covered the basics of getting data from APIs and working with forms. The Code Challenge for the week had the following tasks:
Fetch Transactions from an API and tabulate them. Add new transactions. The transaction added should be posted to the backend API. FIlter out transactions by description The initial code for the challenge is in this commit.
This post covers creating a simple weather search application using plain JavaScript, HTML, and CSS.
Demo and Source Code The project demo is live on codesandbox, and the source code is available on GitHub.
%[https://codesandbox.io/embed/weather-robot-phase-1-lzt9z9?fontsize=14&hidenavigation=1&theme=dark]
Prerequisites Openweathermap API Keys JavaScript Fetch API and DOM Manipulation Basic HTML and CSS Creating the HTML and CSS Files Create a new file (index.html) and add the following:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Weather Robot</title> <link rel="stylesheet" href="./weatherRobot.css" /> </head> <body> <section class="section-head"> <div class="container"> <h1 class="heading">Weather Robot</h1> <form> <input type="text" placeholder="Search for a city" autofocus /> <button type="submit">GET WEATHER</button> <span class="msg"></span> </form> </div> </section> <section class="city-array"> <div class="container"> <ul class="cities"></ul> </div> </section> <script src="./weatherRobot.js"></script> </body> </html> Create separate files for the styles and JavaScript. Inside the CSS file, add the following:
TL;DR This post will take you through installing JupyterLabs and how to add a NodeJS kernel to it in Ubuntu.
Installing JupyterLabs For a better experience, you should install Jupyter Lab inside a virtual environment.
sudo apt install python3-venv After the installation is complete, create a new environment:
python3 -m venv jlab Note that you can replace the jlab with any name of your choice.
Now activate the environment:
A state is the current data passed in React components. State management in React enables you to dynamically update data in Components.
This post will take you through creating an initial state and an event to trigger a state update in Reactjs.
Prerequisites: NodeJS Installed Knowledge of React Source Code and Demo GitHub Repo Link
Creating A New React App:
# create a new react app npx create-react-app state-management-demo # move into the new app's directory cd state management-demo # start the app to see if everything is okay npm start For the Demo, clean the App.js to have the following:
Strapi is an open-source Headless CMS.
TL;DR:
The demo source code to this article can be found on GitHub.
To get started, you need to have the following on your computer:
NodeJS v14 + Cloudinary Account Creating a Strapi Project To create a new strapi project, run the following:
npx create-strapi-app@latest my-project --quickstart After a successful installation, Strapi will automatically open a new browser for you to create a local account:
Near protocol is a decentralized application platform that gives developer-friendly features to build and develop smart contracts.
Near offers the platform to build smart contracts in Rust and deploy them. By default, Near supports Rust and AssemblyScript. Rust is recommended for its greater developer experience when it comes to memory allocation and a minimal runtime, among other great reasons.
Installing Rust (Ubuntu/Linux) To install Rust, follow the steps below:
Install Curl If you don’t have curl installed, use the scripts below:
When creating a react application/website, most of the pages would be sharing the same content all over. For example the navigation bar and page footer. Instead of importing each component in every page to be rendered, it is much easier and faster to just create a layout component.
This post will cover how to create a react app using Layout Components.
Live demo: https://hjpx0v.csb.app/
Source Code to the demo: https://github.com/achingachris/react-layout-demo
Here is how to do it:
Postman is an API testing platform. You can use postman web platform:
or the desktop application for testing your APIs.
Postman can be used to test all API requests: get/put/create/delete
If you are new to Postman, I’d suggest you go through their Bootcamp: https://web.postman.co/bootcamp
I will be using the desktop application for the demos, they’re no big differences from using the web version of Postman.
What this article covers: Creating collections Adding requests Creating environments and Variables Creating Collections: In Postman, collections are folders where you put all APIs with similar descriptions or projects together. It is a pretty neat way to organize your APIs for testing.
Making payments online should be seamless and less frustrating. I conquered my fear and tested out Flutterwave and I was really impressed. Here is how to create a simple payment form using Flutterwave and WordPress.
What you’ll need Xampp WordPress Flutterwave Account (Test Mode/Live) To get started with WordPress in your local development environment, here is a step by step guide:
How To Install WordPress in Windows
Creating Flutterwave Account Create a flutterwave account. Go to settings, and under the API tab, you’ll get your API keys.
WordPress is a popular, open-source content management system (CMS) allowing users to create, edit, and manage websites and blogs quickly.
WordPress is known for its user-friendly interface, extensive customization options, and vast plugins and themes, enabling users to add functionality and design elements to their websites without needing extensive coding knowledge. The platform is used for various websites, including personal blogs, business websites, e-commerce sites, online portfolios, and more.
There are two main versions of WordPress:
Deploying NextJS to production By default, NextJS applications are easily deployable on Vercel with zero configurations. That doesn’t mean you shouldn’t explore what other platforms have to offer.
To deploy a NextJS application, simply follow the steps below. If you want to start straight up without the hustle, use the button below:
Create a Netlify Account On your browser, go to https://app.netlify.com/signup to create your Netlify account.
Hi There! Welcome to Data 101.
In this article, I will take you through reading files using Python as you prepare to analyze them.
I will be using Google’s Colaboratory tool as my IDE. You don’t have to install or set up anything on your laptop/computer to use it, simply go to https://research.google.com/colaboratory/ and create a new notebook.
Reading CSV Files You’ll need to upload a data file. To do so, click on the folder icon on the far left of the Notebook:
Express JS is a backend framework that runs on Node JS.
It really comes in handy when creating backend microservices for our applications.
I will take you through simple steps in creating a simple API with Express.
Installing dependencies This should be the simplest of all:
On the project root, open up your terminal/CMD and install express using the following command:
npm install express Create a server file While still on the root of your project, create a JavaScript file; app.js
Most of us use GitHub services frequently if not on a daily basis.
If you are a student, GitHub offers student packages with great tools and freebies you could use. Check my article on Github’s Developer Pack for students.
In this article, I will take you through using GitHub REST API to display your repos on your portfolio website. I will use postman to test the API.
GitHub REST API Documentation.
Playing With The API I’ll use postman to show you what the API can offer for your own personal use. For this, I’ll be using the endpoint to fetch a user’s repositories.
C# is a general-purpose, multi-paradigm programming language encompassing static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented, and component-oriented programming disciplines.
In this article, I will take you through installing and setting up C#(c-sharp) environment on a Ubuntu OS(Operating System).
Requirements:
Ubuntu OS (20.0 and above) Internet Connection (For Installation) Command Line Skills (for the obvious LOL) Visual Studio Code Note that .NET is a C# library
Installing .NET (Csharp) Start your terminal on Ubuntu;
@Hashnode is by far my best Developer blogging platform. One of the things making me love it is the use of markdown in writing and editing articles.
If you just created a @Hashnode blog or thinking of creating one, then this is the best article for you.
In few words, I will demonstrate how you can use markdown to create your articles.
Join Hashnode
Markdown, what is it? 👀 Markdown is a very simple mark-up language using plain text. (very simple 😁😁)
Learning never ends, especially for developers. That is why we have a lot of people who have sacrificed a lot to create great content for the developers’ ecosystem.
In as much as most content can be gotten for free, we should be aware of vague content and/or resources that will make you think twice about your career.
I have made a list of 10 developer channels that I highly recommend if you’d love to learn and keep yourself updated.
This is a hands-on code tutorial on how to fetch data using plain JavaScript and Displaying data on a simple HTML web page.
When creating websites, there is a possibility that you’ll be getting data from an API. The data is in JSON, in most cases.
How do I display the JSON is my HTML page using vanilla JS?
Let’s do that in a few steps.
JS has a built-in function called .fetch() that is used to ‘fetch’ data from external files or resources.
As Spotify says, “Listening is everything”. That’s it, after watching tutorials and reading articles, it’s a perfect chill zone to be on your headphones and listen to some developers talk on various topics.
This is my playlist on my podcast library, it may help you keep up with all the daily updates on the dev zone…
The StackOverflow Podcast It’s one of the most trusted podcasts trusted by developers worldwide.
Using Strapi https://strapi.io/
What is Strapi Strapi is a headless CMS
A headless content management system, or headless CMS, is a back-end-only content management system that acts primarily as a content repository. A headless CMS makes content accessible via an API for display on any device, without a built-in front-end or presentation layer
A list of headless cms - https://jamstack.org/headless-cms/
Creating a simple blog CMS with strapi Setup strapi project: Requirements Need to have nodejs(Version 10 and above) and npm.
All web developers are probably familiar with using the web console as their debugging tool. The most common way is using the famous console.log tool that JavaScript provides.
The console has more than just the .log() method that could be helpful. Check out some of the methods you could use:
1. console.log() This is the most used method of all
It outputs messages to the web console. The message may be of any data type. can also pass in variables and functions as parameters.
For the self-taught developer and (or) pretty much all developers, we use open source projects in our daily code, with or without knowing.
For real though, Open Source (OS) projects have made our work easier and surprisingly fun.
TL;DR My First Open Source Contribution It is always hard to find what open source projects you’d love to contribute to, especially when you are a beginner, well that’s why we mostly end up fixing the typos and eventually, making impressive contributions with time.
Hello world! I have been attending @Hashnode Bootcamp III and I have more confidence and reasons to keep blogging.
TL;DR I blog because … 1. Community Motivation. because I’d love to give back to the community.
I had always wanted to write a blog ever since I started writing code, but it was hard for me to start initially. But since I prefer written tutorials to video ones, I came to learn of many great writers who share great content with the community for free.
Your Brand is what people out here talk about you, so it’s up to you to make it good or bad, or beneficial to your career.
There are a lot of outstanding Developer profiles that we admire and look up to them for guidance and most importantly, our personal growth. There are too many articles and videos on how to market yourself as a developer, creating outstanding Resumes, and become influential on social media platforms.
TL;DR
I started focusing on projects that would land me my first ever software development job this week. So I have been dealing with creating applications with functionalities that introduce me to the most commonly used features throughout the industry.
So I have been working on payment integrations and re-designing my portfolio.
I love following the ‘Build as I Learn’ technique, so I started two projects, one called ’ Fundraiser ’ and the other one ’ Community Space ‘.
TL;DR React Native - Simply an Open Source framework (React) used to create applications that run on multiple devices (Android, Web, iOS …) using JavaScript.
React Native Docs
To get started with React Native, it is advisable to have basic knowledge of javascript (es2015) and React components and props, just the basics of all these will set you ready.
Native Components: Components that can be used in iOS and Android devices.
Do you have a Facebook Page and would love to promote it over your website or any site at all? A Like button is all you need. No technical procedures, just click and copy!
Let’s make one in few simple steps:
Go to Facebook developer’s site Facebook developer:
You will find all tools and stuff you could utilize provided by Facebook open source and APIs.
What are props? In simple terms, they are data passed into components.
When to use props? When building a react application, the UI is divided into smaller parts called Components.
Some of these components are re-used in various pages or parts of the application, of course with different data/messages/content. For this to be effective, props are used.
For example, a simple react website with two pages, all share a common <Head> element:
A year ago, I was struggling with using APIs to creating a simple website. After some tutorials online I made a simple website that displays the statistics for covid-19. It is not a fancy or unique site, but it did its purpose, TEACH.
Which API did I use? I used coronavirus-monitor from Rapid API platform. The API returns an array of countries with average statistics on the number of total infections, deaths, number of people in critical conditions, and number of people recovered. (and many more)
An Updated article (2023)
Developer Communities in Kenya
Growing as a Developer (Software/Web Developers) requires much effort and persistence. I can’t stress enough how important Tech Communities contribute to one’s growth.
I made a list of some of the most known Tech communities in Kenya that you can join and start growing your skills. The order of the list doesn’t favor any community.
FaceBook Developers Circle: Developer Circles are communities of innovators, where aspiring and experienced developers receive free tools to build new skills, grow ideas and boost their careers. - https://developers.facebook.com/developercircles/
This is an update to the previous article I wrote on React & Bootstrap Starter Template
Why a Template? It’s because they save time.
The process of setting up a project can be always frustrating and it’s always repetitive. That’s why I have a template for almost every stack I do.
React & Bootstrap I love using Bootstrap because of the almost Zero configuration and the hustle of designing a responsive web layout is taken care of so I just focus on how a site would look.
As this is an appreciation post, I will be highlighting all the posts on the Dev Tech Question on my Community’s Facebook Group.
The Community I am a proud member of the Facebook Developer Circle Mombasa. With great members who share valuable ideas, opportunities, and various solutions to bugs and code-related issues.
The Dev Tech Questions The program was officially introduced in October 2020 by one of the greatest leads, Ingari A. Joan.
If you are coding along, I used the following set up environment:
Requirement:
Python3 Virtualenv Pip The file structure of the cloned project is as shown below:
├── manage.py ├── myapp │ ├── admin.py │ ├── apps.py │ ├── __init__.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py └── _projectroot ├── asgi.py ├── __init__.py ├── __pycache__ │ ├── __init__.cpython-38.pyc │ ├── settings.cpython-38.pyc │ ├── urls.cpython-38.pyc │ └── wsgi.cpython-38.pyc ├── settings.py ├── urls.py └── wsgi.py Registering a Django application For an application to be functional, we have to let Django know that it exists.
Create a specific directory top work on.
cd django-template You’ll notice some folders created and a pyvenv.cfg file created but we won’t need it at all.
Activate the virtual environment
source bin/activate Installing Django I’m going to use the latest official version (3.0.8), using the simple command below:
pip3 install django Confirm if it’s installed by checking the version
python3 -m django --version Creating A Django Project Starting a Django project
What Is Django
Django is a python web framework. It’s used to developing full-stack web applications. Django is my to-go framework before considering other options when it comes to working with full-stack projects, either personal or commercial. Well, there are other options to use like Express which is a great stack too.
What Should I know before using Django
Django is a python framework, so this goes without saying that you need to know some bit of python basics and syntax before hitting the road. But as some prefer, learning as you go, Django does give too many constraints with the option too.
I started off #100DaysOfCode on the 1st of January 2020 and hit the Linked List topic without looking back.
It is an interesting Data Structure and to be honest, I still am working on it.
So I’ll explain what I have understood on LinkedList in a few paragraphs as I continue working on real examples.
What is a Linked List? It’s a collection of data in a linear structure, and the order of the data isn’t determined by their physical order.
A short guide on how I started using ES6 Modules when using Node.
I love the EcmaScript Module syntax and I use it almost in all my code and practices.
I will use the example from Express Introduction - MDN
So, create a new folder (node-es6):
mkdir node-es6 Inside the folder, initialize a node application by:
npm init -y Now open the folder using your favorite text editor.
Create a new file hello.js and paste the code:
On September 10th, 2020, Facebook Developers announced the 2020 Developer Circles Community Challenge.
The challenge was on creating tutorials for using any of Facebook’s open-source products.
Submissions were really great and once again appreciating and stressing on the importance of developer communities.
I have gone through the regional and global submission winners and I’d love to highlight all React-based tutorials for beginners.
Here is the list: (No particular order was followed here :-) )
A short guide and a practical reference to GitHub Documentation on syncing a repo.
It’s kind of an ‘open-source’ hacks
For the guide, I’ll be using a repo I forked from FbDevcCommunityContent.
From the terminal, I will change my directory to where the project files are:
The first step will be to fetch branches and their commits from the upstream, or the parent repository:
git fetch upstream After that, ensure that you are at the default repository on your remote repo. In my case, the default branch is master, and so is the upstream.
https://linktr.ee/chrisdev
Well, I started writing an article, a really long one so I had to break it down then post the whole piece (ironic tho) later once I am done.
21 in A Glimpse My journey into a full-stack dream job seriously started in March 2020, and I’ve learned more from the many mistakes I have made along the way.
After research and a little bit of practice, I thought I’d document my preferences and choices that I’ll probably use in ‘21. Most of my suggestions are from the Dev communities and some individuals who I admire how they work and probably walking in the same path.
Live Demo
I love using Bootstrap because it saves time when trying to make a site responsive. After learning to use react, I started working on using bootstrap with react. It was tough at first, and after I got a hang of it, I quickly made a template that I’d reuse every time I want to use react and bootstrap altogether.
Here is brief documentation and description of the template: Usage: Start using the template in these few simple steps:
It’s about time, my favorite website has now a Dark Theme.
2020’s GitHub Universe came in with a lot of new goodies and features for the developers and GitHub users.
Of all the new features, the Dark theme on GitHub and the Emoji skin tone really caught my eyes. Here’s a quick guide on how to adjust your appearance settings:
Go to the Appearance tab on your GitHub settings:
Or quickly use this link https://github.com/settings/appearance - Ensure to be logged in to your account
It’s the time of the year we get alot of “top language of the year” kind of talks every where. In addition to that, the “What to expect as a dev in the next year” stuff too.
It’s not a bad thought to read the stuff, or watch, or listen. I’ve had friends who switched their tech stack just because some language or tool was mostly used, and it didn’t end up well.
I would like to take this time and write my appreciation to the diverse community that has made it all possible for me and all other members.
My Community Being part of a community is a gateway to your career success. Developer communities play a larger part in fulfilling this.
Facebook Developer Circles: Nairobi has been really helpful to my career and a source of motivation to keep building a stronger foundation, and ooh yeah write clean code. The weekly posts by the admins and moderators, the campus communities, and the free quality courses are just but a few blessings from the community.