Search for a command to run...
I'm an engineer, educator, and entrepreneur that has been building digital products for over 20 years with experience in startups, education, technical training, and developer ecosystems.
I founded Flatiron School in NYC where I taught thousands of people how to code. Previously, I was the founder of Designer Pages. Currently I'm the Chief Product Officer at Revature.
No comments yet. Be the first to comment.
How to easily design in code and compare designs side by side in Ruby on Rails applications.
I'm trying to improve my design engineering and have been practicing and looking for opportunities to flex and grow. One of my favorite new techniques is View Transitions, a simple way using CSS to animate transitions between states of the view, whet...
We're going to build a common UI pattern: a sortable, paginated table using the power of Ruby on Rails and Turbo Frames. Sortable Table Headers The first step is to create the sortable table headers as simple links. I wrote a few helper methods in Ru...
A common pattern is having a search form that filters a list of items. That's what we're going to build now with a minimal amount of code using Turbo Frames and Stimulus. Here's what it will look like in the end. We've got a bunch of jobs, each with...
Another common UI pattern is a slide over. This is a modal that slides in from the side of the screen. It's really easy it turns out to implement this with a Turbo Frame. Let's do it. Step 1: The Slide Over Turbo Frame First, we need to create a Tur...
I love using Prettier as a formatter for my code. However, I write a lot of ERB to do Ruby on Rails and out of the box, prettier doesn't play nice with ERB. There is a prettier-erb package but it is old and does not seem to work with new versions of prettier. However, I found an easy workaround.
In my .prettierrc.json, I add the following configuration:
{
"overrides": [
{
"files": "*.erb",
"options": {
"parser": "html"
}
},
{
"files": "erb",
"options": {
"parser": "html"
}
},
{
"files": "*.html.erb",
"options": {
"parser": "html"
}
},
]
}
Prettier works really well with HTML and just telling it to treat ERB as HTML by overriding the formatter works super well. This combined with the prettier-vscode extension and you can now format ERB with prettier pretty effectively.
If anyone knows a better way, I'd love to hear it!