Mels Dev Adventures

Full stack conference 2018 This is my first time at Fullstack conference in London, full of talks and demos this post will run through some of the talks I attended. All talks and videos of the talks can be found  here . Day 1 Brendan Eich - JS the next Generation Brendan Eich is the creator of JS and I take my hat off to him because I use JS every day as many developers do, he talked about the history of JS and what is to come in future years. Dynamic import() (spec) Array.prototype.flat/flat.map let (x, y ...z) = {x:1, y:2, a:3, b:4} (spec) Private methods  Asynchronous iteration for await of (spec) RegExp look behind assertions  RegExp Unicode properly escapes RegExp named capture groups  /a (dotall) flag for regular expressions  I cannot wait for these new features and for all browsers to catch up (ie) so developers can use ecma script 6 without polly fill, but still remains a dream for a while. Quote from the talk: Don't ...

Percy the penguin - login animation with CSS See the Pen  Percy the penguin  by Mel ( @Mellydevs ) on  CodePen . I was inspired by this article on medium to make a login animation when the user clicks on the password form input. As you can see from this article it can be very cool and unique I aimed to do mine in CSS and SVG. I plan to make this more complex in the future and will write an update when I do.  Step 1 Make Percy Simply I made Percy in sketch using shapes and Vectors (ie pen tool) and made sure I named the arms so they were easy to find in the SVG code.  Step 2 Animate it Make a container for all the elements. Add in the input field above the SVG so that I can use the + in scss to select element when we use :focus on the input. Animate the arms from the bottom and then fade them in to make it look a wee bit nicer and land over the eyes. This ends up being a bit more of a 'pika boo' animation rather than covering t...