{"id":285788,"date":"2019-04-03T14:38:00","date_gmt":"2019-04-03T21:38:00","guid":{"rendered":"http:\/\/css-tricks.com\/?p=285788"},"modified":"2019-04-03T14:38:00","modified_gmt":"2019-04-03T21:38:00","slug":"responsible-javascript","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/responsible-javascript\/","title":{"rendered":"Responsible JavaScript"},"content":{"rendered":"

We just made a note about this article by Jeremy Wagner in our newsletter<\/a> but it\u2019s so good that I think it\u2019s worth linking to again as Jeremy writes about how our obsession with JavaScript can lead to accessibility and performance issues: <\/p>\n

\n

What we tend to forget is that the environment websites and web apps occupy is one and the same. Both are subject to the same environmental pressures that the large gradient of networks and devices impose. Those constraints don\u2019t suddenly vanish when we decide to call what we build \u201capps\u201d, nor do our users\u2019 phones gain magical new powers when we do so.<\/p>\n

It\u2019s our responsibility to evaluate who uses what we make, and accept that the conditions under which they access the internet can be different than what we\u2019ve assumed. We need to know the purpose we\u2019re trying to serve, and only then can we build something that admirably serves that purpose\u2014even if it isn\u2019t exciting to build.<\/p>\n<\/blockquote>\n

<\/p>\n

That last part is especially interesting because it’s in the same vein as what Chris wrote just the other day about embracing simplicity in our work<\/a>. But it\u2019s also interesting because I’ve overheard a lot of engineers at work asking how we might use CSS-in-JS tools like Emotion<\/a> or Styled Components<\/a>, both of which are totally neat in and of themselves. But my worry is about jumping to a cool tool before we understand the problem that we want to tackle first. <\/p>\n

Jumping on a bandwagon because a Twitter celebrity told us to do so, or because Netflix uses tool X, Y or Z is not a proper response to complex problems. And this connects to what Jeremy says here:<\/p>\n

This is not to say that inaccessible patterns occur only when frameworks are used, but rather that a sole preference for JavaScript will eventually surface gaps in our understanding of HTML and CSS. These knowledge gaps will often result in mistakes we may not even be aware of. Frameworks can be useful tools that increase our productivity, but continuing education in core web technologies is essential to creating usable experiences, no matter what tools we choose to use.<\/p><\/blockquote>\n

Just \u2013 yikes. This makes me very excited for the upcoming articles in the series.<\/p>\n","protected":false},"excerpt":{"rendered":"

We just made a note about this article by Jeremy Wagner in our newsletter but it\u2019s so good that I think it\u2019s worth linking to again as Jeremy writes about how our obsession with JavaScript can lead to accessibility and performance issues: What we tend to forget is that the environment websites and web apps […]<\/p>\n","protected":false},"author":223806,"featured_media":285808,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1535,571],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/alistapart-responsible-js.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":355395,"url":"https:\/\/css-tricks.com\/responsible-javascript-2\/","url_meta":{"origin":285788,"position":0},"title":"Responsible JavaScript","date":"November 2, 2021","format":false,"excerpt":"High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a negative impact on the web, but now we have the canonical reference tome. The book is just chock-full of Jeremy\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsible-javascript-book-cover-aba.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":286959,"url":"https:\/\/css-tricks.com\/split\/","url_meta":{"origin":285788,"position":1},"title":"Split","date":"May 2, 2019","format":false,"excerpt":"Jeremy on the divide between the core languages of the web, and all the tooling that exists to produce code in those languages: On the one hand, you\u2019ve got the raw materials of the web: HTML, CSS, and JavaScript. This is what users will ultimately interact with. On the other\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/balancing-time.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":246516,"url":"https:\/\/css-tricks.com\/progressive-enhancement-debate\/","url_meta":{"origin":285788,"position":2},"title":"Progressive Enhancement “Debate”","date":"October 14, 2016","format":false,"excerpt":"Nolan Lawson: I had a slide in my talk that read: In 2016, it\u2019s okay to build a website that doesn\u2019t work without JavaScript. The condemnation was as swift as it was vocal. Response by Jeremy Keith: That framing makes it sound like it\u2019s a binary choice: either the website\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311065,"url":"https:\/\/css-tricks.com\/user-agents\/","url_meta":{"origin":285788,"position":3},"title":"User agents","date":"May 19, 2020","format":false,"excerpt":"Jeremy beating the classic drum: For web development, start with HTML, then CSS, then JavaScript (and don\u2019t move on to JavaScript too quickly\u2014really get to grips with HTML and CSS first). And then... That\u2019s assuming you want to be a good well-rounded web developer. But it might be that you\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325619,"url":"https:\/\/css-tricks.com\/rendering-spectrum\/","url_meta":{"origin":285788,"position":4},"title":"Rendering Spectrum","date":"November 24, 2020","format":false,"excerpt":"Here are the big categories of rendering websites: Client: ship a

<\/div> and let a JavaScript template render all of it.Static: pre-render the HTML.Server: let a live server process requests and generate the HTML response. They are not mutually exclusive. A website could statically pre-render 75% of it's pages\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322507,"url":"https:\/\/css-tricks.com\/on-the-web-share-api\/","url_meta":{"origin":285788,"position":5},"title":"On the Web Share API","date":"October 5, 2020","format":false,"excerpt":"I think the Web Share API is very cool (here's our coverage). In a nutshell, it taps into the native sharing features on whatever platform you're on, if that platform supports it. I like this: Web Share API activated on iOS A heck of a lot more than these things:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/ios-shar-sheet.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285788"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=285788"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285788\/revisions"}],"predecessor-version":[{"id":285812,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/285788\/revisions\/285812"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/285808"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=285788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=285788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=285788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}