ZenDev Blog

Articles and resources about Front-end Development

Categories

Adding Vue.js to Foundation's ZURB Stack

Vue.js is the new hotness in the front-end world, garnering more github stars than any other project in 2017. It makes sense - Vue is simpler and easier to learn than frameworks like React.js and Angular, while still providing all the power those frameworks do. And it's easy to start using it incrementally, just dropping it into place within a site without having to change your entire site over to a single page app.

Read More

Friday Frontend: Modern JavaScript Edition

This week’s newsletter has an extra helping of the state of modern of JavaScript. From a runthrough of all the new language features in the last 3 years, to a cartoon explainer of ES modules, to a deep dive into the ‘why’ behind modern JavaScript frameworks - we’ve got it all. Of course there’s more than that - a super cool article on building responsive grids, per-component theming, some big PWA news, and much much more

Read More

Friday Frontend: Post VueConf.US Edition

I was at VueConf.US this week, down in New Orleans, and had a wonderful time. It was the first US-based Vue conference, and the organizers did a wonderful job with a welcoming environment, wonderful talks, and a unique taste of New Orleans. First time I’ve ever marched down the street with a marching band & police escort at a tech conference. :) In honor of VueConf, this week’s JavaScript links are primarily Vue focused, but of course we’ve also got a range of other excellent articles including a super cool technique for dealing with whitespace on text, a deep dive into responsive images, and much much more.

Read More

Friday Frontend: March 23 Edition

This week’s edition is a little on the short side because I managed to catch a nasty illness from my kids and spent a bunch of the time I would have been working on the newsletter flat in bed trying not to throw up. :( Hope you’re having a great Friday, enjoy this (somewhat abridged) Friday Frontend

Read More

Friday Frontend: Ides of March Edition

The Ides of March were yesterday, which if you believe some folks on twitter means we should be all getting together in groups to stab people. :P I’d rather get together in groups to learn about awesome frontend tooling! This week’s Friday Frontend has quite a range of items, including humor, case studies, and some truly awesome resources. I particularly loved the animation tips and the CSS Grid Template builder, but there’s goodies from CSS techniques for knockout text to some fascinating developer survey results to a framework for building native applications using Vue.js Enjoy!

Read More

Friday Frontend: React Attack Edition

Earlier this week, Dan Abramov’s talk on future features of React at JSConf Iceland lit up twitter like crazy, and so this week we have an extra helping of React-focused articles for you. But that’s not all, there’s also a delightful resource of bite-sized CSS examples, a stunning interactive hover effect, and a very exciting glimpse into the future of the Web with the Houdini CSS Paint API. Enjoy!

Read More

Friday Frontend: JavaScript Keeps Getting Better Edition

Lots of great JavaScript articles this week for folks at any stage in their JavaScript learning. A set of beginner resources, a bite-sized web API tutorial, a super cool modern JS Pattern, and more. Plus of course your standard helping of great CSS posts and other news around the web. Enjoy!

Read More

Friday Frontend: February 23 Edition

Hope you had a great week and are looking forward to a great weekend. This week’s Friday Frontend has an interesting hodge-podge of stuff… everything from super basics of CSS Syntax to fancy CSS-only sortable tables, fundamental tools enabling JavaScript (Babel) to super-niche microframeworks, and all sorts of stuff in between. Enjoy!

Read More

Friday Frontend: Post Valentines Day Edition

This week’s edition of the newsletter has some super cool CSS effects, a nice balance of JavaScript fundamentals to fancy frameworks, and a great introduction to git (yeah I know it’s not purely topical, but it is a key fundamental skill) for those still working on mastering source control. Enjoy!

Read More

Friday Frontend: Extra Dose of React Edition

It’s possible that in my current mini love affair with Vue.js, I’ve been neglecting React. React has by far the widest adoption of any of the advanced JavaScript frameworks, and seems to be in the most demand by companies as well. So in this edition, I’m including an extra dosage of React articles - an introductory one, an important announcement, and a super cool advanced usage example with SVGs. Of course there’s lots of other good stuff as well… CSS Counters, custom properties, an intro to GraphQL and more. Enjoy, and happy Friday!

Read More

Friday Frontend: New JavaScript Capabilities Edition

This week’s edition comes with an extra helping of newly native JavaScript capabilities. We see some awesome applications of the new template literal syntax, get a deep dive into the IntersectionObserver API, and see all of the new goodies that are now officially a part of ES2018. Of course, along the way we also cover some cool CSS functionality, hear some exciting iOS/Safari news, and get a super cool deep dive into what it’s like to use the web through a screen reader.

Read More

Friday Frontend: Tons of CSS Grid Edition

After a few issues without as much CSS Grid Layout, this week we’re back with no less than three AMAZING CSS grid resources. I don’t think it was coordinated, but when Rachel Andrew (one of the top CSS Grid experts) publishes an in-depth walkthrough in the same week that Wes Bos (great front-end teacher) launches a CSS grid course, it’s a good week for CSS grid. That said, there’s other good stuff in here too - we’ve got a closures tutorial for JavaScript that is a must read if you don’t already understand closures, and for folks like me who get excited about really geeky tech the continued evolution of Firefox Quantum is AWESOME!

Read More

Friday Frontend: Performance Edition

Articles seem to run in trends, this week there were a ton of fascinating articles and news pieces about performance, particularly down in the ‘Other Awesome’ category! There’s also a great walkthrough of the concepts and thinking behind React and Redux, some nifty CSS Background Patterns, and a trio of “common questions” articles on the current big 3 JavaScript Frameworks (Angular, React, and Vue.js)

Read More

Friday Frontend: Jan 12 Edition

Hope you had a great week this week! This was my first week back from the end of year holiday break, and I can definitely feel the positive impact of the time off. It’s good to take some time for yourself every now and then, you come back so much more focused and productive.

Read More

Reflections on 2017 - Implications of Building A Lifestyle Business

A lot happened in 2017. I started the year working at ZURB, focused on leading Foundation, and was excited to plan out the future of Foundation with a 7.0 release. My lead at ZURB, Bryan, spent a ton of energy helping me learn, grow, and work through the places where I was stuck. I found myself wrapping my head more and more around the ways in which product planning, design, development, and marketing all work together to advance ideas and create breakthrough products.

Read More

Friday Frontend: Middle of the Holidays Edition

We’re running a couple links short this week because hey, it’s the holidays, and I’m plum out of time. Hope you’re having a wonderful time connecting with friends and family this holiday season, or just taking some time to yourself to relax.

Read More

Friday Frontend: Post Hanukkah Pre Christmas Edition

Hope you’re enjoying your holiday season! As a multicultural household, we’ve just wrapped up celebrating Hanukkah and are winding up for Christmas. With all of the craziness going on in the world, it is nice to take a few moments to focus in on family and connect back to our roots and traditions. I hope you’re able to do so as well.

Read More

Friday Frontend: Retrospectives Edition

What would the end of the year be like without retrospectives? We’ve got a few included in this week’s Friday Frontend, along with an AWESOME css-only game demo and some great tutorials. Enjoy!

Read More

Friday Frontend: Beautiful CSS edition

Happy December! Month of elves, family, presents, nonstop department store music, and seasonal depression. Hopefully more of the first three and less of the last two, but in my experience you tend to get them all.

Read More

Friday Frontend: Thanksgiving edition

This weekend in the U.S. is Thanksgiving, which means we’re spending lots of time overeating and spending time with family, and also reflecting on a few things that we’re grateful for.

Read More

Friday Frontend: Web as Platform edition

I had a blast this week hosting the ‘Web as Platform’ track at QConSF, and talking with tons of folks about the future of software and the web. We’re at an incredible time in our industry’s history, where the browser is really transitioning from being an incredible documentation delivery engine to being an application delivery engine - the next generation operating system.

Read More

Friday Frontend: Finally it’s getting cold edition

Welcome to (almost) winter! I don’t know about where you are, but over here in the Bay Area we just started getting colder weather and rain. This last week and change I’ve started breaking out winter clothes, reviving winter foods, and all sorts of other fun stuff. Good to know that even with climate change, we still get some seasonality!

Read More

Friday Frontend: Welcome to November!

Happy November! I have a soft spot for November, maybe because because my birthday this month! But it’s also when we start to get cold enough to really enjoy all of our winter activities and foods, but we’re not yet into holiday madness. Definitely a great month.

Read More

Friday Frontend: Trick or Treat Edition

Happy (almost) Halloween! The meaning of this holiday has changed a lot for me since having kids, but whether Halloween for you means partying with adult beverages and risque outfits or chaperoning small children from house to house and attempting to limit their sugar intake, it’s a lot of fun regardless.

Read More

The Web Fundamentals Gap

I had a conversation with a friend yesterday who is looking to fill a role in his company and expressed some frustration with a challenge I've been seeing lately as well:

Read More

Friday Frontend: CSS Grid is in Edge!!! Edition

The big news this week is that Microsoft shifted Edge 16, with first class, un-prefixed support for CSS Grid! Yay! We are getting SO close to green across the board in caniuse, with 84% of browsers in the US supporting grid if you include prefixes… while there are definitely still issues and bugs, we’re getting strikingly close to the point where we can make a solid argument for using CSS Grid in production!

Read More

Friday Frontend: Friday the 13th Edition

According to Wikipedia, some 17 to 21 million people in the United States are affected by fear of Friday the 13th, with some people so paralyzed by fear that they won’t even get out of bed. That seems crazy to me, but then again I do some things that other people think are pretty crazy (like disliking tomatoes and bananas), so who am I to judge?

Read More

Friday Frontend: The Future of Fonts Edition

This week’s Friday Frontend comes with an extra serving of typography goodness. Much of the innovation happening here is still in the early stages, but from the font-display property to variable fonts, the future of typography on the web is SUPER EXCITING.

Read More

Reflections on Web Unleashed 2017 in Toronto

I love conferences. They're exhausting, distracting, often set me back in the immediate projects I'm working on, and yet I love them nonetheless. I love them because they create an opportunity to reset, to see what are emerging as themes in the industry, and to make new connections and draw new insights.

Read More

Friday Frontend: “Notch” one more developer scramble off for Apple 😉

It’s been a little over a week since the iPhone X was announced, so there’s been time for a ton of commentary and reactions. “The Notch” definitely got its share of haters, but boy they’ve packed some interesting things in there. Everyone is scrambling to figure out the implications, but no doubt about it this will influence mobile web design & development in the coming years.

Read More

Friday Frontend: Developer Tools edition!

Great articles seem to run in bunches - there will be a ton of new CSS Grid posts, or React posts, and they all kind of cluster together. This week we’ve got a cluster of posts about different developer tools built into Chrome and Firefox! One down to earth practical debugging tutorial in the JavaScript section and two super cool exploratory pieces under ‘Other Awesome’.

Read More

Foundation's Responsive Navigation | Foundation Open Chat

In our this Foundation Open Chat, we talked about Foundation's Responsive Navigation features. How to turn your dropdown menu into a responsive menu, using the responsive toggle to hide content behind a hamburger on smaller screens, and the SUPER COOL new "in-canvas" responsive feature for off-canvas released in 6.4. We also touch briefly on questions around updates, flexbox, and JavaScript

Read More

CSS in JS is like replacing a broken screwdriver with your favorite hammer.

There's a ton of interest these days in 'CSS in JS'. The premise is simple: CSS operates in a global namespace, which can result in undesirable side effects, spaghetti code, and extremely difficult to maintain codebases. JavaScript used to do this, and we fixed it by encapsulating everything in modules and using tools like webpack to stitch everything together. And hey look, our JavaScript tools can handle CSS too, why don't we move all of our CSS into JavaScript and encapsulate everything by module!

Read More

Front-end Development Kickstarter: All about the ZURB Template

Here’s a common situation - you’re a designer or front-end developer who is focused right now focused on a functional prototype, and you don’t need all of the complexity of managing a backend and server system. You get HTML and SCSS, but the complexity of writing a full-on javascript frontend in react or angular is more than you want to deal with right now. This is the exact reason why the ZURB template was developed, to give a rapid prototyping and static site development environment for teams using Foundation!

Read More

Friday Frontend | Flexbox, Grid, and demystifying ES**!

Happy September! It’s been another busy week in the web world, and this week’s Friday Frontend is packed with goodies. We’ve got some great learning resources for Flexbox, CSS Grid, and vanilla JavaScript right along side some mind-bending SCSS tricks, examples of awesome React and Angular patterns, a big webpack announcement, and much much more!

Read More

Grids, Grids and more Grids | Foundation Open Chat

In our this Foundation Open Chat, we talked about Grids! How to think about responsive grids, a little bit of the XY Grid, some diving into CSS Grid. We also touched on Javascript integration with Style Sherpa, and the super-cool new in-canvas option for Foundation's Off-canvas.

Read More

Friday Frontend | SCSS Architecture, Functional JavaScript, and Quantum CSS, oh my!

This week’s Friday Frontend got me super excited. Not only are there some great beginner articles in it with tutorials and guided exercises, but some amazing deep dives into topics near and dear to my heart like SCSS architecture and functional JavaScript. I hope you enjoy these as much as I did! And if there are any of these that don’t make sense to you, or that you want to learn more about, shoot me a quick note and I’ll be sure to answer your questions, find more resources, or write up some posts myself if the resources don’t exist.

Read More

Foundation Open Chat August 24

In our this Foundation Open Chat, we went through the Foundation Building Blocks - what Foundation Building Blocks are, how to use them, how to install them using the Foundation CLI, and what the thinking behind them is. We also answered some questions about the Foundation JavaScript, webpack, and what's going on with Foundation's development.

Read More

Friday Frontend Five Becomes Friday Frontend Fifteen!

We’re just in week 2, and the format of this newsletter is evolving each week. As I’ve dug more into all of the articles being published about the front end every week, I found it impossible to limit myself to just five good ones, so I’m updating to a Friday Fifteen! Given the many different angles to the frontend, what I’m looking at is each week having five about CSS & SCSS, five on JavaScript, and five as a mishmash of other topics and news. Let me know what you think!

Read More

Foundation Open Chat August 18

In our this Foundation Open Chat, we walk through the pieces of the ZURB template, covering the new webpack based JavaScript approach, the build system, and how the scss imports work.

Read More

Inaugural Frontend Five

Welcome to the inaugural edition of the Friday Frontend Five newsletter, with 5 hot articles and resources to keep you up to date with everything happening in the front-end world.

Read More

Foundation Open Chat August 10

In our first Foundation Open Chat, we covered topics ranging from using the Foundation SCSS mixins to create semantic classes, a range of XY-Grid components like the cell block containers, live problem solved some photo layout issues, and some use of the Foundaiton CLI.

Read More