DEV Community: mingeee

Keyboard shortcuts that will change your life as a developer

mingeee — Mon, 08 May 2023 09:47:42 +0000

As a developer, maximizing productivity is crucial for meeting deadlines and delivering high-quality code. One effective way to enhance your workflow is by leveraging keyboard shortcuts. In this blog post, we will explore a collection of essential keyboard shortcuts that can change your life as a developer. From quick cursor movements to instant word changes and powerful search capabilities, these shortcuts will definitely save you some time.

Level 1 - Cursor Movements
Option + Left or Right Arrow - Word Navigation
This combination allows you to swiftly move your cursor to the start or end of a word, enabling precise editing or navigation within lines of code.

Command + Left or Right Arrow - Line Navigation
To quickly jump to the beginning or end of a line, use the Command key with the left or right arrow keys. This shortcut proves invaluable when you need to navigate through lengthy lines or edit specific line of code.

Command + Up or Down Arrow - Document Navigation
When working on extensive codebases or documents, quickly moving to the start or end of the document can be a time-saver. By pressing Command and the up or down arrow keys simultaneously, you can effortlessly navigate to the top or bottom of the document, avoiding the need for tedious scrolling.

Level 2 - Highlight Words
Option + Shift + Left or Right Arrow - Highlighting Words
This combination allows you to rapidly highlight text within your code, making it easy to perform bulk modifications or apply formatting changes.

Command + Shift + Left or Right Arrow - Highlighting Lines
Similar to highlighting words, you can highlight entire lines of code. This shortcut proves beneficial when you need to copy, cut, or modify multiple lines simultaneously.

Command + Shift + Up or Down Arrow - Selecting Documents
In scenarios where you need to select an entire document or a large portion of it, Command + Shift + Up or Down Arrow comes to the rescue. You can quickly highlight all the content from the current cursor position to the top or bottom of the document, making it convenient for performing bulk operations.

Level 3 - Words Replacement
Command + Shift + L - Instant Word Change
When you want to change all occurrences of a particular word in your document, the Command + Shift + L shortcut is a game-changer. It instantly selects all instances of the word, enabling you to modify them simultaneously, saving you from tedious finding and replacing each occurrence manually.

F2 - Instant Variable Change
For developers working with code editors or integrated development environments (IDEs) that support it, pressing F2 over a variable name allows instant changes throughout the codebase. This efficient shortcut eliminates the need to manually search and replace variables, resulting in faster and more accurate modifications.

Command + Shift + H - Powerful Word Search
When searching for specific words or phrases across an entire project, the Command + Shift + H shortcut can save you significant time and effort. It opens a powerful search tool that instantly finds all occurrences of the desired word or phrase, allowing you to navigate through the results and replace it effortlessly.

Mastering these shortcuts will 100% change your life as a developer. You should definitely try it out and practice it.

Focus Timer app with NextJs / React

mingeee — Thu, 27 Apr 2023 09:43:35 +0000

The Focus Timer is a clock ticking app that includes additional features such as pause, decrement or increment mode selection, and session rating upon completion. This project can be developed within a few hours, leveraging NextJs/ReactJs (Typescript) as the foundational structure, TailWindCSS for styling, and Jotai for global state management.

The app consists of two primary components - Timer and Setting. The Timer component manages the ticking time and enables users to rate their focus session upon completion, while the Setting component allows users to specify their preferred timer and mode.

If you are interested in learning about the app's creation, you can watch the video recording provided below.

On a separate note, if you are starting to learn React, I highly recommend exploring NextJs and deploying your app to Vercel.

How to make a Travel Roulette App named "Where"?

mingeee — Sat, 15 Apr 2023 02:43:49 +0000

What is “Where?”

Where? is a travel roulette app that randomly selects a destination for the user. The app will suggests a few activities to do in that location. Once the origin airport is provided, flight information will be provided.

What are the ingredients?

NextJs | Typescript - React Framework
Framer Motion - Animation
Jotai - Global state management
OpenAi - Activities suggestion

The making of “Where?”

You can watch part of the making of this app.

What else can we add to this app?

To further improve the app, several features could be added.
Below are some example:

Add try and catch when fetching from OpenAI. If there are any errors, display it to the user. For instance, if your api token expired or OpenAI didn’t send back the data in the right format, it should ask the user to try again.
Add automatic retry. If the internet connection goes down in between requests. The app will retry the requests.
Provide interfaces for the user to select their own travel dates and actually pay for the flight with the duffel api.

Source code: https://github.com/Mingeee/travel-roulette