max-ci/twitchcon-2017-design-contest

TwitchCon Design

Contest – Build TwitchCon 2017 Landing Page

My Twitch username: m4kshh My Discord username: MaxHH

This contest is intended as a learning experience, and I will respect any requests by Twitch staff to remove this project.

What have I learned?

• manipulating the DOM using pure JavaScript (without jQuery)
• other vanilla JS funcionalities (especially events)
• making better use of tabindex attribute
• improving css transitions performance (see article in credits)
• using clip-rect() CSS property
• using some techniques related to SVG in Illustrator

Why are you describing your project? You wanna win, huh?

Not really, I think the purpose of this contest is to learn something new (maybe someone will learn something from my landing page). Secondly, I'm learning English, so more I use it - more I learn. I know it's bad :D

Techniques used in this project

HTML

• tabindex for keyboard navigation

CSS

• transitions, transforms and animations
• calc() function
• clip-rect() for SVG animation
• CSS3 selectors and pseudo selectors (like ~, +, :nth-child(), :invalid, :not())
• media queries
• pseudo elements (:before and :after)
• padding hack
• vh units
• normalize.css (from Bootstrap 3.3.7)
• @font-face

LESS

• nesting selectors
• variables (for colors)
• shade() and tint() functions

JavaScript

• elements - page loader, mobile menu, form submission, social links hover/focus effect, menu links hover/focus effect
• events listeners
• manipulating DOM
• add/remove/toggle classes
• forEach, style, setAttribute

Other tools

• Sublime Text 3 - sophisticated text editor for code, markup and prose
• CodeKit - helps you build websites faster and better (compiling LESS files, auto-refresh browsers, minifying files, autoprefixer etc.)
• compressor.io - compress and optimize your images
• Adobe Photoshop (darkening background image) and Adobe Illustrator (SVG logo)

Graphics

• modified SVG TwitchCon 2016 logo from TwitchCon 2016 website
• Twitch Glitch logo from Brand Assets - Twitch - for favicon
• Background image

Browser support

• IE10+ and all major mobile and desktop browsers

Page speed test

• GTMetrix vanilla JS - total page size - 225KB, page load time - ~0,7s
• GTMetrix jQuery - total page size - 313KB, page load time - ~0.9s

Credits

• Lato font by Łukasz Dziedzic
• Exo font by Natanael Gama
• How to achieve 60 FPS animations with CSS3 by José Rosário
• CSShake by @elrumordelaluz
• Glitch Effect on Text / Images / SVG by Chris Coyier
• IcoMoon App
• Favic-o-Matic
• Don Hansen - DonTheDeveloper
• Emilis Tobulevicius - Tsukle
• Steven | DevBowser