DEV Community: jonosellier

You don't need... JavaScript to do tabs

jonosellier — Tue, 05 Apr 2022 20:47:28 +0000

Intro

The current development ecosystems we code in make it so easy to make a highly interactive experience with client-side code. Sometimes we reach for JavaScript (or worse yet, a whole framework) when we should hold off on that for as long as possible.

This is the first of (hopefully) many entries in a series I like to call You don't need...

What do we need for tab navigation?

To do tabs we need to do 2 things:

Track the current tab index
Show and hide tab content based on the index

And CSS can do both!

The principals

CSS has a class of selectors called a sibling selector (+ for immediately after and ~ for somewhere after) which will select a sibling element (one that is on the same "level" and shares their containing element).

CSS also has nth pseudo selectors, specifically the :nth-of-type(i) selector which will select the ith element of whatever selector you put before it.

The CSS principal you need to understand is the :checked pseudo selector which applies to input elements that have been checked (like a radio button or check box

Getting it done

Track the current tab index

In JavaScript we would update the tab index whenever we clicked on the tab. CSS has a way of tracking input element state with :checked as mentioned above so we can detect this in CSS with input.tab:checked:nth-of-type(i) where i is the index of the tab selected. We can make a new rule for every tab but it's kind of useless without some action based on the index

Show and hide tab content based on selected index

For starters, the default state of a tab is hidden so I think display: none on our tab content is obvious. And showing it is as simple as display: block. The trick is showing the ith content when the ith tab is selected. For that we use the ~ (general sibling) selector. As long as your tabs are of one type (probably a label element for each of your hidden input state-managing elements) and your content is another type (a div maybe?) then you can group them as different "types" and use a rule like input.tab:checked:nth-of-type(1)~div.tab-content:nth-of-type(1) to select the first tab content element whenever the first tab is selected

A working example

JSFiddle link

You can also change the input type to checkbox for toggles JSFiddle link

How long does it take for you to resort to JavaScript to perform interactivity on an otherwise static site?

I am curious what other people think of avoiding JavaScript. I personally prefer to avoid it if the site is going to be mostly static since it means all my noscript users still have a good experience. At the very least, I want them to be able to sucessfuly use the site in a limited form, even if the optional frills I throw in do not function

Things you might not know about Windows Terminal

jonosellier — Mon, 20 Dec 2021 13:08:06 +0000

With Microsoft announcing that Windows Terminal will be the new default terminal, I wanted to take the time to share some of the things you might not know about the new default.

Launch anything

You can configure Windows Terminal with various profiles that let you launch into any program you want.

Say you needed to remote into a machine super often. Setting up a profile with ssh user@hostname puts you right into that machine with a Ctrl + Shift + <number> keystroke. The same can be done for WSL containers or REPLs. I literally use my Node REPL profile daily for quickly transforming objects or making quick calculations.

Launch Anywhere

You can also set your starting directory so you can have shortcuts to open a new tab in any directory you choose. I use this to quickly get between my main projects.

Launch as anyone

This is more of a hacky workaround for the PowerShell "Run as different user" option but as long as you have an SSH server running you can SSH into your own system as another user. Simply run ssh [domain\]username@localhost and you're able to log in (as admin)! If you find yourself doing this often, put it in a profile since it's no different to any other SSH command.

The feature we are trying to emulate

Have a terminal that looks like it's been updated since the 90s

Windows Terminal supports ligatures and Nerd Fonts so installing one of those opens the door to alternative prompts like Oh My Posh that gives you inline Git info, privilege level and so on. I have mentioned this before and go into greater detail on another post but it's worth mentioning again because it's so good.

Bonus modernization features you should install anyways

Terminal Icons makes your ls a bit prettier and more useful.
Change Tab Completion so you can see all arguments and options available to you. You can also bind UpArrow and DownArrow to HistorySearchForward and HistorySearchBackward in the same way to cycle the history of commands starting with what you typed.

Easy Overlay Scrollbars with Reactive Design

jonosellier — Fri, 29 Oct 2021 23:51:51 +0000

As of Chromium 114 (June 2023) overlay scrollbar functionality has been removed and therefore this guide is no longer valid. While I understand wanting to conform to a standard, it is unfortunate that this functionality has been removed. Being unable to have a native scrollbar overlay content at the developer's discretion negatively affects the number of ways one can lay content out without UI items jumping around due to scrollbar space requirements changing.

Why even use overlay scrollbars?

Overlay scrollbars are great because they don't affect the width of the content as they appear and disappear. When I discovered this trick, I was specifically looking to solve the problem of content reflow as a page went from <100vh to >100vh. The other nice thing with overlay scrollbars is that they can more seamlessly get out of the way when you aren't using them.

Great, how do I do it?

With overflow: overlay. Seems too easy right? Well it's Chromium only (so Edge, Brave, Chrome) so it can't be your only overflow option. Ideally, you want to wrap it in @supports(overflow: overlay) with a fallback to auto or scroll. This is what it looks like on Windows without any further styling:

You'll notice that the scrollbars literally just go over the content. We'll need to make the scrollbars look a bit better:

Transparent background so we can see the content it overlays
Semitransparent scrollbar for the same reason
Small enough it doesn't get in the way
Big enough for a mouse to click and grab (because our grandfathers deserve to scroll how they're used to)

So all we have to do is use some scrollbar CSS (which is supported on Chromium too) to make it look a bit better...

Apply the following CSS...



body {
  overflow: overlay;
}

*::-webkit-scrollbar {
  display: block;
  width: 16px;
}

*::-webkit-scrollbar-button {
  display: none;
}

*::-webkit-scrollbar-track {
  background-color: #00000000;
}

*::-webkit-scrollbar-track-piece {
  background-color: #00000000;
}

*::-webkit-scrollbar-thumb {
  background-color: #00000040;
  border: 1px solid #ffffff40;
  border-radius: 24px;
}

...and we get this:

You'll see that the scrollbar is wide enough to grab with a mouse (it's as wide as it is on Windows, 16px) but a bit too wide as a pure indicator. Those last 2 points are important but seem to be a bit contradictory. We could make the scrollbar get bigger on hover but you need to hit that small target before it gets bigger so you might as well keep it small. Unless we...

(Ab)use shadows to make things more usable

If we set the shadow behind the scrollbar to be some solid inset shadow and a large, transparent border, then we can make the bar itself transparent, so the only thing we see is the inset shadow, that is smaller than the bar itself due to the border.



*::-webkit-scrollbar-thumb {
  background-color: #00000000;
  border: 5px solid transparent;
  border-radius: 24px;
  box-shadow: 4px 0px 0px 4px #00000040 inset;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #00000040;
  border: 0px solid transparent;
  box-shadow: none;
}

The result we get is a bar that looks 6px wide but is really 16px:

And when we hover near the "smaller bar" (within 5px), it looks just the same as before with the same pointer target size since the element itself is not any smaller.

Now if we extract that color to a CSS variable we can go further!

Going even further

We gotta extract that scrollbar color to a variable, let's call it --scrollbar-color.

Then let's add a few more CSS rules to change this scrollbar color based on whether or not the page/element is focused. This is the new CSS that uses variables and :hover, etc. selectors:



* {
  --scrollbar-color: #00000000;
}

*:hover, *:focus, *:focus-within {
  --scrollbar-color: #00000040 !important;
}

*::-webkit-scrollbar-thumb {
  background-color: #00000000;
  border: 5px solid transparent;
  border-radius: 24px;
  box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color);
  border: 0px solid transparent;
  box-shadow: none;
}

This will make your scrollbar invisible unless you hover over the element (or page).

But what if we want it to look like a mobile phone's indicator that disappears unless we are currently scrolling? Well for that we finally need JavaScript

Finally needing JavaScript

We got pretty far with CSS but it's time to listen for events, scroll events. Below we add a class to body whenever we are currently scrolling.



var barTimeout;

document.body.onscroll = () => {
  if(barTimeout){
    clearTimeout(barTimeout); //clear to reset
  }
  barTimeout = setTimeout(() => {
    document.body.classList.remove('scrolling');
  }, 500); //0.5s delay
  document.body.classList.add('scrolling');
};

Then we adjust our CSS a little to instead change the --scrollbar-color on body.scrolling:



body {

  --scrollbar-color: #00000000;

}

body.scrolling {

  --scrollbar-color: #00000040 !important;

}

Final touches for production

Just make sure to wrap all this CSS in @supports(overflow: overlay) and so on! It will work in this current state on 79% of browsers we want to target* but we need to support Safari and Firefox still!

* Since we are emulating mobile device scrollbars, we can only look at desktop browsers

The final product

Available on JSFiddle with hover effect here and scroll effect here

Let me know if this helps you out in any way! 🚀

4 Must-Have Tools for Developing on Windows

jonosellier — Wed, 23 Sep 2020 00:45:37 +0000

No I am not talking about those apps, the ones everyone probably already has installed. The VSCodes, the VIMs, the Postmans. Nor am I talking about any of those environments that you only use because that's what you are developing for, no Node or Deno here, not even Docker. But you should totally try them all out if you haven't.

Notepads

Notepads is a Windows App developed by a Microsoft Employee. That being said, it is not endorsed by Microsoft. It is simply a more refined version of Notepad. It has tabs, it renders markdown, it has a dark mode and ligature support. It can't open files greater than 1MB but the point of this is to open smaller files for quick editing, anything larger than 100 lines and I'd want a more full-fledged editor with highlighting and so on. It can also be launched from the terminal, just like Notepad. I use this for when the .25s VSCode takes to launch is too long or as a persistent clipboard or as an alternative to Sticky Notes.

Image from the Notepads website

A good monospace font

I am going to come out and say that Fira Code is the move here because it has excellent ligature support, making multi-characater operators feel like the single operator they are. I know other fonts have ligature support too but Fira's just seems to be the most natural to me. It also has excellent support for differentiation between Il1|and oO0 which is an objective plus to the language. The font height is also good for readability at various sizes.

Note that you can use any of the points I made about Fira Code and apply it to any monospace font to find the right one for you.

Matej Latin has an excellent article on what makes a good font for coding. He also includes diagrams with his work that illustrate what I said about character differentiation.

Windows Terminal

I don't care if you have a terminal. Ditch it. Windows Terminal is very likely the future of the Windows built in terminal and it is frankly excellent. I use my terminal all day at work and I have only wanted exactly 2 features from it:

Clickable link support
Quake-style hide and show

I am well aware there are terminals that can do both of these things (like the terminal in VSCode, cough cough Microsoft 😐) but those are minor. I like that you can set up many different shells, including WSL, Powershell, and even CMD (but why would you use CMD?). Add in launch arguments as one of the items and you could set up automatic SSHing to some other machine as a keyboard shortcut or new tab item.

Speaking of shortcuts, you can customize them in any way you see fit too. I have some set up to change tabs based on keystrokes I have hooked up to three finger swipes on my track pad to change tabs in full screen mode.

Powerline

Now that you have an awesome terminal and an awesome font, you can install the single greatest tool here: Powerline. Powerline takes your Powershell prompt and brings it to the 21st century.

Image from Scott Hanselman

Integrated git info, last command exit code indication, shortening directories to have Unix-style ~ for Home, all makes it an objective improvement to stock Powershell. This tool is so good, Microsoft put up a guide to install it.

Conclusion

Developing on Windows can be so much better if you give your setup some love. It might not be as powerful as Linux (although WSL kind-of means it is but that's another story). The point is, it sure is catching up and I am glad Microsoft has embraced their platform for developers.