mikekellyio

[mikekellyio]

Using Sass? hide your generated CSS from view in VS Code

If you’re working with SCSS and want to hide the generated CSS, go to Preferences, Settings, then Open settings.json, and add the following:

"files.exclude": { "**/*.css": { "when": "$(basename).scss" } }

Voila! Generated code disapears from the Explorer. The same trick can be used for any other file type.

(H/T to @aerotwist for pointing out the capability!)

[mikekellyio]

The docs say that portable mode on Linux or Windows is only supported via the zip installation, but as of at least 2018 July release it is possible to migrate settings to the packaged version as well. 

The trick is to use the paths found in this section. 

Copy the user-data found at the below paths, to the corresponding directory on the target OS. 

Windows %APPDATA%\Code

macOS $HOME/Library/Application Support/Code

Linux $HOME/.config/Code

Then, copy the extensions found at the below paths, to the corresponding directory on the target OS. 

Windows %USERPROFILE%\.vscode\extensions

macOS ~/.vscode/extensions

Linux ~/.vscode/extensions

Restart VS Code, and voila, all your settings and extensions from your other computer have been migrated.

[mikekellyio]

Find an open server port in Ruby

My cucumber tests using capybara were getting fails because the server spun up for javascript was conflicting with the servers spun by other devs on my team.

Solution?

[mikekellyio]

pure CSS loading animations with minimal effort! simply manipulate class names on existing elements.

[mikekellyio]

Cucumber and Capybara-Webkit automatic screenshots on failure - Gist is a simple way to share snippets of text and code with others.

[mikekellyio]

Rails counter_cache: prime the pump!

I was working on some performance tweaks for a view that was spitting out a lot of counts of related records. I decided to try out using a counter_cache to help speed up things.

I set up all of the above and then wondered why my view was still slow. The answer was I needed to prime the pump:

[mikekellyio]

I love to collaborate on design because it often pushes me to try new things. Recently, I was given a design comp something like this: a rounded compound shape serving as a fixed header, with a textured inset that had an inner shadow all around (a "well"). Well, I thought, how hard could this be?

woa. cool.

[mikekellyio]

Neat solution to vertical centering items within blocks

[mikekellyio]

Gravity was absolutely beautiful. 1st 3d movie I've seen where the 3d enhances and supplements story.

— Mike Kelly (@mikekellyio) October 15, 2013

So in summary, go see Gravity now in theaters in 3D while you can. The photography is gorgeous, the sound production perfect, the story great.

[mikekellyio]

Keep your timestamps up to speed.

Uptodate automatically updates the timestamps on your webpage to reflect their age over time.

When your users hang out on the same page for a while, they will no longer be exposed to outdated timestamps.

[mikekellyio]

A interactive Git visualization tool to educate and challenge!

[mikekellyio]

Learn how I created a Street Fighter clone with HTML, CSS, and JavaScript!

[mikekellyio]

Want an original shuffled paper effect? Try Craig's CSS3 code on your website before everyone does it!

Love this effect.

[mikekellyio]

From a customer and marketing perspective we wanted to introduce all the changes together, but as an engineering team we were wary about introducing so much change in one big release. We wanted to find a way that we could incrementally release the changes as we built them without affecting our customer experience. If we could selectively turn the new design on and off, this would allow us to give early access to our customers so they could provide feedback on the design while using it with their own data.

Cool technique for beta testing redesigns on production.