Ryosuke's Portfolio and Blog

I’ve been diving deep recently into the world of Web Components using StencilJS.

I recently created a web component based design system using StencilJS.

I’m a big fan of Semantic UI, one of the top used CSS frameworks out there next to Bootstrap and Material.

If you’re a regular user of my blog, you’ll notice that I finally had the time to redesign my site from the ground up.

Shopify has exploded over the past few years, becoming a near de-facto decision for any small to mid scale e-commerce project.

GatsbyJS has been exploding over the static JS scene over the last few months.

Tables - they comprise a multitude of different interfaces we consume on a regular basis.

Recently I got to work on a UX/UI project with a new team, and was tasked with selecting a design collaboration tool we’d use to create and collaborate on the mockups and prototypes.

Recently I’ve been doing a lot of research into the myriad of design systems out there, and I stumbled upon Pure CSS, a tiny CSS framework with only essential modules for creating sites.

Things are blowing up in the React community lately!

Recently I was on the hunt for an iOS to prototype and sketch UI designs in on the go.

In my neverending quest for making the documentation as painless and seamless as possible, I started experimenting with a library by the Facebook team called react-docgen.

I recently was exploring different documentation solutions for design systems, and through my experimentation I created a template to create Gatsby documentation for any React project.

As I’m starting to prepare for delivering talks and presentations, I’ve decided to upgrade my slideshow game to use React components 📈💁‍♀️ As a React developer, it’s only natural to want to include real example of my work inside my presentations, and MDX…

In the last tutorial, we created the basis of a design system using ReactJS and CSS in JS.

As I’ve been creating more React projects, I’ve been finding that there’s a lot of setup to make concocting code as smooth as possible.

Design systems are upon us.

Recently the Kushy API finally reached a beta release of v1, and I redesigned the Kushy API documentation to use GatsbyJS.

Lately I’ve been trying my best to get into TDD, test-driven development, which is a style of programming where you build tests alongside your code.

When I discovered Airbnb’s react-sketchapp, I was ecstatic to start ditching the clunky design version control systems for a single source of truth: React.

I had to do some development on another computer recently, and after settling down in front of a desk with the default VSCode config, I quickly realized how much of my local environment and workflow needed to be configured and installed.

Have you been developing a NextJS app with dynamic routing (using maybe Express), and found that every time you make a change you have to do the tedious process of shutting down the server (CTRL+C) and restarting it?

Recently I needed to create a NextJS app that made authenticated API calls, and couldn’t reveal it’s credentials to the client.

Recently, I’ve recently been trying my best to upload as much code to open source repositories like Github and Codepen.

Recently I decided to start experimenting with NextJS as a way to implement a React frontend for Kushy.

Do your components look like this in NextJS?

Recently I was setting up a NextJS project with LESS and CSS, and I was having an issue where my relative media files weren’t getting loaded.

I was recently working on a quick project in Sketch and I needed to insert some Lorem Ipsum text into a few fields.

I recently ran into an issue where I wasn’t the admin in a Wordpress install, and after running this bit of SQL, I was quickly back in command: INSERT INTO `wp_users` (`user_login`, `user_pass`, `user_nicename`, `user_email`, `user_status`) VALUES ('ryo',…

We’ll be using the OAuth2 process to authenticate our NextJS app users with our Laravel API (thanks to Passport).

Need to protect your NextJS pages behind a login?

Just copy this into a docker-compose.yml in your project root, and then run docker-compose up -d 🚀 version: "2" services: my-wpdb: image: mariadb ports: - "8081:3306" environment: MYSQL_ROOT_PASSWORD: root my-wp: image: wor…

Ever had a situation where you have elements side by side on desktop, but they stack in the wrong order on mobile?

Laravel makes it incredibly easy to quickly create powerful backend application and APIs.

Laravel makes forming data for an API response easier using API Resources, which take data (usually queried from Models), and return specific fields and structure you define.

Ever needed to apply middleware to specific controller methods?

Using just a few lines of jQuery, combined with the Semantic UI Modal component, you can create a pretty simple and effective Lightbox: <link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css" /> <section id="…

We’ll be creating a blog using GatsbyJS, a static site generator for React.

My new personal blog and portfolio is now online.