DEV Community: John Cheng

Animate cards with zoom-in effect on picture

John Cheng — Wed, 09 Nov 2022 04:02:32 +0000

tldr; Had fun adding a zoom-in effect on card on hover

Tailwind playground: https://play.tailwindcss.com/CtxpncROJ9

Challenge

Have the image "zoom-in" on hover
Have the wrapper scale down on hover to intensify the zooming in effect
(when adding text) Keep the text position in card to avoid too much movement

How I did it

It really all comes down to those classes: duration-300 ease-linear hover:scale-[98%] hover:[&>img]:scale-110

Here, we set:

transition duration with duration-300,
the transition timing function with ease-linear and,
the hover behavior with hover:scale-[98%] hover:[&>img]:scale-110

Note: [&>img] is an arbitrary value. It allowed me to target the child img from the container and apply the scaling up for the zoom effect.

Adding text to the card

One restriction here is, I didn't want to text to scale down with the whole card because too many things would be moving.

To tackle that:

I added a wrapper around img that would scale down when the card (main container) is hovered with the mouse,
the title is absolutely positioned relatively to the main container,
the arbitrary values slightly change as now, we introduced an extra layer: hover:[&>div]:scale-[98%] hover:[&>div>img]:scale-110

Without text, we could target img directly but now, we want the scale down to be applied on the image wrapper, thus [&>div], and the scale up on the image inside which results in [&>div>img]

That's it! Thank you for reading and let me know in comments if it could be improved 👋

Using overflow:scroll and flexbox to render a vertical list that takes all the available height based on a sibling element

John Cheng — Fri, 28 Oct 2022 03:29:54 +0000

tldr; Here is an implementation of a vertical scrollable list using flexbox that takes the available space set by a sibling element. Vanilla CSS and Tailwind versions.

Code in Sandbox (Contains Vanilla CSS version and Tailwind version)

Use case

We wanted to have a container with 2 columns where:

the left-hand side had a growable textarea and,
the right-hand side had a scrollable list on the y-axis that takes the full height

Requirements

The textarea can contain as much text as it wants
The scrollable list should use the available height based on textarea and display as many items as possible or overflow:scroll

Challenges

When using flexbox with overflow:scroll and rendered the list of items directly, it would increase the height instead of displaying as many as possible given the height from the left-hand side.

Our solution for the scrollable list

We have a flex wrapper that has the overflow: scroll; property, let's call it container
We added an additional wrapper container around the overflowing list of items with a max-height: 0;, let's call it list-container
We rendered the list of items

Note: If we had rendered the items in container directly, they would have increased its height and not respect the height provided by textarea on the left-hand side.

list-container do not increase the height of container thanks to max-height:0; and as we do not define the overflow behaviour, it defaults to visible. However, as we set overflow:scroll at the container level, we still benefit from the scrolling we wanted.

Final note

I hope you found the post interesting. If you have implemented a similar solution in a more elegant way, please let me know in comments 🙌 This is what we came up with and it's probably not perfect!

Take care everyone 👋

How I handle my notes with symbolic links

John Cheng — Sun, 21 Feb 2021 17:37:14 +0000

Background

Handling notes has always been tricky for me. Should I use an app or have markdowns in a folder?

Lately, I decided to only use markdowns and have them centralised in a folder called notes while making them accessible in the relevant projects via symbolic links.

Objectives:

Access only project specific notes in VSCode (or any IDE)
Keep a folder containing all of my notes

How-To

Architecture

~
|-- .gitignore_global
|-- Documents/
    |-- notes/
        |-- project_foo/
    |-- project_foo/
        |-- .notes/ (ignore from version control)

Instructions

The first step is to have the version control ignore the notes in each projects. For example, I decided to have my notes in a .notes folder under each project.

# Create a global gitignore
touch ~/.gitignore_global

# Add the folder that will contain the notes in each project
echo .notes >> ~/.gitignore_global

# Add the global gitignore to the git configurations
git config --global core.excludesfile ~/.gitignore_global

Now, let's create the folder that will contain all the notes:

# Create the folder where all the notes will be centralised
mkdir ~/Documents/notes

Finally, let's say we have a project called project_foo. We can now create the folder that will contain the notes and link it:

# Create the folder where the project specific notes will be found
mkdir ~/Documents/notes/project_foo

# Link the project specific notes folder into the project
ln -s ~/Documents/notes/project_foo ~/Documents/project_foo/.notes

Summary

Folder notes contains all the notes
Each project has a .notes folder with only related notes and ignored by version control
All the notes are synced between the notes folder and the .notes one in each project

Thanks to this architecture, I am now able to access my project's notes in my IDE directly and avoid using another app for that. To add to that, because they are synced in the notes folder, I still have the possibility to open all my notes at once if needed.

Final words

Thank you for reading my first ever blog post and I hope it helps some of you :)

Let me know your thoughts and/or improvements!

Photo by David Travis