June 25, 2016

[#30 Level Up! Newsletter] WWDC 201; Thunderbolt Display Discontinued; What’s new for designers; Scrolling Effects; Form Validation UX in HTML and CSS; Making muscles with MorphSVG; Decorative Text Underline; Flip Clock; Front-end Five

Level Up! Web Design & Development Newsletter
Level Up! Newsletter
Helping fellow web professionals level up their skills!
Issue No. 30

Hola a todos! (Hello everyone!)

Well, a lot has happened since the last newsletter.

  • I went to my first SmashingConf in New York City! Awesome experience. So awesome, that I was inspired by the whole event and created this Thank You! banner.
  • In CodePen Dayton #7 we had Rachel Smith (she works at CodePen actually) showing us how to animate SVGs.
  • In CodePen Dayton #8 we did “Rapid Pens”, which was basically take a design and implement it in HTML+CSS+JS in 10 minutes. Then we shared our build process with fellow attendees.
  • Next CodePen Dayton #9 on July 7th we have the one and only Wes Bos giving us a talk about Flexbox.
  • Subscribers increased from 1,101 to 1,138. Thank you all!

Let's get this newsletter going!


Small picture of Ricardo.
— Ricardo Zea
Creator Level Up! Newsletter

“I create this newsletter by hand: I visit every link, I read every article, create my opinion about it and if I think it can help someone bet a better web professional in an intellectual or practical way, I include it in the newsletter. It's a lot of work, but I love doing it :)”

News (Web/Technology)
iOS 10, MacOS Sierra and a better Siri: Everything Apple just announced at WWDC 2016 | by CNET

Great recap of what happened at Apple's last developers’ conference, the WWDC. A curious fact is that roman numerals are no longer used, like “OS X”, it is not “MacOS”.
Read more
Apple is discontinuing its Thunderbolt Display | TechCrunch

Huge list of tools for web designers worth following. Check out Pills, this simple CSS grid using Flexbox built mobile-first.
Read more
Web Design
What’s new for designers, June 2016 | by webdesignerdepot.com

Huge list of tools for web designers worth following. Check out Pills, this simple CSS grid using Flexbox built mobile-first.
Read more
Web Development
Web Developer Reading List: Scrolling Effects | by Dudley Storey

Huge list of tools for web designers worth following. Check out Pills, this simple CSS grid using Flexbox built mobile-first.
Read more
Form Validation UX in HTML and CSS | by CSS-Tricks.com

Pretty cool article by Chris Coyier at CSS-Tricks.com, very easy to understand and full of demos and code. As usual, is in the comments where the most value is.
Read more
CodePen
“Making muscles with MorphSVG” | Pen by Craig Roblewsky

SVG animations have taken over now. This one is using some GreenSock magic.
View Pen
“Decorative Text Underline” | Pen by Jonathan Neal

One of the great things about this demo is that Jonathan is using actual CSS Variables with CSSNext. Plus the visual effect is pretty neat.
View Pen
“Flip Clock” | Pen by Maneesh

If for whatever reason you need to display the time on your page in a fancy way, this flip clock will do the job very well.
View Pen
Applications/Tools
Front-end Five | by John D. Jameson and Drew Barontini

“All of your Front-end News in 5 Minutes”. Great tool for staying up to date in the front-end development world.
Read more
Color Schemr | by Varun Malhotra and Gaurav Nanda

This tool is quite similar to Coolors.co where you press the bar and a new set of harmonious colors are automatically generated. However, you can add or delete colors from the set, unlike Coolors.co where you always have 5.
Read more
Coolors.co | by Fabrizio Bianchi

I’ve mentioned this tool before, but in light of Color Schemr I had to mention it again :). This tool has much more features than Color Schemr, like having Android and iOS apps, add-ons for Photoshop and Illustrator ($5.00), export to URL, PDF, PNG, SCSS, SVG and Copic; it has a “browser” to see other people’s palettes, and the list goes on and on. A MUST-HAVE for any web designer.
Read more

Thanks for reading, and keep leveling up!

Author of:

Social Networks

Level Up! Newsletter Archive