{"id":312009,"date":"2020-05-30T05:17:51","date_gmt":"2020-05-30T12:17:51","guid":{"rendered":"https:\/\/css-tricks.com\/?p=312009"},"modified":"2020-05-30T05:17:52","modified_gmt":"2020-05-30T12:17:52","slug":"increment-issue-13-frontend","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/increment-issue-13-frontend\/","title":{"rendered":"Increment Issue 13: Frontend"},"content":{"rendered":"\n<p><a href=\"https:\/\/increment.com\/\" rel=\"noopener\">Increment<\/a> is a beautiful quarterly magazine (print and web) published by Stripe <em>&#8220;about how teams build and operate software systems at scale&#8221;<\/em>. While there is always stuff about making websites in general, this issue is the first focused on front-end<a href=\"#fn:1\">\u00b9<\/a> development.  <\/p>\n\n\n\n<p>I&#8217;ve got an article in there: <a href=\"https:\/\/increment.com\/frontend\/when-frontend-means-full-stack\/\" rel=\"noopener\">When frontend means full stack<\/a>. I&#8217;ll probably someday port it over here and perhaps add some more context (there were some constraints for print) but I love how it turned out on their site! A taste:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>We handle this growing responsibility in different ways. Even though we all technically fall within the same big-tent title, many frontend developers wind up specializing. Often, we don\u2019t have a choice. The term&nbsp;\u201cunicorn\u201d once described the extremely rare person who was good at both frontend and backend development, but these days it\u2019s just as rare to find people skilled at the full spectrum of frontend development. In fact, the term&nbsp;\u201cfull stack\u201d has largely come to mean&nbsp;\u201ca frontend developer who does a good amount of the stuff a backend developer used to&nbsp;do.\u201d<\/p><\/blockquote>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"1152\" src=\"https:\/\/i1.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Mockup-interior-shadows-1_2048x.png?fit=1024%2C576&amp;ssl=1\" alt=\"\" class=\"wp-image-312013\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Mockup-interior-shadows-1_2048x.png?w=2048&amp;ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Mockup-interior-shadows-1_2048x.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Mockup-interior-shadows-1_2048x.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Mockup-interior-shadows-1_2048x.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Mockup-interior-shadows-1_2048x.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Mockup-interior-shadows-1_2048x.png?resize=1000%2C563&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>The whole issue is chock full of wonderful authors:<\/p>\n\n\n\n<ul><li>Lea Verou&#8217;s <a href=\"https:\/\/increment.com\/frontend\/a-users-guide-to-css-variables\/\" rel=\"noopener\">A user&#8217;s guide to CSS variables<\/a> (TIL that variables can cause infinite loops and that is detected and invalidates all the variables)<\/li><li>Ian Feather&#8217;s <a href=\"https:\/\/increment.com\/frontend\/how-to-reevaluate-your-frontend-architecture\/\" rel=\"noopener\">How to reevaluate your frontend architecture<\/a> (An expos\u00e9 of the thinking behind the technical choices at BuzzFeed)<\/li><li>Evan You&#8217;s <a href=\"https:\/\/increment.com\/frontend\/making-vue-3\/\" rel=\"noopener\">The process: Making Vue 3<\/a> (Sometimes what drives change in frameworks is the browser&#8217;s evolving and making more things possible and more efficient)<\/li><li>Ipsita Agarwal&#8217;s Case study: <a href=\"https:\/\/increment.com\/frontend\/case-study-web-components-for-screen-readers\/\" rel=\"noopener\">Web components for screen readers<\/a> (The story of a select component at Slack and the complexity of accessibility)<\/li><li>Safia Abdalla&#8217;s <a href=\"https:\/\/increment.com\/frontend\/on-composable-modular-frontends\/\" rel=\"noopener\">On composable modular frontends<\/a> (<em>&#8220;We also need to bring the principles of composable design to the&nbsp;frontend.&#8221;<\/em>)<\/li><li>Chris Stokel-Walker&#8217;s <a href=\"https:\/\/increment.com\/frontend\/the-rise-of-react\/\" rel=\"noopener\">The rise of React<\/a><\/li><li>Nishant Shukla&#8217;s <a href=\"https:\/\/increment.com\/frontend\/a-chatbox-expedition\/\" rel=\"noopener\">A chatbot expedition<\/a><\/li><li>Glenn Fleishman&#8217;s <a href=\"https:\/\/increment.com\/frontend\/design-by-design\/\" rel=\"noopener\">Design by design<\/a><\/li><\/ul>\n\n\n\n<p>And the article that is the most right up my alley, <a href=\"https:\/\/increment.com\/frontend\/ask-an-expert-why-is-css-the-way-it-is\/\" rel=\"noopener\">Why is CSS . . . the way it is?<\/a> by Chris Lilley. It&#8217;s somehow astonishing, gutwrenching, understandable, and comfortable to know that CSS evolves like any other software project. Sometimes thoughtfully and carefully, and sometimes with a <em>meh, we&#8217;ll fix it later<\/em>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Once a feature is in place, it\u2019s easier to slightly improve it than to add a new, better, but completely different feature that does the same&nbsp;thing. <br><br>This explains, for example, why list markers were initially specified in&nbsp;CSS&nbsp;by expanding the role of&nbsp;<code>float<\/code>. (The list marker was floated left so the list item text wrapped around it to the right.) That effort was abandoned and replaced by the&nbsp;<code>list-style-position<\/code>&nbsp;property, whose definition currently has&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/drafts.csswg.org\/css-lists-3\/#list-style-position-property\" target=\"_blank\">the following, not very confidence-inspiring inline issue<\/a>:&nbsp;\u201cThis is handwavey nonsense from&nbsp;CSS2, and needs a real&nbsp;definition.\u201d<\/p><\/blockquote>\n\n\n\n<p>That&#8217;s a damn fine collection of writings on front end if you ask me.<\/p>\n\n\n\n<p>A big thank you to Sid Orlando and Molly McArdle who helped me through the process and seem to do a great job running the ship over there. <\/p>\n\n\n\n<div class=\"wp-block-group footnotes\" id=\"fn:1\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<ol><li>The issue uses &#8220;frontend&#8221; throughout, and I appreciate them having a styleguide and being consistent about it. But I can&#8217;t bring myself to use it. <a href=\"https:\/\/css-tricks.com\/poll-results-front-end-front-end\/#article-header-id-0\">&#x1f517;<\/a> <em>The term \u201cfront-end\u201d is correct when used as a compound adjective, and the term \u201cfront end\u201d is correct when used as a noun.<\/em><\/li><\/ol>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Increment is a beautiful quarterly magazine (print and web) published by Stripe &#8220;about how teams build and operate software systems at scale&#8221;. While there is always stuff about making websites in general, this issue is the first focused on front-end\u00b9 development. I&#8217;ve got an article in there: When frontend means full stack. I&#8217;ll probably someday [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":312010,"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":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/cover-2000-7c6735bb.jpeg?fit=2000%2C1125&ssl=1","jetpack-related-posts":[{"id":301563,"url":"https:\/\/css-tricks.com\/our-learning-partner-frontend-masters\/","url_meta":{"origin":312009,"position":0},"title":"Our Learning Partner: Frontend Masters","date":"January 9, 2020","format":false,"excerpt":"I'd like to think there is a lot to learn on CSS-Tricks. But we don't really offer much by the way of courses. You're probably reading this because you just generally read this site, and you land on CSS-Tricks otherwise mostly because you are looking for an answer to some\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/frontend-masters.png?fit=1200%2C1114&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":205709,"url":"https:\/\/css-tricks.com\/sponsor-frontend-masters\/","url_meta":{"origin":312009,"position":1},"title":"Sponsor: Frontend Masters","date":"August 3, 2015","format":false,"excerpt":"Frontend Masters is known for some of the highest-quality video training courses in the industry. Their teachers are experts in their field\u2014like the creator of AngularJS, multiple jQuery team members, and the founder of JSON. Right now, get your choice of a full-week in-depth video lesson. All of which include:\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351975,"url":"https:\/\/css-tricks.com\/our-learning-partner-frontend-masters-2\/","url_meta":{"origin":312009,"position":2},"title":"Our Learning Partner: Frontend Masters","date":"September 24, 2021","format":false,"excerpt":"Frontend Masters has been our learning partner for a couple of years now. I love it. If you need structured learning to up your web development skills, Frontend Masters is the place. It works so well because we don't offer that kind of structured learning ourselves\u2009\u2014\u2009I'd rather recommend a first-rate\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/frontend-masters.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292591,"url":"https:\/\/css-tricks.com\/frontend-masters-the-new-complete-intro-to-react-course-now-with-hooks\/","url_meta":{"origin":312009,"position":3},"title":"Frontend Masters: The New, Complete Intro to React Course&#8230; Now with Hooks!","date":"July 11, 2019","format":false,"excerpt":"Much more than an intro, you\u2019ll build a real-world app with the latest features in React including \ud83c\udfa3 hooks, effects, context, and portals. We also have a complete React learning path for you to explore React even deeper!","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/frontend-masters-react-course.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":276533,"url":"https:\/\/css-tricks.com\/removing-jquery-from-github-com-frontend\/","url_meta":{"origin":312009,"position":4},"title":"Removing jQuery from GitHub.com frontend","date":"September 14, 2018","format":false,"excerpt":"Here\u2019s how and why the team at GitHub has slowly been deprecating jQuery from their codebase: We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/github-jquery-js.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":181313,"url":"https:\/\/css-tricks.com\/sponsor-frontend-masters-expert-web-development-training\/","url_meta":{"origin":312009,"position":5},"title":"Sponsor: Frontend Masters &#8211; Expert Web Development Training","date":"September 4, 2014","format":false,"excerpt":"Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. I like how these courses are targeted at intermediate and advanced developers: You've got the basics down and don't want to learn from teachers who just spoon feed you their google results -\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/312009"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=312009"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/312009\/revisions"}],"predecessor-version":[{"id":312036,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/312009\/revisions\/312036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/312010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=312009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=312009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=312009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}