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 add cute things to y

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 the eyes but I th

For this Sunday Funday project, I decided to make a poker chip checkbox out of pure CSS. DEMO The idea is that it will flip on its right edge like when people flip chips between their fingers. This can be improved by using images to get a correct dashed edge or make it more lifelike but this is CSS only. Tutorial 1. The markup We need a container to set the background and the size and width, we need the label to be clickable anywhere, input for the checkbox, top and bottom of the chip. <div class="container"> <label for="chip-checkbox"></label> <input type="checkbox" name="chip" value="1" id="chip-checkbox"> <div class="bottom-side"></div> <div class="top-side"></div> </div> 2. Hide the input input { visibility: hidden; } 3. Set the width and height of the background/container .container { width: 80px; height: 40px; bord

Purpose: This blog post is all about what I learn in c# and .net I will be linking useful resources and demos of what I make in c#. In the first week, I have made a basic c# calculator which can be seen in the video below. I made this from an Instructables page, very easy to follow along and not many errors(YAY!)  Inscrutable's c# Tutorial .  My C# calculator -  Git Hub Repo

Sunday fun day project - LightReact Update every week So I'm in my third year (finally!) and decided to do more things this year (2017)  1. To increase my skills and 2. To have fun! This year we are having our end of year show at The University of Winchester and I wanted to make a VR game for Google cardboard. The winner at the end of the day would get a £10 steam gift voucher. Below is my WIP for this mini project. Week 1 - inspiration and 3d modelling  I wanted to make a very simple game for VR, no not a horror game. LightReact is based on a game you would typically play at an arcade where you have a bunch of lights and you have to switch them off as fast as possible. However, instead of switching them off with your hands you use your eyes. The example in the video below. So you get the point you look at them they switch off. The person to do it in quickest time wins.  The wonderful world of blender  I am primarily a developer but I've learnt to

Google Daydream  At Google io in 2016,  Google announced: Google daydream. A platform that can bring VR to everyone throughout the use of mobile phones and their new viewer. I was so inspired watching this I felt a need to make Daydream content. However to be able to develop this you need a Google view (£69 from Google store) and a daydream ready phone (£599 and up from Google store). I still plan to do this and will be buying a red viewer very soon (Im so excited XD) and will do an unboxing so look out for that! Then I will be saving up for the pixel phone (which is beautiful) and then onward with making awesomeness. Developing awesomeness  Its not just awesome because of the new viewer and the new pixel phone but the amount of help from google for developers is amazing they already have SDK kits for Android, Unity and Unreal. Unity and Unreal and two powerful game engines both have pros and cons but both are great for making games. I have experience in Unity b

The BBC micro bit  A while ago I attended Hacksoton  which is a hack day in Southampton, UK. It was a great day and I got to see and hear new and interesting technology (I would recommend for children and developers in the area). One of these technologies was the BBC Micro bit  . What is it for?  Its designed to get children into coding, you can use python, javascript or block editors. I loved them so much that I decided to get myself one as it can also be used with raspberry pi. So below is a video of me opening my micro bit go and I hope to do many exciting projects in the upcoming year and will be writing up about them so keep an eye out! What would you like to see with the micro bit? let me know in the comments below.