May 1, 2014

Attending Toronto’s accessibility meet-up

Wednesday 30th April I attended Toronto’s Web Developer Accessibility Meet-up at Devlin.

My interest in accessibility stems from the drive to give everyone an equal opportunity to use the internet as they wish and with greater ease and if you want to learn more I can definitely recommend this meet-up group.

Room full of people sitting watching a person give their talk.

Monika Piotrowicz gives her talk on what developers should be doing to be more accessible.

Our first talk was from Monika Piotrowicz which explained from the basics on how to make your code accessible, more advanced examples and talked about the common problems users may encounter (I was shocked to realise I hadn’t thought of colorblindness as something I’d have to think about when styling my projects). Her slides should be online soon and I can’t wait to grab them, amazing information that all developers should know and understand!

Second talk was from Dr. Makayla Lewis about her studies in how companies update their systems and how these updates effect and frustrate users with disabilities. I loved how passionate she was and there were many points I found myself nodding vigorously. You see that rolling updates with services like twitter and facebook can frustrate people, my eyes were opened to the folks who need that level of stability or even just better communication from said services about what and when changes will occur.

Couldn’t recommend this group enough, I will be attending future meet-ups for sure!

April 17, 2014

Mentoring at Ladies Learning Code: Intro to HTML & CSS

On Wednesday 16th of April I mentored at Ladies Learning Code for Intro to HTML & CSS and for someone who was an intern at Kids/Girls Learning Code and had attended other LLC classes, I was very surprised.

“Why?” you ask (you’re asking, right?).

I didn’t realise how much I’d enjoy it.  Really enjoyed. I didn’t actually want the class to end, I wanted to continue helping students with questions and figure out problems and I can see why mentors come back again and again. Seeing folks working with code yet completely new to it can really open your eyes on the common things to teach and explain, knowing common problems means making better solutions.

classroom full of mostly women sitting at computers

Look at this awesome bunch of men and women ready to learn HTML and CSS!

For example we had our style tags in our head because for newcomers it was easy to see and work from one page however some students would have multiple style tags dotted in the html document both before and after the body.  I’m cursing myself that I didn’t ask how she came to the conclusion that she needed more than one style tag, what was it about the lesson that wasn’t clear you could do all style within one set of tags?

To clarify, there is absolutely nothing wrong with the content or teaching, it’s fantastic but everyone has their own way of approaching a new subject and empowering students to ask questions, to have them look to their neighbour and feel comfortable asking “Oh, why did you do it that way?” is what I feel, the way to go.

That morning Ladies Learning Code were interviewed by the BNN, view the video here (I’m in this for 2 seconds, yay!).

Next week I’m mentoring at the Intro to Javascript class held at The Lab, join us! :)

April 9, 2014

Code that had me stumped then I solved it #1

It’s probably a pretty gross blog title but hey, I’m not a poet.

Today I worked on the final pieces of how my page moves responsively and with that was my Navigation for smaller viewports. I wanted a hamburger than when clicked would pull down the menu from the top, I’d already done a variation of this a couple of months ago but alas it wasn’t fresh in my head. Having the positioning sorted just so was something forgotten (moving it minus pixels top so it’d ‘hide’ off the screen) by the way side but with a bit of time I got it figured out.

My classmate Nathan helped me with some of the HTML structure, problems with my checkbox had me confused but when he pointed out the problem I couldn’t believe I missed it. The fantastic thing about working in an environment with other coders, you’ve always got a pair of eyes handy!

Then my wordpress started to act up, on all pages except my home page the wordpress navigation top bar was moving or disappearing all together. Although this wouldn’t effect my users experience on the site (you only see it when you’re a user logged into wordpress) I knew if I wanted to continue working with this CMS that I’d need to sort out the niggle problems that arise from nowhere. Thankfully being able to debug with Chrome dev tools let me be very specific with the problem and I found the solution with the first link, hurrah!

If you have the problem where at 600px width the bar goes wonky, try this link, sure helped me. :)

April 2, 2014

HackerYou is done and now onto the rest…!

Well as you can see I haven’t made a post in 4 weeks, hackeryou got very intense and it was great! Who knew you could learn most of Javascript/jQuery/API/JSON and finally WordPress with a dollop of PHP in 4 weeks. I didn’t, but I do now! Met loads of awesome companies last week in our speed job dating, I’m not sure if any of them want me but that’s okay, I have the tools to continue with my studies and perhaps my knowledge will shine through at the next meeting.

My web site is now nearly complete, I plan on making some ‘level-up’ bars for the front page instead of the percent circles, I feel that’s more in theme and it’ll be cute! Gotta plop in some media queries to make it fully responsive and try to be more accessible. Making the page accessible through WordPress is a new experience but it’ll be great to know.

Going forward I spend my Mon-Fri at The Lab working on my own projects which I’m really excited to get going (yes, most are gerbil related, don’t laugh!) on AND I’m included in a new agency our group is setting up.

Here’s to the future and my new career. CHEERS!

OH! Hackeryou are still taking students for the part-time courses, check it out!

February 27, 2014

hackerYou week #5 Having our first company approach us for work!

Today we had a recruitment talk from Emma Woolley (@emmamwoolley) from The Phuse! It was the first company to approach us and it made an impression on me.

When I started hackerYou I knew it’d be good to have those freelance skills but really I just wanted to work for a company or agency. The ability to work and learn from others is too much of a draw to give it up and go lonesome,  you learn such unexpected things from working alongside a variety of folks.

The main positive I’ve seen from tech/dev companies here in Toronto is the conscious effort to help employees to learn further and allow them to grow.

This is exactly what I learned about The Phuse. Implementing 30 hour weeks allows growth, networking and volunteer time (or just ‘I need a day off to recharge my creative cells). Within reason you could work to the hours that suited you and with all the folks working remotely around the world you’d almost always have someone on your team available.

For me this is shocking, to have a company actively care for your welfare and nurture your talents is just mind-blowing.  I’ve only ever been thought of as a body to carry out tasks, never as a human being needing to push the boundaries of her education.

It’s easy to see that everyone at The Phuse are aiming to push the company forward both with keeping up with the industry and expanding their workforce, Emma came across as genuine and honest in her joy of speaking about her employers and I can easily say that enthusiasm carried over to everyone in class.

I may have spent over an hour tonight reading their blog.  Lots of great information in there!

Thanks again to Emma for coming in and talking to us, it really made my day and filled me full of excitement and confidence!

February 19, 2014

hackerYou week #3 Learning to set your habits responsively with @media queries

Boy was I shocked to see how simple responsive design is. A few simple media queries and then we’re off, how did I not know how to do this before!?  Thankfully I’ve forgotten all my bad practices from the early 2000’s and when coding a page from scratch I’m using percents for columns, thinking all the time about breakpoints.

The challenge came in our week 3 project where we were given a design mockup to code into a page using what we’ve learned.  It was brilliant to not have to stress over design and just work on the code.

February 14, 2014

Making a pseudo 3D cube with CSS3!

Tonight I’m going to try and explain how to make pseudo 3D cubes in CSS3!

I say pseudo as it’s only two divs positioned in a way that makes it look ‘3D’.  I suppose if you worked with the code more you could add more dimensions and ways to flip the cube.

For my second project at HackerYou I wanted to remake this site: http://www.abcgerbils.com/ and I really liked the design of the A B C children’s blocks.

Jumped onto codepen.io I found a neat green rectangle that when on hover flipped created by Robert Bue.   I then forked and styled it.

This is the beauty of codepen, I went from not knowing a thing about how Robert made this to somewhat understanding and learning a great deal in the process so many thanks Robert.  :) He had coded it in LESS (with LESS hat) but I’ve since compiled it into CSS3 and hope it can be explained that way.

Here is the final Codepen on the cubes and how it looks on my project.  It’s okay, I’ll wait until you stop moving over them so fast to create wave effects.

… Done?  Good.

Screenshot 2014-02-13 21.55.15

Each letter is made up of three divs and two spans.

.cube is our container to keep everything smushed nicely.  .default-state is what you see resting. .active-state is the side you see when hovering.  .letter let’s us style what’s inside. Go on, give it a try, remove or add letters to either spans.

That’s it!  Now to our styles on each of the different classes.

Screenshot 2014-02-13 20.41.32

.cube has 4 main styles.  The width and height is the size of cube container, take off the height and see what happens, it jumps down!  As it takes the height from the .active-state/.default-state but with nothing to ‘contain’ it, it’ll just jump down. Go put that height back on or our cubes will run away! –

webkit-transition: all 250ms ease; let’s us move from .active to .default within a space of 250ms, creating that smooth ‘flip’ effect.  -webkit-transform-style: preserve-3d; keeps our .active/.default facing us and not turning into flat pieces of paper.

Top tip: decrease the speed of the effect for some matrix slow mo cube action.

Screenshot 2014-02-13 21.37.46

Telling our square/cubes that we want the height to be 100px regardless of content.  If this was not here and you removed the letters our lovely square will will turn into a sad deflated shadow of itself.

Screenshot 2014-02-13 21.24.13

Now for -webkit-transform: translateZ(50px);

This is on our .default-sate, it’s telling us to keep it’s 3D state and lie on the bottom of the cube giving that continued 3D effect. The Z on the translate means it’ll keep it on the bottom of the axis, as the axis is in the middle of the 100px cube we want to push it down with 50px so it positions underneath.

Try changing the axis to X or Y and you’ll see the 50px pushes it in other directions.

Screenshot 2014-02-13 22.00.13

So we’ve already told .default-state what shenanigans we want it to do, now .active-state needs a kick up the arse.  First we want to transform in a 3D state on the X axis at 90 degrees.  If you give the degrees a wee wiggle you can see how it affects the cube.

Now this part was tough for a newbie like me to understand and explain, I could see the effect but not put it into words. When I slowed the movement of the cube the .active state moved from the middle (50px) to rotate upwards by 50px then to face front at a full 100px.

Screenshot 2014-02-13 22.29.45

Don’t worry, we’re nearly there!

This last bit of code completes the structure.  Now we’re joining everything together and telling that on :hover on .cube that we wish to rotate on the X axis at -89deg.  If we rotate at 89deg you’ll see our .active-state will be upside down!  If we change it to -90deg because why not, we want a right angle, right? Try it, now it does a perfect right angle but then cuts out our little lisp to give it that 3D effect so at -89deg we keep that wee bit poking out.

Have fun with rotating on the different axis (Y & Z),  with Y we can vision making the cube rotate left to right instead of up to down.

And that’s us! You can style your cube with the three classes of .cube then .active-state.default-state (both together unless you want your cube to look different on each side) and finally .letter.

Adding the border-box code also helps if you wish to add in a border, doing so without border-box will result in it oozing outside the 100px shaped square.

I hope I managed to explain this lovely 3D effect to you all.  Thank you for sticking with me and if I’ve explained anything incorrectly or you just want to harass me then please follow this blog or leave a comment.  :)

February 12, 2014

hackerYou week #2 Down the rabbit hole of CSS3

A week that my brain got battered yet I made it out alive.

Week 2 was jam packed with information!  From learning how to manage my time better on Sublime Text (snippets!) to fussing with un-ordered lists and how they form a navigation.  I’d already had lots of practice with lists, even a small part with navigation but wow the amount you can do, both with html and css was amazing and a little overwhelming! I’m not fretting too much, with each new project comes a new experience to flex those <ul> skills.

Second week project was to code a site that had multiple pages and included a drop down menu.  Half way through the project I realised I didn’t actually need to make all the pages in my drop down menu, just display the menu itself.  Therefore I created a far bigger website than I intended, whoops!

Screenshot 2014-02-11 20.58.03Let it be said, I shall never be a designer.  😉  Go click on the image though, have fun hovering over all the fun things that move!  I got the idea from another website (click the header ABC to see that site, if you want) on the ABC theme and carried it over to a ‘chalk and chalkboard’ ‘cuz I know all the kids these days are all about using abacus and writing on slate, right?

I focused on this sort of design to help me better understand how to position divs, how you can layer them and how to style and contain content.  However with all these experimental things it meant this website is the most unresponsive thing I’ve ever made, whoops!  Perhaps at the end of the course I’ll go through it and see what I could change to make it responsive.  :)

The most fun part was creating the 3D cubes.  I had forked a 3D rectangle off codepen and styled it.  In the process I learnt what LESS (with LESS hat) was (even if I don’t fully understand it) and different animations, how they can combine to create this great effect.

No, don’t ask me to explain it, you wouldn’t want me to spoil the blog post I’ll do later in the week, do you?

It may only be two weeks in but the best advice I can throw out there is mess around with code, take existing code, remove it, change it and work with it.  Understand what it does and learn to mold it.

Until next time, ta-rah!

-Feeona

February 4, 2014

hackerYou week #1 My time with fancy shadows

Shifting into a new sleep pattern for school was tough, learning a bazillion new things was tough but I survived, with a smile on my face!

Most of the things planned out for us in week 1 I was already familiar with which in hindsight eased me into the class structure and meeting new people. It was so nice to realise I have a strong grasp of the basics, my confidence grew knowing that this time last year I didn’t have an inkling of the skill I have now.

I enjoyed the confidence I had with positioning and floating, I know the next level is being able to put positions (absolute, fixed and relative) to good use.  I’ve used them in previous websites but never with a firm grasp of what they actually do.

Screenshot 2014-02-03 20.27.08The first weekly project was a lot of fun, design a one page web site! I spent 4 hours on something that I ended up not using (story of my life). It was worth it, I now know more about box shadows than I ever needed to know, how to add in extra elements to make the top element feel and look like it’s being peeled or floating off the page. Unfortunately it didn’t fix with the design nor, from a design view, understand how to make it give the ‘peeling’ illusion.  I had the skill but not the eye.

Screenshot 2014-02-03 20.27.18In the end even though my project was not flashy or cool looking I was happy.  It was responsive (to a point, I’ve still to figure out how to snap down side bars) and validated with no errors.  I also included a lot of comments to myself about the Javascript I’d like to learn to make the page do some things you often see in blog sites (clicking on the read more drops the page down and shows the whole article rather than loading it in a new page).

I hope with this week of full on CSS that I’ll learn a few more tips to add that design flare to any projects, excited for typography too!

Apart from design the things I need to improve on are not so much code related but with speaking. I found today that even though my voice stays firm I’m shaking like a leaf and forget to mention key things, there was a lot about my project I wished to get across but never did.  Perhaps cards should be used next time?  😉

Week 1 has come and gone and y’know?  I don’t want it to ever end.

January 23, 2014

Responsive design, my #1 priority.

It’s become apparent that more of us are using our phones and tablets as primary devices to browse the web.

50% of the average global mobile web users now use mobile as either their primary or exclusive means of going online – supermonitoring.com

And yet so many web pages I visit are still not mobile inclusive.  Either the layouts break, links get hidden or everything is just too small to read and who wants to zoom in and out to view the page?

Therefore learning to code for mobile is very important to me, I don’t have a business but I do want to reach a lot of people through my various websites for hobbies.

Screenshot_2014-01-23-16-20-18 For me Amazon’s mobile site takes all the pie and asks for more. Simple, elegant and most importantly gives all the information you need and want in an easy to touch and scroll format. I especially like the use of galleries or ‘other items you might be interested in’ having the horizontal scroll format.

I hope during my time with HackerYou that I’ll learn more about Mobile Development.

Page 1 of 11