DEV Community: Lyumo

Using interactive rebase in Git

Lyumo — Sun, 09 Jun 2024 20:20:38 +0000

About

An interactive rebase in Git is a process that allows you to edit a sequence of commits. This is typically used to clean up commit history before sharing changes with other members of the team.

Case study

Let's study an example of making a clear 3-commit history out of the initial 5 commits.

Start an interactive rebase: Start an interactive rebase for the last 5 commits. If your branch has 5 commits ahead of the base branch, you can use:

   git rebase -i HEAD~5

Interactive rebase editor: This command will open your default text editor with a list of the last 5 commits, starting from the oldest commit to the newest. The lines will look something like this:

   pick abc123 Commit message 1
   pick def456 Commit message 2
   pick ghi789 Commit message 3
   pick jkl012 Commit message 4
   pick mno345 Commit message 5

Edit the commits: Change the word "pick" to specify what you want to do with each commit. To squash commits into one, you can use the word "squash" or "s" for short. For example, if you want to combine commits 2, 3, and 4 into one, you would modify the list like this:

   pick abc123 Commit message 1
   pick def456 Commit message 2
   s ghi789 Commit message 3
   s jkl012 Commit message 4
   pick mno345 Commit message 5

Save and close the editor: After modifying the list, save and close the editor. Git will start the rebase process.
Edit commit messages: Git will then reopen the editor to allow you to combine commit messages. You can edit the commit messages to reflect the new commits. For example, you might see something like this:

   # This is a combination of 3 commits.
   # The first commit's message is:

   Commit message 2

   # This is the 2nd commit message:

   Commit message 3

   # This is the 3rd commit message:

   Commit message 4

You can edit this to create a new combined commit message:

   Combined commit message for commits 2, 3, and 4

Complete the rebase: Save and close the editor. Git will complete the rebase process.

Example

Assume your commits are:

abc123 - Initial setup
def456 - Added feature A
ghi789 - Fixed bug in feature A
jkl012 - Improved feature A
mno345 - Added feature B

You want to have the following commits:

Initial setup
Feature A (including the fix and improvement)
Feature B

Your rebase edit list would look like this:

pick abc123 Initial setup
pick def456 Added feature A
s ghi789 Fixed bug in feature A
s jkl012 Improved feature A
pick mno345 Added feature B

And after saving the first list, you would combine the messages of the second, third, and fourth commits into something like:

Feature A (including the fix and improvement)

The editor used for an interactive rebase in Git is determined by your Git configuration and environment settings. By default, Git uses the default editor configured for your system, such as vi or nano on many Unix-like systems, or Notepad on Windows.

By following these steps, you can adjust your commits into three sensible commits with the desired commit messages.

Other commands for interactive rebase

During an interactive rebase in Git, several operations can be performed to modify the commit history. Here’s a short list of the key operations along with their syntax and explanations:

pick (or p):
- Syntax: pick <commit-hash> <commit-message>
- Explanation: Use the commit as-is. This is the default operation and is used to keep a commit unchanged.
reword (or r):
- Syntax: reword <commit-hash> <commit-message>
- Explanation: Use the commit, but modify the commit message.
edit (or e):
- Syntax: edit <commit-hash> <commit-message>
- Explanation: Pause the rebase to allow amendments to the commit. This can be used to change the content of the commit or the commit message.
squash (or s):
- Syntax: squash <commit-hash> <commit-message>
- Explanation: Combine the commit with the previous commit, merging their changes and allowing you to edit the commit message.
fixup (or f):
- Syntax: fixup <commit-hash> <commit-message>
- Explanation: Similar to squash, but discard the commit message of the commit being combined. The commit message of the previous commit is used.
exec (or x):
- Syntax: exec <command>
- Explanation: Execute a shell command.
drop (or d):
- Syntax: drop <commit-hash> <commit-message>
- Explanation: Remove the commit entirely. This can be used to delete unnecessary or undesired commits from the history.
break:
- Syntax: break
- Explanation: Pause the rebase at this point to allow inspection or further manual intervention. This is useful for debugging the state of the repository.

And others.

Usage example for some of the commands

Here's an example of what the rebase instructions file might look like when you initiate an interactive rebase:

pick a1b2c3d First commit message
reword b2c3d4e Second commit message
edit c3d4e5f Third commit message
squash d4e5f6g Fourth commit message
fixup e5f6g7h Fifth commit message
drop f6g7h8i Sixth commit message

Alternatively, use the first letters to for calling each of the commands:

p a1b2c3d First commit message
r b2c3d4e Second commit message
e c3d4e5f Third commit message
s d4e5f6g Fourth commit message
f e5f6g7h Fifth commit message
d f6g7h8i Sixth commit message

References

My experience with preparation and passing the AWS Cloud Practitioner exam

Lyumo — Sun, 26 May 2024 20:31:52 +0000

What is this certification about

AWS Cloud Practitioner Certificate is the entry-level certificate offered by Amazon for their services. While the official recommendation is to have about 6 months of experience with AWS services, many people without any experience and even outside of the technical field successfully passed this exam.

The focus of the exam is to test a participant on as broad a field as possible. I believe the test itself is not difficult from an understanding point of view but could be challenging if memorization is not your strongest trait.

My background

As a native mobile developer, I had zero experience with AWS in particular and the cloud in general.

Study plan and resources

I purchased the following:

[NEW] Ultimate AWS Certified Cloud Practitioner CLF-C02 is a full preparation course. It includes videos, slide set, practice videos, and short quizzes after each section.
Practice tests: 6 Practice Exams | AWS Certified Cloud Practitioner CLF-C02

The benefit of those is the explanation for the answers to each question. Reviewing and analyzing those was one of the most important steps of my preparations.

Those materials are frequently available on sale (as usual for Udemy) for around ~15 euro each.

Later, I learned about the free alternative by freeCodeCamp. Even though I haven't tried it, many people find this material very useful, so if for some reason Udemy doesn't work, it could have also been a good option.

There are plenty of exam materials and recommendations for this certification exam from AWS itself. I made the mistake of navigating through AWS's own free courses first, and they were not very useful for me.

Their official exam guide, while important, is also not particularly helpful, because it just lists pretty much every single service AWS provides.

Exam highlights

Preparation process:

As a person who used to dive deep into unknown topics, I had to change my approach to studies to focus more on breadth instead of depth for this exam.
Spreading the preparation throughout multiple days/weeks over shorter (under 1 hour) study sessions was more useful than trying to study long hours.
Going through test exam questions as early as possible to get used to the format and wording helped a lot.

Before the exam:

I was not ready for the multi-step exam sign-in process and all the hiccups. AWS portal provided a testing function, I made all necessary tests the day before the exam on a separate laptop and didn't touch it until the exam time, yet right before the exam there were still errors with the software. Luckily, everything was resolved.
Scheduling exams in the morning, not cramming the night before, going to sleep, and getting to the exam with a fresh head helped also.

During the exam:

Use the elimination principle. Scanning all answers and excluding those that don't fit was one of the most efficient tools.
If don't remember something, mark a question for review and come back to it later. This approach allowed me to save a lot of time.

Conclusion

As a result of my preparations, I passed from the first attempt.
Preparing for the exam and going through the exam itself has been a valuable experience for me. Now I feel confident working on more similar tests.

Resources

Multiple Node.js versions - setup memo

Lyumo — Sun, 19 May 2024 07:14:48 +0000

While a lot of times, installing the latest version of Node.js via preferred package manager is enough, in some cases more flexibility is needed.
For example, sometimes there are several projects to work on, each of which relies on a specific Node.js version.

This blog post presents an overview of Node.js setup to support the above scenario.

There are two commonly used tools for managing multiple Node.js versions - nvm and n.
In this post, we will use nvm.

Using nvm (Node Version Manager)

nvm, or Node Version Manager, is a solution provided by Node.js team themselves. It is an open source with straightforward installation and usage flow.

Install with the package manager of your choice. For macOS, I will use Homebrew:

brew install nvm

Next, let's check available Node.js versions:

nvm ls-remote

Let's install the first version:

nvm install <version>  # Replace <version> with the desired version, e.g., 18.16.0

Installed versions could be checked with:

nvm ls

To switch between versions:

nvm use <version> # Replace <version> with the desired version

With that, the setup of multiple Node.js versions has been completed.

It is also possible to set the version as default one with nvm alias default <version>.
See this answer for more details.
Finally, check the version with node --version command.

Resources

Tailwind Handbook - Part II

Lyumo — Sat, 27 Apr 2024 15:00:27 +0000

Review

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes. Instead of writing traditional CSS rules, developers assemble layouts and styles directly in HTML using these utility classes.

In this post, let's go through examples of basic components implemented with the support of Tailwind CSS.
For more of the basic details, check out part I.

Building common components

Web applications often feature repeating design patterns: navigation bars, hero sections, card layouts, form elements, and more. Instead of writing the same code repeatedly for each instance, it is a good practice to create reusable components. Using custom reusable components provides the following benefits:

Consistency: Components ensure a unified look and feel across your entire application, avoiding unintentional variations.
Efficiency: Building a component once saves a significant time and effort compared to styling individual elements each time they appear.
Maintainability: Changes to a component's style will make future updates easier and reduce the risk of breaking unrelated elements.

Basic structure

Before jumping into components' details, let's get familiar with the basic component structure.
Let's assume we want to have a HelloWorld component with only text in it. Here's the example implementation:

import React from 'react';

interface HelloWorldProps {
  className?: string; // Allows for optional additional styling
}

const HelloWorld: React.FC<HelloWorldProps> = ({ className }) => {
  return (
    <div className={`font-bold text-2xl text-center ${className}`}>
      Hello World!
    </div>
  );
};

export default HelloWorld;

TypeScript Interface: We define an optional className prop in case users want to apply additional Tailwind classes for customization.
Basic Styling: The component includes some basic inline styling for font size and centering.
JSX Structure: A simple <div> contains the "Hello World!" text. className dynamically combines default styles with any provided via the className prop.

Now, let's see how this component could be used (without and with some customization):

<HelloWorld />
<HelloWorld className="text-blue-500 underline" />

Foundation: While basic, this can be expanded with more elaborate styling, dynamic text content, or interactivity.
Customization: The optional className prop allows users to tailor the component's appearance when needed.

Now, let's explore how to build the most common components using Tailwind CSS.

Navigation bar

What?

A navigation bar is a core element of most websites. It provides users with a clear and structured way to explore different sections of the web page.
With Tailwind CSS, you'll build navbars using a combination of utility classes for layout, colors, spacing, typography, and potentially interactive behaviors.

When to Use?

Include a navigation bar in almost any website or web application to give users a primary means of orientation.
The exception might be extremely simple single-page designs (but they would still often have navigation bar, just with navigation to a particular sections on the page).

Short Implementation Example

Here's a basic navigation bar example using Tailwind CSS:

<nav className={`flex space-x-8 w-full justify-center`}>
  <a href="#home" className="hover:text-blue-500">
    Home
  </a>
  <a href="#about" className="hover:text-blue-500">
    About
  </a>
  <a href="#services" className="hover:text-blue-500">
    Services
  </a>
  <a href="#contact" className="hover:text-blue-500">
    Contact
  </a>
</nav>

Let's break it down:

nav element:
- flex: Turns the <nav> element into a flexbox container, allowing flexible arrangement of its children (the navigation links).
- space-x-8: Adds consistent horizontal spacing of 8 units (likely based on your tailwind.config.js spacing scale) between the navigation links.
- w-full: Forces the navigation bar to take up the full available width of its parent container.
- justify-center: Centers the navigation links horizontally within the navbar.
a elements (navigation links)
- hover:text-blue-500: Changes the text color of the links to blue (specific blue shade based on tailwind.config.js setup) when the user hovers over them.

Overall Functionality
This code creates a horizontal navigation bar with the following characteristics:

Full width: The navigation bar extends across the entire available width of its container.
Centered links: The navigation links are horizontally centered within the bar.
Spacing: Adequate spacing is provided between each navigation link.
Hover effect: The text color of the links changes on hover, providing visual feedback to the user.

Note 1: The specific spacing value (space-x-8) and the color (text-blue-500) can be customized in the tailwind.config.js file or by using different Tailwind utility classes.

Note 2: This is a very basic example. Real-world navigation bars often involve more complexity like dropdowns, responsive adjustments for different screen sizes, and more elaborate styling.

Hero section

What?

A hero section is a prominent banner-like area often placed at the top of a website. It's designed to grab attention and convey a key message about your product, service, or brand.
Hero sections typically feature a combination of headings, a call to action (CTA) button, and sometimes background images or videos.

When to Use?

Utilize hero sections on landing pages, homepages, or the top of key content sections to make a strong first impression.
They are perfect for highlighting your most important value propositions.

Short Implementation Example

Here's a simple hero section built with Tailwind CSS:

<section className="bg-gray-900 text-white py-20 text-center">
  <div className="container mx-auto">
    <h1 className="text-4xl font-bold mb-4">Your Product Headline</h1>
    <p className="text-lg mb-8">
      A short and description of the website.
    </p>
    <a
      href="#"
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded"
>
      Get Started Now
    </a>
  </div>
</section>

Let's break it down:

Layout: container and mx-auto center content horizontally. text-center aligns elements.
Colors: bg-gray-900 and text-white provide a contrasting theme.
Spacing: py-20 creates vertical padding, mb-4 and mb-8 add spacing to elements.
Typography: text-4xl, font-bold, and text-lg size and style text.
Button: bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-3, px-6, and rounded style the call-to-action button.

Important Note: Hero sections can become much more visually elaborate. You can improve it by adding background images, gradients, split layouts (text on one side, image on the other), and subtle animations with Tailwind's utility classes.

Card layouts

What?

Cards are versatile content containers used to present information in a visually organized and digestible way. They often feature an image, title, descriptive text, and sometimes call-to-action elements.
Tailwind makes it easy to create consistent and flexible card layouts.

When to Use?

Display collections of related content: product listings, blog teasers, team member profiles, testimonials... the possibilities are endless!
Create grid-like layouts to present information in a scannable format.

Short Implementation Example

Here's a basic card layout example using Tailwind CSS:

<div className="bg-white shadow-md rounded-lg p-6">
  <h2 className="text-xl font-bold mb-2">Card Title</h2>
  <p className="text-gray-700">
    Some descriptive text about this card&apos;s content.
  </p>
  <a
    href="#"
    className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"
>
    Learn More
  </a>
</div>

Let's break it down:

Card Styling: bg-white, shadow-md, rounded-lg, and p-6 give individual cards structure and visual definition.
Content: Images, headings (text-xl, font-bold), text (text-gray-700), and a button (bg-blue-500, etc.) comprise the card content.

Important Note: Cards can be customized extensively. Try background colors, different image aspect ratios, variations in content structure, and more to tailor them for specific use cases.

Usage Example:

<div className="container mx-auto grid grid-cols-3 gap-6">
  <CardLayout />
  <CardLayout />
  <CardLayout />
  <CardLayout />
</div>

Layout: container, mx-auto, grid, grid-cols-3, and gap-6 create a responsive three-column card grid. ### Forms

What?

Forms are essential for collecting user input, ranging from simple contact forms to complex registration or checkout processes.
Tailwind CSS provides the tools to style beautiful and functional forms while keeping your HTML markup clean.

When to Use?

Use forms whenever you need to gather information from users:

Contact forms
Login and registration forms
Survey forms
Search fields
Checkout forms
etc.

Short Implementation Example

Here's a simple contact form example built with Tailwind CSS:

<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  <div className="mb-6">
    <label
      htmlFor="name"
      className="flex text-gray-700 text-sm font-bold mb-2 justify-start"
>
      Game&apos;s name
    </label>
    <input
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500"
      type="text"
      id="name"
      name="name"
    />
  </div>

  <div className="mb-6">
    <label
      className="flex text-gray-700 text-sm font-bold mb-2 justify-start"
      htmlFor="description"
>
      Game&apos;s description
    </label>
    <textarea
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline focus:border-blue-500"
      id="description"
      name="description"
      rows={7}
></textarea>
  </div>

  <div className="flex items-center justify-center">
    <button
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="submit"
>
      Submit
    </button>
  </div>
</form>

Let's break it down

Overall Form Styling

bg-white: Sets a white background color for the form container.
shadow-md: Adds a subtle drop shadow to the form.
rounded: Applies a slight rounding to the corners of the form container.
px-8, pt-6, pb-8: Adds padding around the form content for visual spacing (horizontal: 8 units, top: 6 units, bottom: 8 units).
mb-4: Adds a bottom margin to the overall form to separate it from subsequent elements.

Input Fields (div containers)

mb-6: Adds a bottom margin to each input group (label, input/textarea) creating spacing between them.

Labels

flex: Makes the label element a flexbox container.
text-gray-700: Sets the label text color to a dark gray.
text-sm: Makes the label text smaller.
font-bold: Makes the label text bold.
mb-2: Adds a bottom margin to the label, creating space between the label and the input field.
justify-start: Ensures the label text is left-aligned within its flex container.

Input and Textarea

shadow: Adds a subtle shadow effect to the input fields.
appearance-none: Resets the default browser styling of form inputs.
border: Adds a border around the input fields.
rounded: Slightly rounds the corners of the input fields.
w-full: Forces the input fields to take up the full available width of their container.
py-2, px-3: Applies padding (vertical: 2 units, horizontal: 3 units) within the input fields.
text-gray-700: Sets the input text color to dark gray.
leading-tight: Reduces the line-height (spacing between lines) within the input fields.
focus:outline-none: Removes the default focus outline when the input fields are selected.
focus:shadow-outline: Adds a subtle shadow outline as a focus indicator when the input fields are selected.
focus:border-blue-500: Changes the border color to blue when the input fields are in focus.

Button

bg-blue-500: Sets the background color to blue.
hover:bg-blue-700: Changes the background color to a darker blue on hover.
text-white: Makes the button text white.
font-bold: Makes the button text bold.
py-2, px-4: Adds padding to the button (vertical: 2 units, horizontal: 4 units).
rounded: Rounds the corners of the button.
focus:outline-none: Removes the default focus outline.
focus:shadow-outline: Adds a shadow outline as a focus indicator.

Button Alignment

flex, items-center, justify-center: These classes on the button's container div center the button horizontally and vertically.

Important Note: This example focuses only on UI part of the implementation. Interactivity will be covered in the following part of the series.

Making your designs responsive

One of the core strengths of Tailwind CSS is the ease with which you can create responsive interfaces that adapt to different screen sizes.

Breakpoints system in action

Tailwind comes with a built-in set of breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px). These breakpoints mark the widths at which your design might need modifications for optimal display on various devices.
Prefixes like sm:, md:, lg: etc., are used before utility classes to apply styles only at or above the specified breakpoint.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"></div>

This creates a single-column layout on small screens, switching to two columns on medium screens and above, and three columns on large screens and above.

Conditional classes

Sometimes, just changing the layout at breakpoints isn't enough. You might need to show or hide elements based on screen size. Tailwind provides special responsive variants to add or remove classes based on breakpoints.

<button class="hidden sm:block">Visible on medium screens and above</button>

Tips for efficient workflow

Mobile-First Development: Start styling for smaller screens and utilize breakpoints to progressively add styles and complexity as the screen size increases. This often leads to leaner code.
Customizing Breakpoints: If needed, you can adjust the default breakpoints or add your own in the tailwind.config.js file.
Thinking in Components: When building reusable components, consider their responsiveness alongside their styling. ### Extensions and plugins

Tailwind's extensibility is powerful. Explore plugins like the aspect-ratio plugin to easily maintain proper image/video ratios across screen sizes.

Conclusion

Tailwind CSS offers a powerful and versatile approach to styling web projects.

In the next and last part of this series, we'll cover themes customization. Stay tuned!

Resources

Tailwind Handbook - Part I

Lyumo — Sat, 13 Apr 2024 07:15:32 +0000

What?

Tailwind CSS is a CSS framework.
It takes a utility-first approach to styling web pages and apps. The main difference from CSS frameworks such as Bootstrap is the absence of pre-styled components (buttons, navigation bars, etc.). Instead, Tailwind offers a collection of low-level utility classes, combination of which allows developers to apply styles directly in HTML.

Why?

Let's highlight some of the benefits of using Tailwind CSS.

Speed of development. Thanks to utility-first approach of Tailwind and its provided classes, the layouts could be prototyped and built quickly right in HTML file.
Reducing working with huge CSS files. No more huge stylesheets to deal with.
Customization. Configuration file provides full control over the framework to adjust it to a project's specific needs. ## Installation and Setup

Tailwind could be installed via npm and requires tailwind.config.js to be created.
The process is best described on Get started with Tailwind CSS page.

Core Concepts

There are two concepts to keep in mind while working with Tailwind:

Utility classes
Breakpoint prefixes

Let's check out each.

Utility classes

The main concept of Tailwind. Utility class is nothing more than a wrapper for some CSS class. In VSCode with IntelliSense plugin for Tailwind you can hover the mouse over the utility class to see the underlying CSS code.

Breakpoint prefixes

Tailwind makes building responsive interfaces using breakpoint prefixes:

sm: (640px and up)
md: (768px and up)
lg: (1024px and up)
xl: (1280px and up)
2xl: (1536px and up)

An example:

<div class="bg-gray-200 md:bg-blue-500 p-4"> 
</div>

Customization

Tailwind allows to customize UI themes and values, as well as creating new component classes and utilities, to step aside from already existing classes and fine-tune the UI when needed.

More details could be found on Adding Custom Styles page.

Wrapping up

That's it for the first part of the Tailwind handbook. By now, you should have a solid understanding of Tailwind CSS is and why it's become a popular choice for web styling:

Tailwind's Paradigm: We explored Tailwind's utility-first approach and how it differs from traditional CSS methodologies.
Tailwind's Building Blocks: You got introduced to the core of Tailwind—utility classes for spacing, colors, typography, responsive design, and more.

Already with this knowledge, you can start using Tailwind CSS. In the upcoming parts of the handbook, we'll dive deeper into practical examples, customization techniques, and how to build real-world components.

Pop_OS Japanese layout

Lyumo — Sat, 06 Apr 2024 02:55:17 +0000

A note about installation of Japanese layout on Pop_OS system.

Terminal:

sudo apt install ibus-mozc

Reboot (logging out then back in may be sufficient).
Settings>Region & Languages>Manage Installed Languages:
- Under Install/Remove Languages, make sure Japanese is installed.
- Make sure that "Keyboard input method system:" says "IBUS".
Settings>Keyboard:
- Add input sources (click on "+"). Under Japanese, you should be able to add "Japanese (Mozc).

Enjoy ⸜( ˊᵕˋ )⸝