{"id":264182,"date":"2017-12-25T09:18:03","date_gmt":"2017-12-25T16:18:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=264182"},"modified":"2019-01-03T10:44:42","modified_gmt":"2019-01-03T17:44:42","slug":"2017-staff-favorites","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/2017-staff-favorites\/","title":{"rendered":"2017 Staff Favorites"},"content":{"rendered":"<p>It&#8217;s been a very productive year for the web community, and as all of us here at CSS-Tricks roamed around to conferences, read posts, and built projects, there were some highlights of contributions that really stuck out to us. Each of us picked 5 resources that were either the most helpful, the most unique, or are things you might have missed that we think are worth checking out.<\/p>\n<p><!--more--><\/p>\n<h3>Sarah&#8217;s Picks<\/h3>\n<h4>The Miracle of Generators<\/h4>\n<p>I quite like when someone takes a deep dive on a particular subject and does it well. I had the honor of seeing <a href=\"https:\/\/vimeo.com\/232221648\" rel=\"noopener\">Bodil Stokke give this talk<\/a> at Frontend Conference Zurich and it&#8217;s as charming and entertaining as it is educational.<\/p>\n<h4>Designing with Grid<\/h4>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Gn3JOE6qMuE\" rel=\"noopener\">Jen Simmons covers the status of CSS Grid<\/a>, and how to work with it from design to development. Jen is a master of grid, and the <a href=\"http:\/\/labs.jensimmons.com\/\" rel=\"noopener\">lab section of her site<\/a> shows the capability of this medium. <\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Gn3JOE6qMuE\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<p>An update since this talk has come out: Grid has also shipped in Microsoft Edge.<\/p>\n<h4>Vue Apollo<\/h4>\n<p>This is more like two things I&#8217;m interested in wrapped up in a single thing. Guillaume Chau has done a great job of <a href=\"https:\/\/github.com\/Akryum\/vue-apollo\" rel=\"noopener\">creating an Apollo\/GraphQL integration for Vue<\/a>, including a few great demos to explore.<\/p>\n<h4>The Coding Train<\/h4>\n<p>This resource has been out for a while, but Dan now has <a href=\"http:\/\/thecodingtrain.com\/\" rel=\"noopener\">such a great collection<\/a> that it&#8217;s a great time to mention it. <\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/dEWmwQMKgIk\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<p>Coding Train are small, half-hour chunks of tutorials- everything from creating a star field to learning how Neural Networks work. Dan is an incredibly engaging and lovable instructor and makes you feel very welcome when exploring new concepts. <\/p>\n<h4>Motion in Design Systems<\/h4>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=Itsg48crOjM\" rel=\"noopener\">Val Head gets to the heart of the matter<\/a> when it comes to integrating motion into a Design System or Component Library. <\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/Itsg48crOjM\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<p>It can be really tough to communicate animation because you necessarily need to collaborate between design and engineering. Val gives you some tools to make this process function well.<\/p>\n<h3>Robin&#8217;s Picks<\/h3>\n<h4>Design Systems<\/h4>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/design-systems\/\" rel=\"noopener\">Design Systems<\/a> by Alla Kholmatova was one of the best design books I read in 2017. <\/p>\n<figure id=\"post-264528\" class=\"align-none media-264528\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/design-systems-large-view-v2.png?w=300&#038;ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>It\u2019s a book all about how to collaborate with a team and reveals that code quality is only one part of designing great systems on the web. The book isn\u2019t so much about design as much as it\u2019s about learning how to communicate across large groups of people and how we can better communicate with everyone in an organization.<\/p>\n<h4>Web Typography<\/h4>\n<p>Another great book I read this year was <a href=\"http:\/\/book.webtypography.net\/\" rel=\"noopener\">Web Typography<\/a> by Richard Rutter, this time focusing a great deal more on the relationship between CSS and typesetting. <\/p>\n<figure id=\"post-264529\" class=\"align-none media-264529\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/12\/s_9C7941E13432AD1FFCF6B6F628DA89FC265BB6FD15EA2C9682EE54AB2022DCD8_1510075041730_ScreenShot2017-11-07at9.16.48AM.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>My favorite part of the book though is where Richard describes that web typography is fundamentally different from other forms of typesetting and requires a series of new skills. It makes for exciting reading.<\/p>\n<h4>Purple.pm<\/h4>\n<p>For most of this year I\u2019ve been focusing on improving my UX and product design skills and I have to say that <a href=\"http:\/\/www.purple.pm\/\" rel=\"noopener\">Purple<\/a> was the most useful tool for organizing large amounts of data and research. I used it as an archive that stored every document I made, every Balsamiq wireframe and hi-fi Figma mockup I created all in one place. This made it so much easier to communicate with other teams and explain my thinking on a project.<\/p>\n<h4>Figma<\/h4>\n<p>This year I switched to using the web-based design tool <a href=\"https:\/\/www.figma.com\/\" rel=\"noopener\">Figma<\/a> full time. It&#8217;s been so very useful because my day job work requires collaborating with dozens of engineers, product managers and other designers \u2014 so being able to quickly share a mockup with them and get feedback has exponentially improved my design chops. Plus, it reminds me of Fireworks which is probably one of the best apps ever made.<\/p>\n<h4>Inkwell<\/h4>\n<p>This year Hoefler &amp; Co. released <a href=\"https:\/\/www.typography.com\/fonts\/inkwell\/overview\/\" rel=\"noopener\">Inkwell<\/a>, a new family of typefaces that mimics a variety of handwriting styles and I can\u2019t stop thinking about them. One great example of their use is on <a href=\"https:\/\/chriscoyier.net\/\" rel=\"noopener\">Chris&#8217; blog<\/a> where all these weird styles shouldn&#8217;t work at all but somehow they just do.<\/p>\n<h3>Chris&#8217; Picks<\/h3>\n<h4>A Design System for All Americans by Mina Markham<\/h4>\n<p>A masterclass in public speaking if you ask me. Funny, personal, and right on target for the kind of work a lot of us are doing.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/SMJmrt3J6B8\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h4>Notion<\/h4>\n<p><a href=\"https:\/\/www.notion.so\/\" rel=\"noopener\">Notion<\/a> is probably the most significant bit of new software I&#8217;ve switched to this year. It&#8217;s a notes app at it&#8217;s core and it&#8217;s feature-rich in that regard. One of my favorites features is that every note is also a folder, so you can get as nested as you like with your organization. If you give it a shot, I bet you&#8217;ll be able to see how it quickly can replace lots of other apps. <\/p>\n<p>Most significant to a list like this, is that it&#8217;s built for the web, but also has native apps on a variety of platforms. I think 2017 was significant in that we started to really <em>feel<\/em> a blurring between what is web and what is platform native. I suspect it will get harder and hard to tell, and then with all the advantages the web has inherently, it will make less and less sense to build anywhere else.<\/p>\n<h4>CSS<\/h4>\n<p>CSS had a banner year. <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">CSS Grid<\/a>, of course, but we also got <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/\">font-display<\/a> starting to ship, which is wonderful for performance. We got landmark selectors like <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/\">:focus-within<\/a> that prove parent selectors aren&#8217;t impossible. Vector graphics has <a href=\"https:\/\/css-tricks.com\/video-screencasts\/157-tale-four-properties\/\">moved it way into CSS<\/a> with a collection of properties, including animation and movement. <a href=\"https:\/\/css-tricks.com\/turn-frown-upside\/\">You might say CSS<\/a> has gotten more capable and easier. I enjoyed writing posts <a href=\"https:\/\/css-tricks.com\/can-get-pretty-far-making-slider-just-html-css\/\">like this one<\/a> about a slider that shows how far you can get in CSS these days. <\/p>\n<h4>RIP Firebug<\/h4>\n<p>I think it&#8217;s nice <a href=\"https:\/\/getfirebug.com\/\" rel=\"noopener\">the Firebug homepage<\/a> is an homage, goodbye, and short history to Firebug. Firebug laid the foundation for what good DevTools could be. I&#8217;m glad browsers have taken them in-house and turned them into the powerhouses we use now, but that&#8217;s all thanks to Firebug. <\/p>\n<p>If I had to pick the most significant three things that have made the web the development platform it is today: 1) DevTooling, started by Firebug 2) The agreement from all browsers that web standards benefit everyone and actually being disciplined about applying that thinking 3) Evergreen browsers.<\/p>\n<h4>PWAs<\/h4>\n<p>I feel like Progressive Web Apps are essentially good marketing for a collection of good ideas that benefit any website. That&#8217;s exactly the case Jason Grigsby makes:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/214425867\" width=\"640\" height=\"360\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/p>\n<p>That makes it an easy pick for 2017. HTTPS! Service workers for offline friendliness! Performance focused! Do these things, and be rewarded with more features that native apps enjoy, like a position on the home screen on mobile devices. Blur them lines, y&#8217;all! Even if you don&#8217;t do everything on the list, there are big advantages for every step along the way.<\/p>\n<h3>Geoff&#8217;s Picks<\/h3>\n<h4>CSS Grid<\/h4>\n<p>This one comes as no surprise but it&#8217;s certainly worthy of multiple mentions. Grid has really rejuvenated my love for CSS. Not only does it take a lot of the complexity of out layouts that used to require creative uses of floats, displays and positioning, but it has allowed me to cut CSS frameworks completely out of my workflow. I mean, it&#8217;s that frameworks are bad or should not be used, but I personally leaned on them a lot for their grid systems. That&#8217;s no longer the case and the result is one less dependency in my stack and the liberty to write more vanilla CSS.<\/p>\n<h4>Prototyping Tools<\/h4>\n<p>Robin already mentioned Figma and that is totally in line with what I&#8217;m referring to. There seemed to be an explosion of innovation in prototyping tools. Sketch, Figma, InVision and, yes, Adobe all upped their games this year and web designers were the beneficiaries. These tools have opened up have made it easier to collaborate with other designs, critique work, get client feedback, and ultimately get into the browser faster. I have never spent less time in graphic design software and it&#8217;s been awesome.<\/p>\n<p>Here&#8217;s a taste of what I&#8217;m referring to:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.invisionapp.com\/blog\/invision-studio\/\" rel=\"noopener\">Introducing InVision Studio<\/a><\/li>\n<li><a href=\"https:\/\/www.invisionapp.com\/blog\/freehand-creative-collaboration\/\" rel=\"noopener\">Introducing Freehand<\/a><\/li>\n<li><a href=\"https:\/\/blog.sketchapp.com\/private-sharing-in-sketch-cloud-sync-shared-styles-shortcuts-and-more-in-sketch-46-62ede30b0ab3\" rel=\"noopener\">Private Sharing in Sketch Cloud<\/a><\/li>\n<li><a href=\"http:\/\/mediatemple.net\/blog\/tips\/the-all-powerful-sketch\/>The All-Powerful Sketch<\/a><\/li>\n<li><a href=\"https:\/\/blog.figma.com\/reflecting-on-figmas-first-year-5a76eccdf30a\" rel=\"noopener\">Reflecting on Figma&#8217;s First Year<\/a><\/li>\n<li><a href=\"https:\/\/theblog.adobe.com\/welcome-adobe-xd-cc-2\/\" rel=\"noopener\">Welcome Adobe XD CC<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/one-illustration-three-svg-outputs\/\">One Illustration, Three SVG outputs<\/a><\/li>\n<\/ul>\n<h4>Contrast in Accessibility<\/h4>\n<p>Often when we talk about accessibility, the focus is on things like semantics, document structure, screen readers ARIA roles. It can get super complicated. That&#8217;s why I really enjoyed Lara&#8217;s recent post <a href=\"https:\/\/css-tricks.com\/advocating-for-accessible-ui-design\/\">advocating for accessible UI<\/a>. Aside from being extremely well-written, she presents commonsense approaches to improving accessibility in ways that go beyond code.<\/p>\n<p>One of her suggestions to check color contrasts in the design to ensure good legibility. This one really resonated with me because I recently worked on a project with a visual brand that includes a lot of greens and yellows. Running our designs through the tools Lara recommends revealed that our work failed many accessibility checks. It also taught me that accessibility really does not favor greens and yellows.<\/p>\n<h4>Web Typography: Designing Tables to be Read, Not Looked At<\/h4>\n<p>If you didn&#8217;t catch <a href=\"https:\/\/alistapart.com\/article\/web-typography-tables\" rel=\"noopener\">Richard Rutter&#8217;s post<\/a> on A List Apart, I&#8217;ll please go read that right now. Don&#8217;t worry, I&#8217;ll wait right here for you.<\/p>\n<p>You back? Great!<\/p>\n<p>This one was a splash of cold water in my face. Richard not only convicted me to honestly assess whether I over-design tables but also turned all my preconceptions about what a table is and what a good one looks like. Good design is problem solving and this post is one that reminds me design for solutions before aesthetics.<\/p>\n<h4>place-items<\/h4>\n<p>Chris snuck <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/\">this property<\/a> into a demo and I had no idea it existed. I had to forgive myself a little when I saw that browser support on it is low, but it is a really nice shortcut that combines the <code>align-items<\/code> and <code>justify-items<\/code> properties. You may have guessed why I love this: it comes in super handy with Grid and Flexbox. While support is limited it Chrome 59+ and Firefox 45+, I am stoked to see more browsers hop on board.<\/p>\n<hr>\n<p>What are your picks for 2017?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s been a very productive year for the web community, and as all of us here at CSS-Tricks roamed around to conferences, read posts, and built projects, there were some highlights of contributions that really stuck out to us. Each of us picked 5 resources that were either the most helpful, the most unique, or [&hellip;]<\/p>\n","protected":false},"author":7699,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[1563],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":360864,"url":"https:\/\/css-tricks.com\/mondrian-art-in-css-from-5-code-artists\/","url_meta":{"origin":264182,"position":0},"title":"Mondrian Art in CSS From 5 Code Artists","date":"January 14, 2022","format":false,"excerpt":"Mondrian is famous for paintings with big thick black lines forming a grid, where each cell is white, red, yellow, or blue. This aesthetic pairs well with the notoriously rectangular web, and that hasn't gone unnoticed over the years with CSS developers. I saw some Mondrian Art in CSS going\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-13-at-2.53.47-PM.png?fit=1183%2C1200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308358,"url":"https:\/\/css-tricks.com\/first-steps-into-a-possible-css-masonry-layout\/","url_meta":{"origin":264182,"position":1},"title":"First Steps into a Possible CSS Masonry Layout","date":"May 18, 2020","format":false,"excerpt":"It's not at the level of demand as, say, container queries, but being able to make \"masonry\" layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/css-masonry.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339666,"url":"https:\/\/css-tricks.com\/safari-14-1-adds-support-for-flexbox-gaps\/","url_meta":{"origin":264182,"position":2},"title":"Safari 14.1 Adds Support for Flexbox Gaps","date":"April 30, 2021","format":false,"excerpt":"Yay, it's here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We've had grid-gap support for some time, but true to its name, it's limited to grid layouts. Now we can use gap in either type of layout: .container { display: flex; flex-flow: row wrap; gap:\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/safari-gap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363541,"url":"https:\/\/css-tricks.com\/an-auto-filling-css-grid-with-max-columns\/","url_meta":{"origin":264182,"position":3},"title":"An Auto-Filling CSS Grid With Max Columns of a Minimum Size","date":"February 16, 2022","format":false,"excerpt":"Within Drupal 10 core, we\u2019re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world. The requirements are: The user specifies a maximum number of columns. This is the auto-filling grid\u2019s \u201cnatural\u201d state.If a grid cell goes under a user-specified width, the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/grid-lightbulb.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326010,"url":"https:\/\/css-tricks.com\/thinking-outside-the-box-with-css-grid\/","url_meta":{"origin":264182,"position":4},"title":"Thinking Outside the Box with CSS Grid","date":"November 18, 2020","format":false,"excerpt":"Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and down, you can place items across grid lines creating a staggered effect that looks pretty rad. Grid-like, but it appears to align to diagonal\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/book-grid-min.jpg?fit=1200%2C687&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376528,"url":"https:\/\/css-tricks.com\/animating-css-grid-how-to-examples\/","url_meta":{"origin":264182,"position":5},"title":"Animating CSS Grid (How To + Examples)","date":"January 25, 2023","format":false,"excerpt":"I\u2019m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers! Well, CSS Grid has technically supported animations for a long time, as it\u2019s baked right into the CSS Grid Layout Module Level 1 spec. But animating\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/grid-animation.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/264182"}],"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\/7699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=264182"}],"version-history":[{"count":21,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/264182\/revisions"}],"predecessor-version":[{"id":264532,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/264182\/revisions\/264532"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=264182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=264182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=264182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}