Here’s a blog post showing how to use @aleksip’s Data Transform Plugin to do some clever feeling stuff in Pattern Lab. I couldn’t find many examples of using DTP with YAML, so I shared a recent file I’ve been working on in the hope it’ll be useful:  https://medium.com/@philw_/using-join-include-and-attributes-in-yaml-yml-files-with-data-transform-plugin-for-pattern-lab-e4559d158562 … #Drupal

I asked a question last week on the Drupal Twig Slack channel about how to pass data between a Twig template and a Drupal form. Turns out it’s pretty easy once you know how:  https://medium.com/@philw_/passing-values-from-a-drupal-paragraphs-item-to-a-custom-modules-form-via-bamboo-twig-769688ac8034 …

I made a little Node script to generate screenshots of a URL and output a file with the right dimensions, filename, and format to use as the screenshot.png image for a #Drupal theme:

 https://github.com/philwolstenholme/drupal-theme-screenshot …

Family.scss 4kb of mixins for making nth child suck less 🙌  https://lukyvj.github.io/family.scss/ 

@film_girl Every day, in each timezone, we know when it’s the end of the school day because we see a flood of kids come to @glitch and start building @discordapp bots. 😃

Greater Manchester desperately needs a commitment to #VisionZero and a plan from @MayorofGM / council leaders to deliver it  https://twitter.com/MENnewsdesk/status/1061328453906194432 …

Here’s a neat little percentage bar that I made in @vuejs & @tailwindcss:  https://codepen.io/philw_/full/PxGoEO …. No new/custom CSS, and no repetition of class names in markup thanks to Vue templates and a v-for loop (you could use any other templating language though, Blade, Twig etc)

Everything is simpler when you see your CSS codebase as an API rather than a description file. Your CSS should reflect your design conventions, not your page structure.

 https://frontstuff.io/in-defense-of-utility-first-css …

Front-enders! We’re looking for really good developers to join me and my colleagues @CTIDigitalUK. There’s more info here, or DM me with any questions 🙂  https://www.ctidigital.com/careers/front-end-developer …

“Name components collaboratively.” Engineers shouldn’t name design system components without design input; neither should designers create the names without engineers. A shared vocabulary confirms a shared purpose behind each element of your design system. @yeseniaa #AEAORL

I’ve forked the excellent outline.js from @lindsayevans to add support for focus rings added using the box-shadow property. More info and a @jsDelivr CDN link in this PR:  https://github.com/lindsayevans/outline.js/pull/9 …

Thanks a lot to @aleksip for all the help he’s been giving me in the Drupal Twig Slack channel. Make sure to check out  https://github.com/aleksip/plugin-data-transform … if you’re working with Pattern Lab, especially for Drupal projects 🙂

Holy sh*t! I just tried @tailwindcss for the first time and I haven’t written a single line of css for the whole frontpage and I’m already 80% through. 😳

Interestingly verbose utility classes here from Stripe:  https://twitter.com/adamwathan/status/1058879918556082176 …

Here’s the slides from my @nwdug talk! Come and find me if you have any Qs 🙂  https://docs.google.com/presentation/d/e/2PACX-1vRyoxibGWg4L3rN7S5R5xCKo2f-o13iaBTaCBzOoyV4lGGu8awhqm47mfnkZUSvhGSRkiy5r2tpjdYC/pub?start=false&loop=false&delayms=1000 …

Here’s some really good reading that address common worries:
•  https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/ …
•  http://mrmrs.cc/writing/2016/03/24/scalable-css …
•  https://frontstuff.io/in-defense-of-utility-first-css …
•  https://adamwathan.me/css-utility-classes-and-separation-of-concerns …  https://twitter.com/philw_/status/1058503486458023937 …

Looking forward to the @nwdug #Drupal unconference tomorrow! I’m bringing a talk on ‘How to write better CSS, by stopping writing CSS’.
Come and find out how to make working with CSS fun (and scalable) again! 🎨 pic.twitter.com/tuLyzR1swF

I didn’t use to think much about Foundation, but recently I’ve been looking at its features (the ones we build over and over again), their impressive a11y (especially keyboard nav) chops, & the ES6 bundling, and wondering why I don’t use Foundation’s JS (with my own CSS) more  https://twitter.com/ZURBfoundation/status/1057411981844643840 …

A really nice, in-depth explanation of a very sophisticated Webpack set up. I’m going to try and steal as many of these ideas as I can…  https://twitter.com/nystudio107/status/1054730167485120514 …

 http://www.forbes.com/sites/carltonreid/2018/10/15/cargobikes-not-drones-are-the-future-for-urban-deliveries/?utm_source=TWITTER&utm_medium=social&utm_term=Valerie/#76616c657269 …

Front-enders! We’re looking for really good developers to join me and my colleagues @CTIDigitalUK. There’s more info here, or DM me with any questions 🙂  https://www.ctidigital.com/careers/front-end-developer …

VS Code running in CodeSandbox, which was already Codepen-on-steroids. This is absolutely mind-boggling. @CompuIves is a absolute wonder! 😃  https://twitter.com/CompuIves/status/1052594462768148480 …

Hardly anyone is using semver right because the naming is misleading.

Major Minor Patch seems to refer to the significance and size of the update rather than the API compatibility.

New suggestion:

Breaking
Feature
Fix

BFF for short ✨

You can animate content. Probably not mega useful but hey it can be fun in non-important situations.

 https://codepen.io/chriscoyier/pen/GYOQNY?editors=1100 …
 https://css-tricks.com/animating-the-content-property/ … pic.twitter.com/5pgpiEzPLb

🔥 Workflow alert! 🔥

24 seconds to show you why people rave about the “workflow”, “speed” and “productivity” that come with utility-first CSS frameworks like @tailwindcss.

Or, more broadly, working without context switching, without stopping to “name” things. pic.twitter.com/IZV12Gu389

Friyay🐝bees🐝say🐝please🐝don’t🐝tease,🐝who🐝agrees?🐝That🐝these🐝tees🐝are🐝our🐝knees,🐝nacho🐝cheese,🐝for🐝frees🐝if🐝you🐝purcheese🐝before🐝next🐝Tuesdees🐝.

That is, buy your uncon ticket by next Tuesday and get a t-shirt!  https://buff.ly/2A0aad5  pic.twitter.com/oEqsbr8t0m