Windows apps that massively improve your comfort and your productivity

David Pollet — Fri, 01 Jul 2022 07:21:04 +0000

Whether you are dev or not, these apps are pure gold if you're looking to improve your productivity and your comfort at work.😁
I spent a lot of times to find a solution that fix windows UX issues and improve my work comfort. Most of the apps are free, some will cost you a few dollars for a lifetime license. For me, it worth it.

TLDR / The tools featured in this article

Groupy → less than $10 → Tabs in Windows Explorer (you can group any app window too).
Monitorian → Free / Open Source → Set and sync the lightness of yours additional screens
Tray Status → Freemium → show status of cap lock / Verr num.
File converter → Free / Open Source → convert any media file with 2 clicks. ❗ Be careful, for images, the default settings are a bit aggressive.
Microsoft PowerToys → Free / Open Source → 12 features including App launcher, color picker, custom placement zone, explorer enhancements, images resizer
Animotica screen recorder → $10 (with 7 days trial) → very user-friendly screen recorder.
Animotica video editor → Freemium / $16 → Edit and create professionals looking videos in no time. I really like their products. Efficient and cheap.
QuickLook → Free → Open quickly a file by pressing "space bar".
And "just" a shortcut to get an emoji or special character : "Windows" + ";"

How to have tabs on Windows Explorer

It's 2022, the first UI Tab was released in 1998 and my native Files Explorer still not has f*cking tab ! Luckily, I found a smart solution with Groupy. Rather than have an alternative file explorer, I keep the native one and Groupy can group any windows in tabs for me.

I find this approach very smart. Stardock focus and solves one specific problem and let you use the app of your choice. I remember that I had to change some settings for having a "native like" experience. Here are the settings : (in French, but the UI remains the same)

Set and sync the lightness of yours additional screens

It seems weird for me that I have to solve this problem by installing an app. It should be a native option. Anyway, Monitorian is free and well integrated.

David Pollet

@davidpollet_

Comment ajuster et synchroniser la luminosité de plusieurs écrans sur Windows ?
github.com/emoacht/Monito…

08:55 AM - 27 Jun 2022

Get the status of cap lock / Verr num right in your taskbar

Again, this should be a native option. 😤

Tray Status

Convert any media in two clicks

File converter

PowerToys : Microsoft, I forgive you 💗

Microsoft isn't kidding you with powertoys. 😄 It shipped an app with twelve tools ! My most liked :

App launcher with some useful add-ons (calc, launch VS Code project, unit converter)
Color picker accessible by keyboard shortcut
Image resizer in the contextual menu
FancyZone for having custom screen distribution
SVG overview in explorer And for the rest, visit Microsoft PowerToys website

Screen recorder user-friendly

Animotica screen recorder

Edit and create professionals looking videos in no time

Animotica video editor

Open quickly any file by pressing space bar

QuickLook

Get an emoji or special character

David Pollet

@davidpollet_

Insérer des émojis ou des caractères spéciaux genre "œ", c'est fastidieux. Enfin c'était.

➡ touche Windows + ";"

Maintenant, vous pourrez dire « IL S'EST TUE ! 😮 » ou « IL S'EST TUÉ 😮 » sans risque de confusion 👀

#windows #tips

08:02 AM - 22 Jun 2022

Have you some useful tools to share ? 🙂

Credit for the cover : jcomp - freepik.com

How to animate an element in display none in two steps

David Pollet — Wed, 29 Jun 2022 14:53:18 +0000

Animate a hidden element is very simple now. We just need 2 CSS declaration and a bit of JavaScript to toggle the state open / close.

The solution

Problem we try to solve

You have a hidden element with a hiddenattribute. To provide a better UX, you want to animate this opening and closing state. But in CSS, display:none is like an interrupter; it can be "on" or "off" but animate between both state with a CSS transition is impossible.

Step 1: animate during opening

The HTML

<a href="#modal" class="modal-button">Open Modal</a>
<div class="modal" id="modal" hidden>Modal content</div>

As you notice, I'm opting for a link instead of a button. Why ? Because my modal will still be accessible without JavaScript, thanks to the target CSS pseudo-class. I will focus on this point after.

JS to show the modal

modalButton.addEventListener("click", function (e) {
  e.preventDefault();
  modal.hidden = false;
});

CSS

.modal:not([hidden]) {
  animation-name: popIn;
}

That's it. ¯_(ツ)_/¯.
If you prefer relying on .hidden class (like in Tailwind), you can switch :not([hidden]) with :not(.hidden). If you want both, the not pseudo-class accept multiple arguments separated by a comma : not([hidden], .hidden). Anyway, our Modal appears with a shiny animation now :

Step 2 : animate during closing

The closing state is a little more tricky. If you set the hidden attribute to "true", you won't be able to hide it smoothly. You need to add a temporary class like is-closing to play the closing animation and then, hide the element.

JS

modal.addEventListener("click", function (e) {
  // Omitted…
  if (hasClickedOutside || hasClickedCloseButton) {
    modal.classList.add("is-closing");
    // Omitted…

CSS

.modal.is-closing {
  animation-name: popOut;
}

Now our modal is closing smoothly, but it is not back to hidden state. You have to wait to the end of the animation to remove the .is-closing class and back to hidden="true". With setTimeout ? You could, but you have a better option.

Animationend event

With a timeout, we have to declare a value at least equal to the animation duration, which can change.
If you can, you have to have a single source of truth : here, the animation duration declared in the CSS.
The animationend will wait to the end of the animation, then execute the function inside the listener.

modal.addEventListener("click", function (e) {
  const hasClickedOutside = !e.target.closest(".modal-main");
  const hasClickedCloseButton = e.target.closest(".modal-close");

  if (hasClickedOutside || hasClickedCloseButton) {
    modal.classList.add("is-closing");

    modal.addEventListener(
      "animationend",
      function () {
        modal.hidden = true;
        modal.classList.remove("is-closing");
      },
      { once: true }
    );
  }
});

Once the event is completely done, you have to destroy it with the once: true option, as you don't need it anymore.
And voilà, you have the knowledge to animate any element hidden in the DOM.

Bonus : A little accessibility enhancement

Button vs Link

As I said above, I choose a <a> instead of a <button> because of that :

.modal:target {
  display: grid !important;
  animation-name: popIn;
  .modal-close {
    display: none;
  }
}

Without JS, the modal can still be open via its hash, and you can style the opened state with the :target pseudo class.
To close it, the user needs to back in your history. This is why I hide the .modal-close. It's not pertinent to show it if it can't do anything.

Don't play animation if user don't want animation.

For personal taste, medical reason or to solve a performance issue on their device, your users may not want any animation, and you have to respect their preferences. It would be a good idea to embed the following the rule as part of your CSS reset, if it's not already done.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Thanks for reading. 👋

DEV Community: David Pollet