Oken Labs: experimental tech projects.

Let's make the web fun again!

2024-09-14T00:00:00Z

When I started writing for this blog and created this website, my original idea was to make something I called an "independent Product Engineering initiative".

Beyond the fancy name, my goal was to contribute to open-source software, build tools and resources for developers and designers, and help maintain them.

I still want to do that. However, that previous idea could sometimes feel paralyzing because I often felt like what I was building wasn't good enough.

So, starting today, I’ll focus on building random things, prioritizing fun over productivity.

Maybe along the way, I’ll create something genuinely useful. But if not, that's fine too :)

Stay tuned for some ~~crazy random~~ cool experiments!

P.S. Thank you, eieio, for making One Million Checkboxes. Thank you, Theo, for reminding me the web can be fun and doesn't always need to be so productized. Finally, thank you, neal.fun, for being a great inspiration.

Taking a break

2024-07-12T00:00:00Z

I haven't posted in a while, and it's okay :)

When I started this blog I posted three days in a row, however, I knew that posting so frequently wouldn't work for me. So I decided back then I would post whenever I felt like.

Still, I didn't think that I would go three months without posting, but here we are. While I was not writing that much, some interesting things happened, and I was coding and engineering a lot.

Anyway, by the end of June, my mind needed a break. Since I had the opportunity to take some time off from work, I did! In the first week of not coding, I felt I should be doing something, either working on a side project or studying, and then it hit me: the only way I would actually recharge myself would be to take a sincere break.

So, for the last two weeks, I have been binge-watching series like Vikings and cooking shows. I also played some games, and took some time to just chill and even just get bored.

It's been a blast!

I now feel refreshed and eager to get back to coding! Since I have a couple of weeks before getting back to my full-time work, I will gladly work on side projects and study.

Honestly, if I kept pushing myself to "be productive" and hadn't taken this break, I most likely wouldn't be as excited and motivated as I'm feeling now.

To my future self and to whoever reads this: have a break without any guilt from time to time, it will be worthwhile in the long run.

Take care y'all.

How I (Re)made my Web Portfolio: Tips, Tools and Best Practices

2024-04-11T00:00:00Z

A brief introduction #

If you would like to check the ~~final~~ current result, you can access it at andreseiji.com

I've always wanted to have my own website.

I started my career as a UI designer, and I knew it was important to have a portfolio. It's a practical way to showcase my work. Eventually, I transitioned to software engineering, and along my journey, I've had a few different versions of my website and/or portfolio.

In the early 2010s, my very first website was a template bought in ThemeForest, by Envato. It was a simple HTML, CSS and JS website, using jQuery and Bootstrap. I remember I had to use FTP to upload the files to the server - UOL Host - a Brazilian hosting service.

In the following years, I remade my portfolio using angular.js, VueJS, Angular, React (with Next.js), and even Vanilla JS 🍦. I've used different tools and libraries, like Grunt and Webpack for builds, BulmaCSS, Angular Material, Stitches, Tailwind CSS and others for styling. I've also used different hosting services, like Vercel, and GitHub Pages.

In this article, I'll share my experience remaking my portfolio in 2024. I'll cover the following topics:

Why I decided to remake my website
The tools and libraries I used
The best practices I followed
The final result

I hope you find something useful. Let's get started!

Why I decided to remake my website #

The previous version of my website was built originally in late 2022 using React 17.x, Next.js 13.x and Tailwind CSS. It was a simple website, with only a landing page containing some info about myself, companies and projects I have worked on, and links to my resume and social accounts. It was hosted on Vercel, and I was happy with it.

However, I felt the need to update it. I wanted to better showcase what I have learned and projects I am working on by myself - without a company or other person hiring me. This way it would feel like a web development and design portfolio that truly represents me.

Finally, I wanted it to be scalable, so I could add new pages and content in the future without too much effort, while also having a personal touch.

Here are some screenshots of the previous version of my website:

It's alright, but I wanted to make it better. Like Addy Osmany said once:

First do it, then do it right, then do it better.

For my website, I am now in the loop of always making it better, and better, and better...

Quick tip: Update your website every now and then. It's a good way to learn new things and improve your skills.

Another quick tip: If you are doing your first website, don't worry too much about it. Just do it. You can always change or update it later.

The tools and libraries I used #

Having used so many different tools and libraries in the past, I wanted to keep it simple this time, while also moving fast.

For tooling, I used Notion to plan and organize the project, Figma to design the website, and GitHub to version control the code. I also used Vercel to host the website and VS Code as my code editor.

For libraries, the base is React, Next.js, and Tailwind CSS. As I want to get more in-depth with them, learning more about their advanced features, it seemed like a good idea to use the same stack with updated versions (React 18.x, Next 14.x and Tailwind 3.x).

This is what my dependencies and devDependencies look like in my package.json file at the writing of this article:

{
	"dependencies": {
		"@heroicons/react": "^2.1.3",
		"@radix-ui/react-dropdown-menu": "^2.0.6",
		"classnames": "^2.5.1",
		"framer-motion": "^11.0.24",
		"next": "^14.1.4",
		"next-intl": "^3.10.0",
		"next-plausible": "^3.12.0",
		"next-themes": "^0.3.0",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"sharp": "^0.33.3"
	},
	"devDependencies": {
		"@types/node": "^20.11.30",
		"@types/react": "^18.2.73",
		"@types/react-dom": "^18.2.23",
		"@typescript-eslint/eslint-plugin": "^6.21.0",
		"@typescript-eslint/parser": "^6.21.0",
		"autoprefixer": "^10.4.19",
		"eslint": "^8.57.0",
		"eslint-config-next": "^14.1.4",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-no-relative-import-paths": "^1.5.3",
		"postcss": "^8.4.38",
		"prettier": "^3.2.5",
		"prettier-plugin-tailwindcss": "^0.5.13",
		"tailwindcss": "^3.4.3",
		"typescript": "^5.4.3"
	}
}

I would consider a fair amount for what I wanted to do. Not too much, not too little. Let's break down the dependencies:

Next.js, React and Tailwind CSS #

I started the project with create-next-app, with the following options:

What is your project named? `andreseiji.com`
Would you like to use TypeScript? `Yes`
Would you like to use ESLint? `Yes`
Would you like to use Tailwind CSS? `Yes`
Would you like to use `src/` directory? `Yes`
Would you like to use App Router? (recommended) `Yes`
Would you like to customize the default import alias (@/\*)? `No`

This generated a project with most of the dependencies I needed already.

Internationalization (i18n) #

One missing feature on my previous website was localization. I wanted to have my website available in Brazilian Portuguese, my native language. For this version, I decided to use next-intl. It has great integration with Next.js app router, and once the setup is done, it's easy to use.

Theme switcher #

While Tailwind CSS makes implementing a dark theme very straightforward, and it is simple to implement a theme switcher, I used next-themes because it provides a more robust solution, with more features like live syncing all open tabs and support for multiple themes.

Analytics #

I wanted to have some basic analytics. I decided to use Plausible mainly because it's privacy-friendly. It's also simple to use and I don't need a lot of data for my website. The next-plausible library is the official recommended way to add Plausible to a Next.js project.

Icons and UI components #

For iconography, I used Heroicons. They are simple, clean, and easy to use. They are imported as modules, so I can use only the icons I need, reducing the bundle size. The background pattern is from Hero Patterns.

I also used Radix UI for the dropdown menu. Libraries like Radix UI are great for building accessible UI components. If you are using React, Headless UI is another great option.

Animations #

I used Framer Motion for animations. As my content is presented in a timeline, I thought it would be nice to make each item appear with a fade-in effect. I think it adds a nice touch to the website and shows thoughtfulness.

I tried not to overdo it, though. Animations should be used to enhance the user experience, not to distract or annoy the user.

Other libraries #

classnames: a great utility for conditionally joining class names together, very useful to create components with variations.
sharp: a high-performance image processing library. Required by Next.js to optimize images.
Some ESLint and Prettier plugins to keep the code clean and consistent.

A final thought on the tools and libraries #

I like either using what I am most comfortable with to move fast, or trying new things to learn more. In this project, I did a bit of both. I used tools I was already familiar with, like React, Next.js, and Tailwind CSS, but I also tried new libraries, like next-intl and Framer Motion.

Whatever you choose, make sure it fits your needs and goals. Don't use a library just because it's popular or because everyone else is using it. Use it because it solves a problem you have. Make every choice intentional.

Don't be afraid to try new things, but also don't be afraid to stick with what you know. Balance is key.

The best practices I followed #

Planning #

As a developer, sometimes all I want is to jump into the code and start building. But planning is important.

Before starting the project, I planned ~~everything~~ most things in Notion. I created a new page for the project, where I wrote what I wanted to have, and the tools and libraries I would use.

I used the Landing Page Board to help me define the main content, and from there, I created a mockup in Figma. I also created a list of tasks on Todoist to keep track of what I needed to do, especially because I wanted to finish it all in under 10 days.

Design #

I designed the website in Figma. To keep it simple, I started with a neutral color palette from Tailwind CSS colors and something more like a wireframe.

I thought it would be nice to have a timeline to show my professional journey. It could also represent git branches, where each route is a different branch.

I usually go for simpler UIs and clean designs, but this time I wanted something bolder, more colorful and playful. I then iterated the design to give it a kinda brutalist look. It was fun to experiment with more colors!

Even though I wasn't 100% sure about the design, I decided to start coding this version. I knew I could always change it later.

Development #

I started the project with create-next-app, and I used the options I mentioned earlier.

The first thing was the project setup, configuring my Prettier and ESLint preferences with helpful plugins for what I was going to use.

Then I moved to next-intl to account for the internationalization from the beginning.

I created the main components, like the header, footer, and timeline. I used Tailwind CSS for styling, and I tried to keep the components small and reusable.

Once I had all the components, I started adding more content. The modular structure of the site makes it easy to move cards and content around.

The final thing I added were the animations. While they add a lot to the look and feel, they are not essential. I could have launched the website without them, and it would still be functional.

Always remember to prioritize the essential features. You can always add more later.

Typography #

For the typography, I decided to use only one font family, IBM Plex Mono, with two weights.

Using a few fonts helps with performance, as the browser doesn't need to download multiple font files. It also helps with consistency, as you don't have to worry about different fonts clashing.

Performance #

Next.js is already optimized for performance, but there are always things you can do to make it even faster, like:

Picking just a few fonts
Optimizing images
Using Priority for the Largest Contentful Paint (LCP) element
Using only libraries and code I actually needed

By following these practices, I was able to achieve a Lighthouse score of 100s on Desktop. Mobile wasn't bad either, with 98 for Performance.

To better understand Core Web Vitals, definitely check web.dev. It's a great resource.

It's also important to understand that lab data (like Lighthouse) is not the same as field data (real user data).

SEO #

For SEO, I made sure to have:

A descriptive title and meta description
A good URL structure
Alt text for images
A sitemap
A robots.txt file

If you are using Next.js, check the Metadata Files API Reference.

After publishing the website, I configured it on Google Search Console.

Accessibility #

I may not be an expert, but I care for accessibility and try to at least implement the basics, like:

Having semantic HTML
Adding alt text to images (when it makes sense, sometimes it's better to leave it empty)
Using ARIA attributes when needed
Ensuring contrast ratios are good for both light and dark themes
Using focus traps where it makes sense (like the dropdown menu)

I wrote about implementing focus traps on a previous article.

CI/CD #

I used Vercel for hosting, which has such well-integrated CI/CD that I can publish new versions in just a few minutes. Every time I push to the main branch, it automatically deploys the website. It's fast and reliable.

I also set up a custom domain, and I configured the DNS records to point to Vercel.

Content #

There is a saying that "content is king". And it's true. You can have the best design and the best performance, but if the content is not good, the website won't be either. I made sure to write about myself trying to show my personality, and to showcase my work in a way that is easy to understand.

I think I still can improve a lot on this aspect, and it's a good thing I can keep iterating on it.

Iteration #

After launching the website, I asked for feedback from friends and colleagues. I also used Lighthouse to check the performance and accessibility.

I made some changes based on the feedback, like reviewing the menu so the first thing you see is the timeline, and making the header sticky for easier navigation.

I will keep improving it.

The final result #

"Final" meaning the current version, as I am always looking to improve it. Here is a screenshot I took on the date of this article:

Maybe by the time you are reading this article, the website has changed. If you want to check it out, you can access it at andreseiji.com

Thanks for reading #

I hope you found this article useful. I tried to cover the main aspects of remaking a website, from planning to launching. I hope you can take something from it and apply it to your own projects.

Brag Document: write your own

2024-03-12T00:00:00Z

Have you ever struggled to remember all the awesome things you've accomplished at work? Or maybe you feel like your efforts aren't getting the recognition they deserve? Well, I've experienced both struggles and felt like my hard work was in vain sometimes, and then I discovered the brag document. It's not a magical solution, but it sure helps a lot.

What is a Brag Document? #

It's a personal repository of accomplishments, skills, contributions, and anything else that shows how great you are at what you do. Whether it's completing a project ahead of schedule, getting praised by colleagues, or learning a new skill, it all goes in the brag document.

Why you need one #

When it comes time for performance reviews or job interviews, you'll have all the evidence you need to show why you're the best person for the job. Before having one, I would have to try really hard to remember what I did, and I most likely left out lots of cool stuff because I didn't remember them.

It also helps to visualize your own progression and set personal goals for professional growth. Even when I didn't get a raise or promotion, I still felt good about myself by reflecting on everything I have achieved during a period of time.

How to make your own Brag Document #

Creating one is easy, but keeping it updated requires some discipline. You can use a digital tool or even just a good old-fashioned notebook. I have used Notion and Google Docs. An advantage of keeping it digital is the ease to share with your manager and other peers. Sharing is a great way to get feedback, be reminded of things that you wouldn't otherwise register in the brag document, and also see all the amazing things you and other people are achieving.

When it comes to keeping it up to date, a good practice is to set aside some time every week to update it with new achievements, skills, and others. I reserve half an hour a week to do so.

What goes in it? #

Your brag document is your own and should be structured in a way that works for you and highlights your history. But I'm the type who likes a template to guide me, and if you would rather have one too, I definitely recommend checking out Julia Evans' "Get your work recognized: write a brag document" post. It has a brag document template with examples.

I will also share the template I'm currently using with some fictional examples. The template is yearly and has been effective for me:

# (Your name)'s 2024 Brag Document

## Goals

### Year goal

- Get to the next level on the career ladder

### Q1 Goals

- Improve app performance by reducing p90 LCP from 3s to 2s
- Learn a new programming language

### Q2 Goals

...

---

## Projects

### Project X

- Delivered 20 technical debts in one month, while also delivering product stories
- Optimized the CI/CD pipeline, reducing the average time from 11 minutes to 5 minutes

...

---

## Tools

### Some Experimentation Tool

- Implemented the tool in 3 projects, enabling the growth team to run 22 different A/B experiments in Q1

...

## Collabs and mentoring

- Worked with Team Delta to plan and deliver the new notifications central
- Mentored a junior software engineer by having weekly 1-on-1 sessions and specific pair programmings

...

---

## Acknowledgements and feedback

- Attach or quote some received feedbacks.

...

---

## Design & Docs

- Links to RFCs (Request For Comments) and Docs you have written or contributed to

...

---

## Learnings

- Completed a course on Clean Code and Clean Architecture
- Read "The Staff Engineer's Path" book

...

I hope these examples give you a good idea of how to fill in your own brag document. Remember, it's crucial to include real data and personalize it to reflect your achievements accurately.

Once you've got your brag document set up, don't be afraid to show it off! You can use it during performance reviews, bring it along to job interviews to prove you're the perfect fit for the role, and share it with teammates to celebrate your achievements together!

Accessibility: Implementing Focus Traps

2024-03-11T00:00:00Z

I decided to write about focus traps because they are an essential aspect of keyboard accessibility, yet many sites and developers do not implement them.

Web Accessibility basically means making websites easy to use for everyone, including people with disabilities.

I will probably write more about it in the future, but since I'm no expert at it, if you would like to dive deeper, I definitely recommend checking The A11y Project and the most recent Web Content Accessibility Guidelines (WCAG), which at the time of this writing is version 2.2.

Understanding Focus Traps #

A focus trap is a design element that keeps a user's attention within a specific area of a webpage, commonly used to ensure keyboard navigation remains within certain interactive components like modals or menus.

Focus traps are important for accessible web design because they prevent keyboard users, including those with disabilities, from unintentionally navigating away from important interactive elements, ensuring a smoother and more predictable user experience.

Some examples of components that often benefit from focus traps are:

Modal or dialog
Dropdown menus
Contextual menus
Popovers with interactions
Lightboxes or overlays
Tabs or tabbed interfaces

Design considerations for Focus Traps #

Ensure focus traps are easily discoverable and navigable, with clear visual indicators for focused elements.
Avoid hindering the user experience for screen readers or other assistive technologies.
Provide instructions for custom key navigation, in addition to the usual Tab and Shift + Tab.
Ensure users can navigate into and out of the focus trap easily.

Implementing Focus Traps #

Most likely, you already use a UI library and some external packages. However, before recommending specific implementations using libraries, let's discuss how to implement focus traps from scratch and key considerations. Understanding these fundamentals will help visualize what happens under the hood.

Implementation Overview #

Implementing a focus trap from scratch requires event handling, such as listening to the "keydown" event and preventing the default behavior of certain keys, such as Tab, when the focus is at the boundary of the trap.

In addition to Tab and Shift + Tab, provide a clear method for users to exit the focus trap by pressing the Escape key.

Focus management is also important. Set the focus to the first focusable element within the trap when it is activated, and then trap focus within the trap by redirecting focus back to the first element when attempting to move outside the trap.

Utilize ARIA roles and attributes to enhance accessibility. For example, apply the role attribute with a value of dialog to signify the purpose of the focus trap to assistive technologies.

Ensure all interactive elements within the focus trap, such as buttons, links, and form fields, are focusable using keyboard navigation and have a clear indication when they are focused.

Implementation using Libraries #

The suggested libraries will all depend on what packages your project already uses. I will leave some examples, but always make your research and check the official docs.

You can also implement a Focus Trap yourself, without any library, just make sure to follow a11y best practices.

Libraries for React #

If you use a UI library, such as Material UI, check for an existing component. For instance, MUI has its own FocusTrap component.

If you do not use a UI library, or the one you use does not have a Focus Trap component, consider these libraries:

Or even get the base for the component you need from shadcn/ui, which is not a library by itself but will provide some code for your component while accounting for a11y.

Libraries for Angular #

If you use a UI library, such as PrimeNG, check for a Focus Trap component. PrimeNG has its own pFocusTrap directive.

Angular Material, which uses the @angular/cdk (Component Dev Kit), also has a FocusTrap directive.

Other library Options #

The focus-trap package seems to work well, based on the demo, although I haven't personally tested it.

If you use Vue, Svelte, Solid, or another library, search for "<Library> Focus Trap" to find available options.

Accessibility Testing and Validation #

Keyboard Testing: Manually test the focus trap using only keyboard navigation. It's also a good idea to ask others to do the same.
Screen Reader Testing: Test the focus trap with a screen reader, such as NVDA (NonVisual Desktop Access) or VoiceOver. Use the screen reader to navigate through the focus trap and verify proper announcements and navigation.
Accessibility Inspection Tools: Use browser developer tools or dedicated accessibility inspection tools, such as Axe, to analyze the focus trap implementation for accessibility issues.
User Testing: Conduct user testing with individuals who rely on assistive technologies or keyboard navigation. Gather feedback from users with disabilities to identify usability issues or barriers encountered while interacting with the focus trap.
Official Guidelines: Ensure compliance with web accessibility standards, such as WCAG "No Keyboard Trap", which is Level A, meaning it is the minimum level of accessibility compliance.

Common pitfalls to avoid #

Inadequate keyboard navigation
Lack of visual focus indicators
Unintuitive focus order
Unclear exit mechanisms
Ignoring screen reader compatibility

Real-world examples #

Next time you navigate a website, try navigating using only the keyboard. Usually, Tab selects the next focusable element, Shift + Tab the previous one, Enter or Space trigger the element, and Escape exits a focus trap.

In well-known sites, it will probably work mostly fine, but it shouldn't be too hard to find sites that lack visual indication of focusable elements or even focus traps.

If you are looking for a benchmark, a site I think does an amazing job is Airbnb. Try navigating keyboard-only, and you will see what I mean.

Conclusion #

In conclusion, focus traps are critical to ensure accessible web design, particularly for keyboard users and individuals with disabilities. Implementing focus traps requires careful consideration of design principles, keyboard navigation, and compatibility with assistive technologies. Next time you design or develop a component, remember to think about keyboard interactivity and consider implementing a focus trap where appropriate.

To dive deeper into web accessibility, here are some great resources:

The A11y Project: A community-driven resource that offers articles, guides, and tools to help developers create accessible web experiences.
Web Content Accessibility Guidelines (WCAG): The official guidelines published by the World Wide Web Consortium (W3C) listing the requirements for accessible web content.

FAQ for lockfiles

2024-03-05T00:00:00Z

Working with JavaScript/TypeScript often involves dealing with lockfiles such as package-lock.json, yarn.lock, or pnpm-lock.yaml.

This FAQ draws from my experience working primarily with npm-based projects. While I'm not an expert, I've gathered some insights over the years.

What is a lockfile for? #

A lockfile precisely controls and records the versions of packages and their dependencies in a project. This guarantees consistency and reproducibility across different installations and environments, preventing discrepancies in dependency versions across local development setups and cloud environments.

Should I commit the lockfile? #

Yes, committing the lockfile is important. It ensures every installation results in the same node_modules structure, facilitating consistent builds and mitigating "works on my machine" issues. Committing the lockfile also speeds up npm install, allows for easier review of dependency changes, and assists in identifying insecure dependencies through npm audit.

Why can `package-lock.json` change without modifications to `package.json`? #

Running npm install may update some dependencies within the version ranges specified in package.json, reflected in changes to package-lock.json. To better understand this, it's important to know about semantic versioning and how package.json interprets version ranges.

How does the package manager update the dependencies based on my `package.json`? #

If you ever wondered what the ˆ or ~ before a version means - as my younger self once did - it dictates how updates to dependencies are handled:

Patch releases: 1.0 or 1.0.x or ~1.0.4
Minor releases: 1 or 1.x or ^1.0.4
Major releases: * or x

A simple example would be:

You have in the package.json dependencies "some-lib": "~1.0.1".
A new patch version of some-lib is published; now versions 1.0.0, 1.0.1, and 1.0.2 are available on npm.
You run npm install, and in the dependency resolution, it is possible to update to 1.0.2.
some-lib at version 1.0.2 will be installed in node_modules, and the lockfile will be updated accordingly.

Using npm's SemVer Calculator can help visualize which versions of a package are allowed under different version ranges.

What does a change in `lockfileVersion` indicate? #

A change in lockfileVersion typically occurs when npm install is executed with a different version of npm, reflecting changes in how dependencies are resolved or structured in the lockfile. Refer to the npm documentation for more on lockfileVersion.

How can I ensure my CI build has consistent dependencies? #

To guarantee dependency consistency in CI environments, use the following installation commands that respect the lockfile:

Use the correct versions of Node and npm for your project.
Use one of the following installation commands that respect the lockfile:

# npm
npm ci

# yarn
yarn --frozen-lockfile

# pnpm
pnpm install --frozen-lockfile

This will ensure the build is using the lockfile, and the dependencies should be consistent.

If your question isn't listed #

Consult the official documentation for more in-depth guidance:

You can also use your favorite AI tool to ask about it, but always cross-reference with official sources.

Closing Note #

I recently came across JSR, a new package registry with native TypeScript support. It seems interesting, but I will have to test it myself to have an opinion.

Getting things done

2024-03-01T00:00:00Z

It is day 3 of the blog! And while I do not intend to post every day, I am trying to be more consistent at writing, so I have decided I am going to write at least half an hour every weekday until it becomes a habit. I might not post on the same day, but at least I will have to think about what I am going to write and try to put something ~~on paper~~ on git.

Motivation is not predictable #

Today I did not feel like writing. After a full day of work, I just wanted to chill. Sit back on the couch. Play some games. Watch something on TV.

I know I will not always be motivated, and there will be ups and downs. Usually, I would just not write, but I am working on my self-discipline, and I know that to become a better writer, I will have to write, even when I don't feel like it.

That's how I got better at programming and became more consistent as a professional, there is no secret formula.

Get things done #

Overall, in 3 days I set up this blog online, wrote some ~~dubious quality~~ content and got things going. I wanted to do this for some time now, and I finally started. A lot of factors are involved in me starting this, but I want to highlight two resources that really helped me:

The Get Things Done Book #

The Get Things Done Book: 41 tools to start, stick with, and finish things, by Mikael Krogerus and Roman Tschäppeler, is a packed book with quick reading chapters each presenting a technique or concept to help with productivity. I have been trying some techniques, and here I am, writing about it.

The Atoms. app #

Atoms. The official Atomic Habits app, based on the Atomic Habits book by James Clear, aims to help build good habits and break bad ones.

I got to admit I have not read the book yet, just read about the concept of it, and now that I am using the app, it is definitely on my reading list.

The app guides you into creating some achievable habits, defining when to be reminded of them. Also, it delivers daily lessons based on the book which are great!

What I enjoyed the most is a detail of the user experience: instead of simply "clicking a button" to complete a habit, you have to hold it for a while, receiving some visual and haptic feedback. Once the interaction goes off, there is an animation and a quick tracking view. It feels way more rewarding than simply clicking or touching a button. Anyway, to get the full experience you should try it yourself!

Quick disclaimer: I am not sponsored or anything, I am sharing resources that I genuinely enjoy, and I am not one so easy to please.

Leap of faith

2024-02-29T00:00:00Z

So, I decided not just to write content but also to write more code.

Get things going #

I decided to start blogging in 2024, but in a way similar to the early days of the web. Instead of going for a larger and consolidated platform, such as Medium or Substack, I wanted to make a website where I would have full control over all content, including its code.

While using a blogging platform would facilitate a lot of features, there is something incredibly fulfilling about making it "from scratch" (I am using 11ty and a template, more on that in the next section). I am taking a leap of faith that this will be a scalable and always performant, future-proof blog.

For my future self and anyone interested, I am logging here a screenshot of the current look and feel of this blog, because it will change very soon.

Build your own blog #

If you want to start your own blog and own the code, I definitely recommend checking the official eleventy-base-blog template on GitHub.

I was originally going to start from scratch, without a template, just a basic 11ty setup to generate static web content. However, there are a lot of useful features that the template brings out of the box; you can check all of them here.

Anyway, thanks to all 11ty contributors for the amazing tooling.

First things first

2024-02-28T00:00:00Z

I have been thinking about starting to write for a while now, probably for some years, but eventually, I would find some reason not to. After 2023 and watching the way artificial intelligence is changing the world, I finally decided to start.

Since from now on we are going to have more and more AI-generated content, I might as well feed the data with my own perspective on things.

Disclaimer: I may not be a good writer (yet!), but we all have to start from somewhere, right? Also, English is not my native language. I chose it to practice. In this first post, I am going to log a quick intro about myself and whatever I want Oken Labs to be.

A little about myself #

Most people I know call me Seiji (pronounced say-g). I am from Brazil and I am a millennial working in the tech industry for the past 10 years, having worked as a product designer and software engineer for various markets.

Hopefully, some of the content I share will help other people ~~or AI~~ to build better code, designs, and products.

What is Oken Labs? #

Honestly, I wanted a GitHub organization to work on some side projects, so I would not use my personal account. I then created oken-labs. That is how it started. The current idea is to post articles, tutorials, and some non-related writings (like this one). Once I have some side projects ready, they will be listed here too.

To whoever reads this, I wish you a great year ahead!