Inspired by VueConf 2018 I spent some time learning JS and Vue in more
depth, and built myself a more flexible VueFinder presentation tool to
fit my needs. This year, I returned to VueConf and gave the closing talk
on passing data between CSS and Vue.
After learning about Vue from Sarah Drasner’s stream of articles on
CSS-Tricks, I had the pleasure of speaking at VueConf 2018. I really
enjoyed that conference, and left feeling inspired by the community and
the framework behind it. I loved that I could build complete and valid
Vue components in plain HTML/CSS – and slowly integrate JS logic as
necessary. I started digging, and quickly learned to bind JS data to
HTML attributes:
CSS variables provide a safe approach for passing JS settings to CSS via
inline HTML. While most inline styles are difficult to override, CSS
variables can instead be ignored – making their inline specificity
harmless.
I wrote a quick demo for CSS-Tricks – More CSS Charts, with Grid &
Custom Properties – and continued to develop the idea into my latest
talk: Dynamic CSS. This talk explores how data can be used to
manipulate presentation directly in CSS – a combination of variables,
calc(), grids, hsl() and more.
While learning JS and Vue in more detail, I decided to re-build my
presentation software to better meet my needs as a speaker.
The result, which I call VueFinder, allows me to write slides using a
slightly-extended markdown syntax – with yaml metadata for each slide.
That metadata controls slide layout, allows me to embed Vue components
directly for live demos, and pass in CSS variables for custom styling.
VueFinder is public and open-source, though it isn’t currently as
reusable as I would like. The content and logic are tightly coupled in
ways I haven’t yet resolved. If you’re interested in helping make this a
more viable open source tool, or using it yourself, I’m open to new
features and PRs.
After VueConf, Rahul Kadyanreleased an extension for Visual
Studio Code that provides syntax-highlighting and code-folding for my
.slides files, as well as the .vue-slides format he uses. Thanks,
Rahul!
This year I connected with the Vue Vixens, and enjoyed getting to know
more of the Vue community. Chris Fritz and Rahul helped me add some
last-minute features to my slide deck, while Maria Lamardo and
Krystal Campioni both inspired new demos in my talk.
There’s been a recent flurry of articles about web components, with advice on how to shape them as extensions of HTML. I decided to dig in, and see how these ‘HTML web components’ could become a part of my own workflow. Despite a few rough edges, I’m excited to see…
Do you want to make your website or web app more intuitive for the people who visit? If so, I’d like to introduce you to the world of Object-Oriented UX. As a UX designer at OddBird, using OOUX strategies to identify and avoid unintuitive objects has been key to…
Part 3 – Responsive Web App vs Native Mobile App vs Progressive Web App
bySondra Ebyon
If you’re weighing the performance optimization and device integration opportunities of a native mobile app against the broad reach and lower cost of a responsive web app – and can’t decide which is a higher priority for your digital product – don’t despair. A progressive web app may be just…