# Front-End Weekly - No. 1

Source: https://www.dandenney.com/blips/front-end-weekly-001
Date: 2013-11-01
Summary: The first issue of a links roundup I never turned into a newsletter

---

I'm working on creating a weekly email, so I collected my fave things from the week and decided to share it since I'm not ready to launch yet. It will be a lot more fun looking in the email.

## Fave of the Week

[Dave Rupert Strikes Again](http://codepen.io/davatron5000/pen/iJuzF)

This was great. Yaron Schoen tweets about wanting to redirect to an image if someone puts 'ASAP' into his contact form. Dave whips it up.

## Process

[Smart Transitions In User Experience Design](http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design)

[Animating DOM Transitions](http://blog.alexmaccaw.com/animating-dom-transitions)

[Medium-Style Page Transition](http://tympanus.net/Tutorials/MediumStylePageTransition)

[Using CSS Shapes to Enhance Visual Storytelling](http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling)

[Well-rounded Compound Shapes CSS](http://css-tricks.com/well-rounded-compound-shapes-css)

[The HTML5 Document Outline](http://blog.paciellogroup.com/2013/10/html5-document-outline)

[Flexbox First](http://www.planningforaliens.com/blog/2013/10/07/flexbox-first)

[Bring Back the Baseline](http://joecritchley.svbtle.com/bring-back-the-baseline)

## Tutorials

[How a Text Gradient is Made](http://codepen.io/rss/pen/pxuzb)

[Getting Started with Flexbox](http://www.sketchingwithcss.com/flexbox)

[Interactive Data Visualization for the Web](http://chimera.labs.oreilly.com/books/1230000000345/index.html)

## Resources

[Multi-Element Selection](http://tympanus.net/Development/MultiElementSelection)

[Offline.js](http://github.hubspot.com/offline/docs/welcome)

## Tools

[Get Up and Running with Grunt](http://coding.smashingmagazine.com/2013/10/29/get-up-running-grunt)

[Fontastic](http://fontastic.me)

[Automating Front-End Workflow Slides from Addy Osmani](https://speakerdeck.com/addyosmani/automating-front-end-workflow)

## Inspiration

[Responsive Icons](http://www.responsiveicons.co.uk)

[CSS and the Golden Ratio](http://dvncan.com/2013/10/28/css-and-the-golden-ratio.html)

[Adventist.org created by Bold](http://www.adventist.org)

## Code

[Expanding list items by Rachel Stock](http://codepen.io/rachstock/pen/eivpf)

[Text masking with snap.svg by Rachel Stock ](http://codepen.io/rachstock/pen/FzAGt)

[Color + Math + Motion by Mark Lee](http://codepen.io/leemark/pen/AkbzD)

## Social

[@tj_fogarty](https://mobile.twitter.com/tj_fogarty/status/395495748654993408)

## Events

[Artifact Conf](http://artifactconf.com)

[Web Unleashed 2013](http://fitc.ca/event/webu2013)

## Trending on Github

[PixelKit Bootstrap UI Kits](https://github.com/Pixelkit/PixelKit-Bootstrap-UI-Kits)

[Snap.svg](https://github.com/adobe-webplatform/Snap.svg)

[PhysicsJS](https://github.com/wellcaffeinated/PhysicsJS)

[Scrolling](https://github.com/pazguille/scrolling)

[Ghost](https://github.com/TryGhost/Ghost)