Week notes 17

Sun, 03 May 2026 00:00:01 GMT

A heavy week on the docs side. Two things shipped that I had been chewing on for a while, and a couple of small skills came together. Some reading and writing on the side too. - 🧪 Built a docs-ja-translator skill and landed the Japanese tutorial pilot at work. The skill takes an existing MDX document from Expo tutorial, mirrors it under pages/ja/

Playwright to Chrome

Sun, 19 Apr 2026 00:00:01 GMT

Back in January, I had just started using Codex CLI and Claude Code. I was spending more time with Codex CLI and ended up creating a small Expo and React Native app as well. As I was learning how to use these tools, I wrote about using Codex CLI with Playwright for browser automation tasks in First Few Days with Codex CLI post. The approach I discussed initially, worked for me for some tasks by setting up Playwright MCP and managing its browser extension. However, the approach isn't flawless. Any time, Playwright MCP gets an update or its browser extension does, each requires to make a new connection to exchange token between them. The token mechanism is what Playwright MCP and its Chrome extension use to connect Codex CLI or Claude Code.

My Mac setup

Sat, 18 Apr 2026 00:00:01 GMT

A guide on setting up Apple Mac for daily work.

Week notes 16

Sun, 12 Apr 2026 00:00:01 GMT

Mixed week. A small side-project release, a couple of satisfying wins on the work side, and a lot of late-night ideas I want to act on coming week. - 🚀 Shipped SkillsBar v1.7.0. The big addition is Codex plugin support and adding custom collections view where one can organize their skills based on a theme or topic or work repository. Codex plugins now show up under User Skills in the Codex tab, alongside the Claude Code skills SkillsBar already tracked. Also fixed a quiet bug where the Usage Stats screen was silently dropping historical data beyond four weeks. This is a major update, and I used GPT 5.4 to add more tweaks apart from doing this major update.

Replacing rm command with trash in Claude Code

Sat, 11 Apr 2026 00:00:01 GMT

The fear of losing a file is a big deal using Claude Code since it has access to bash tools and can run bash commands on its own. This is possible whenever --dangerously-skip-permissions is enabled or I have accepted edits inside a particular session. A workaround for this can be to skip running rm command inside Claude Code settings. I have added "Bash(rm:)" to a "deny" list inside Claude Code's global settings file (/.claude-code/global-settings.json):

Week notes 15

Sun, 05 Apr 2026 00:00:01 GMT

This week leaned heavy into to upgrading lint tools at work and a bit of writing. I also managed to create a skill to perform a tedious activity with Claude Code and /chrome tool it has, which I am going to write about in a future post. - 📝 Wrote three short blog drafts that will go live on this blog soon.

Week notes 14

Sun, 29 Mar 2026 00:00:01 GMT

Busy week with mix of publishing, drafting, and big changes. The kind where you look back and wonder how it all fit into five days. - 📝 Wrote a blog post based on the recent works on Expo docs. It talks about different layers of discoverability that have become essential for human readers and AI agents.

Docs discoverability layers

Sat, 28 Mar 2026 00:00:01 GMT

When someone says a doc site is "discoverable", they often mean that a human can find it through a search engine or use the in-site text-based search. Most documentation sites are built for human readers. If a page loads correctly and reads well, it is considered discoverable. This assumption covers only one dimension. Search engines need signals to crawl and index pages. They need to know which URL is authoritative, what a page is about, and how to display it in results. Schema parsers (systems like Google's Rich Results engine that read structured data) need typed metadata to understand what a page represents, not just what it says. AI agents need clean text they can consume without wasting tokens on parsing HTML, JavaScript, and navigation.

My Starship prompt setup

Sun, 22 Mar 2026 00:00:01 GMT

The prompt is the line you stare at before every command in a terminal app. It can be as minimal as a symbol like $ or . By default, the Terminal app on macOS uses zsh with a plain prompt that shows your macOS username. While it shows some information, it tells you nothing about the current directory you are working in. There are various configurations you can use with zsh or the shell of your choice. Right now, I am using zsh and I prefer a clean setup. I have been using Starship for a while now and recently went through a major rewrite of my configuration.

Color-coding my Claude Code sessions

Sat, 14 Mar 2026 00:00:01 GMT

I usually have two or more sessions running at a time either in the same or different project directories. One of the longest and most used sessions I have is in my notes directory, where I am constantly creating specs or taking notes on the stuff I am working on. One problem when running multiple Claude Code sessions in different terminal windows or tabs is visually distinguishing them.

TIL Remotely accessing one MacBook from another MacBook

Wed, 11 Mar 2026 00:00:01 GMT

macOS has a built-in way to remotely access another Mac using Screen Sharing and Remote Login (SSH). No third-party tools needed. How to set it up

Using Ghostty for the first time

Wed, 04 Mar 2026 00:00:01 GMT

It's 2026, a time for AI agents and AI tools like Claude Code and Codex CLI to be alive. I am using them every day and I find myself spending more time inside a terminal app rather than a code editor. In the past, I've written about setting up and installing Oh My Zsh and using iTerm2 as my de facto terminal app. I've used iTerm2 as long as I can remember, probably around a decade. I have switched between different color schemes and configurations, even saved them in my dotfiles.

Slash pages you need for your blog

Sat, 28 Feb 2026 00:00:05 GMT

The pages outside /blog can matter just as much as your posts. Slash pages like /now, /about, and /uses show readers who you are beyond your writing. I currently have 12 slash pages. That's too many. Here's the thing: each one serves a purpose and I have found myself visiting other people's slash pages more than I expected. Weirdly compelling. Let me walk through what I have and why:

Using images in Claude Code

Wed, 18 Feb 2026 00:00:05 GMT

Recently I wrote a post on Running headless Codex CLI inside Claude Code, which describes a way to use Codex models in a headless way when you have Claude Code installed on your local machine. I ended up creating a skill for it where Claude Code will ask you to go through a series of questions to select which Codex model and its reasoning level. It also goes through the task you want to achieve with Codex without leaving your session inside Claude Code. During the development of that skill, I found because an LLM can have stale training data, it might not choose the right set of models. This is exactly what happened on the first iteration of the skill development. Opus 4.6 initially had GPT 4 models added to the skill and I only found out about it after running the skill manually (and no, I didn't read the skill file when it was created for the first time).

Running headless Codex CLI inside Claude Code

Fri, 13 Feb 2026 00:00:05 GMT

I have both Claude Code CLI and Codex CLI installed on my local machine. I often use Codex to code review or tighten the code on something I am working on. Claude has a better terminal UI, which is not only pleasing to use, but it respects my terminal app's theme. Switching between both CLIs and then finding a way to write prompts wasn't fruitful. So I created a Skill in Claude Code to allow me to use Codex CLI in a headless way. Codex has a non-interactive mode that can be enabled using codex exec. It dumps output in stdout. This is what makes it possible to use inside Claude Code CLI.

TIL about tracking your Claude Code tokens usage

Wed, 11 Feb 2026 00:00:01 GMT

I wrote about tracking Codex tokens usage recently, and the same tool works for Claude Code. Different command though: shell

TIL about tracking your Codex tokens usage

Sun, 08 Feb 2026 00:00:01 GMT

I use Codex for both code-related and non-code tasks in Cursor and in the terminal. I wanted a better way to track Codex token usage day by day. Recently, I learned about @ccusage/codex, which reads your local Codex logs and spits out a table of exactly how many tokens you used each day. This breakdown isn't provided by the Codex usage page.

Migrating from Cursor to VS Code

Sat, 07 Feb 2026 00:00:01 GMT

I recently migrated from Cursor to VS Code. Cursor's agentic code integration was a huge part of my daily workflow. If you're switching from Cursor to VS Code, the migration is straightforward. There are a few steps to get it right.

TIL about git shortlog

Sun, 01 Feb 2026 03:42:51 GMT

I have been using Git for all my career in the tech. I am habitual of the basic commands such as git add, commit, status, log and a few more that I use consistently. Yes, until last week, I had never once used or heard about git shortlog. Sometimes you want to know who actually did the stuff inside a repository. Or like me, at the end of each year at work, I have to compile a list of external contributors along with their contributions count.

2025 - A year in review

Fri, 30 Jan 2026 00:00:01 GMT

Another year, another reflection. This is my sixth consecutive year-in-review post. Writing these has become a tradition I genuinely look forward to at the end of a year. It forces me to slow down, instead of just rushing. This year, I mostly focused on work, and I had fun doing that, so I am going to keep this post short.

2025 blog stats

Sat, 24 Jan 2026 00:00:01 GMT

Recently, I was looking at my blog analytics for 2025 in fathom analytics and I have some thoughts to share. 62,500 unique visitors. 77,400 page views. I've been writing posts for years now and it always feel nice when people read them. If you are reading them, thank you!

Lessons from 10 years of blogging

Sat, 17 Jan 2026 00:00:01 GMT

On January 8th, 2026, I hit 10 years of blogging on this little corner in the vast ocean of internet. I missed the exact date to post, but I do not want to skip the marker. My first post on this blog was JavaScript Code Conventions on Jan 8, 2016. The archive now shows 223 posts. That line in the sand still feels unreal.

Week notes 13

Sun, 11 Jan 2026 00:00:01 GMT

Busy week with mix of publishing, drafting, and experimenting. - 📝 Published a post on sharing my initial experience on using Codex CLI outside of coding and mostly with Obsidian.

2025 year in books

Fri, 09 Jan 2026 00:00:01 GMT

In 2025, I set a goal to read 40 books. It was going well. Then I did not finish anything for a span of three months, but I managed to complete the goal. Overall, it felt a sustainable year, though I'd like to read more books. I won't list out all of the books I managed to read this year. But if you are curious, I use Goodreads to track my reading challenge and the books I have read. I completed the challenge and went on to complete 64 books. Also, for the first time, I completed a manga series, and I am looking to dive into more manga in the future.

First few days with Codex CLI

Sun, 04 Jan 2026 00:00:05 GMT

Using Codex CLI beyond coding, for Obsidian note management, and building automated workflows with MCP servers.

Adding Static Quest webring

Sat, 27 Dec 2025 00:00:01 GMT

I have seen webrings on blogs I usually read. I think they are an amazing way to discover new blogs within the community. However, I had never indulged previously to add one to my blog. Recently, I read about Static Quest on Clayton Errington's blog. I am a huge fan of Clayton's 100DaysToOffload challenge, and the blogs I've come across through his challenge are some of the most interesting blogs I've visited.

How I added llms.txt to my Astro blog

Wed, 24 Dec 2025 00:00:01 GMT

At the end of 2024, there was a growing interest in tech writing community around publishing an llms.txt file. The purpose of this file is to provide structure or full context that an LLM vendor can use to understand a site owner's intention and consume a site's content in a structured way. The whole concept is beneficial for AI crawlers. Instead of navigating through a site's HTML, CSS, and JavaScript to extract content, a file like llms.txt provide them with clean, pre-formatted content. I'd like to think that this file provides a structured sitemap for AI consumption.

Week notes 12

Sun, 21 Dec 2025 00:00:12 GMT

This week was good. I was able to complete a few tasks at work and I was able to spend some time reading the books I started earlier. - 📝 The first post is about adding a yearly post count visual to an Astro blog. It talks about the approach that pulls all posts at build time, groups them by year, and renders the totals as a simple chart so my publishing cadence is obvious at a glance. It stays fully static (no client JS needed), fast to load, and makes it easy to spot active years and gaps.

Add a yearly post-count visual to your Astro blog

Fri, 19 Dec 2025 00:00:01 GMT

A quick walkthrough to build a yearly post-count bar chart in Astro using your existing blog content collection.

Wait, there are smart quotes in my docs

Mon, 15 Dec 2025 00:00:01 GMT

How to catch smart quotes in documentation when copy-pasting from apps like Notion, and why maintaining consistency matters over time.

My default apps in 2025

Wed, 10 Dec 2025 00:00:10 GMT

It's been a year since I last updated my default apps list. The main driving force behind the update in 2025 is consistently the same app for multiple use cases and switching to Android from iOS as a primary device and eliminating some apps from my professional and personal workflows. - 📨 Mail Client: Gmail

Week notes 11

Sun, 07 Dec 2025 00:00:10 GMT

I am back to writing weekly notes and I am going to keep things casual this time. This week was a bit fast and slow at the same time.

Create a copy as markdown button for LLMs in an MDX documentation site

Wed, 03 Dec 2025 00:00:01 GMT

Using MDX for writing and managing content for a documentation site provides flexibility if you are deep into the "docs-as-code" workflow. This flexibility allows you to mix Markdown with React components, use dynamic data and stitch them together at runtime. However, this flexibility also comes with challenges. MDX files often contain components that render content at runtime and these components are not included in the raw Markdown output:

How to add a recent posts section to your Astro blog

Fri, 28 Nov 2025 00:00:01 GMT

Recent posts are a light-weight way to keep readers engaged through your blog's content. Recently, I decided to add this section at the end of each post without using any external service like an analytics service. Instead, I decided to use tags, which are already present in each blog post's frontmatter and use them to show the most recent posts. I've used tags since the beginning of my blog and I've also written a post about how I manage tags without getting overwhelmed by their amount.

How to use multiple iOS simulators at once with Expo CLI

Sat, 08 Nov 2025 00:00:01 GMT

Opening a React Native app created with Expo in an iOS simulator is a common developer task. By default, the app opens in the last used iOS simulator. In my case, I frequently use the iPhone 17 Pro simulator right now which runs iOS 26 version. Sometimes, I also want to open the app in another iOS simulator. For example, working on the previous blog post, I wanted to observe and simultaneously show how large header titles and native tabs work on iOS 26 and iOS 18. Some of other use cases would be to test other platform-specific behavior across different iOS versions, comparing layouts between different screen sizes, and so on.

Large header title in Expo Router

Sun, 02 Nov 2025 00:00:01 GMT

Creating native iOS experiences in React Native is about using platform conventions. One of these patterns that Apple offers is the large header title that smoothly collapses as you scroll through a list, something you must have seen in Apple's apps like Settings or Messages. In this post, let's dive into how to use the large header title when using Expo Router library for iOS.

RSS feed in an Astro blog

Sun, 12 Oct 2025 00:00:01 GMT

One of the easiest ways to follow a site without being tracked or throttled by an Algorithm, with no login walls, is having content delivered to a reader app of your choice. This is why so many personal blogs opt to include an RSS feed. This post is just a quick guide about the implementation of RSS feed for my blog — amanhimself.dev.

Content insets with FlatList in React Native

Fri, 18 Jul 2025 00:00:01 GMT

In this quick post, let's explore how to use content insets available within FlatList in React Native to ensure that the content is properly presented behind the header. This post is a continuation of Header blur effect in Expo Router. Current approach: using useHeaderHeight hook

Exploring React Native: Header blur effect in Expo Router

Sun, 22 Jun 2025 00:00:01 GMT

Modern mobile app interfaces go beyond opaque header bars. On iOS, a frosted-glass like blur effect when scrolling a screen which contains the header is quite easy with Expo Router and React Navigation. In this article, let's explore how to implement this effect in a React Native app using Expo Router. For demonstration, the following will be the final result:

Advanced code blocks with language labels and copy buttons in Astro

Thu, 12 Jun 2025 00:00:01 GMT

Learn how to enhance your Astro blog with advanced code blocks featuring language labels and copy buttons using Shiki syntax highlighting.

Managing python environments on macOS using conda-forge

Sun, 08 Jun 2025 00:00:01 GMT

If you use your macOS for Python projects, especially for AI tools like Stable Diffusion WebUI or Open Web UI, you likely find it frustrating that macOS ships with a python3 default version. Sometimes, this version can be outdated or locked down. One project may require Python 3.11, while another requires 3.9. For example, at the time of writing the guide, the default Python version on my machine is:

Exploring React Native: Fetching Data with Tanstack Query

Thu, 29 May 2025 00:00:01 GMT

Tanstack Query (also known as React Query) is a powerful library to fetch data and manage state in React applications. It leverages the hook oriented architecture, which goes well with modern React apps. It also offers automatic data caching, managing errors internally for easier API interactions. While building the home screen of the manga tracker app, a playground project, I decided to use this library to fetch the data from the AniList API. I am using Expo Router to handle navigation and create my React Native and Expo app.

Inline footnotes in Markdown

Mon, 12 May 2025 00:00:01 GMT

Using footnotes helps keep your main content clean and focused. A footnote can provide additional context without interrupting the reading flow for your audience and is excellent for properly citing sources, references, or side notes. You can use inline footnotes by writing your text subject followed by a marker like some-text[^1] (where 1 is an arbitrary value). Then, you can reference the footnote at the bottom of your content with [^1]: This is a footnote..

Using mas with homebrew for a streamlined macOS setup

Fri, 02 May 2025 00:00:01 GMT

Setting up a new or an old Mac after resetting it can be exciting but tedious at the same time. Most time is spent downloading app installers and installing those apps, whether it is from the Apple App Store or third-party sites. I recently learned about mas, which is short for Mac App Store command-line interface. Combining it with a brewfile setup makes the tedious process a bit more efficient by automating the installation of macOS apps.

Week notes 10

Sun, 27 Apr 2025 00:00:10 GMT

I haven't written a weekly note since February and I am trying to get back into it. This week has been incredibly busy with a busier weekend and I am writing this late on a Sunday.

My 2025 Macbook setup

Fri, 05 Apr 2024 03:42:51 GMT

A guide on setting up Apple Macbook for daily work.

Fine-tuning front matter scope in Vale CLI

Tue, 22 Apr 2025 00:00:01 GMT

For a documentation site I am currently maintaining, we use a consistency substitution rule. This rule ensures that standardized terminology and proper capitalization are used for certain words across the whole documentation. These rules substitute pre-defined patterns by automatically flagging instances where terms like "github" should be "GitHub" or "javascript" should be "JavaScript". Many other internal and third-party products and technologies are included in this substitution rule. Here's an example of the rule file:

Avoiding version conflicts with Vale and GitHub Actions

Sun, 20 Apr 2025 00:00:01 GMT

While implementing Vale with Reviewdog and GitHub Actions is straightforward in theory, I have encountered a few issues that can sometimes break your CI. Both times, the solution was explicitly defining the Vale CLI version in the CI pipeline. Importance of version pinning in CI pipelines

How to add opacity to a Pressable component in React Native

Thu, 04 Aug 2022 03:42:51 GMT

Pressable component was introduced in React Native in 2020 as a core component wrapper. It can be used instead of existing touchable components including TouchableOpacity, TouchableHighlight, and TouchableWithoutFeedback. These components include styles and effects that sometimes do not meet the desired outcome on individual platforms (Android and iOS). The way I see using the Pressable component is that it can be customized in terms of style, appearance, and extended functionality by creating a custom wrapper/component around it. It also offers a lot of props such as onPressIn, onPressLong, hitSlop, delayLongPress and so on, that can be used to implement these extended functionalities.

Resolving invalid custom Tailwind classname ESLint warning

Sun, 30 Mar 2025 00:00:01 GMT

When working on a large web project with Tailwind CSS, you may have custom CSS classes defined. For instance, if you directly use a class name like code-annotation in the markdown content, you might run into an ESLint issue about the class name being invalid. The custom class, as shown below, is used to indicate to readers how highlights are used inside many code snippets within the beginner-friendly tutorial I have recently updated:

Ignoring JSX components in Vale

Thu, 27 Feb 2025 00:00:01 GMT

When using Vale) to prose lint documentation written in MDX, you may face a common challenge where Vale tries to lint the text within JSX components. This can lead to false positives and unnecessary warnings or errors depending on how your Vale rules are configured. Vale is already "markup" aware, which means it is capable of both applying rules to and ignoring certain sections of your markdown files. In this post, let's explore how you can use custom block-level ignores in your Vale configuration using BlockIgnores. This is a pattern I am using while managing documentation at work.

Week notes 09

Sun, 23 Feb 2025 00:00:01 GMT

Another week, another set of notes. - Completed the llms.txt project at work. Now, all areas of documentation have their llms.txt files generated. I am using custom scripts, and the challenging part was navigating the SDK documentation. After trying different methods to achieve an output level without missing any information, I decided to use a third-party library called sitefetch instead of writing my own script for the SDK docs. Yes, it does make network calls, but that isn't a trade-off in this situation. Fetching data from over 90 SDK pages only takes a minute, considering the amount of data rendered on those pages.

Change PICO-8 cart storage location on macOS

Wed, 19 Feb 2025 00:00:01 GMT

PICO-8 stores its configuration and cartridges on macOS by default in the user Library directory: bash

Week notes 08

Sun, 16 Feb 2025 00:00:01 GMT

Trying out a slightly new format for weekly notes this week. - The weather was primarily warm during the daytime; I suspect the summer will be here in no time.

How to change light and dark Shiki themes when using Astro

Wed, 12 Feb 2025 00:00:01 GMT

Shiki is Astro's built-in syntax highlighter. While it requires minimum configuration to set up, its real power shines when you configure dual themes to match your site's light and dark themes. It also bundles a ton of modern themes that can be used by defining the theme's name in the configuration. Understanding the configuration

Week notes 07

Sun, 09 Feb 2025 00:00:01 GMT

Not a good week for my mental health. Most of the week was spent overthinking, migraine, more overthinking, and more pain. - The weather is changing and becoming warmer, so it might help in the coming weeks.

Using at() method in JavaScript to get the last item from an array

Wed, 05 Feb 2025 00:00:01 GMT

There are different ways in JavaScript to get the list item of an array. Recently, I learned about the at() method, and this post explores the traditional approach to getting the last item and the approach of using the at() method. Let's assume you have the following array in your JavaScript code:

Week notes 06

Sun, 02 Feb 2025 00:00:01 GMT

Happy February! I honestly don't know where January went. - I was able to make more progress this week with the llms.txt project. Other tasks did suffer because of that.

New blog theme

Fri, 31 Jan 2025 00:00:01 GMT

Finally, I've updated the blog theme style and colors to represent the code snippets in a way I like. The colors or I should say, the code theme used is rose-pine-moon. Using Shiki makes it easier to switch between any supported them for the code. Currently, the Astro Paper template I am using for this blog, it's a matter of updating the theme name in shikiConfig inside the astro.config.ts file.

Mapped types in TypeScript

Wed, 29 Jan 2025 00:00:01 GMT

As per TypeScript's documentation, mapped types can be used to avoid repeating the type information inside a new type. A mapped type might look complex at first glance, but they do save the repetition. A mapped type allows to create a new type based on existing ones. This new type then can map over the property of the existing type without the needing to redefine those types.

Week notes 05

Sun, 26 Jan 2025 00:00:01 GMT

- My mental health has not been the best this week. It's been difficult to focus to watch/read/listen due to lack of sleep. - Made more progress to completing the llms.txt project at work. Ended up writing custom scripts to generate data in markdown from local files instead of using an external tool to scrape data from the document site.

Detecting typos with typos-cli

Thu, 23 Jan 2025 00:00:01 GMT

Spell checking for typos in code, documentation, and blog sites can impair searchability, cause confusion, and introduce bugs. I have been using typos-cli for a while now to check for typos in my blog periodically and for work in the documentation site. It's a Rust based spell checker that can be used with any command line interface and includes many different options. In this post, I'll explore some of the common use cases I have found using this CLI tool.

Week notes 04

Sun, 19 Jan 2025 00:00:01 GMT

Second full week back to work this year. - I was able to get a workout for half of this week. It includes mostly weight but a little bit of cardio.

Docs without please

Mon, 13 Jan 2025 00:00:01 GMT

Technical documentation serves one purpose: to help readers accomplish tasks efficiently. Politeness markers such as "thank you" or "please", don't serve this purpose. While politeness matters in conversation to an extent, in documentation, it can create weaker critical instructions. Documentation isn't a conversation. It's a tool to inform your readers about any actionable steps they need to take to be successful in their own endeavors. When you write, "Please update the CLI version", you're trying to inform your readers about the action they need to take. However, adding "please" doesn't make the instruction more valid or actionable.

Week notes 03

Sun, 12 Jan 2025 00:00:01 GMT

First full-blown week of work after winter holidays in the USA. - Maintained my first work routine for the first half of the week. Due to not sleeping enough, I missed the workout for the next 3 days.

Old blog, new tech

Mon, 06 Jan 2025 00:00:01 GMT

Since 2016, I’ve been blogging, and I launched this website in 2019. Before that, I primarily wrote for various publications on Medium and other platforms, including respected sites like FreeCodeCamp and Logrocket. This website was built with Gatsby, my first experience using a static site generator and the React framework to create something substantial. In 2020, I started using Next.js and decided to migrate the blog to it in the middle of the year. I was writing and publishing posts a lot more at that time than I do now. Part of the reason for creating a personal blog was to write and post things that publications rejected, but they were good ideas.

Week notes 02

Sun, 05 Jan 2025 00:00:01 GMT

Happy New Year! First-week notes of 2025. - Maintained my workout routine for the latter half of the week.

2024 - A year in review

Mon, 30 Dec 2024 00:00:01 GMT

As 2024 draws close, it's time for my annual year in review reflection. This tradition helps me analyze and appreciate the various projects and experiences that shaped my year. Let's dive into what 2024 brought. This year, I was mostly focused on work, so nothing much happened on this site. I'll keep this post short.

Week notes 01

Sun, 29 Dec 2024 00:00:00 GMT

As 2024 comes to an end, I am starting to write Week Notes. Since this is my first one, I'll keep this recap a short one mainly because these notes are only for me. Also, this week has not been a busy one. With winter and gloomy cold weather due to recent rain, I don't have much to add. - Rainy end of the week. Mostly, I stayed inside. On days on which the sun was shining brightly, I traveled within the city.

Creating a /slash page

Tue, 17 Dec 2024 00:00:01 GMT

Last week I found about Robb Knight's Slash page site. It details common top-level URLs with each URL starting with /url. Inspired by this, I created a listing of /slashes URLs that I've added on this blog recently. They can be a found under /slash. I already had an /about, /blog, /rss, and /stats. The new additions are /now, /links, /search and /ai.

Block unwanted external links using Google Search Console's Disavow

Thu, 12 Dec 2024 03:42:51 GMT

When managing a docs site SEO, you might encounter situations when external websites link to incorrect or non-existent pages from your site. These unwanted backlinks can impact your site's search performance and create unnecessary 5xx errors. Solution is to use Google Search Console's disavow links tool to create a list of unwanted backlinks.

Uninstall a Node.js version using Volta on macOS

Wed, 11 Dec 2024 03:42:51 GMT

If you're using Volta to manage Node.js versions on your computer, you might have noticed that running volta uninstall node-version command doesn't work as expected. This expectation comes from using other Node.js version managers like NVM, unlike Volta, which requires removing each version manually. Check all installed Node.js versions

How to install Node.js using NVM on macOS M1

Sun, 06 Feb 2022 03:42:51 GMT

Node.js can be installed in different ways. I recently started working on an organization repository that requires using different Node.js versions. Using Node Version Manager (NVM) it is possible to switch between different Node.js versions on the fly. It also allows testing code with older Node.js versions. NVM is a shell script used for installing and managing Node.js on a Unix based system. It allows switching between different versions of Node.js via the command line quickly. It also works with any POSIX shell such as zsh.

Obsidian as a task manager doesn't work for me

Mon, 02 Dec 2024 03:42:51 GMT

I have been using Obsidian for more than a year to take notes of all sorts (meetings, work, personal, long-form writing, blog drafts, and so on). It provides a distraction-free environment to write drafts and do long-form writing, but I couldn't get the hang of it as my daily task manager. I used to maintain an Inbox directory to capture everything (work and personal tasks). The list grew over time. I also used Obsidian Tasks) plugin, which has modern-day app equivalent features of managing a task such as adding a due date, recurring date, setting priorities, checking the task as done or canceled, scheduling it, and more.

My default apps in 2024

Sat, 30 Nov 2024 03:42:51 GMT

Most apps have stayed the same since my last year's list. The main thing that changed this year for me is to use a proper task manager app instead of storing todos in Obsidian and needing access to it all the time (I don't have Obsidian on my iPhone). I like Obsidian for note taking, storing permanent notes, or creating drafts, but setting reminders, deadlines, or quickly capturing tasks felt overwhelming. To replace this, and after trying three different apps, I returned to an old app I've used: Things 3. The list below is mostly a revision from last year.

Adding Bluesky icon to my Astro blog

Fri, 22 Nov 2024 03:42:51 GMT

I use AstroPaper as the default theme for my blog. It is a minimal, responsive and SEO-friendly Astro blog theme. Astro is a modern static site builder that allows you to build faster websites with less client-side JavaScript. This theme is minimal and customization-friendly. With Bluesky growing rapidly, adding over one million users daily, is built using Expo (where I currently work), and attracting the "tech Twitter" community (yes, Twitter, not X), it reminds me of Twitter's early days.

Automate installing apps and utilities with Homebrew bundle

Sat, 05 Oct 2024 20:51:31 GMT

If you periodically set up your Macbook from scratch like I do, you're probably frustrated by the manual setup process. Homebrew to the rescue. It's a macOS package manager that I've used since I started using macOS. It allows creating a "bundle" file that can automate the process of installing many command-line utilities, applications, and apps from the App Store.

Tag gardening

Sun, 01 Sep 2024 03:42:51 GMT

I recently came across Karl Voit's blog post about the concept of tag gardening. He uses this process to trim down the various tags he uses and provides explanation on the decision he took during the cleanup. His blog post served as a timely reminder of why I should clean up some of the tags from my blog. I wrote this post to appreciate Karl's efforts and share my thoughts on the topic.

Tracking notes created in Obsidian with Dataview

Thu, 08 Aug 2024 03:42:51 GMT

My daily note is the starting point for capturing workday information. To record this information, I either create a fleeting note or add it to my daily note. Creating too many new notes can be cumbersome and overwhelming at the end of a week when I'm going through them for my weekly review sessions. To review the notes created during the week, I do this by keeping track of the files created each day inside that day's daily note.

How to permanently hide folders from graph view in Obsidian

Thu, 11 Jul 2024 03:42:51 GMT

I've been using Obsidian for more than a year, and it has become more than a commonplace note-taking app. I use one vault to store all of my notes. They are related to work, projects, bookmarks, and sometimes my journal. Graph view: a useful tool

Change cursor color in VS Code to use a linear gradient

Thu, 04 Jul 2024 03:42:51 GMT

The extension APC Customize UI++ allows customizations that are beyond VS Code’s abilities.

Stash changes in a git repository with VS Code

Thu, 26 Oct 2023 03:42:51 GMT

git stash is a useful command that temporarily stores current changes in a Git repository without committing them, making it possible to return to them later. Stash using VS Code

2023 - A year in review

Fri, 02 Feb 2024 03:42:51 GMT

I must admit that I'm late to the yearly review party this time. The calendar has already flipped to the end of January, yet here I find myself, typing away. App.js conf 2023

View most used commands with zsh_stats

Mon, 01 Jan 2024 03:42:51 GMT

ZSH is the default shell in macOS. If you use Oh my Zsh to manage the ZSH configuration plugins and a theme to prettify the terminal, you can also use several built-in utilities. One such utility is the zshstats command, which provides a list of your top twenty most frequently used commands and how many times each command has run. To use it, run the following command from a terminal window:

Hide and unhide files or directories visibility with chflags on macOS

Mon, 25 Dec 2023 03:42:51 GMT

The chflags command in macOS is a command for quickly hiding or unhiding files and directories. It is particularly useful for managing the visibility of files by altering their flags. Unhiding files or Directories

Change comment color visibility in a VS Code theme

Thu, 21 Dec 2023 03:42:51 GMT

Switching to a different theme in VS Code can often lead to a mismatch in personal preferences. I enjoy personalizing themes with subtle modifications, especially when I find one theme that suits my taste. I recently started using Digi-Angler Dark theme, a variant of the renowned Dracula color scheme. Returning to a dark theme after a while felt like familiar territory, reminiscent of my years using the Dracula theme in VS Code.

Pomodoro technique with CLI on macOS

Mon, 18 Dec 2023 03:42:51 GMT

I often turn to the Pomodoro Technique when I'm overwhelmed by my to-do list. This method involves working for a set period (X minutes), followed by a short break (Y minutes), promoting focused sessions. After trying various apps that lacked the simplicity I desired, I discovered a straightforward command line tool.

My default apps in 2023

Sat, 16 Dec 2023 03:42:51 GMT

Read about the ongoing Default Apps project first at Chris Coyier's blog. Tracing back to where it started seems to be the Hemispheric Views podcast. During this back and forth of opening links on a Friday night, I got to discover so many new cool personalized blogs through the "Default Apps" list. Decided to jot down my own. - 📨 Mail Client: Gmail

Remove bottom border or shadow on header in React Navigation or Expo Router

Sun, 24 Sep 2023 03:42:51 GMT

Update: This blog post was originally written on June 5, 2022. It is now up-to-date to include Expo Router relevant information. Expo Router and React Navigation are both amazing navigation libraries in the React Native ecosystem. I have been a big fan of React Navigation as I have used it for a while but lately, I have started using Expo Router.

How to configure ESLint and Prettier in an Expo project

Tue, 25 Jul 2023 03:42:51 GMT

Make sure to see the official Expo documentation for latest details on using ESLint in your React Native project. When writing JavaScript, I spend a good amount of time fixing basic mistakes. Different project files sometimes end up following different syntax and formatting conventions.

Resolve merge conflicts with git rebase

Fri, 23 Jun 2023 03:42:51 GMT

Resolving merge conflicts can sometimes be difficult, and using the GitHub UI may not always be the most effective solution. As the complexity of the conflicts increases, it may be necessary to rely on tools on your local machine rather than the web interface provided by GitHub. I have discovered that using the git rebase command is a useful method for resolving merge conflicts in my feature branch before merging it into the main branch. Although it took some time to fully understand the process and the necessary steps.

How to clear global npx cache

Tue, 30 May 2023 03:42:51 GMT

Recently, I've seen myself running into the following message whenever I'm using a certain CLI tool with npx. bash

Bypass CORS to fetch files when working with localhost

Wed, 24 May 2023 03:42:51 GMT

Sometime back I learned about opening files or directories using the open command from the CLI on a Mac. It's simple yet effective. Another use case that I've been using it for is to open the current project when in localhost in the browser and bypass the CORS policy to fetch files that are also available locally.

Setup Macbook M1 for Web and React Native development

Tue, 23 May 2023 03:42:51 GMT

Note: A new version of this post was written in 2024. See My 2024 Macbook setup for more information. 🕑 This article was originally written on March 14, 2021. Since then, it has been updated many times to reflect my setup process. In 2023, I decided to re-write this article from scratch.

Set default location for images, files and attachments in Obsidian

Tue, 02 May 2023 03:42:51 GMT

I've used Obsidian as my primary note-taking app for over six months. One thing I've found myself often doing (either work or personal) is using screenshots as images in my notes. Now, if you have used Obsidian or started using it, all images or attachments are stored in the root vault folder. If you are fine with it, you can skip reading this article and spend your time on something more useful. However, if you are like me, and want to stick to using a note-taking app and keep things organized, then keep reading.

Convert png to jpg using ffmpeg

Sat, 01 Apr 2023 03:42:51 GMT

As a documentarian, I've used ffmpeg command-line tool for a while now. It is a powerful tool that can do a lot of things. At work, I use it to convert videos and images. Prerequisites

Keep homebrew up to date

Sat, 01 Apr 2023 03:42:51 GMT

I've been using homebrew for as long as I can remember using macOS. I recently learned about cleaning up old and outdated files using the brew cleanup command. I also run it sequentially with update and upgrade commands: shell

2022 - A year in review

Sun, 01 Jan 2023 03:42:51 GMT

My blog has been neglected for the last few months. Writing a year review is my way of making amendments to start writing back and reflecting on the year gone by. It's been a good year that allowed me to focus on myself. I do not feel one bit guilty about not writing enough or creating enough. I spent most of my time prior to this year in a burnout state. I did not want to repeat that. Getting over burnout is tricky, and I am not sure if I am completely over it, but I often feel that I am coping better than before.

Change the color of hidden files and folders in VS Code

Sun, 04 Sep 2022 03:42:51 GMT

Last update: 17 December, 2023 I often switch between dark and light themes in VS Code to keep my coding environment fresh and engaging. My preference leans towards light themes, such as pre-installed Quiet Light.

Open any folder from the Terminal app in a Finder on macOS

Thu, 21 Jul 2022 03:42:51 GMT

Often, I struggle or want to open the current directory I am working from the Terminal app to the Finder window on macOS. I have been a macOS user for almost eight years now, and it never occurred to me that I couldn't open the current location from the Terminal app. Until recently, a frustration point led me to find the solution. Again, though, I am surprised by its simplicity.

How to push local git tag to remote repository on GitHub

Sun, 26 Jun 2022 03:42:51 GMT

After creating a git tag locally on a local project, I needed to push it on GitHub. The reason is that I'm hosting the project repository on GitHub. Pushing a tag to GitHub

How to remove console statements from React Native apps

Sun, 19 Jun 2022 03:42:51 GMT

For debugging purposes, I often use console.log statements in React Native and Expo applications. A babel plugin called babel-plugin-transform-remove-console takes care of removing any console statements from the code. This is a great plugin that I like to use, especially before releasing apps in production.

Getting Started with React Navigation v6 and TypeScript in React Native

Sat, 11 Jun 2022 03:42:51 GMT

Originally published at Jscrambler.com When you have a complex mobile application structure or many screens in your application, handling navigation can become tricky. However, with open-source libraries like React Navigation, the process of implementing navigation patterns does become easier.

How to remove AsyncStorage warning when using Firebase JS SDK with React Native

Sat, 28 May 2022 03:42:51 GMT

The Firebase JS SDK is a library that provides a set of JavaScript APIs for interacting with Firebase services. I use it with some of the production React Native apps built with Expo, mainly for authentication, database, and storage. I also use it for an open-source template that I am currently maintaining called [expo-firebase-stater], which provides a head start when building a React Native app with Firebase. For React Native apps, the Firebase SDK uses AsyncStorage under the hood to store an authentication session when an app restarts. It is one of the out-of-the-box features that Firebase provides that I like and use when implementing authentication in React Native apps using the Firebase Auth service.

Patterns and Anti-patterns in Node.js

Sun, 03 Apr 2022 03:42:51 GMT

Originally posted at AppSignal Blog

How to show Touch indicator on iOS simulator

Sun, 03 Apr 2022 03:42:51 GMT

Sometimes it is necessary to highlight a single touch event on the iOS simulator's screen and show the tap that registers it. For example, this is useful when recording a video or a gif using the simulator. The iOS simulator comes with a pre-configured list of settings, including to display the touch indicator. However, sometimes, it is hard to find them.

How to handle Deep Linking in a React Native app

Tue, 29 Mar 2022 03:42:51 GMT

Originally published at Jscrambler

When to use keyExtractor prop in React Native's FlatList

Sun, 27 Mar 2022 03:42:51 GMT

In React Native, the FlatList component works well to render a long list of data. It renders only the items are shown on the screen in a scrolling list and not all the data items at once.

Set up a Next.js project with ESLint, Prettier, Husky, and Lint Staged

Sun, 13 Feb 2022 03:42:51 GMT

Working on a large codebase, having a consistent style guide is important. Inconsistencies can occur by using single quotes instead of double quotes, tabs instead of spaces, and so on. A pre-commit hook can address this problem. Before making a new commit, a pre-commit hook can check for types in TypeScript files, run a lint test, use prettier to format files, and so on. All of this is possible by using:

Implementing Infinite Scroll with React Query and FlatList in React Native

Sun, 30 Jan 2022 03:42:51 GMT

Originally published at Jscrambler.com Infinite Scrolling is a way to implement pagination in mobile devices. It is common among mobile interfaces due to the limited amount of space. If you use social media applications like Instagram or Twitter, this implementation is commonly used across those apps.

How to rename default branch in Git and GitHub

Mon, 10 Jan 2022 03:42:51 GMT

I'm currently maintaining a GitHub repo that has grown over the last year. It primarily contains all the example code that I create when working on React Native and Expo articles and tutorials. Recently, I switched the default branch to main. Here are the steps I took. All of these commands execute inside a terminal window.

Tamagui for React Native: Create faster design systems

Sun, 09 Jan 2022 03:42:51 GMT

Originally Published at Blog.Logrocket.com on December 24, 2021. Update (6 November, 2023): This post is outdated. See Tamagui documentation for up to date information.

2021 - A year in review

Fri, 31 Dec 2021 03:42:51 GMT

As we transition to 2022 and leave 2021 behind, it's a great time to reflect on the year passing by. It is my second year writing a "year review". It's fun for me to look back over what I did and what I focused on last year. I want to continue the tradition this year as well. I started this year in a burnout phase. I didn't feel like doing things that generally excite me. It took me a while to realize that I was in the phase. If you don't realize it, you won't know what hit you. Getting burned out from last year was not over. It takes time to accept it and get out of it. That's okay, and I'm glad I took my time.

Create a custom hook to Show/Hide Password Visibility in React Native

Sat, 11 Dec 2021 03:42:51 GMT

Updated on May 24, 2023 Building log-in and sign-up forms in a React Native app are fundamentally composed of input fields and buttons. One field that you will often find yourself adding to these forms is the password field. This password field is created using React Native's TextInput component. The common behavior of this field is to hide a user's password behind obscure characters.

How to avoid notches with Safe Area Context in React Native apps

Thu, 14 Oct 2021 03:42:51 GMT

Most devices nowadays come with a notch or some kind of status bar. Therefore, when building a mobile application using React Native, it is vital to ensure that the content of an app screen is rendered correctly across different types of devices. In this article, let's take a look at two different approaches to make app screens in React Native to avoid the content being positioned behind a notch or status bar.

How to configure VS Code Bracket Pair Colors natively

Tue, 12 Oct 2021 03:42:51 GMT

With an update in August 2021, VS Code started supporting Bracket pair colorization natively. It means there is no need to use the Bracket Pair Colorizer extension (which I love).

How to add Splash Screen and an App Icon in React Native

Fri, 01 Oct 2021 03:42:51 GMT

Every mobile application has a splash screen and an app icon, and together they provide the first impression. An app icon is displayed in various places, such as on an app store, on the device's app drawer, and so on., whereas a splash screen is shown during the app startup. Adding a splash screen or an app icon to a React Native app can be an agile process. In this tutorial, let's learn how to use an awesome package called react-native-bootsplash to display a splash screen when an app starts and then learn the process of adding app icons in a React Native app.

How to use iOS simulator in full-screen

Wed, 15 Sep 2021 03:42:51 GMT

When working on React Native or Expo applications, it is important to create focus to get in a flow. Sometimes, there are a lot of tasks to cover and very little time. To help focus on the task ahead, one way to speed up development is to use full-screen mode for iOS simulators. For example, a focused environment on my laptop screen includes zero visibility for the Dock and the menu bar. Before Xcode version 12, the full-screen support was hidden behind a user flag. The below command can be run to solve the issue for older Xcode versions.

How to solve RCTBridge required dispatch_sync to load warning on iOS for React Native

Sat, 04 Sep 2021 03:42:51 GMT

The RCTBridge required dispatchsync to load RCTDevLoadingView has become a common occurrence when developing React Native apps with version 0.64 and 0.65.

How to Offer Multi-language Support in a React Native App

Mon, 16 Aug 2021 03:42:51 GMT

Internationalization is an important feature to overcome the language barrier among people who use a particular software application. Not every app requires us to consider a global customer base. But if you have plans to include support for international users in your app, you’ll need internationalization in your React Native app. i18next is an internationalization framework written in JavaScript and provides methods for localizing the app and implementing the other standard i18n features.

GET Request params with Axios

Wed, 11 Aug 2021 03:42:51 GMT

One of the popular libraries in JavaScript land to perform HTTP requests is axios. It is promised based and allows writing code using async await syntax. Installation

How To Integrate Firebase Authentication With an Expo App

Sun, 04 Jul 2021 03:42:51 GMT

Originally Published at Jscrambler.com. Firebase is a Backend as a Service (BaaS) that provides a variety of services for web and mobile app development. Most of the mobile apps built using React Native and Expo require knowing the identity of a user. This allows an app to securely save user data in the cloud and provide more personalized functionalities.

Common Prop Types in TypeScript and React

Tue, 29 Jun 2021 03:42:51 GMT

All primitives in JS are available in TS. ts

Prop types in React and TypeScript

Mon, 28 Jun 2021 03:42:51 GMT

PropTypes provide built-in typechecking capabilities when writing a React app. Checking the type of prop in a React component in a large application helps catch bugs at run-time. Typically in a React app, you will need to install the package yarn add prop-types. Then, inside a component, explicitly define the type of a prop.

Life at Draftbit - First 3 Months as a Developer Advocate

Tue, 25 May 2021 03:42:51 GMT

How to Create a Custom Image Gallery in React Native

Mon, 17 May 2021 03:42:51 GMT
In React Native, there are many ways to display a collection of images in a gallery view. One form is commonly known as carousel. Using an open-source library such as react-native-swiper or more advance react-native-snap-carousel serves the purpose. But what if we want to create a custom gallery view with additional functionality? In this tutorial, let's create a custom gallery of images using react-native-snap-carousel and FlatList from React Native. The open-source library is going to display each image in a carousel view. The FlatList is what we will use to display the thumbnail view for each image below the carousel. The construction of the syncing part between the two is to add a functionality such that when an image in the carousel is scrolled either left or right, the thumb in the FlatList is also going to be scrolled along with it. Of course, to achieve this synchronization between the two, we are going to use React Hooks such that you will be able to implement such a pattern in your own React Native apps.

How to Create a Custom Tab Bar in React Native

Fri, 07 May 2021 03:42:51 GMT
React Native is an amazing tool for creating beautiful and high performing mobile applications that run on both iOS and Android. Developing these apps, you might need navigation to navigate from one screen to another. To implement navigation in a React Native app, React Navigation library does an awesome job of providing various navigation patterns such as stack, tabs, and drawer that can be utilized and customize based on the UI design of the app. In this post, let's create a custom tab bar using React Navigation library bottom tabs component. We are going to create a simple tab bar and then learn how to make it translucent using a Blur view.

How to use ES6 import syntax in Node.js

Wed, 07 Apr 2021 03:42:51 GMT

How to upload an image using Expo Camera to Cloudinary

Sun, 21 Mar 2021 03:42:51 GMT
Originally Published at Jscrambler's Blog. The camera feature in a mobile device allows it to capture pictures and record videos, making it very helpful in many circumstances. By using the expo-camera library the process of adding that camera feature to an application becomes seamless, which is why in this tutorial, we’ll take a look at how to use Expo Camera to take a picture and then upload that same picture to a real-time cloud service Cloudinary.

How to use React Native Geolocation to get Postal Address

Thu, 25 Feb 2021 03:42:51 GMT
Geolocation in React Native applications is the ability to fetch the geographic position of the device when it is connected to the internet. It takes advantage of an API that provides the current location of the device in the form of Longitude and Latitude coordinates. It can be used to add features such as fetching simple location coordinates of a device or getting the current location of the device. Ultimately, Geolocation provides support to the development functionalities seen in delivery or ride-hailing applications. In this tutorial, let's learn how you can implement a feature to get the current location of a device in a React Native app. To do this we’ll be using an API provided by Expo in the form of a package called expo-location. We will then convert the location coordinates into human-readable postal address format.

React Native Performance Do and Dont

Sat, 13 Feb 2021 03:42:51 GMT
Performance is one of the few topics that change the overall perspective of using a framework like React Native in real-world mobile applications. React Native is fast by default. While working on a React Native app you can experience performance issues and do not assume it can be fixed by testing components. In this post, there is a list of suggestions that can be applied while building a React Native app. DO: Use an Image Caching Solution

How to use shared element transitions in React Native

Tue, 19 Jan 2021 03:42:51 GMT
Originally Published at Logrocket

How to remove bottom tab bar border in React Navigation

Sun, 17 Jan 2021 03:42:51 GMT
Updated: May 2, 2022

How to use redux-persist in React Native with Asyncstorage

Fri, 08 Jan 2021 03:42:51 GMT
Redux persist is a library that allows saving a Redux store in the local storage of an application. In React Native terms, Asyncstorage is a key value-based, unencrypted, asynchronous storage system that is global and can be used as the local storage for the app. Using a state management library like Redux in a React Native app is beneficial to manage the state of an application from one place. As your application advances in terms of features, you may want to persist some of the information for each user that is local to them.

How to add an app icon in a React Native Android app

Wed, 06 Jan 2021 03:42:51 GMT
In this post, let's generate an app icon and learn how to add it to an Android app build with React Native.

Year rewind: 2020

Wed, 23 Dec 2020 03:42:51 GMT
The year 2020 is coming to an end. The Earth is completing one more revolution around the Sun. I am not a big fan of new year's resolutions since I never end up completing or even following one for a long time. However, I do like to introspect on the year passing by 😬.

How to create a custom scrollbar with React Native Animated API

Thu, 10 Dec 2020 03:42:51 GMT
Updated on: August 4, 2021

How to manage state in React apps with useReducer and useContext hooks

Fri, 06 Nov 2020 03:42:51 GMT
Choosing a state management library to manage and handle a global state in a React app can be tricky and time-consuming. A lot depends on the scope of the React app and there are many options available.

Creating and Validating React Native Forms with Formik

Fri, 16 Oct 2020 03:42:51 GMT
Forms are an essential part of a mobile app — specifically, to handle user interactions that are available behind an authorization.

How to use HarperDB instance with React Hooks

Wed, 07 Oct 2020 03:42:51 GMT
HarperDB Cloud is a database service that supports both SQL and NoSQL queries for CRUD operations. It needs minimal configuration to get started and its realm is not only limited to build REST APIs with a server-side technology such as Node.js.

How to Animate a Header View on Scroll With React Native Animated

Thu, 01 Oct 2020 03:42:51 GMT
The Animated library from React Native provides a great way to add animations and give app users a smooth and friendlier experience.

Add Environment Variables in a Netlify Deployment

Tue, 01 Sep 2020 03:42:51 GMT
Recently I migrated my blog (the one you reading right now) from Gatsby to Next.js for some specific reasons. The first reason, me being curious about how Next.js works and how is the developer experience. The second one, I want to have minimal effort and spend less time in managing a blog's UI and spend more time on writing posts. Lately, the vice versa has been the reality.

How to use React Router and real time user monitoring in React apps

Fri, 14 Aug 2020 03:42:51 GMT
React is often used for building single-page applications (SPAs). SPAs tend to have multiple page views so when navigating from one-page view to another, reloading the entire page view is tedious and inefficient. To work as it should, a SPA must render different parts of a view when required instead of reloading the entire page. Routing comes into the picture when navigating from one page to another in a SPA app. Routing can be categorized in two ways: static and dynamic. SPAs follow a dynamic approach. In this tutorial, we will discuss a popular routing library used with React applications known as React Router. After setting up our routes, we are also going to discuss how to set up performance monitoring with Sematext in React apps with React Router library.

Build a REST API with Node.js and HarperDB

Thu, 23 Jul 2020 03:42:51 GMT
If you are building an application using Node.js, it can get a little overwhelming since there are a variety of databases to choose from and different ways to build APIs. One way to reduce development time and focus on the problem you are trying to solve is to use Database as a service to store the data. The advantage of this approach is to use a cloud database system without purchasing hardware which can be cost and time effective.

Firebase config in a React app

Fri, 05 Jun 2020 03:42:51 GMT
To create or setup a new React app, I try to use npx from a terminal window. By executing the following command, it generates a new React app using the create-react-app utility.

Styling The React Native Way

Thu, 04 Jun 2020 03:42:51 GMT
Originally published at Level up coding on January 14, 2019. React Native comes with many in-built components that you can use to style cross-platform applications. Styling a mobile application is essential. I cannot put enough emphasis on how important it is for a mobile app to have a pleasing design and good use of colors can be provide a better user experience. Without a polished user interface, a potential user will be repelled by the lack of design in the mobile app.

How to integrate Material UI library in React apps

Sun, 24 May 2020 03:42:51 GMT
Material design was introduced by Google around 2014 as a design language and it still shares some popularity among web and mobile applications. One of the common ways to integrate and use this design system in React apps is through MaterialUI library.

Chat app with React Native (Part 6) - Create a custom hook to change status bar styles

Mon, 18 May 2020 03:42:51 GMT
In part 5, we successfully connected real-time database service Firestore to store chat messages in a collection where each collection would represent a separate chat room. Further, we built sub-collections in each chat room collection to store and identify latest messages from all other messages in a chat room.

Creating Quarantine Pro — A Fun Learning Experiment in React Native

Thu, 14 May 2020 03:42:51 GMT
Covid-19 changed our way of life since the start of 2020 — a year some of us want to fast forward like a button on that TV remote. That said, self-isolating is the best thing you can do right now, and thus, isolating ourselves at Jscrambler, we came up with a fun, simple React Native app idea. The app is all about how long you have been quarantining. As a user, you input the date when you started isolating and the app is going to display a fun message to tell you how far you have come in the quarantine “game”.

Chat app with React Native (Part 5) - Create and Fetch Real-Time Messages with Firestore

Mon, 11 May 2020 03:42:51 GMT
In part 4, we built the foundation of creating a chat app by adding UI screens that are focused on sending, receiving and displaying chat messages. We used react-native-gifted-chat an amazing open source library and dived deep to use its "out of the box" props to add features to the chat app.

How to create custom wavy headers with react-native-svg

Wed, 06 May 2020 03:42:51 GMT
Originally Published at Heartbeat.Fritz.ai In React Native apps, the support for SVG graphics is provided by an open-source module called react-native-svg that is maintained by React Native community.

Chat app with React Native (Part 4) - A guide to create Chat UI Screens with react-native-gifted-chat

Tue, 28 Apr 2020 03:42:51 GMT
In part 3, we completed the task of integrating the Firestore to the current React Native app. The database now stores a chat room name. A new chat room can be created using a modal stack, only if the user is authenticated.

Chat app with React Native (Part 3) - Create Firestore collections to store chat rooms

Tue, 21 Apr 2020 03:42:51 GMT
In part 2 of this series, we made progress with the chat app by adding email authentication using the real-time auth service from Firebase. This ensures that we have a system in place to authenticate users.

How to add a Search bar in a FlatList in React Native apps

Thu, 16 Apr 2020 03:42:51 GMT
Originally published at Crowdbotics.com

Chat app with React Native (Part 2) - Firebase Email Authentication with react-native-firebase

Thu, 16 Apr 2020 03:42:51 GMT
In the first part of this tutorial series to build a chat-based app in React Native, we learned how to create reusable form elements using the react-native-paper UI library. Along with that, we learned how to install the navigation library react-navigation and configure a basic authentication stack navigator using two routes.

Blogging tips after 3 years and a 100+ posts

Mon, 13 Apr 2020 03:42:51 GMT
Your time is limited... — Steve Jobs

Chat app with React Native (Part 1) - Build reusable UI form elements using react-native-paper

Mon, 06 Apr 2020 03:42:51 GMT
This year, the React Native community has seen a lot of changes. Starting from community adaption of React Hooks, the official documentation having new domain, one of the most popular library react-navigation adopting a more dynamic and component-based approach to add routes to your apps and lastly, react-native-firebase the go-to package to use Firebase SDK, released its sixth version with some improvements.

How to create a custom hook to change status bar styles for every screen using React Navigation

Fri, 13 Mar 2020 03:42:51 GMT
React Native has a component called StatusBar that is used to control the app status bar. Using the react-navigation library you might have a scenario where you don't have a header bar and on different screens, you would like to ensure the color of the status bar is correctly rendered. Such as on the light background, a dark status bar is displayed and on a darker background of the screen, a light status bar is displayed. In this tutorial, let us create a custom hook that is going to keep track of the status bar color change whenever a screen changes. For this, you are also going to create mock screens with different background colors and integrate a tab bar.

Nesting Tab and Stack navigators in React Native and Expo apps

Wed, 26 Feb 2020 03:42:51 GMT
Using react-navigation you can definitely nest different types of navigators. The term nesting navigators mean that rendering one navigator inside a screen of another navigator. The possible scenarios of nesting navigators are:

Getting Started with Stack Navigator using react-navigation 5 in React Native and Expo apps

Fri, 21 Feb 2020 03:42:51 GMT
React Navigation as the library released its 5th stable version recently, just being two years old. Without a doubt, it is one of the most popular navigation solutions in React Native apps that also has support for the Expo. Recently, it underwent some core changes and how you used to define routes till react-navigation version 4.x.x has some major changes as to how you are going to define routes using the latest version of the library.

How to handle navigation in WebViews in a React Native app

Fri, 07 Feb 2020 03:42:51 GMT
As a React Native developer, you are going to come across use cases that will require you to embed or redirect a web application or a web page inside a React Native app. WebViews are often used for such use cases. A community-maintained module, WebViews in React Native are the only way to let the user visit external links within an iOS or Android application. The WebView component in React Native core first became available in React Native version 0.57.x.

Getting Started with React Native and Expo using Hooks in 2020

Fri, 17 Jan 2020 03:42:51 GMT
We live in the world of a variety of mobile devices majorly dominated by two platforms, iOS, and Android. It is a two-horse race and I am sure we can all agree on that. Building a mobile application is not an easy task though. For iOS, you write code using Objective-C or Swift and for Android, you will find yourself using Java or Kotlin. Apart from different programming languages used to create a mobile that can run on each of the two platforms, the toolchains are entirely different too for both of these mobile platforms.

How to use React Native Localize in React Native apps

Wed, 01 Jan 2020 03:42:51 GMT
Not every app require global customers but if you have plans to have, you would need internationalization in your React Native app. Using react-native-localize your app can detect the operating system or the device language and support the multi-languages. In this tutorial, let us build a small demo that uses react-native-localize along with a popular internationalization library i18n-js. The app will display some mock locales based on the device's language and region settings.

Implement Push notifications for Android apps with React Native

Tue, 19 Nov 2019 03:42:51 GMT
Relevant Push notifications are a great way to boost a user's engagement towards an application. According to some analysis, push notifications increase app engagement by 88%. It’s also curious to see that the click-through rate for push notifications in Android (4.06%) is much higher than in iOS (1.7%). In this tutorial, you are going to learn how to implement push notifications as an app feature using React Native and Firebase. I will be testing out the notification feature on an Android device, but you can go ahead and try it out on iOS yourself.

Handle different field types in React Native forms with formik and yup

Sat, 26 Oct 2019 03:42:51 GMT
In the previous post, you did a lot of things. From creating Login and Signup forms from scratch and using powerful libraries like Formik and yup to validate those forms. In this tutorial, let us extend our knowledge of building and validating forms by handling different input field types other than strings. You are also going to take a look at my share of the solution on how to gracefully create a Confirm Password field and validate it using the reference of already setup password field.

How to implement Forgot Password feature in React Native with Firebase

Fri, 25 Oct 2019 03:42:51 GMT
Originally published at Heartbeat.Fritz.ai In some of the previous posts, you built a React Native app using Firebase as the backend service provider for Email authentication and storing user data upon successful sign-up.

Image Classification on React Native with TensorFlow.js and MobileNet

Thu, 17 Oct 2019 03:42:51 GMT
Recently, the alpha version Tensorflow.js for React Native and Expo applications was released. It currently provides the capabilities of loading pre-trained models and training. Here is the announcement tweet: Tweet

Build and validate forms in React Native using Formik and Yup

Sun, 06 Oct 2019 03:42:51 GMT
Originally published at Heartbeat

Changing app themes using React Native, Styled Components and Redux

Wed, 02 Oct 2019 03:42:51 GMT
Originally published at Jscrambler

Using Context API with React Native

Fri, 27 Sep 2019 03:42:51 GMT
The React Context API lets you avoid passing props from parent to child at every level of the component tree. Neither you have to unnecessarily increase the complexity of the codebase using state management libraries like Redux. Consuming something like Firebase authentication and storage services with the Context API in a React Native or Expo apps is a great use case to try.

How Authentication Flow works in React Native apps using React Navigation 4.x

Tue, 10 Sep 2019 03:42:51 GMT
Mobile apps are made of screens that in number can vary depending on the app you are developing. Handling user navigation can be tricky to learn and do in mobile apps, but with dedicated open-source libraries like react-navigation do make the process a lot easier.

How to Build an Audio Player in React Native

Wed, 28 Aug 2019 03:42:51 GMT
Learning React Native development revolves around some common interface patterns that you should practice. One common UI built-in mobile application is an audio player.

Build a Not Hotdog clone with React Native

Tue, 27 Aug 2019 03:42:51 GMT
If you're a fan of HBO's Silicon Valley, you'll remember when they launched a real AI-powered mobile app that classifies hotdogs from a given image (or not). Using Google's Vision API, let's try to recreate a working model of the application in React Native. Google's Vision API is a machine learning tool that classifies details from an image provided as an input. The process of these classifications is based on thousands of different categories that are included in pre-trained API models. The Vision API enables access to these pre-trained models via a REST API.

Building offline React Native apps with AsyncStorage

Sun, 18 Aug 2019 03:42:51 GMT
Originally published at Heartbeat

How to use the Geolocation API in a React Native app

Fri, 16 Aug 2019 03:42:51 GMT
Geolocation as an API has different methods that can be used in a web application. But it’s also a powerful API for mobile development. Ride share mobile apps like Uber, map app like Google Maps, and location features implemented in apps like Instagram depend on using this API. React Native takes advantage of this API and its available methods by extending the Geolocation Web specification. The Geolocation API returns different methods such as getCurrentPosition to get the current location and watchPosition to subscribe to location updates. They are available in React Native as polyfill.

How to build a xylophone app with Audio API, React Native, and Expo

Mon, 22 Jul 2019 03:42:51 GMT
React Native when used with Expo as a toolchain eases out the common pain to manage ios and android applications. After saying that, I realized that there is a delight to use this ever-growing open source mobile application framework. Expo has gained a lot of credibility as a framework to provide collective solutions to build React Native applications by lowering the time and effort of the developer using it. They are continuing to enhance it from time to time and keeping up with the latest changes in React Native community. That said, Expo SDK33 is a blast. That being said, let us dive into one of the Expo's API. In this tutorial, you are going to build an application using Expo's Audio API. You are going to develop the following app (a toy xylophone app) step-by-step.

To Travel, A Tech Conference and One Million views - a Recap

Tue, 02 Jul 2019 03:42:51 GMT
The year 2019 started for me a bit unusual than the previous ones. I never expected to get so much attraction on my blog posts that are mostly published here. Had only one trip planned, ended up doing two. Did end up attending a tech conference too. Something when I started my career as a developer I hadn’t thought of. Six months are already gone, hence, if you are on Twitter, you might be seeing the following tweet at least once a day.

Build a Custom Modal with the Animated API in React Native

Thu, 13 Jun 2019 03:42:51 GMT
Originally published at Heartbeat

Building Stylistic UIs with Emotion-JS for React Native

Tue, 04 Jun 2019 03:42:51 GMT
Styling is an important aspect of any mobile application. You cannot put enough emphasis on how important it is for a mobile app to have a pleasing design and good use of colors for the app users to use it in the long term. If you are into React Native development, by now, you may know that there are different ways to style a React Native application. Methods such as by using StyleSheet object to create to styles for each component screen, or encapsulating all of your styles in one file for the whole application.

User Authentication with Amplify in a React Native and Expo app

Wed, 22 May 2019 03:42:51 GMT
AWS Amplify is a fantastic framework that helps you develop your web or mobile applications quickly. Not only it enhances your current tech stack but actually has many features in-built that you don't have to worry about especially when your app is in the development process. Features such as:

Building a React Native Mobile App with AWS Amplify and Expo

Thu, 09 May 2019 03:42:51 GMT
There is a joke going in dev community about serverless tech stacks using servers?! Some of the trolls even take that this an offensive way. What are they missing out is the advantages Serverless computing has to offer. Advantages like reduced development time and operation costs are some of the factors that could not be overlooked. Spending time and energy writing and wiring your application is worth rather than continuously managing resources and then worry about them at the time of scaling. This might sound too hot to some but serverless is a pragmatic solution in some use cases.

How I Configure VS Code for Everything

Mon, 22 Apr 2019 03:42:51 GMT
I made updates to this post here with additions to setup a new Macbook Pro based on M1 chip in 2021!

React Hooks Basics — Building a React Native App with React Hooks

Fri, 19 Apr 2019 03:42:51 GMT
Originally published at Crowdbotics

How To Build Your First VR App with ViroReact, React Native, and Crowdbotics

Thu, 28 Mar 2019 03:42:51 GMT
Virtual Reality (VR) is an immersive technology that has intentions to improve the experience by providing a three-dimensional realistic environment rendered for the individual to feel real. The applications of this technology are boundless. You will find totally immersive and entertaining gaming applications as well as examples of healthcare simulations used to save lives. For React Native developers, this technology is made accessible by a third party platform called ViroReact. This platform allows React Native developers to rapidly build cross-platform AR/VR applications. ViroReact currently supports ARKit, ARCore, VR Cardboard, Gear VR and Daydream. Viro Media

Build a Chatbot with Dialogflow and React Native

Tue, 26 Mar 2019 03:42:51 GMT
Chatbots are a powerful way to provide conversational experiences for any software product. Each conversational experience depends on the implementation of the chatbot to either be a good or poor experience for the end user. The modern day world is living in the technology wave of Artificial Intelligence and bots are a huge part of it.

How to Build a Real Time Logo Detection App with React Native & Google Vision API

Wed, 20 Mar 2019 03:42:51 GMT
Google Vision API is a great way to add image recognition capabilities to your app. It does a great job detecting a variety of categories such as labels, popular logos, faces, landmarks, and text. You can think of Google Vision API as a Google Image Search offered as an API interface that you can incorporate into your applications. In this tutorial, you are going to build a React Native application that can identify a picture provided and detect the logo using Google’s Vision API in real time.

Using Styled Components with React Native

Tue, 19 Mar 2019 03:42:51 GMT
Introduction Whether you are a web developer or mobile app developer, you know that without the proper styling of your application, the UI would probably suck. Styling an application is important. I cannot put enough emphasis on how important it is for a mobile app to have a pleasing design and good use of colors.

Create a React Native Image Recognition App with Google Vision API

Wed, 13 Feb 2019 03:42:51 GMT
Originally published at Jscrambler

How To Build a News Reader App with React Native and NewsAPI

Tue, 12 Feb 2019 03:42:51 GMT
React Native is a great platform to build cross-platform mobile applications for iOs and Android. While there are few other framework options available in the mobile app development space to build cross-platform applications, coming from JavaScript or web development background makes learning and using React Native as a framework easier. In this tutorial, I am going to walk you through the process of building a React Native application from scratch. Along with that, we are going to cover many topics such as installing and using a third party library for fetching real-time data, using a Flatlist component (something you are going to use a lot in React Native), using a third party UI library for React Native and implement a feature like pull down to refresh content.

Top open source libraries for Node.js

Thu, 31 Jan 2019 03:01:50 GMT
Originally published at Crowdbotics

21 Useful Open Source Packages for React Native

Tue, 08 Jan 2019 03:42:51 GMT
We live in the world of a variety, yet mobile devices are dominated by two major platforms, iOS and Android. It is a two-horse race, but that doesn’t make mobile app development easy. For iOS you write code using Objective-C or Swift. For Android, you use Java. In addition to different programming languages, the tool chains are entirely different too for both of these mobile platforms.

3 Steps to learn React Native in 2019

Fri, 04 Jan 2019 03:42:51 GMT
If you are interested in writing code for mobile applications using JavaScript, you are reading the right post. React Native, developed and maintained by Facebook, is an open-source framework to develop cross-platform mobile applications, using the programming language JavaScript.

Getting Started with React Native in 2019 - Build Your First App

Fri, 04 Jan 2019 03:42:51 GMT
We live in the world of a variety of mobile devices majorly dominated by two platforms, iOS, and Android. It is a two-horse race and I am sure we can all agree on that. Building a mobile application is not an easy task though.

My Top Tutorials in Web Development and React Native in 2018

Mon, 31 Dec 2018 03:42:51 GMT
When the year 2018 started I wasn’t sure where am I headed to. I had recently started freelancing as a developer, paying bills for myself was my highest priority after leaving traditional 9 to 6(and the countless number of hours spent on commuting). One thing I had realised previously was that an expression of freedom was loving the work you do at your terms. There is no linear virgule to the path of success and financial independency. Devoting rest of my time and energy to share my knowledge in form of articles through this blog was not on my mind at all then. I used to write long or short tutorials explaining one framework from point of view of a beginner or the trouble I had getting started with a new framework, just for the sake that fellow developers won’t have to spend endless hours Googling about a certain library or the topic that they need to use or learn, for a bigger picture they are working on. I still follow this pattern closely when writing a new article today. My motive is to add value rather than take reader’s time with no end result for either of us.

How To Build a REST API With Nodejs and PostgreSQL

Mon, 10 Dec 2018 03:42:51 GMT
Originally published at Crowdbotics

Integrating Firebase with React Native

Wed, 05 Dec 2018 03:42:51 GMT
This post has been updated in 2021. Please visit this URL to view the new post. Firebase is a Backend as a Service (BaaS) that provides an advantage to mobile developers who use React Native for developing mobile applications. As a React Native developer, by using Firebase you can start building an MVP (minimum viable product), keeping the costs low and prototyping the application pretty fast. In this tutorial, we will be learning how to get started by integrating Firebase with a React Native application. We will also create a small application from scratch with the help of Firebase & React Native to see how they work together.

How To Build A Blog From Scratch With React, Markdown, GraphQL and Gatsbyjs

Wed, 21 Nov 2018 03:42:51 GMT
There are lots of quick and easy, no-code ways to get blog up and running — such as Medium or Wordpress — but, whether it’s to customize, monetize, add security, or just learn, today, I’ll show you how to code your own blog from scratch. When adding a blog to your existing website, or just starting out with a new blog, a static site generator can help you get started.

Building an authenticated MERN Stack App Using Material UI

Fri, 16 Nov 2018 03:42:51 GMT
Originally published at Crowdbotics

How to Build a Serverless Backend with AWS Lambda and Nodejs

Tue, 13 Nov 2018 03:42:51 GMT
Serverless architecture is a cloud computing execution model where a cloud provider like AWS, Azure or Google Cloud is used to deploy backend or server-side code. In comparison to traditionally deployed web applications, in serverless architecture, the developer does not has to maintain the servers or the infrastructure. They only have to pay a subscription to the third party vendor whereas the vendor is responsible to handle the operation of the backend logic of a server along with scalability, reliability, and security. There are two ways a serverless architecture can be implemented in order to deploy your server-side code. First one is Backend as a Service or BaaS. A good example of this is Firebase which you can often see in conjunction between a web or a mobile application to a database or providing user authentication.

Creating a GraphQL server with Nodejs

Mon, 05 Nov 2018 03:42:51 GMT
Originally published at Crowdbotics

How to use Import statements in Nodejs

Thu, 01 Nov 2018 03:42:51 GMT
UPDATE: Up to date version of this post is at How to use ES6 import syntax in Node.js. I don’t always like to try different versions of setting up a Nodejs application. Don’t get me wrong — I believe in experimenting with one’s set up, which can lead to learning new things. But there is a limit. Recently, I find myself more often going to set up a Nodejs server to develop a RESTful API. Furthermore, the server has to work with the client in a way that the client can consume the API easily. For the client-side development, I am using ReactJS.

Setting up Nodejs Backend for a React App

Thu, 18 Oct 2018 03:42:51 GMT
In this article, I am going to walk you through setting up your own Node.js backend server for a React application. Both frameworks are often used together to build real time, fullstack web applications. A database, such as MySQL, Postgresql, or a NoSQL database such as MongoDB, is used to store information. For brevity’s sake, I will not use a database in this walkthrough. Requirements: You need Node.js and npm installed on your local machine as well as create-react-app installed as a global dependency. If you do not have it, run the following command and install it.

Building a REST API with Koajs

Tue, 16 Oct 2018 03:42:51 GMT
Originally published at Crowdbotics

Deploy a MERN stack app on Heroku

Fri, 12 Oct 2018 03:42:51 GMT
In this article, I will describe how to take an existing Web Application that is build using MongoDB, ExpressJS, Node.js, and React (often called as MERN stack) on a deployment service like Heroku. If you have an existing application built using the same tech stack, you can definitely skip the process in which I show you to quickly build a web application and go straight on to the deployment part. For the rest of you, please continue to read.

How to use React Navigation in a React Native App

Fri, 28 Sep 2018 03:42:51 GMT
Navigation plays an important role in mobile applications. Without navigation, there will be little use of an application. In this tutorial, we are going to learn how to implement Navigation in a React Native application from scratch. If you are familiar with web, or Reactjs as library, overall concept of navigation is same. It is used to navigate to different pages or screens (in our case). However, the implementation of a navigation library here is different from the web. Getting Started

Accessing Geo-location and App Permissions in React Native and Expo

Thu, 20 Sep 2018 03:42:51 GMT
Originally published at React Native Training

Simple Recipe to Build a Theme App in React Native

Tue, 11 Sep 2018 03:42:51 GMT
Recently, I have been working on a React Native application that demands a changeable theme based on the user selection. I wanted to do this in a simplest way possible. I have so far avoided any React Native UI toolkit such as NativeBase or React Native Elements. In the article below, I am going to share with you all about this simple recipe. This is what we are building. By the end of this article you will have a similar looking React Native project.

How to integrate Redux into your application with React Native and Expo

Fri, 10 Aug 2018 03:42:51 GMT
Redux is an important part of the React Native ecosystem. If your world revolves around JavaScript, you’ve probably heard about Redux. Before reading the rest of the tutorial and going further, just try to remember that you are only learning about Redux because it will make things easier for you, and not more difficult. Now let us learn why you need Redux in your application.

Week 3 with React Native - Why use Expo?

Thu, 26 Jul 2018 03:42:51 GMT
Originally published at Hackernoon.com This week has been a hectic one for me. Deadline coming closer, and too many tasks to complete. It has been a happening one also. I got the invite to join Gatsbyjs open source team, to help and maintain the on going projects. I love contributing to open source communities and projects.

Week 2 With React Native - Building a Weather App

Mon, 16 Jul 2018 03:42:51 GMT
Originally published at Hackernoon.com This post was supposed to come out last weekend. I had a busy weekend could not find the time to write it nor had the energy to pull off it. Last week, I announced publicly, in the first post, that I have re-started learning and getting hands on experience using React Native. This post is a continuation to that one.

React Native: How to Setup Your First App

Fri, 13 Jul 2018 03:42:51 GMT
PLEASE NOTE At the start of the year 2019, I updated this post and re-wrote it here 👇

Starting Over with React Native

Sat, 07 Jul 2018 03:42:51 GMT
Start of 2018 🚀 When 2018 arrived I decided to pick up a new framework called React.js to enhance my skillset and get more work done remotely. A day came when I was in the middle of React development that I got interested in React Native which is used to develop cross-platform mobile applications and started playing around it. I wrote some articles on it, worked on a few mini projects, read about APIs in its official docs but then due to the load of work from my clients I had to stop in between for three months. I tried hard to continue to learn in my spare time but managing work along with a personal hobby blog (that is not a hobby anymore, I am professional book critic 😅 and it demands quite some hours in a week) I knew I was going to burn out.

How to Upload a File with Reactjs and Nodejs

Sat, 23 Jun 2018 03:42:51 GMT
Originally this article was published on Zeolearn.com

React Native: Building a Minimalist Weather App using Expo XDE

Tue, 27 Mar 2018 03:42:51 GMT
React Native is a great framework to develop cross-platform mobile applications for the platforms iOS and Android. In this, I am going to take you through the process of building a “minimalist” weather application using React Native by fetching real-time data. If you have never worked with React Native, you can use this walkthrough as kickstart in your journey of becoming a mobile application developer and will be a cool project for your portfolio. Getting Started: Requirements

React Native: Getting Started with Lottie and Expo

Fri, 09 Mar 2018 03:42:51 GMT
In this tutorial, we will be using Lottie with React Native. Lottie is an opensource library that renders Adobe Effects by providing easy to use animations just like static images. These animations are beautiful. Lottie is a mobile library developed by AirBnB. These animations are exported as JSON files using Bodymovin to render the natively on mobile and in web applications. 👍 for designers who spend their time contributing in LottieFiles.

Build a Progressive Web App using React

Thu, 01 Feb 2018 03:42:51 GMT
Originally this article was published on Zeolearn.com

Gatsby.js: How to set up and use the React Static Site Generator

Thu, 04 Jan 2018 03:42:51 GMT
Gatsby is a static site generator for React that released its first major version last month. It’s a tool that not only scaffolds projects (or websites) for you but claims that those sites are fast in performance. If you decide to use Gatsby you will be enjoying the power of the latest web technologies such as React.js, Webpack, and so on. There are a lot of modern paradigms that Gatsby takes care for its developer behind the scenes to start building and launch their project. Another cool thing about Gatsby that I like is its ever-growing data plugin ecosystem. It lets a developer fetch data directly into a Gatsby generated application using GraphQL.

Ionic 2/3 CLI Reference

Tue, 19 Dec 2017 03:42:51 GMT
Originally Published at Hackernoon.com The Ionic CLI is your go-to tool for developing Ionic apps.

Passing Data Between Pages in an Ionic Application

Sun, 03 Dec 2017 03:42:51 GMT
In the previous posts, we have seen how to setup a basic navigation between multiple Ionic app Pages. This post concerns what if you want to send some data from the previous page to the next page in the stack? For the Ionic provides NavParams class to transfer data from one page to another. Generate the application

Tips for Creating Nodejs REST APIs

Wed, 22 Nov 2017 03:42:51 GMT
Originally Published at Codeburst.io In this article, I am going to offer you some tips for writing REST APIs in Nodejs for a production level application. Writing RESTful APIs with Nodejs is one of the most popular use case using the JavaScript server side platform.

Multi Page Navigation in an Ionic App

Sun, 19 Nov 2017 03:42:51 GMT
Ionic makes it easy to create multiple pages navigation using NavController as the genesis of navigation stack. In this little application, I will try to make the concept clear to you. Generate Application and Pages

Using Google Fonts in an Ionic Application

Thu, 09 Nov 2017 03:42:51 GMT
In this post, I will be showing you to change font in any Ionic 2/3 application. To start with, I will be setting up a new ionic project such that you can refer back to on Github. shell

Basic Navigation in Ionic Applications

Tue, 31 Oct 2017 03:42:51 GMT
Originally Published at Hackernoon.com Navigation in Ionic does not work using normal routing like you might have done in some of the client side web frameworks, especially when compared to browser based navigation. It uses the terminology of pages which I find is more generalised and correctly named as compared Ionic version 1's states. This approach is quite similar to navigation in a native mobile application.

How to use Font Awesome in an Ionic Application

Wed, 18 Oct 2017 03:42:51 GMT
There is an element of confusion when it comes to use FontAwesome in an Ionic Application. To include this fonts library in Ionic needs a bit of configuration and this step by step guide will provide just that. Bootstrap an Ionic Application

What is Ionic

Thu, 12 Oct 2017 03:42:51 GMT
Ionic is an open source, front-end SDK for developing Hybrid Mobile Applications using web technologies such as HTML, CSS and JavaScript. It provides mobile optimised web technology based components as well as native APIs using Cordova and Ionic Native. Ionic with it’s latest version, is performance efficient using minimal DOM manipulation. Angular also plays a major role in increasing the performance of an Ionic application.

Introduction to Hybrid Mobile Apps

Thu, 05 Oct 2017 03:42:51 GMT
What is a Hybrid Mobile App? Hybrid application is a type of mobile application that uses browser window to display its interface.

Remove node_modules Recursively

Sun, 10 Sep 2017 03:42:51 GMT
nodemodules tend to take a lot of space in your local system especially if you work with Node.js or related frameworks (such as client side frameworks: React or Angular). They are the part and parcel of modern day JavaScript applications and workflow. Each day npm registry is getting around 350 million downloads daily, at the current time of writing this post. That's almost 2.2 billion downloads per week and you can take the calculation further.

Setup Nodemon to auto restart Nodejs application server

Sun, 10 Sep 2017 03:42:51 GMT
Manually restarting Node.js application is a tiring and tedious job. Nodemon is the best solution available to autorestart a nodejs app server in development mode. First step

What’s New in npm 5?

Thu, 24 Aug 2017 03:42:51 GMT
In May, in the very last week, npm announced the new major release for the JavaScript package manager. 5.0.0, hopefully, will be shipped with upcoming version of Nodejs (=8.0.0)as well. It seems a big step towards providing better tooling with significantly improved performance as quite a lot of developers made a switch to yarn, just because it could download the packages from the npm registry at a faster rate. However, this point is debatable, so let’s not get into that. A Peek at Major Changes

Converting a Buffer to JSON and Utf8 Strings in Nodejs

Thu, 10 Aug 2017 03:42:51 GMT
Nodejs and browser based JavaScript differ because Node has a way to handle binary data even before the ES6 draft came up with ArrayBuffer. In Node, Buffer class is the primary data structure used with most I/O operations. It is a raw binary data that is allocated outside the V8 heap and once allocated, cannot be resized. Before Nodejs v6.0, to create a new buffer you could just call the constructor function with new keyword:

Setting up MEAN Stack with Webstorm

Sun, 02 Jul 2017 03:42:51 GMT
Ever since I got interested in Node.js and started learning to program in JavaScript, both the programming language and the server side platform have been most relevant to me. Due them, I have made my first PR to an open source project on Github, heck, I even built one of my own using them (see 100DaysOfCode) which currently has more than 6 people actively contributing and enhancing it. With Node.js, from quickly building server side application to build fullstack application is not much of a hassle. There are two important solutions to this:

How to paginate records in MySQL using Sequelize and Nodejs

Tue, 20 Jun 2017 03:42:51 GMT
Often at times, I find my self struggling with Sequelize to find a direct answer for my query. Recently, I have been working on a fullstack application in which there was a basic requirement of paginating results from backend (REST API) to the frontend. I struggled for two reasons. Firstly, coming from NoSQL background it’s hard to grasp SQL DBs. Second reason being is Sequelize documentation does not provide a clear and direct solution to this very basic abstraction. Lot of people assume things in the world of SQL databases. Thus, in this post we will be talking about a basic paginating module using Sequelize, MySQL and Node.js. I am using you have some tables and records inside your MySQL database. To setup a new app and making database connection, read my post on Getting started with Sequelize.

Getting Started with Sequelize for Nodejs Applications

Tue, 30 May 2017 03:42:51 GMT
Originally Published at Hackernoon.com Introduction to ORM

How to use ESLint in Node.js Applications

Fri, 28 Apr 2017 03:42:51 GMT
Originally Published at Hackernoon.com ESLint is an open source JavaScript linting utility that help you overcome developer errors as JavaScript is loosely-typed language. There are quite a few options such as JSHint and JSCS in Javascript community for code linting and this post doesn’t suggest that you cannot use them.

How to Mock Data for Node.js Applications using faker.js

Sat, 01 Apr 2017 03:42:51 GMT
Originally Published at Hackernoon.com When we start to build an application, we generally do not want to worry much about data. To create a database and fill it with sample data seems much of a hassle to me personally. I instead focus more on creating RESTful API and the front end of the application when I am prototyping.

Getting Started with Ionic Framework

Sun, 26 Feb 2017 03:42:51 GMT
Originally Published at Hackernoon.com I have been getting familiar with Ionic Framework in past recent days. To start, I had a question in mind which might be similar to yours. Why choose Ionic Framework?

Migrating from Expressjs 4 to 5

Wed, 11 Jan 2017 03:42:51 GMT
ExpressJS 5.0 is in alpha release stage but I believe we’ll be adding it as a dependency in our package.json files in matter of no time. This article gives some tips regarding the way we are writing code using this framework and how we should adapt the new changes even if we are using ExpressJS version 4.0. I’ll start with most common thing such as response.

Writing a Node.js Twitter Bot Part 2

Sun, 25 Dec 2016 03:42:51 GMT
If you read the first part of my tutorial, you already know how to make a Twitter Bot with Node.js that retweets and favorites tweets using the Twitter API. In the second part of the Twitter Bot tutorial, we will continue to extend our Bot by adding functionality that will tweet back to any Twitter user who follows our bot.

Writing a Node.js Twitter Bot Part 1

Sun, 25 Dec 2016 03:42:51 GMT
In this tutorial, we will create a Twitter Bot with Node.js that retweets or favorites based on hashtags, and replies to users if they follow the account. What do you need to create this bot?

Create a Simple Twitter Bot with Node.js

Wed, 23 Nov 2016 03:42:51 GMT
Originally Published at Hackernoon.com How about a Twitter Bot that retweets, favorites, on the basis of hashtags and replies to other users if they follow it? I made a similar kind of a Twitter Bot (@nodejstweet) that feeds me the latest or the ongoing news/articles/how-to’s on a set of hashtags such as Nodejs, MongoDB, AngularJS, IonicFramework, et cetera. At the time I never expected it having more followers than me but that has been surpassed.

Atom: An Editor of 21st Century

Thu, 14 Jul 2016 03:42:51 GMT
The Atom I am talking about is not a small particle in the world of developers. Built and maintained by Github and the community, it is more than just an editor. In our world, in the world of developers, an editor plays an amount of significant role when it comes to writing code. They might seem just a tool, as a matter of fact, they are, but for someone who takes pleasure in writing code, it is an essential piece in their setup.

How process.nextTick() works in Node.js?

Sat, 25 Jun 2016 03:42:51 GMT
The process object is a one of the few global objects provided by the Node.js core API. It can be access from anywhere, thus its methods can also be accessed. Such is a method called process.nextTick() which is used by developers in realtime applications everyday to defer the execution of a function until the next Event Loop Iteration. Browser JavaScript introduced us functions like setTimeout() to defer tasks in the near future. The setTimeout() function takes a callback function and a number value representing the time after which the callback function will be executed, in milliseconds.

The Node.js system

Fri, 22 Apr 2016 03:42:51 GMT
When I started learning Node.js, I always wondered, how does it work? How is it inside Node.js? Event loop and Event Queue jargons are digested. But what exactly is going on? Where do those jargons Event Loop and Event Queue come from.To satisfy my curiosity as well to know the answer to my previous question, I went in depth as much as I can and came across some things which I’d like to share with you. In brief, this article is about Node.js System — a glimpse of internal workings of Node. If you are familiar with Node.js, it is a known fact that Node.js is single threaded. If you are from programming/computer science background you know what a thread means. Consider this scenario: traditionally — an I/O request comes to a web server and is assigned to an available thread, and for each concurrent connection there is one thread available. That request is handled on the specific thread until it is fulfilled and the response is sent.

The Node way - Philosophy of a Platform

Thu, 10 Mar 2016 03:42:51 GMT
Last week, when Node.js community introduced its logo, it got me into thinking of why this technology as fresh in my mind as when I was first introduced to it a few months back. Why is that spark still ignited in the back of my head? The answer to this is the philosophy behind the technology of Node.js platform. Every platform has its own philosophy, its own set of rules, its own principles and guidelines. This is necessary for the evolution of a platform and is important for developing an application using that platform. (Otherwise, we all can get carried away.) Node.js has its own philosophy, since its a platform, and it manages to find a middleground between JavaScript and UNIX.

JavaScript Code Conventions

Fri, 08 Jan 2016 03:42:51 GMT
This article is about coding conventions. Everywhere I read articles about complex things in programming, links to other good/better/awesome articles, but nobody seems to talk about the basic things in programming. Like the coding conventions used by programmers in their work, I am a JavaScript enthusiast, and never once did I came across a good article on basic conventions and guidelines to write code that is helpful for me and others to read my code.

amanhimself.dev

Moving away from Oh My Zsh (OMZ)

New blog theme again