{"id":1076,"date":"2018-10-17T16:24:52","date_gmt":"2018-10-17T21:24:52","guid":{"rendered":"https:\/\/2018.dfw.wordcamp.org\/?post_type=wcb_session&#038;p=1076"},"modified":"2018-10-19T14:51:24","modified_gmt":"2018-10-19T19:51:24","slug":"css-jam-session","status":"publish","type":"wcb_session","link":"https:\/\/dfw.wordcamp.org\/2018\/session\/css-jam-session\/","title":{"rendered":"CSS Jam Session"},"content":{"rendered":"<p>If a friend or client came and showed you their website and said \u201cWhat would you do differently?\u201d how would you begin? Would you open up photoshop or sketch? Would you start installing a new loca. WordPress instance? Why not just toggle dev tools open and begin manipulating their site live?<\/p>\n<p>In music, a jam session is one or more musicians playing together to discover sounds, exchange ideas and just enjoy the craft. It\u2019s purely creative and not focused on production. While graphic design has some similarities, this process hasn\u2019t really made it into our day-to-day web design workflow. Using the browser\u2019s dev tools, you can manipulate anything you want on any webpage and even save those changes to your local filesystem. Unfortunately your average webpage is a complex \u201cshared space\u201d of overlapping styles and scripts and working in it can be unwieldy and cumbersome. My goal with this session is to explore some ways to make the kinds of things you might want to do on-the-fly faster and easier to express so that we can ultimately get to a point where we\u2019re comfortable jamming out with our team or a client watching and participating.<\/p>\n<p>Topics include:<\/p>\n<p>&#8211; How do I bring ideas and work I\u2019ve done in previous projects into a jam session?<br \/>\n&#8211; How can I reduce the complexity of adding, removing and restyling elements so I\u2019m not slowing down the conversation?<br \/>\n&#8211; How do we take a snapshot of our work and come back to it later?<br \/>\n&#8211; How do I leave the session with a list of actions I can move forward with?<\/p>\n<p>While this session isn\u2019t devoted to any particular CSS or JS technologies, demos will very likely include examples of:<\/p>\n<p>&#8211; CSS Grid layout &amp; display:contents<br \/>\n&#8211; Tagged template literals in javascript<br \/>\n&#8211; CSS shapes (clip-path, shape-outside) and filters<br \/>\n&#8211; CSS custom properties<\/p>\n<p>Our canvas is not a design program or a specific framework, it\u2019s the browser. That\u2019s where we work and that\u2019s what we need to know deeply and I\u2019m convinced that learning how to \u201cjam\u201d in the browser will make us all better, more confident web designers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If a friend or client came and showed you their website and said \u201cWhat would you do differently?\u201d how would you begin? Would you open up photoshop or sketch? Would you start installing a new loca. WordPress instance? Why not just toggle dev tools open and begin manipulating their site live? In music, a jam &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/dfw.wordcamp.org\/2018\/session\/css-jam-session\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;CSS Jam Session&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8973494,"featured_media":0,"template":"","meta":{"jetpack_post_was_ever_published":false,"_wcpt_session_time":1541962800,"_wcpt_session_duration":3000,"_wcpt_session_type":"session","_wcpt_session_slides":"","_wcpt_session_video":"","_wcpt_speaker_id":[1075],"footnotes":""},"session_track":[1023020],"session_category":[],"class_list":["post-1076","wcb_session","type-wcb_session","status-publish","hentry","wcb_track-friendship"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9HzQs-hm","session_date_time":{"date":"November 11, 2018","time":"1:00 pm"},"session_speakers":[{"id":"1075","slug":"brent-jett","name":"Brent Jett","link":"https:\/\/dfw.wordcamp.org\/2018\/speaker\/brent-jett\/"}],"session_cats_rendered":null,"_links":{"self":[{"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/types\/wcb_session"}],"version-history":[{"count":1,"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1076\/revisions"}],"predecessor-version":[{"id":1509,"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1076\/revisions\/1509"}],"speakers":[{"embeddable":true,"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/speakers\/1075"}],"author":[{"embeddable":true,"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wporg\/v1\/users\/brentjettgmailcom"}],"wp:attachment":[{"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/media?parent=1076"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/session_track?post=1076"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/dfw.wordcamp.org\/2018\/wp-json\/wp\/v2\/session_category?post=1076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}