CSSConfAU 2018

Recently, I had the privilege of being part of CSSConfAU, JSConfAU, and DecompressAU 2018. It was honestly an incredibly amazing week, being surrounded by such a welcoming community of Front End Developers and inspired each day by brilliant speakers. While there are many things that I want to learn more about, I thought I’d include a few things I worked on at Decompress.

I felt inspired by Mandy Michael’s talk at CSSConfAU, and then heard her talk again at a Meetup in Melbourne later in the week. So of course, I had to attend her workshop and see first hand how she creates magic with typography and CSS. Who knew these Photoshop-like styles were possible using just CSS??? AH-mazing!

Fancy a fun, layer font?

How about a bit of ying and yang with your layout?

Feel like flying away on a font with a view?

You can find a few more layered font styles on my CodePen page… And you want to know the best part about these layered fonts? They’re accessible, clickable, searchable, etc. These font’s have flavor, fun, AND practicality all bundled up into one, light-weight package! Perfect 🙂

Animating with Google Web Designer

Recently, I decided to experiment with using Google Web Designer to create an Ad… while it initially seemed quite straight forward and basic, it turned out to be quite complicated to get things just as I wanted. Anyway, I played around on Google Web Designed one weekend and this is what I made. I really wanted to figure out how to make it responsive, but that will be for another day! 😛

https://hcone5006.github.io/AMI0302-Landlord-Clock-banners_v06/index

HTML5 Animations

So recently I was working on adding some simple animations to the app we are building at work, and I decided to use CSS so I wouldn’t have to add any more dependencies to the project. I created a simple animation to the login popup box, mega-menus, etc. That led me to doing an online course on HTML5 animations called Adventures in Web Animations, which I did on Code School.

It was quite fun and felt very familiar, but it’s always good to brush up on your skills and usually you end up learning something new.

While I love Code School, it does have some limitations. The little projects you work on are completely in the browser, so it doesn’t really teach you how the entire process from start to finish.

After I finished this course, I looked a tutorial where it would walk me through, from start to finish, to create an HTML5 animation.

Click on the thumbnail to see my animation on GitHub:HTML5 animated banner ad

 

 

 

Time to React!

React

So, I’ve been wanting to learn React for a while now, but I’ve been so focused on learning Angular for the past few months, busy with rehab, planning a baby shower, and planning our wedding… phew!! But I’ve decided it’s going to happen now! So in my teensy bit of

free time, I’m working through some tutorials on Codecademy and I’m pretty excited!

For me, the trick to learning any new language or framework is to make time to spend on it a few times a week. If I spread out the learning too much, I have to review all the earlier lessons because I’ve forgotten everything already… but even if I just work on the tutorials for an hour, say, 3 or more times a week, it’s way easier to start remembering things! The key is to make it part of your schedule. Sometimes I’ll use my hour lunch break to do just that, so when I get home in the evening, I can relax and stop staring at a computer 😛

The other trick that helps is if you can set up an actual live project on your own. These online, free or cheap tutorials are awesome, but they aren’t quite the same practicing in the browser as it is working locally on your desktop and going through the full process.

I know I get a bit stressed if I have to do all my learning for real client-projects on the clock, because I don’t want to waste time and money, so it’s great to have those practice projects in your free time that you can take your time with and not worry about causing any great disasters!