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.
- manipulating the DOM using pure JavaScript (without jQuery)
- other vanilla JS funcionalities (especially events)
- making better use of
tabindexattribute - improving css transitions performance (see article in credits)
- using clip-rect() CSS property
- using some techniques related to SVG in Illustrator
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
- tabindex for keyboard navigation
- transitions, transforms and animations
calc()functionclip-rect()for SVG animation- CSS3 selectors and pseudo selectors (like
~,+,:nth-child(),:invalid,:not()) - media queries
- pseudo elements (
:beforeand:after) - padding hack
- vh units
- normalize.css (from Bootstrap 3.3.7)
@font-face
- nesting selectors
- variables (for colors)
shade()andtint()functions
- 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
- 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)
- modified SVG TwitchCon 2016 logo from TwitchCon 2016 website
- Twitch Glitch logo from Brand Assets - Twitch - for favicon
- Background image
- IE10+ and all major mobile and desktop browsers
- GTMetrix vanilla JS - total page size - 225KB, page load time - ~0,7s
- GTMetrix jQuery - total page size - 313KB, page load time - ~0.9s