DEV Community: Eva - includeJS.dev 🎈

VSCode Keyboard Shorcuts & Achieving Editor Fluency ⌨️

Eva - includeJS.dev 🎈 — Sun, 14 Jun 2020 00:00:00 +0000

Mastering your text editor is crucial for increasing your productivity - and general bada$$ness. So says me, so says The Book (Pragmatic Programmer).

Emoji legend

✅ already mastered
🥊 needs more practice
📕 need to be learned
🤷‍♀️ not sure if useful

1. When editing text, move and make selection by:

Character

🥊 shift + (left/right) arrow

Select character by character.

Word

✅ alt + (left/right) arrow

Navigate word by word.

🥊 alt + shift + (left/right) arrow

Select word by word.

📕 option + delete

Remove word by word.

Line

✅ cmd + (left/right) arrow

Move to the beginning/end of the line.

🥊 cmd + shift + (left/right) arrow key

Select/unselect line.

✅ shift (up/down) arrow

Select line by line.

🥊 cmd + shift + k

Delete the current line.

✅ cmd + x

Cut a line.

📕 cmd + shift + enter

Insert a line above.

📕 cmd + backspace

Delete a line.

✅ option + (up/down) arrow

Move a line up or down.

✅ option + shift + (up/down) arrow

Copy line up or down.

Paragraph

📕 cmd + l

Select the current line; keep pressing -l to expand selection downward.

📕 option + shift + (left/right) arrow

Expand or shrink selection.

File

✅ cmd + (up/down) arrow

Go to the top/bottom of a file.

✅ cmd + shift + (up/down) arrow key

Select/unselect entire file.

🥊 ctrl + tab

Go to the next opened tab.

🥊 shift cmd + t

Open a previously closed file.

2. When editing code, move by various syntactic units (matching delimiters, functions, modules...)

✅ cmd + shift + \

Go to the matching opening/closing bracket.

📕 cmd + shift + o

Navigate by symbols.

3. Reindent code following changes

✅ cmd + [ or cd +]

4. Comment and uncomment blocks of code with a single command.

✅ cmd + /

5. Undo and redo changes.

✅ cmd + z and cmd + shift + z

6. Split the editor window into multiple panels, and navigate between them.

🥊 cmd + \

Split editor.

📕 cmd + num

Focus a specific editor window.

7. Navigate to a particular line number.

📕 ctrl + g

8. Sort selected lines.

🤷‍♀️ cmd + shift + p

(or F1) to access the command palette, then run sort lines.

9. Search for both strings and regular expressions, and repeat previous searches.

✅ cmd +f

Search in the current document.

✅ cmd + shift + f

Search in the current workspace.

📕 cmd + shift + h

Toggle replace mode.

10. Temporarily create multiple cursors based on a selection or on a pattern match, and edit the text at each in parallel.

✅ cmd + click

Insert cursor (press Escape to remove the temporary cursors).

✅ cmd + d

Select the next match.

📕 cmd + u

De-select previous match.

11. Display compilation errors in the current project.

✅ cmd + .

To open the quick-fix context menu.

📕 F8

Go to the next error warning.

12. Run the current project's test.

🤷‍♀️ cmd + shift + p

Open the command palette, then run all tests?

Bonus (added by me):

📕 cmd + k + z

Enter the zen mode.

📕 cmd +

Toggle between different VScode workspaces.

📕 cmd + option + s

Save all tabs.

I wrote about VScode Keyboard Shortcuts previously.

Chrome/Firefox Keyboard Shortcuts (for developers) ⌨️

Eva - includeJS.dev 🎈 — Tue, 19 May 2020 00:00:00 +0000

Navigation

ctrl a and ctrl e

For moving to the beginning/end of the line (just like in your terminal/command line!)

cmd + l

Bring the URL bar into focus.

cmd + enter

Duplicate the current tab (while in URL focus).

cmd + shift + t

Open a tab you just closed (a lifesaver for my trigger-happy fingers).

cmd + d

Add a bookmark (extra tip: when saving bookmarks to the bookmarks bar, delete all the text meaning only an icon will get displayed => you can cram many more bookmarks into your bookmarks bar 💪).

Dev tools

cmd + shift + c

Toggles the inspect element mode (and makes for faster DOM inspection).

Toggle the console from dev tools by pressing esc key.
cmd+ option + i

To open the dev tools (in the last panel you used).

shift + enter

For a multi-line entry (in the Console)

cmd + [ and cmd +]

To focus next/previous panel in the dev tools.

Have you ever wondered how to access `console.log` values? Wonder no more!

Go to the console, right-click on the logged value and click Store as Global Variable.

Now, this value will be stored in a variable temp1 (temp0 in Firefox). Nuts!

The subsequent values (in the same session) will be stored astemp2, temp3...

To get that data onto your clipboard type: copy(temp1) 🤯

Firefox extras

cmd + shift + p

To start private browsing.

cmd + k

Move focus to the Search bar.

CSS and Spacing 📏

Eva - includeJS.dev 🎈 — Mon, 27 Apr 2020 00:00:00 +0000

My notes from the excellent article on Spacing in CSS by @shadeed9 💪.

Spacing can be divided into two groups:

inner spacing (padding)
outer spacing (margin)

What's a margin collapse?

Margin collapse happens when two vertical elements have a margin, and one of them has a greater margin than the other. In that case, the greater margin will be used, and the other will be ignored.

🔨 To fix: Use a single direction margin, e.g.:

.element:not(:last-child) {
    margin-bottom: 1rem;
}

🤔 If both the parent and the child have a margin, the child's margin will be collapsed.

🔨To fix:

Add a border to the parent element OR
Change the child element display to inline-block OR
Add padding-top to the parent element.

Padding is not working

Vertical padding doesn’t work with elements that have display: inline, like <span> or <a>.

🔨 To fix: need to do display: inline-block;

RTL Styling

Learn about Right to Left styling.

Gaps in Flexbox layout

Flexbox doesn't have a gap property, like grid-gap.

🔨 to fix:

Add padding-left to the grid item AND
Add a negative margin-left with the same padding-left value to the grid parent.

The reason: because the first card has padding-left while in reality it’s not needed. So it will push the wrapper to the left and cancel that unneeded space (Demo).

Margin bottom

The last element should not have a bottom margin, as margin should only be between elements.

🔨 To fix: cancel the unneeded spacing by adding a negative margin to the parent element.

`vmin`

Viewport Minimum (vmin) – A percentage of the viewport width or height, whichever is smaller. 10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations.

`vmax`

Viewport Maximum (vmax) – A percentage of the viewport width or height, whichever is larger. 10vmax will resolve to 10% of the current viewport height in portrait orientations, and 10% of the viewport width on landscape orientations

grid-gap: min(2vmax, 32px);

Use a gap equal to 2vmax, but it shouldn’t go above 32px.

My Development Setup (Inspired by uses.tech)

Eva - includeJS.dev 🎈 — Tue, 21 Apr 2020 00:00:00 +0000

dotfiles 😎

vscode settings (links to a gist)
zsh alias (links to a gist)

favorite homebrews (the less obvious-ones) 🍺

autojumop (for quick navigation)
bat (cat with syntax highlighting)
htop (for process management)
gist (for making gists!)
youtube-dl (for downloading youtube videos)

zsh 💃

Powerlevel9k (my zsh theme)
zsh-syntax-highlighting (does what it does)
zsh-autosuggestions (also)

favorite globally installed npm packages 🌐

http-server (for spinning up a simple server from the command line)
nodemon (automatically restarts a node application on change)
tldr (for simpler man pages)

misc 💻

Alfred (mostly for opening applications (no fancy workflows))
Flux (to prevent my eyes from dying)
Karabiner-Elements (for keyboard remapping)
Rocket emoji (for writing emojis really quickly)
Spectacle (for resizing windows)
Vanilla (for cleaning up the menu bar)

Refactoring UI - My Notes on Typography

Eva - includeJS.dev 🎈 — Thu, 16 Apr 2020 00:00:00 +0000

If you are a developer first and a designer later, you'll love the Refactoring UI course.

In this post, I wrote down some notes on web design best practices, especially concerning typography and layout.I'll write a separate post on colors 👍.

Define your design choices in advance. Stick to them. Write them down. Use CSS variables.This goes for:

font-size (use rem)
font-weight (avoid going under 400)
line-height (and letter spacing)
color (grays, grays, grays)
margin (spaaaaaaace)
padding (moar spaaaaaaace)
width (lots of skinny pages these days)
height
box-shadow (shadows... 😅)
border-radius
border-width
opacity

`font-family`

Don't reinvent the wheel - stick to popular fonts (especially if you're still training your design eye).
Borrow from others.
Often time you'll pair a sans-serif header typeface with a serif body typeface.
👍 Pro-tip: Ignore typefaces with less than five weights.
2,3 fonts max!

Typeface VS font?

A typeface is a design created by a typographer or type designer.
A font is the digital representation of a typeface.
Type family is the complete assembly of all sizes and styles of one typeface.

Fonts and font pairing resources:

You can do so much with fonts these days (in a modern browser): Font variable experiments

`font-weight`

The weight has to do with the thickness of the font, the style (italic, oblique) normally has to do with the angle.
A normal font-weight of 400 or 500 (depending on the font) shoudl be used for most text.
A heavier font-weight of 600 or 700 for the text you want to emphasize.

Values range from 100 to 900:

100 = thin
200 = extra-light
300 = light
400 = normal, book
500 = medium
600 = demi-bold
700 = bold
800 = heavy
900 = black

`line-height`

line-height should be about 1.5x for body font (meaning you multiply font-size by 1.5).
Increase it for wider content (especially when lots of text is involved).
Line spacing spacing of 130%-150% is ideal for readability.
The ascenders and descenders of the lines of text should never touch!

`letter-spacing`

letter-spacing is the amount of space between a group of letters (there's also word-spacing 💡).
Some fonts (typically heading fonts) have smaller letter spacings. For smaller fonts, you'll want more letter spacing.

`margin` and `padding`

Make sure to establish a system (see above).
Paddings and margins are not proportional to the font-size.
🤯 White space should be removed, not added - start with too much space!

`width`

For the best reading experience, make your paragraphs wide enough to fit between 45 and 75 characters per line or width of 20-35em.

My zsh ❤️ Aliases

Eva - includeJS.dev 🎈 — Thu, 09 Apr 2020 00:00:00 +0000

This post features my ever-growing list of alias-es. I will write about my oh-my-zsh theme settings and plugins in another post 👍.

My zsh aliases are written in a separate file and loaded in my .zshrc file like so:

source $HOME/dotfiles/zsh/aliases.zsh

I'm using homebrew as my package manager.

Miscellaneous aliases

alias help="tldr"

Because those man pages can be quite intimidating, I prefer to use tldr for the first, quick glance.

alias top="sudo htop"

Interactive process viewer - to see what's hogging your memory. Good for killing processes fast!

alias yt="youtube-dl"

For quickly downloading youtube content. More about youtube-dl here.

alias reload="source ~/.zshrc"

For quickly reloading your zshrc config.

alias finder="open -a Finder ./"

Open your current directory in Finder (I'm not super good with copying and moving stuff around in terminal yet).

alias weather="curl -4 https://wttr.in/Brussels"

Check out the weather in your city.

alias cat='bat'

cat with syntax highlighting and other stuff. More about bat here.

alias md='mkdir -p'

Make a new directory only if one (with the same name) doesn't exist yet.

alias please=sudo

Because being polite is cool.

alias d='dirs -v | head -10'

Display the last ten directories.

My Favorite Slack Shortcuts

Eva - includeJS.dev 🎈 — Tue, 07 Apr 2020 00:00:00 +0000

I work remotely, and most of our communication happens on Slack. Besides that we use Google Hangouts and Whereby for video communication and Notion for documentation and issue tracking.

Favorite Slack Shortcuts (so far)

shift + enter

Create a new line in your message ('Enter' is for sending).

up arrow

Edit your last message.

cmd + u

To upload files (I use this one all the time for sharing screenshots of my work in progress).

cmd + shift + enter

Create a new code snippet. 💡Use single backticks for inline code and tripple backticks for a short code snippet.

/away

To toggle away status (useful for when you want to take a peek at your Slack group, but not be seen as online).

cmd + shift + y

Edit your status - to quickly tell your team that you are unavailable.

cmd + shift + a

Open all unreads. (Meh, not sure yet whether this one is useful for me).

alt + up arrow/down arrow

Navigate up and down channels or DMs 💪.

cmd + number

To switch between different slack groups 💪.

cmd + k

Quick switcher (sort of like command palette in VSCode).

cmd + /

Toggle the keyboard shortcuts panel.

/remind [who] [what] [when]

To set reminders in Slack.

Pro tips:

I use Rocket emoji for all my emoji dispensing.
Add Giphy for Slack for GIF posting via /giphy command.