{"id":330290,"date":"2020-12-09T07:52:00","date_gmt":"2020-12-09T15:52:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=330290"},"modified":"2020-12-09T07:56:28","modified_gmt":"2020-12-09T15:56:28","slug":"npm-ruin-dev","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/npm-ruin-dev\/","title":{"rendered":"npm ruin dev"},"content":{"rendered":"\n

In 2020, I rediscovered the enjoyment of building a website with plain ol\u2019 HTML, CSS, and JavaScript \u2014 no transpilin\u2019, no compilin\u2019, no build tools other than my hands on the keyboard.<\/p>\n\n\n\n\n\n\n\n

\n
\n

Seeing as my personal brand could be summed up \u201cso late to the game that the stadium has been demolished,\u201d I decided to start a podcast in 2020. It\u2019s the podcast of my agency, Clearleft, and it has been given the soaringly imaginative title of The Clearleft Podcast<\/a>. I\u2019m really pleased with how the first season turned out. I\u2019m also really pleased with the website I put together for it.<\/p>\n\n\n\n

The website isn\u2019t very big, though it will grow with time. I had a think about what the build process for the site should be and after literally seconds of debate, I settled on a build process of none. Zero. Nada.<\/p>\n\n\n\n

This turned out to be enormously liberating. It felt very hands-on to write the actual HTML and CSS that will be delivered to end users, without any mediation. I felt like I was getting my hands into the soil of the site.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

<\/p>\n<\/div>\n<\/div>\n\n\n\n

CSS has evolved so much in recent years\u2014with features like calc()<\/code>  and custom properties\u2014that you don\u2019t have to use preprocessors like Sass<\/a>. And vanilla JavaScript<\/a> is powerful, fully-featured, and works across browsers without any compiling.<\/p>\n\n\n\n

Don\u2019t get me wrong\u2014I totally understand why complicated pipelines are necessary for complicated websites. If you\u2019re part of a large team, you probably need to have processes in place so that everyone can contribute to the codebase in a consistent way. The more complex that codebase is, the more technology you need to help you automate your work and catch errors before they go live.<\/p>\n\n\n\n

But that setup isn\u2019t appropriate for every website. And all those tools and processes that are supposed to save time sometimes end up wasting time further down the road. Ever had to revisit a project after, say, six or twelve months? Maybe you just want to make one little change to the CSS. But you can\u2019t because a dependency is broken. So you try to update it. But it relies on a different version of Node. Before you know it, you\u2019re Bryan Cranston changing a light bulb. You should be tweaking one line of CSS but instead, you\u2019re battling entropy<\/a>.<\/p>\n\n\n\n

Whenever I\u2019m tackling a problem in front-end development, I like to apply the principle of least power<\/a>: choose the least powerful language suitable for a given purpose. A classic example would be using a simple HTML button element instead of trying to recreate all the native functionality of a button using a div with lashings of ARIA and JavaScript. This year, I realized that this same principle applies to build tools too.<\/p>\n\n\n\n

Instead of reaching for all-singing all-dancing toolchain by default, I\u2019m going to start with a boring baseline<\/a>. If and when that becomes too painful or unwieldy, then I\u2019ll throw in a task manager. But every time I add a dependency, I\u2019ll be limiting the lifespan of the project.<\/p>\n\n\n\n

My new year\u2019s resolution for 2021 will be to go on a diet. No more weighty node_modules<\/code> folders; just crispy and delicious HTML, CSS, and JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"

In 2020, I rediscovered the enjoyment of building a website with plain ol\u2019 HTML, CSS, and JavaScript \u2014 no transpilin\u2019, no compilin\u2019, no build tools other than my hands on the keyboard.<\/p>\n","protected":false},"author":280049,"featured_media":330654,"comment_status":"open","ping_status":"closed","sticky":false,"template":"art-direction\/eoy-2020.php","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"npm ruin dev by @adactio","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4,18863],"tags":[579,1510],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-09-at-7.52.47-AM.png?fit=2120%2C1080&ssl=1","jetpack-related-posts":[{"id":322271,"url":"https:\/\/css-tricks.com\/some-industry-podcasts\/","url_meta":{"origin":330290,"position":0},"title":"Some Industry Podcasts","date":"October 1, 2020","format":false,"excerpt":"Clearleft made a 6-episode Season One It's called The Clearleft Podcast if you can believe that. It gets into new (at least to me) concepts like Design Ops and Design Sprints, which are loaded terms and need nuanced discussion. It's really well-edited, pulling in clips from relevant talks and such.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/podcast-rings.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280948,"url":"https:\/\/css-tricks.com\/the-10000-year-clock-design-principals\/","url_meta":{"origin":330290,"position":1},"title":"The 10,000 Year Clock Design Principals","date":"January 8, 2019","format":false,"excerpt":"In the new year edition of the Clearleft newsletter, Jeremy Keith linked to the design principals Danny Hillis thought about while considering a clock that would work for 10,000 years. Here's part of that page, satisfyingly displayed as a : Longevity: Go slow Avoid sliding friction (gears) Avoid ticking Stay\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/longphoto-clockgear-001.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":286980,"url":"https:\/\/css-tricks.com\/earth-day-apis-and-sunshine\/","url_meta":{"origin":330290,"position":2},"title":"Earth day, API’s and sunshine.","date":"May 1, 2019","format":false,"excerpt":"Cassie Evans showcases some really nifty web design ideas and explores using the API provided by the company her team over at Clearleft recently hired to cover their building's roof with solar panels. Cassie outlines her journey designing a webpage that uses the API to populate some light data visualizations\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/clearleft-solar.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":191825,"url":"https:\/\/css-tricks.com\/naming-things\/","url_meta":{"origin":330290,"position":3},"title":"Naming Things","date":"December 29, 2014","format":false,"excerpt":"Speaking of \"naming things how you would name them\", Paul Lloyd: Regardless of higher-level conventions, there's no getting away from the fact that, at some point, we're still going to have to name things. Then goes on to list a slew of considerations for a name, including things like considering\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":269125,"url":"https:\/\/css-tricks.com\/a-devtools-for-designers\/","url_meta":{"origin":330290,"position":4},"title":"A DevTools for Designers","date":"March 31, 2018","format":false,"excerpt":"There has long been an unfortunate disconnect between visual design for the web and web design and development. We're over here designing pictures of websites, not websites - so the sentiment goes. A.J. Kandy puts a point on all this. We're seeing a proliferation of design tools these days, all\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/devtoolsfordesigners.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266058,"url":"https:\/\/css-tricks.com\/use-variable-fonts-real-world\/","url_meta":{"origin":330290,"position":5},"title":"How to use variable fonts in the real world","date":"January 29, 2018","format":false,"excerpt":"Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that\u2019s the technology that allows us to bundle multiple widths and weights into a single font file). Here\u2019s the really exciting part though: Two months ago browser\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-09-at-7.52.47-AM.png?fit=1024%2C522&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330290"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/280049"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=330290"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330290\/revisions"}],"predecessor-version":[{"id":330655,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/330290\/revisions\/330655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/330654"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=330290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=330290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=330290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}