matthewcpaul/blog

Personal Blog + Resources

#Resources

##Type Foundaries

• [Klim] (https://klim.co.nz/): Domaine, Calibre, Founders Grotesk, National
• [Lineto] (http://lineto.com/): Circular, Akkurat
• [Okay Type] (http://okaytype.com/hello/friend): Alright Sans, Harriet

##SVG Animation

• [Introduction to SMIL] (http://codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil) by Noah Blon

• [A Guide to SVG Animations] (https://css-tricks.com/guide-svg-animations-smil/) by Sara Soueidan

• [CSS & SVG/SMIL Animation] (http://slides.com/sarasoueidan/animating-svg-with-css-and-smil__fonteers#/) by Sara Soueidan

• [SVG Coordinate System] (http://sarasoueidan.com/blog/svg-coordinate-systems/) by Sara Soueidan

• [SVG Paths & Curves] (https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths): Writing your own SVGs and Bézier Curves

• [Pocket Guide to Writing SVG] (http://svgpocketguide.com/book/): Writing your own SVGs

• [Cubic Beziers] (http://cubic-bezier.com/): Test motion curves

##Terminal ###Create an alias:

1. type ~/.zshrc in the terminal
2. add source "/Users/username/.aliases.sh" near the top
   • change username to your own (matthewpaul)
3. cmd-shift-S to duplicate the file in TextEdit, and rename it .aliases.sh
4. delete all, and add alias emojis="open http://www.emoji-cheat-sheet.com/"
5. type emojis in the terminal

###Create a branch, and push a ingle folder to that branch (gh-pages)

• [deploy to gh-pages] (http://www.damian.oquanta.info/posts/one-line-deployment-of-your-site-to-gh-pages.html)

##Sass

• [OOSass] (http://thesassway.com/intermediate/using-object-oriented-css-with-sass) by Jaime Caballero

• [Intro to semantic front-end architecture] (http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)

##Icon Fonts

• [IcoMoon] (https://icomoon.io/): Make your own icon font
  • icomoon: runs entirely in your broweser, which is pretty sweet
    1. import 32 pixel svg
    2. set base font size: 32
    3. turn on ligature option, and set "xyz"
    4. export font
• [SymbolSet] (https://symbolset.com/): Collection of icon fonts

##Style Guides

• [Styleguide Guide] (http://vinspee.me/style-guide-guide/): Various options

• [Styleguide Generators] (http://welchcanavan.com/styleguide-roundup/): Write up about a few of those options

##Gulp

• [Live reload with Sketch/Framer] (http://www.darrinhenein.com/rapid-prototyping-part-one/) (Haven't tried this yet)

##Computer Science

• In-Depth List of Free Courses (Thank you Una)