Forem: /Sharkie/

The Need For Speed: Microsessions in UX/UI Design

/*Sharkie*/ — Sun, 13 Dec 2020 19:13:46 +0000

Look, it may sound backwards, but the less time a user spends on your app, the better.

Usually we design thinking a user will be spending a decent amount of time on our apps/sites, and try to make it look appealing. But when we start looking at it in a mobile context, it's really about usability, efficiency, and speed. Users want to do what they're trying to do quickly, without obstacles in the way. The quicker, the better.

And that is where Microsessions come in.

What are Microsessions?

Based on terminology used in an article by Denzil Ferreira and their colleagues, a microsession is a session that is shorter than 15 seconds. This can vary, with another study saying this is increased to 22 seconds for elderly adults.

But the basic gist of it is that a microsession is a very short session that requires minimal interaction and completes the user's end goal in a very short period of time. That sounds short as heck, right? But when you think of it, something as simple as checking the weather, checking your emails... these should all be accomplishable with microsessions. Otherwise, you'll just be annoying your users with the amount of time it takes to complete a simple task.

According to Ferreira's research, a little more than 40% of mobile usage is microsessions. Which, I don't know about you folks, but seemed like a lot to me. This isn't including things like reading articles, watching videos, scrolling social media... but just small checks. Less than 15 seconds. 15 seconds is not a lot of seconds.

Microsessions, but make it complex

Wait, didn't I just say microsessions are short? How can they be complex?

Well, they can't. But, you can use the same ideology to apply to your more complex apps and tasks. If you look at your app and think "how can I make this more efficient? How can the user reach their goal sooner?", you're working to improve the experience for your users, and thinking in the terms of microsessions.

So while it doesn't technically count as a microsession, it's good to keep in mind.

How to Design for Microsessions

Now we get to the meat and potatoes of this post. We know what a microsession is, but how do we include them in our process? Well, there's multiple ways.

Generally speaking, you should always try to make entry points to important tasks front and center - the easier they are to discover, the better, and the quicker a user can do what needs done. Anything people commonly do on your app is included in this, and you should always have important actions easily available.

Hell, maybe you should even consider letting user complete actions without ever having opened the app. Which leads me to my next group of topics...

Notifications

According to the aforementioned study, 60% of microsessions start with notifications. And you can see why - a notification is the quickest way to draw people into your app, and update them of important information. You don't even have to lead the users back to your app - the best notifications are self-sufficient. You can even have actions available right in the notification! This lowers the time it takes to complete a task, and creates even more microsessions.

For example, think about a notification for a new email - you can read the main information of the email right in the notification, and most email applications will give you options to reply right for the notification. You never have to open the app, you just type in your text and continue on with your life.

But if you do end up leading your users back to the app, please make sure you lead them to the corresponding page. If you drop them right to the home screen, they have to maneuver around and find the right place to access the information they want, and that takes time.

Widgets

Widgets are a bit less well-known than notifications, but they can be extremely helpful in the world of microsessions.

A widget is basically a compressed view of the app right on your mobile devices home screen. They help you track changing information, and you can interact with the app without ever opening it.

Widgets let users quickly inspect the app data, any changing information, and they can interact with the information quickly. For a widget example, think of a weather widget - you can open your phone and immediately have updated weather information, all in a very quick period of time. And depending on how you have it set up, you can scroll to see weather information for other areas. And all of this is done without actually opening the app, and very efficiently.

One thing to keep in mind with widgets is that you have very limited space, so you have to make sure you choose your information carefully. Only include the most important information, make sure it's self contained, and listen to what your users want to see. The more relevant the information, the more effective the widget.

Quick Actions

With the current mobile landscape, quick actions are becoming more and more popular. Usually activated by long pressing the app icon or with 3D gestures, this is a list of actions the user can take without opening the app. Everything can be done in the home screen, and it cuts down on time needed to complete an action.

While this isn't widely adapted or common knowledge yet, for the people that do use quick actions frequently it can be a massive boon and increase the user experience greatly.

Be wary of adding to many action items - you have a limited space, only include the most important items in the list.

Intelligent Assistants (Siri/Google Assistant)

As tech continues to grow, voice assistants are gaining traction and people are starting to use them more and more often to complete actions hands free. Using voice commands massively decreases the time taken to do something, and people like to do things in new and interesting ways.

Including this functionality can be more difficult, but if you suggest actions people can add to their voice command list you'll soon get more and more people using these assistants to access you're app.

Conclusion

Microsessions are crucial to good app design, as well as being easy to implement. Taking advantage of these technologies and techniques to help users is only a benefit.

While some of these methods aren't as well known by users, and you might not get a massive ROI, they are helpful both for you and the users who do know about them, and it's always worthwhile. Saving users time is always a job well done, and means you've designed something well.

Gaming the (UX) System

/*Sharkie*/ — Sun, 05 Jul 2020 16:52:27 +0000

Whether you love it or hate it, Gamification is a UX design trend that swept the world. Is it a dark design pattern? Is it a helpful tool to entice users to use your platform?

Whatever your opinion, Gamification is a thing, and it's a very interesting topic of discussion. I've always been interested in the little ways you can add elements of game play into your sites. It doesn't have to be anything big, but little aspects of it can really make your site shine.

But let's start from the beginning.

What Is Gamification?

Gamification refers to the act of inserting game mechanics into non-game technologies (in the case we're talking about, the web and all it's glory). No, this doesn't include web games or browser games. Though I guess you could technically work those into the definition...

Gamification is usually used to make the experience fun for customers, and is a very user-centered approach to design. This can be great fun, and draw users to your site. It can also be used for nefarious purposes, utilizing addictive properties to keep users coming back because they've become (usually unhealthily) addicted.

But we'll touch on that a bit later. Let's cover some examples now:

Challenges - humans are always looking for a challenge, and always wanting to complete challenges (no matter how small). This can draw people into interacting with your site, which is always a plus!
Points - who doesn't like seeing a number climbing up as you gain points? It makes the users feel accomplished and is a great metric to determine engagement.
Badges/Stickers - Visual forms of congratulations are always welcome, and add a pretty visual for your users. Gotta collect them all! (See- Dev's badges!)
Leaderboards - Healthy competition is never a bad thing, and striving to become the leader is a fun challenge! Also, all the more engagement (do you see the trend yet?)
Lots more, but these are the main ones, and I'll go off the wall if I list more.

Did you catch the trend? Gamification is all about engagement. If you want to increase engagement on your site/app, this is absolutely something you should consider. Yes, it's also about providing a good user experience, but when you're thinking about marketing and hard facts, engagement is where it's at.

Why does it work? Well, completing goals brings satisfaction, no matter how small the task. Competition is a great way to get more people in the mix. Points systems/badges give people something to work towards. It drags people in and hooks them, getting them to come back for more.

And this can be used in good and bad ways. I think we've gotten a jist of the good, but how are people using it nefariously?

The Issues

People commonly using gamification for marketing and to sell products/services. While this isn't inherently bad, it's not for the good of the user. It really depends on how you use the marketing aspects, and if you're being tricky or deceitful.

This is mostly why it's been giving a bad reputation. You can google the word Gamification and get 100s of articles about how it's a dark design pattern, how it isn't good for anything, etc. etc. And while I agree, some people use it in bad ways, there are perfectly legitimate ways to go about adding it.

Some things to do to avoid this:

don't include difficulty levels - this is fine in games, but not on websites/apps.
don't make it a requirement - some people don't want to play, and that's okay.
don't spam - nobody wants spam. Bad publicity is still bad.

Avoid the bad! Focus on the good!

The Pros

But what is the good we should be focusing on? Don't you worry, pet, Auntie Sharkie has you covered.

Rapid Feedback - you get to provide the user with instant pass/fail answers, leaving them satisfied and knowing where they stand.
Freedom to fail - let the users know it's okay to fail and that they can try again. People learn and have better experiences when they can explore and try different things.
Storytelling - one things games are great at is telling a story, and we learn and have a better experience when a good story is involved.

Basically, focus on the experience for the user, and appreciate how they learn and grow within the website. How the interact with the content, and how they react to those interactions.

How to Implement

So we have a good (or semi-decent) understanding of what Gamification is, but how do we actually make it work? Well, that's not easy to cover, but I can cover some helpful tips and tricks to adding it to your site!

Don't Compromise Integrity - if you're just adding it to benefit yourself, you're doing it wrong. Do it for the user, to make the site a more fun place for the user to visit. This will ensure your success so much more than just doing it for yourself. BUT - do think of yourself a bit as well. Make sure it's fun for the user and for you.

Always make it be a good experience - if it's bad, it'll just be a massive hindrance to your website, and users will never visit. A bad user experience is bad - don't do it.

Location - a not very thought of element - use location to your advantage! Let the customers feel like you know them, and give them a more personal experience.

Always Provide Feedback - let the users know if they did something wrong! Or if they did something right! They need to know you are there to help them through any difficult/frustrating times, and congratulations are always welcome.

Gamification Enhances The Content - it doesn't create it. Make sure you have good content before you even consider adding gameplay elements. Always, always have good content.

Personal And Fun - users are people! Treat them as such! This can be as simple as using their names to say hi.

Easter Eggs - I love easter eggs so much. They're fun little hidden elements of a website that you have to do something fun to unlock (i.e. Konami Code, my personal favourite). It's always so satisfactory to find something hidden on a website.

And that's a handful of helpful things! At least, I hope it is. You can take them or leave them, but now it's time for the fun part: examples!

Gamification in Shopping

Social E-commerce is on the rise, and China has already had a chance to try it out! Take a peek at Pinduoduo, a company that, within 5 years, became a 57 billion dollar company with an active user base of 585 million users. That's not a little growth. It's actually quite a big growth. It's actually the biggest growth in Chinese commerce.

Pinduoduo uses things like team prices, in-app games and credits to hook users and get more sales. You get credits for daily check-ins, playing games, and other fun things that have people coming back for more. There's also a feature called the price chop, where you can choose a product you want for free, share the link around, and if the link gets enough clicks you get a discount/possibly a free product! It's all about engagement, and in some ways addiction.

Now this is an interesting one. Is it a dark design pattern? Maybe. Does it work? It very much does! You don't think of online shopping would be as addicting as a game, for example, but this makes it so, and is obviously profitable. As of now, I haven't heard of anyone else doing anything like this, and have a feeling we haven't seen the last of it yet.

Gamification in Education

Education is always in a constant struggle to hook students interest while also teaching them valuable information. This is why gamification is such a big element in educational apps - from points systems to badges to progress bars, you'll find elements of it all over the online learning space.

This is because it entices students to learn. The majority of students say it made them more productive when learning with gameplay elements than without. And this is part of hooking the user - you want them to want to learn, and have fun while doing it.

A massive example of this is Duolingo, the language learning app that feels like a game to use. It includes multiple different gameplay elements, that all work together to get people learning new languages!

Gamification in Exercise

While not as prominent of an example, Nike has a running app that includes small gamification elements like a voice saying "You're almost at your goal, keep it up!" This motivates you to reach your goal and makes the user excited to complete their next goal.

It's not blatantly obvious, but it is gamification. Just a bit more secretive, and not in your face.

Gamification in Real Life

Urinal Fly

Have you heard of the urinal fly? I highly suggest checking it out.

The entire premise of it is that people will try to hit the fly with their pee as they pee into the urinal, thus decreasing the chance of missing the urinal. Yup, that's literally what it's for.

And it works!

It's been proven to decrease spillage! According to the above linked website, it keeps bathrooms 85% cleaner, because people have a target to hit and god damn it they're going to hit that target.

This, my dear friends, is gamification in it's fullest. It makes peeing into a urinal a game, for the purpose of keeping the bathroom cleaner. It's fun for the user, it's beneficial for the owner... win-win!

Danish Gas Station F24

I can't find the link for this anywhere, which I find absolutely devastating, but at some Danish gas stations you can play a game to win money off your gas!

Whose going to say no? I mean, gas is expensive enough as it is, I would love to win some money off my fill-up from time to time. It also makes the process of stopping for gas more fun, which is always a bonus.

But if you don't want to play, you don't have to. Spoil-sports.

Conclusion

Gamification is everywhere. From real life products to online experiences, you could pick out multiple elements as having something similar to games.

Whether you like or dislike this trend, it's an interesting concept to look into. I've always been intrigued by it, and will continue to enjoy seeing how it develops.

And Despite It All, Shayna Coded

/*Sharkie*/ — Sat, 07 Mar 2020 02:26:29 +0000

As with most of my posts, I'll probably ramble quite a bit, get lost in my own train of thought, and eventually tie it together in an unsatisfactory way.

But this, my lovely DEV friends, is the story of how I started coding, and got to this point of my life. Or, as I like to call it - how Shayna, became Sharkie.

It Begins

Let's start with high school. I went to school in Ontario, and to get your high school certificate you had to have a few different science credits - 2 mandatory, and a third.

Look. I was horrible at science. Physics? Chemistry? What is this wizard language you speak?? So... yeah, I would take any loophole to not do those classes.

Lo and behold, there were options! You either took a normal science, construction tech (trust me, you don't want me NEAR a saw) or... web design?

At this point, your gal was a Media Arts aficionado, starred in pretty much every theatre performance we put on. EVERYBODY thought I'd go to post-secondary for theatre. Everyone.

But with my Media Arts background? Web design is a natural next step.

And it just... clicked.

I was the only girl in the class. Everyone kinda just... ignored me. Other than the teacher. He was THE REAL DEAL, man. He inspired me, he pushed me to be the best I could be, and I owe a lot of my career choices to how kickass he was. Thank you, for introducing me to this career and for never counting me our.

Sentimentality aside, god damn I loved coding. We learned the very basics of HTML and CSS, and he even taught me some JS. I was hooked.

So when it came to choose colleges, I had a choice to make. Did I do theatre? Or go with tech?

Well, theatre is a very rickety thing to try get into. You never really have a solid career. Tech... well, that's more reliable.

So as I was scrolling through the college courses available in my college of choice, and I came across Interactive Media Design? You're damn right I was sold!

This was a crash course of web development, UI/UX Design, Graphic Design, Marketing, Photography, Videography, Animation... literally so much of what I loved in one program. I couldn't not.

College

Ahh, college. Sometimes I miss it, sometimes I'm glad to be out.

As I kind of touched on, it was a massive program when we learned A LOT. This has been both beneficial and hurtful - it's hard to find a job as an Shark of all trades, because people want specialists. And... I'm not.

But I loved it, generally. I loved everything I was learning, I was getting some pretty great marks... it was a great experience, honestly.

And I learned SO MUCH.

By the end, you had two paths you could take - Web Dev, or Video. I spent so long trying to make this decision, and to this day I'm not sure if I made the right one.

Obviously, I chose Web Dev. And I met more profs who taught me so much, and I'll forever be grateful to them. But once my video prof found out I wasn't going video... man, he actually came and wondered why I wasn't, and said he wished I was, he was disappointed, blah blah blah. And I felt bad, but not bad enough to attempt to switch - my films really aren't that good. I can use a video camera but never, ever ask me to be a director.

And then I graduated, and... here I am. But before I get to the looking back part, let's go through some silly college stories:

The Term from HELL

Picture this: fresh and new college students arrive, ready to face the world... and what do they get? Projects upon projects, so much so that if you had a job, you had to quit it to keep up with schoolwork, and even then you were usually up till 4am working on projects. And then back up at 8am to finish up the project due at your 1pm class.

It was torture. I barely slept, lived on coffee and pain, and spent 90% of my time in the computer lab specifically for our program. But don't worry, I wasn't alone - there was always someone pulling an all-nighter in the lab.

It was so bad, we collectively, as an entire program, went to our program head and told them something needed to change.

And it did! The last 3 terms were lighter, and we only had to pull 2 4am nights instead of 5!

Even thinking back to that term gives me shivers.

Camera Woes

Obviously, when we're doing photography and videography, you needed your own DSLR. And you took it with you EVERYWHERE. You never know when a great opportunity will show up.

(To be honest, I still have it with me a lot of the time. It's become habit.)

But I was sitting in class one day, near the beginning of the term, and my camera was just sitting on the table not far away.

And a fellow classmate.

Dropped it.

And
Broke
The
Lens.

Oh my god. I saw my life flash before my eyes. I had fo buy a new lens, I didn't have the money...

And so for about a month I did every photography project with my long lens. Every. Single. One. We had this camera test with our prof which I almost failed because I couldn't do 90% of the things with my long lens. But he let me slide because I was nice or something.

And then I bought a new lens and it's the same one I have now. Heck yeah.

The Terrifying Coding Exercise

So we had these little coding exercises every few classes where we went in, were handed a final project, and were told to recreate it. No code provided, just write it yourself.

Usually, these were easy and I was out in ~ an hour. But the one time... everyone was struggling. We were there 4 hours at minimum, and that's about when I finally solved it and left.

And that's when the texts started piling in. All about the one question we were all stuck on.

Is it a + selector, or a ~ selector?

I answered them all, and within another hour everyone was done and left.

Let's never do that again, please.

Reflections, Comments, and a Conclusion

This isn't your normal path into coding. It's odd, like me. It's what shaped me into the human I am today, and I wouldn't change it.

I sometimes wonder what life would've been like if I'd chosen theatre. I probably wouldn't make it far now, because I irritated a phrenic nerve in my throat and randomly hiccup. And nobody wants an actress who can't control when they hiccup.

But at the same time, I miss the stage. I yearn for it, and possibly I'll get back there eventually. Who knows what life will bring?

And for now? I'll continue trying to carve out my spot in the tech world. I know it's there, just waiting for me to find it. And I will. It just make take me a bit to get there.

Just a Big Tech Girl, Working in a Low Tech Business

/*Sharkie*/ — Wed, 26 Feb 2020 00:43:42 +0000

My last job and my current job have both been in small business retail marketing, which is basically this insane, fast-paced, one-person-does-everything-and-its-cousin job that I kinda sometimes love? And other times it sends me straight into the clutches of burnout.

But being a small business, I've ended up being the only Tech-savvy human in the company both of these times. Which is... well, it's been interesting. And there are some experiences that just make you laugh.

These are those experiences.

But like... this stuff is easy, right?

Nope nope nopity nope nope NO. Planning all social media isn't easy. Contests, giveaways, ecommerce, shipping products, receiving products, while also counting inventory, stocking shelves, serving customers and answering phones/emails? Every. Single. Day?

None of it is easy work. Whether you're working on the sales floor or working at a computer, it's all hard, and it's all very unforgiving. I've spent days running up and down stairs when they needed help on the floor. My legs are KILLER.

People also seem to think social media is an easy task. It's not. Trying to get engagement, think up post ideas, come up with lovely graphics and pull in followers, while trying to stick to your brands voice and what your target demographic love? It's HARD. There's a lot that goes into it.

This has turned into a rant, moving on.

SHAYNA... can you fix my computer?

sigh Yup, let me try turning it off and on again... there you go, good as new!

SHAYNNAAAA... the internet is broken, and I need it!

Probably the router, let's go take a peek at it shall we?

SHAYYYYNNNNAAAAAA... my phones broken. Come fix it?

I don't know phones! Try like... unplugging it?

Um... what the hell is on your computer? It looks broken. What's this weird language?

This has happened every time I leave code on my screen while I run off to do something else. It's all English, it's just... code. I'm working on the website. I can show it to you if you want?

This cracks me up every single time. I just... awww it's adorable.

Why does insert program here do insert thing here? Can you make that NOT happen?

Actually, no, I can't.

The program is it's own monster, and I don't control it. I know it getting confirmation to close every time you try to close it is annoying, but that's not something I can just fix. I'm sorry. :(

(Side note: if only I could manipulated every program ever. Wouldn't that be an amazing skill to have. "Yep, I can totally change this drawing program to make it a writing program, because for some reason you forgot Word existed.")

Why aren't you a manager yet? You know... everything?

Ahh, this old standby. I got this from a new store manager at my old workplace, and it made me feel... odd. I don't think I should be a manager, I would be a horrible manager and anyway I don't manage anyone. I just.. do my things and move on with my day.

But I think it was a compliment, so we're letting it slide.

What is this weird slogan you have on your coffee mug/sticker/shirt/other?

It's developer related, basically insert explanation here.

Them: oh... so nerd stuff.

So... what do you actually do?

The age old question. The annoyance I feel when I'm asked this is THROUGH THE ROOF.

I do so much. But if I spend the day on the computer, my fellow sales floor folks always wonder what I'm doing. And when I say "well I was making changes to the website, scheduling social media, setting up sales..." it's always "oh... so that must have been boring!"

It wasn't! I promise, this is some of my favourite parts of the job. But because they aren't used to this kind of stuff, not being on the floor is odd and seems weird and boring to them. So I don't blame them, but I wouldn't mind if it stopped. At least a little bit.

Conclusion

Look, this was a weird post. For all of us. But it sounded like a fun idea while I was driving home from work today, so now I've typed it out and can't take it back.

One of these days. I'll make it into a full out tech job, and these problems will melt away (maybe).

Flexin' like a Muscle - Advanced Flexbox

/*Sharkie*/ — Sat, 01 Feb 2020 21:07:17 +0000

So by this point, you should have a good grip of flexbox. You could maybe even call yourself a flexbox master. Go ahead, do it, I dare you.

Or you could do what I do and have my last 2 blog posts on Flexbox open in another tab. That's what all the masters do.

Let's take a wander on the flexbox road and take a gander at some of the Advanced techniques that will blow your mind!

Note: Please don't blow your mind if you have anemia, asthma, high blood pressure, a suspicious cloud following you, or would like to keep your brain in your head.

Let's Get it Started

....ha....let's get it started in here...

So if you haven't heard, flexbox is a way of laying out your web pages using the display: flex; property. You need a child and a parent element, and with those under your belt you can place pretty much any element on your page where ever you want it to be.

Advanced techniques take the simple parts of flexbox and combine them to help you make a gorgeous web page. And that's what we're going to attempt to cover today.

To be honest, I'm using this to help myself learn, so we're going on this journey together. And some of these might be simpler than you'd expect, but they count as advanced to me, so if you want to fight me bring it on.

Equal Height Columns

Look. It's hard to make columns stay at the same height. I've tried. It's a massive pain in my ass sometimes.

But what if we can do it... and have it be easy?

Take a peek at this:

.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

Literally just make sure that flex-direction and align-items are set to their default values, set the container to flex, and bam. You've got some simple, equal height columns.

This is 100% going to be a life saver. I know it.

Grow on Hover

You know all those cool image sites that, on hover, let's the image grow?

FLEXBOX CAN DO THAT. And it can do it easily!

.items {
    flex: 1;
}

Simple enough, we set all the items to the default flex value of one (this can also be written as flex-grow - flex is the shorthand).

But now we do:

.items:hover {
    flex: 2;
}

Whichever item is being hovered grows by a value of 2, while the rest are stuck at 1. Which means it fills up double the available space, growing in front of your eyes! A lot of sites use this effect for maximum sleekness, and now we can all use it as well.

To be honest, I've tried to do this other ways before, but this just seems like the easiest and (hopefully) fool-proof way to go about it.

Input Add-ons

Input sizing is an absolute nuisance. Designing and coding forms is probably the bane of every web designer and developers existence. I have never heard of someone who actually enjoys working with forms.

Without flexbox, trying to append or prepend an element is basically impossible. But adding flexbox makes it so, so easy.

Let's say we want to append something to the beginning of our input. We have this as our HTML:

<div class="add-on">
    <input class="addon-field">
    <button class="addon-item">
</div>

Simple enough - the field is the input, while the item is whatever we are appending (in this case, a button).

Now the flexbox code?

.add-on {
    display: flex;
}

.addon-field {
    flex: 1;
}

And... that's it. You'll have a beautifully appended button, which you can style however you would like, added to your input field.

Isn't that just magical? Sorry, I'm still in awe about this.

Margin: auto

Apparently, there's a little known fact going around - flexbox and margin: auto; are actually soul mates. I know, I didn't believe in the relationship either, but I guess they've got it all figured out.

The question: How do you override justify-content? I want to have 3 items with the value flex-start, but 1 of the items I want on the far right. And I don't want to hard-code the margins, this is supposed to be flexible.

The solution: margin-left: auto; that bitch.

What this does is it let's the left margin of the item fill all available space on that side, pushing the item to the far right of the container. So if you set justify-content: flex-start;, and then add margin-left: auto; to the last item, the last item will end up on the right while the rest of the items are at the start of the container.

Did I explain that well? Because I don't think I did. But I tried my hardest.

For more reading on this, check out this link: https://medium.com/hackernoon/flexbox-s-best-kept-secret-bd3d892826b6#.byxqvyhah

Conclusion

So I only covered... what, 4 different techniques? There are so many more advanced flexbox techniques and tricks. So, so many.

These are some I think are useful in everyday coding. They're things I never knew before, and will probably implement into my normal websites (well, until something better comes along). Which is what flexbox does so well - it makes layout infinitely easier. And being a combination designer/developer - that's an actual godsend.

Happy coding, my dudes. <3

The Short and Long of CSS Flexbox Child Properties

/*Sharkie*/ — Fri, 20 Dec 2019 01:07:06 +0000

Annnddddddd welcome back friends! This time, we're digging right into Flexbox Children, and the properties they come with.

Link to last post on Container properties.

What to expect from this blog post? More diagrams, more lists, and hopefully some helpful information. Maybe. We'll see.

Let's goooooooo.

Parent/Child Relationship

So last time we focused on containers, or the parent element of Flexbox. Today, we're looking into the children of said parents, or what's contained within the containers. Make sense? No? Well here's a visual representation for you to check out:

So, as we can see, a child element is a direct relative of a parent element. And when you set the parent element to display: flex;, the child element immediately inherits that and becomes a flexible item. With that, we have some new, child specific properties that we can use to manipulate these items.

Enter The Properties

Let's continue what we started in the first post on Flexbox Container Properies and use lists and diagrams to do some serious learnin'.

order
This property does exactly what it says on the tin - it defines the order of the items within the container. It takes a number value, which tells the object where to go: so if we, say, give Item 3 a property of order: 0;, it will appear at the beginning of the items, like so:

Whereas if we give Item 1 an order property of order: 4;, it will look like this:

Simple, yet effective. A good, solid property.

flex-grow
Now this is a little less simple, but just as effective.

So this let's the items grow to fit the available space, and defines how big an item is. The default value is 0, with no growth. But as you increase this value, the size of the item increases/decreases depending on the value of all of the other items.

Confused yet? I am.

Let's say you have a value of flex-grow: 1; on Item 1 and Item 2, but on Item 2 you set it to flex-grow: 2;. This means Item 3 will grow 2 times faster than the other flex items, so will look a little something like this:

This has some serious potential in making good, responsive websites. Which brings me to the next property:

flex-shrink
Guess what this does? Come on, I believe in you, I do.

This property shrinks the item it's on by whatever value you give it. The default value is 1, so let's say we gave Item 3 a property of flex-shrink: 2;. We'd end up with something like this:

So yep, it's exactly the opposite of the last property. Grow makes the item get bigger, while shrink makes them smaller.

flex-basis
Kinda connected to the above two properties, this also deals with the length of the items. This set the initial length of the item, and is measured by a length unit or a percentage.

I'm not actually going to diagram this one. Please scroll back up to the flex-grow diagram and imagine that instead of using flex-grow: 2; we used flex-basis: 200px;. Same result, but instead of letting the browser define the length, we are specifying it ourselves.

flex
A shorthand property that encompasses flex-grow, flex-shrink and flex-basis (in that order). Yep. That's it. Moving on.

align-self
This property specifies the horizontal alignment of the item in the container, and comes with a few different values.

align-self: center; - aligns the item to the center of the container (horizontally)
align-self: flex-start; - aligns the item to the top of the container
align-self: flex-end; - aligns the item to the bottom of the container.

So for this next diagram, I'm going to show an example of all of the items (as well as a default item without this property attached). Item 1 is the default, item 2 is align-self: center;, item 3 is align-self: flex-start;, and item 4 is align-self: flex-end;.

Don't worry if this doesn't make sense! What works best for me is coding up a simple layout (usually something that looks exactly like my diagrams) and playing with the properties and values.

Conclusion

Wait... that's it? This felt a lot shorter to write than the post on container properties...

But I hope this was helpful to you like it was to me. And if not, that's okay too! There are so many great resources out there on Flexbox.

And this is just the beginning. There are so many advanced techniques, specialized use cases... I have a feeling I'm not done writing about Flexbox just yet.

The Long and Short of CSS Flexbox Container Properties

/*Sharkie*/ — Wed, 04 Dec 2019 19:33:58 +0000

Layout is hard. And trying to use floats is a massive pain in the ass.

But what if we had a tried and true method for writing responsive layouts? Enter Flexbox.

What is Flexbox

Flexbox is a way of aligning content on a web page. It makes elements easy to shrink and expand, and involves a lot of unique CSS properties that make responsive design that much easier.

Now, if you're planning to have a 2 dimensional layout, Flexbox might not be right for you. The best place to use Flexbox is with a 1 dimensional layout, where you have a lot of different elements you need to organize and make responsive.

Family Matters

Flexbox relies on the parent-child relationship a LOT. You have to have a container, which you fill with all of the different elements you have in your layout.

The above diagram shows a basic layout, with a container holding 3 different items. These 3 items could be anything - pictures, a sidebar, the entire main content of your website - it's literally all up to you. You just have to make sure they are contained within a container before you can start using Flexbox to it's full potential.

In this post, we're only going to cover container properties. Keep an eye out later this week for a post about item/child properties!

Flexible Containers

So before you do anything, you need to set the container to display:flex. This tells the computer that this is now a flexible item. Incidentally, this should set your items beside each other. So if, say, your items look like this without the display:flex:

It'll end up looking like this with the display:flex:

Now, this obviously has some caveats. My images have margin added, and no set width. If you do have a set width, that'll change things. The biggest recommendation I can give is to play around with it and see what works best for you.

Container Specific Properties

Let's talk about manipulating the container. Now that it's flexible, we have different options and things we can do with it.

flex-direction
This defines the direction in which the container stacks the items. The different values you can give this property are:

flex-direction: row; - default option, items go horizontally left to right
flex-direction: row-reverse; - items go horizontally right to left
flex-direction: column; - stacks the items vertically
flex-direction: column-reverse; - stacks vertically, but this time from bottom to top

I've tried to make it sound as simple as possible, but if your like me, that still sounds like a lot of gibberish. So I'm going back to my handy diagrams to try and visually explain it:

flex-direction: row;:

flex-direction: row-reverse;:

flex-direction: column;:

flex-direction: column-reverse;:

Hopefully you've got a basic understanding of what flex-direction does at this point. Now, let's move on to another property...

flex-wrap
This specifies whether the items should wrap or not - with nowrap, the items will stay on one line, with wrap, they will create a new line. There is also a fun thing called wrap-reverse, which makes them wrap, but all in reverse.

Let's do some diagrams:

flex-wrap: nowrap;:

flex-wrap: wrap;:

When you have it set to wrap, the spacing and items will adapt to the screen size. When it's at nowrap, the items will overflow (as seen above).

And that's flex-wrap! Simple, yet so so powerful. Now on to...

justify-content
Simply put, this property is used to align the items horizontally in the container. It contains such values as:

justify-content: flex-start; - default, aligns items at the start of the container
justify-content: flex-end; - aligns items at the end of the container
justify-content: center; - aligns items to the center of the container
justify-content: space-around; - leaves space before, after and between the items
justify-content: space-between; - leaves space just between the items

Did you get all that? The values are semi-self-explanatory, but I think we need diagrams anyway because I enjoy cobbling these together. (And yes, some of these might be the same as before. Sometimes they just match up well.)

justify-content: flex-start;:

justify-content: flex-end;:

justify-content: center;:

justify-content: space-around;

justify-content: space-between;

The difference between space-around and space-between is minimal, but as you can see it does still make a big difference. Always make sure you're using the property that best suits what you're trying to accomplish!

align-items
"But wait" I hear you exclaim, "didn't we just talk about aligning items with justify-content??"

Yes we most certainly did. But align-items aligns the items vertically, instead of horizontally. Super helpful, right? We're going to have to change the diagrams up a bit for this one, but let's first do an overview of the values.

align-items: center; - aligns the items vertically in the center of the container
align-items: flex-start; - aligns the items at the top of the container
align-items: flex-end; - aligns the items at the bottom of the container
align-items: stretch; - stretches the items to the same size and fills the container
align-items: baseline; - aligns the items to the baseline of the text inside them

This is definitely the property that confuses me the most, which is why I'm trying to break it down to it's base components. Let's do diagrams.

align-items: center;

align-items: flex-start;

align-items: flex-end;

align-items: stretch;

align-items: baseline;

As you can see, I actually added a dashed baseline in so we can all tell where the alignment is happening.

And, hopefully, I've covered that correctly.

Off we go to another similar sounding property:

align-content
This is used to align the flex lines. Yep. This is basically the same thing as the above, but instead of focusing directly on the items, we're manipulating the flex lines.

Now, I'm not going to go into detail about the values here. No diagrams this time, as all of the values are quite similar to the justify-content values.

Instead, we'll stick with a list.

align-content: space-between; - leaves equal space between the flex lines
align-content: space-around; - leaves equal space all around the flex lines (not just between)
align-content: stretch; - stretches the flex lines to fill available space
align-content: center; - centers the flex lines in the middle of the container
align-content: flex-start; - aligns the flex lines at the start (left side) of the container
align-content: flex-end; - aligns the flex lines to the end (right side) of the container

And that's the general gist of it. Honestly, if you need a visual representation of this, take a peek at the diagrams under the justify-content section - it gives the same general view as this would.

Conclusion

Well, this was fun. At this point, if you made it this far, you should have a general idea of how to style a container when using Flexbox. Again, I seriously suggest opening up CodePen and just messing around with some divs and boxes to get the feel for Flexbox - I've spent way too long playing around with it myself.

I mean, hey, if you want to peek at that here's the link for it:

And again, I will write something about child properties later this week! That way we can cover all of the bases and not take up all of your time.

Until then, happy coding babes. <3

Gimme your best Tech book recs!

/*Sharkie*/ — Sun, 22 Sep 2019 13:35:31 +0000

As the title says - I want some tech book recommendations! I don't usually read tech books, and that seems wrong.

I'm especially interested in anything front end related, design related, and in general something written in a fun, easy to read tone.

Fire away!

Learning From The Past #3 - Internet Accounts!

/*Sharkie*/ — Sun, 15 Sep 2019 14:50:57 +0000

Gather round, let me tell you a story. Filled with adventure, chaos, old school technology, and most importantly... internet accounts.

Yes, accounts to access the internet. Or, more importantly, a single account. To access the entirety of the internet.

Hold your gasps, please. Let's start at the beginning.

Chapter 2 - A Dollar A Day Keeps The Internet At Bay

This book likes to start chapters with quotes, so we may as well share them!

"'Come on, then!' roared the Queen, and Alice joined the procession, wondering very much what would happen next."
Alice in Wonderland

Why this quote? I don't know! Possibly because the internet was just starting to come around, and this book is trying to get people to come along for the ride? I'm going to assume that's it, because there's no other good explanation for this.

So You Want To Join The Internet

How do you go about it? Well, we've got 40 textbook pages describing all of the options in detail, so I hope to god that, by the end of this, we have a good idea of just how to get an account on the internet.

"But Sharkie," you say. "You've mentioned that a few times. What makes an Internet account different from, say, a Dev account?"

Well, dear reader. an internet account makes it possible for the service provider to identify that yes, you are allowed to access the internet. It also allows them to bill you, and helps them with their accounting. So it's not that different, except that it let's you access all of the internet.

But you actually need 3 things to get hooked up - an account, the proper equipment, and a connection.

Back in the 90's the proper equipment included things like a telephone (yay dial-up), terminal, PC, modem or communications program. Some combination of all of these things will get you up and connected to the internet, as well as a phone line or an Ethernet connection.

There's also a good chance you'll need to learn a little bit of UNIX. Remember, this book was published in the 90s. Nowadays? I'm a Dev and I couldn't confidently say that I know much UNIX. But back then, that's how you ran your computer. That's how you did things. But we're not digging into UNIX until Chapter 12, so let's not dwell on that fact.

Let's move into the real, deep, despair-worthy info.

Who Ya Gonna Call?

According to this book, "How do I get an account on the Internet?" and "Who do I call to join?" are some of the most frequently asked questions about the internet. The latter is also (almost) the most FAQ about the Ghostbusters. Go figure.

The answer? "People wanting to connect to the Internet should call InterNIC." This is from Steve Wolff, the director of the Networking Division at the National Sciences Foundation. And we have a phone number! 1-800-444-4325.

So, I wouldn't be a very good blogger if I didn't give you all of the info. And to give you all of the info, I have to take risks. I have to search for all of the information available.

So I called this number. I don't know what I expected - did I expect to get InterNIC and an account on the internet? But what I got was even better...

Or not. It was the Blue Cross and Blue Shield of South Carolina. Specifically, the federal employee office. And it was an automated message that warned me to call 911 if this was an emergency.

And that's about where I hung up and giggled wayyy too much. I would've hung on and waited to get a real person, but I'm not that gutsy. Also, I probably would've giggled through the entire conversation.

So. If you want to get an internet account, this number is a no go. Shame, really. We need more options.

Option 2

This book quotes an anonymous network user: "If you don't already know at least one person in the Internet community, you probably wouldn't be wanting access - so call that person!" And, since we are all currently on the internet right now, and I'm pretending to not have internet, I'm putting the call out to you - Hello, internet friends! How do I get an account on the internet?

I await your replies.

Stop Making Jokes, This is Serious Business

"But, like choosing a car or a long-distance carrier, if you're new to using the Internet, you may need to research and think a bit before making final choices."

You don't want to just jump into it. It's a big commitment, you know. A whole buck a day! You could buy a coffee and the morning newspaper for that much money.

But in all seriousness, thinking is a good thing. It's important to know what you're in for, and what money you're spending. It's important in everything, from big purchases to small ones.

Tangent time, but I work in retail (marketing specifically, but I also am a cashier). I'm also a person who would never, ever think of returning something. For any reason. That's just not something I do.

But the amount of people who bring something back that they impulse bought is INSANE. Seriously, it would shock you to learn just how many people come back in and go "Well, I didn't need this. Can I return it?" This could all be avoided by thinking about the object, about how much it costs, and deciding at the time if you really need it.

Okay, back to the internet.

It's a commitment. It is. You need to make sure you're getting exactly what you want, and what you need. So think about it.

But don't worry! You can always get a new account - just ring up the phone numbe-oh. Right. That doesn't work anymore.

Ummmmmmmm.

Well. There's probably a way somewhere.

IAP

Welcome to the stage, Internet Access Providers!

Yes, those old lovely chaps. We even have them still! Modern day and the past collide to create something gorgeous.

And that gorgeous thing.... is a list of IAP's.

Photo Courtesy of TechTerms.com

Well..... okay. Maybe we called them Internet Service Providers (ISPs) now. But back in the good ol' days, they were IAPs and there were a few of them. Now, there's a lot of them.

And according to this book, the full list of 90's IAPs would fill a book in itself. And I've been trying to search for an online list, but nothing is appearing. So... that might just remain a mystery.

BUT. Back in the good ol' days, they did have lists! And you could get them through fun ways such as "voice phone", e-mail (but isn't the whole point to getting this list to be able to access e-mail?), modem, FAX, and "even sending a letter". Isn't that a fun, modern bunch of ways to get access to a list of Internet Providers?

Time is Money

But how long does this process take? It seems like FOREVER, and I'm impatient.

Well, as mentioned a few times in this ONE PAGE OF THE CHAPTER, this process can be as simple or as complicated as you make it. Want to put a ton of research in? It'll be a while. Want to do it fast and easy? It might take an hour to get you up and running and you're free to go. It's all your choice, really. How much time do you want to spend getting on the internet?

But Sharkie... Why Do I Need The Internet?

Why don't you need the internet? The internet is this gorgeous, wonderful thing that is filled with information for enthusiasts and casuals alike.

How about telnet, ftp, Gopher, the WorldWideWeb, and internet services such as archie's list (which is full of public domain files and documents). How about e-mail. How about Internet Relay Chat.

That's... about it. But that's a lot of stuff, okay?

This brought up the question... What is "archie's list"? Is it still available.

The answer is no. No it's not.

Okay, but why do I need an account on a computer system?

Woah woah woah, computer system accounts?! We haven't talked about those yet.

But yes, you most definitely need one. Especially if you want to access the internet. But this opens up a whole new world of possibilities, like:

Applications - think text editors, word processing programs, spreadsheets (I like me a good spreadsheet), emails, software that YOU WRITE YOURSELF and "online CD-ROM".
Space in the file system to store all of the above.
Use of devices such as printers, modems, and... other devices.

But... what kind of information do you need to give up to get these accounts? Because obviously it has to be personal. You couldn't be anonymous on the internet like we are now.

And this, my friends, was the birth of the username.

Photo Courtesy of Chandoo.org

Yes friends, the username. We all have multiple. Probably. Mine is justsharkie, nice to meet you, glad we could have this chat.

But back in the 90s, what were usernames like? What was the criteria to write a good username?

Thankfully, this book gives us the answers.

"Your username is usually derived from some combination of your first name, last name, and initials. For Alice N. Wonderland, it would be:

Last name, all or up to eight letters: wonderland, wonderla
First initial plus last name: awonderland, awonder, a_wonder, alice.wonder
First name plus last initial: alicew, alice_w
Initials: anw
First and Last name: alice_wonder, alice.wonder"

Creative.

I like Sharkie better.

Just make sure you didn't put spaces!

With Every Great Username, Comes Great Passwords

Passwords have been a thing since the dawn of time. Seriously. T.Rex69 had to have some way to keep his twitter account safe.

Some places assign passwords, some let you choose, but the method that will survive until the end of time is rejecting your choice if it's too short, or doesn't contain a %$&@# sign.

No no no, that's just the special characters. Sorry, it's confusing, I know.

They probably wouldn't let you swear either.

Easy, Inexpensive... So why not get 2?

So at this point, you probably don't have an account on the internet. It's 2019, not 1990. We have many accounts on the internet.

But what if you wanted another one? I mean, why not? We dual-boot computers to have both Linux and Windows/Mac running on one machine. This isn't that different.

But what reasons would you give for wanting another account?

Your current account is through work/school, and you want a personal one for inappropriate things. For example - sending personal email (job hunting, specifically), participating in discussion groups, retrieving files unrelated to work (wink wink) and participating in multi-user interactive games (like CHESS or BRIDGE).

Yes, I need my new internet account to play chess. Sexy, sexy chess.

It's going away soon. Makes sense.

And that's the only two options this book gives. So that are the only two reasons there could be.

I don't make the rules. This book does.

Individual Internet Account

Finally, we can learn how to get an account... oh wait, some more decisions first.

So we've barely talked about the money involved. The internet isn't cheap, we all know this, we all pay our internet bills and sometimes cry over them. Or at least... I do...

Some questions to consider - do you want to pay hourly rates? A fixed monthly rate? Where you live definitely has an impact.

Let's get into some numbers.

So you want to pay per hour:

According to this book, the price can range from 1$-2$ per hour. So if you don't plan on using the internet for too many hours a month, this is probably the right plan for you.

But if you use it for more than a few hours a month, that's going to start adding up. 50 hours = 50 bucks, and while in 1990 you probably weren't going to use the internet for that long, it's still something to consider.

So you want to pay a fixed monthly rate:

Generally speaking, fixed prices would range from 15$ to 50$ depending on what kind of access you were going for.

Nowadays, double that. Then add some. Then add a bit more...

So you live in the middle of nowhere.

Hello, my middle of nowhere companions. How's the weather out there? Here it's a bit cloudy and the cows are mooing like there's no tomorrow.

Getting internet in rural areas has always been years behind getting internet in urban areas. I had dial-up until the late 2000's. Because there was no other choice.

So it was even possible for you to get internet in your rural area back in 1990, it wasn't going to come cheap. And it wasn't going to be great.

This book doesn't give a ballpark estimate for rural internet, because the author had no clue. So it will forever remain - unsolved.

So what have we learned...

So far... this chapter hasn't said all that freaking much. I haven't learned all that much, or how to choose the perfect internet account for my needs. But don't fret yet - there is still A LOT of information to get through. Like, so much. I've got so many sticky notes left.

But, for the sake of digestibility and getting out that #content, we're going to break this chapter into multiple blog posts. That's right folks, this has become number 3.1.0.1.

See you shortly.

Learning from the Past: History Time! #2

/*Sharkie*/ — Tue, 23 Jul 2019 19:04:47 +0000

Hello again everyone! We're back at it, reading The Internet Guide to New Users, and we've finally reached Chapter 1! And honestly? This chapter taught me some things. I was shocked. And it was interesting!

See Post #1 here.

Chapter 1 - Internet History and Technology - A Brief Introduction

That's right. It's history time. Before we can really dig into the internet and all it's connected networks, we have to understand how it came to be. Right?

But First!

"Sufficiently advanced technology is indistinguishable from magic."

Arthur C. Clarke

I can't not include the Arthur C. Clarke quote. Especially when it's one of the very first things the book throws at you!

Sufficiently advanced technology... I wonder what the author of this book thought as time went by, and everything became even more advanced? This quote barely does it justice. Technology has gone far beyond what people in 1993 would've thought it ever could, and it's STILL going farther and farther. As we all know, it never ends! There's always new things to learn.

There is also another quote...

All the worlds a net! And all the data, merely packets.
Come to store-and-forward in the queues a while and then are
Heard no more. 'Tis a network waiting to be switched!

Vint Cerf

I like this because it's a fun twist on Shakespeare. And I just like fun things like this. Carry on.

Meet the Internet

Let's dig into the real meat and potatoes of this chapter and really learn about the internet! And let's start by a lovely comparison to the past...

"You don't need an in-depth knowledge of computer networking to be an end user, any more than you need to know how television broadcasting works in order to use a VCR."

REMEMBER VCRS?!? This makes me want to go and pull out my old VCR tapes just to see which have survived the inevitable second hand store drop off.

Can VCRs come back like vinyls did? I miss having a big old honking tape that would unwind all the time. And trying to wind it back up without wrecking it... brilliant.

Anyway, this is a good point. You don't need to know how the internet works to use it. And a good huge chunk of people don't know how it works as they use it. So we have to work for them, and include them in our planning, our designing, our development... It's the basics of the internet. Design for the user. The "user is always right" (you will not convince me of this I don't care what you say). The user is our target, our client, and our main goal.

We must please the user.

Join the user cult-NO. I've gone off topic...

The Electronic Taffy Pull

Put data in = input.
Push it around = processing.
Hang on to it = storage.
Let go of it = output.

Simple as.

I kinda like this way of looking at it. It's simple, straight forward, and kinda works. Makes it easy to grasp. Especially for people who don't see all the 1s and 0s.

We also get into the "very earliest" days of computers, where everything happened in a big, air conditioned room. The "computer room" was where you had to go to grab whatever you needed. Thankfully, we can now have computers in any room. Right now I'm writing this on my couch. I might finish it in a Cafe. The world is our oyster, and it is a magnificent one.

I like to complain about the speed of my internet. A lot. I live in the Canadian countryside, and as of the time of this writing, I've got 2.18mbps Download, and 0.98mbps upload.

Hold you're shock till the end, please.

But this is miles faster than what they were used to at the beginning of the internet. Quoting from the book:

"For example, 'Hey, I got an e-mail message for Joe on the Macintosh in the corner office', 'this is a file for the big PostScript printer on the second floor.'" Computer: "'Slow down, I can't take information this fast!'"

Even my horrible internet connection can receive an email and send a file to the printer at the same time. Hell, I can receive multiple emails! Go figure!

I can message with a friend across the world and they'll get it instantly. And back then? Good luck having a friend across the world. You'd never have gotten the chance to meet them unless you took a plane over there.

"And they wanted to go further--beyond the walls of the buildings, and the boundaries of the campuses, beyond where their organization was allowed to run wires of its own."

Welcome, my friends, to the World Wide Web. We did it. We went beyond the buildings, beyond the campuses! We went everywhere. And you know how exactly we got there?

Dialing for data: Boop boop a doop.

That's right! Dial up internet. I'd insert the horrible dial up noise, but I don't want to torture you.

I mean, it just made sense, right? Telephone lines are everywhere, why not use them to transfer the internet as well? Sure, they use sound instead of electronic signals, but that shouldn't be too much of an issue...

And welcome to the stage; the modem. Modems MOdulated the computer signals into tones, then DEModulated them back into their original form when it reached it's destination. So you had to have a phone and a modem, and the place you were trying to connect to needed a modem and a phone to make it work.

I did not know this. I had no clue that modem is actually a weird kind of abbreviation. I love it.

At the time of this book's publication, you couldn't actually use a modem to connect to the internet. You used it to connect to BBSs, email systems, and LANs. But they also predicted it would be used for the internet, so good job them.

But us being humans, we needed it to be faster. And cheaper. And we wanted to connect to more computers.

Enter - shared lines.

.
..
...

It's as simple as it sounds. You have computers that share a computer line. You can't overload it, but as the book says "Computers work very fast, while we tend to move - by computer standards - very slowly". So while one computer is waiting for input, the other computer gets to scoot in and do what it needs to do. And they takes turns, switching back and forth, so it seems like a continuous connection when it's really not. You might get a busy signal here and there, but that's okay - it's the internet!

And then... packet switching.

"You can send a book to another destination through the post office page by page, by putting each page in an envelope, writing the destination and return address on the envelope, plus the page number, so the recipient could reassemble the pages into the original book... Similarly, it was proposed, computer users' streams of traffic could be split up into series of packets."

And folks... that's what they did.

ARPAnet is the U.S. Advanced Research Projects Agency and they decided hey, packet switching sounds cool, post offices do it all the time - let's do it on the web. Because it was done on computers, they could be programmed to do a number of other tasks - things like calculating the best network and determining which parts of the network weren't working. Because it could do this so quickly, you'd rarely see a drop in connection.

Th internet has been created! Everything is becoming connected! You could send something from one campus to the other, and it would actually get there! Excitement!!

Networking for Success

The ARPAnet was a massive, massive hit. It just didn't stop growing! On average, one new computer was being hooked up every 20 days.

And this is where I admit how very little I knew about all of this. I had never heard of the ARPAnet before this book. Nope. Never. And now I know. It's awesome.

Does this make me sound young? Have I just given a hint at how young I am? TOO BAD.

Guess whose joining the race next?

Defensive Maneuvers

That's right, enter the U.S. Department of Defense and DDN. There is always a defense connection. Always. Even I have a defense connection.

The Defense Data Network (DDN) was a combination of ARPAnet and the Department of Defense that ended up developing satellite and radio packet networks and connecting it into the ARPAnet.

And guess what? With all this new stuff going on, we need some protocols. Transmission Control Protocol/Internetworking Protocol (TCP/IP) was born.

There's honestly less in this book about TCP/IP than I thought there would be. Like, the entire section kinda was just like "hey this is thing, isn't it cool, and DEFENSE". So I'm going to Wiki it and see what I can find. Brb.

Here you go, I know you're lazy.

Basically, it provides end-to-end data communication that explains how it should be sent places. Transmitted, routed, addressed, all the things. It just covers those.

(Please don't hate me, I'm trying to be funny. I'm also probably wrong, I just skimmed the wiki page.)

Let's have another quote:

We had an Internet running in full swing in 1979 - we just didn't insist everyone use it until 1983 when enough implementations [of TCP/IP] on different platforms were available.

Vint Cerf

But Why Internet?

Where did the name come from? Well, the term for the whole thing was internetworking, and since we are humans, we like short things. So it got shortened to Internet, got itself a fancy capitol I, and became the Internet.

Quite simple. Quite easy to understand. Quite explanatory. I like it. Good job, folks. Simple simple simple.

Skipping A Bit...

There's a lot of info about the NSFnet, the NREN, and other things that, while interesting, would make this much longer because I'd go on for it forever. So this is the section where I shill the book and say "Buy it to find out more!"

Link to Amazon store..

Eventually, Everything Goes To Shit

This is literally what my sticky note says, and I think it's very appropriate. The actual title of the section in the book is "Commercialization and appropriate usage: respecting and getting around government rules", which is also a good title.

The internet is growing. Back in the beginning of ARPAnet, the only organizations who could connect were people related to U.S. research or defense, and the rules were loosey goosey. If something was blatantly bad, you just went "woah, Joe, dude, not cool" and Joe would be banned or something along those lines. Anything super inappropriate was dealt with, everything else, meh, there's not that many people, who cares.

Once things became more commercial, the rules became a bit more strict. Certain things were forbidden. There were clear definitions on what you could or could not do. Then the Commercial Internet Exchange (CIX, pronouced kicks) was introduced. In simple terms, instead of going straight from one place to another, you would go from one place, to CIX, to the other. This opened a whole new can of worms. Before, the internet was basically like little islands. But now, there was a connection between the islands. They could finally talk to each other!

There's a quote in this book that both dates it, and helps to explain. A bit.

When I was growing up... we had two systems: Keystone Telephone Company and Bell... They didn't interconnect - so you had to have a phone and phone number from each, to be sure you could reach everyone. Similarly, without a CIX, you have only separate user communities, one for each commercial Internet carrier, and that diminished the value of each to all their subscribers. The value grows as a power set - the total number of subsets - of the user populations."

Steve Wolff

In my terms, either you connect to some people, or you connect to all the people. Which would make the most sense?

Exactly.

Using CIX, you could have tech support, cooperative program development, file backups... all without worrying if it's going against some government rules.

And there's the kicker.

You now have a place without rules. And if Lord of the Flies taught me anything, it's that rules are important. (Absolutely boring book. Fight me.)

The internet was no longer just for research, education, and government use. It was for anything and everything. And look at us now - in general, we can talk to whoever. All of our islands are connected. The internet is this massive bridge, and anyone can make anything on it.

It's great. It's amazing. It's terrifying.

Internet, 1993

1.5 million plus computers. Worldwide connections. John Quarterman declared it "the matrix", and the name stuck.

It was as big as the largest cities, larger than most countries. It supports more magazines than the biggest newsstand, and there are hundreds of thousands of emails every second.

There was so much promise, man. I hope these people are proud.

Conclusion

Welp. We did it. We made it through Chapter 1. I've spent the last 3-4 hours pouring over my notes, trying to figure out what to include, what to leave out... It's been a time. But... I'm actually kind of enjoying it.

This section was great. I'm young, I've never really dug much into the history of the internet and how it came about. Some of you reading this probably lived through all of this, and are like "wow these young whippersnappers never get anything right".

I've not done any of this justice. And I've barely made any good jokes. But in the end, I hope you enjoyed this as much as I did.

Off to Chapter 2!!

Learning from the Past: The Internet Guide to New Users #1

/*Sharkie*/ — Tue, 09 Jul 2019 18:35:21 +0000

In this field, we are always learning. Always. It never stops.

But normally, we're moving forward. We're learning the newest technology, the newest way of doing things... we never look behind us because there's no point. Everything back there is basically obsolete, things have changed.

But what if you end up with a massive stack of old tech books? Do you just chuck them in the fire? Or do you start a blog series digging them apart bit by bit?

Background

So at an old theatre job of mine (not tech related at all), I got talking to a man who started his tech career back in the 90's. It was a lovely chat, we just talked until the play started and then it was done. I didn't think much of it.

Fast forward to the end of the season, and he arrives with a massive box of old tech textbooks. He said he had no use for them, and thought they would help me in my future career. And me, being the nice Canadian I am, I put them in my car, thanked him profusely, and threw them in the darkest corner of my closet.

I haven't even looked at them in ages. There's books with the title Turing, books about C++ (a language I don't know and have never known), the HTML Web Publishers guide (which came with a CD-ROM!) and many, many more.

And now? I've decided I'm going to do something with them.

I'm going to go through them and write blog posts on them. Because that sounds like it could be fun, and then they aren't just massive wastes of space. And I don't have to throw them in fire (yet!)

What to Expect From This Trash Fire

My witty humour, lots of old school tech info from the 90's, and me probably laughing. A lot.

But hey, maybe we'll all learn something along the way.

The Actual Content

The book we'll be starting with is... drumroll ......

The Internet Guide for New Users by Daniel P. Dern!!!

(Link to buy the book.)

This book proudly claims that it isn't confusing and is "written for regular people... with an interest in what the Internet has to offer..." (from the Foreword by Cheryl Currid). So that means it should be a nice, easy starting point for me to begin this journey. Which is probably a good thing, because this is going to be a massive undertaking and easy is what I like.

Cheryl also states that "it may well be the only book you'll need to ever read" (in regards to the internet). I honestly love reading about people who didn't thing the internet would ever actually change. Because they were so wrong. But I love them anyway.

And hey, maybe Cheryl is right and this book with teach me a lot about the internet!

Preface

I thought we may as well dig right in and get to work! The preface gives a nice overview about the book and what we should expect inside, so I'll just pick out a few points I enjoyed.

Let's start with the fact you could access the internet for a dollar a day, which was the same price as a cup of coffee AND the morning newspaper! If only it was still that price, holy wow. I want dollar a day internet. And dollar a day coffee. And dollar a day newspapers!!

This book was published in 1993, so... yeah. Prices have inflated yada yada.

Just from the general gist of this preface, I believe it's going to be a lot about emails. Or I guess I should call it "electronic mail", because it wasn't called email back then. There is also things like accessing the WorldWideWeb to look for articles about software and things like that. And then...

"Recognize and use 'smiley-faces' like :-) and :-[" (Preface, page xxii). Now that's some valuable information. I mean, you can't get that information just anywhere. And it's VITAL.

I joke. It just made me laugh. Way too much. Even the fact they have noses just makes me think of the past, now we just use :) and :P. But even those are getting old and it's all emojis and WOW THINGS CHANGE QUICKLY.

I can't wait for that section. I really, really can't.

Conclusion

Well... this will be fun.

The preface wasn't very interesting, and involved the author going more into sentences about buying a radio station. Either I'm too young to understand that, or it really is something to be confused by, I'm not sure.

But I'm excited. It'll be fun learning about the past of the internet and what it was like. Maybe it'll make me a more rounded developer because I know the basic principals the web was founded on!

Or maybe it'll be just plain fun.

Musings On Accessibility Within Companies

/*Sharkie*/ — Wed, 26 Jun 2019 15:15:39 +0000

I've been on the job search for a little while. It's beginning to feel like a sickeningly long time.

And in that time, I've begun to notice some things. One of those things is how some of my local companies don't really seem to grasp accessibility, and how important it truly is to website development and design.

Note

I will not be pointing fingers at any companies, or alluding to anything. This is just some general stuff I've noticed through my own research, job interviews, etc.

I'm also not an accessibility expert! I do believe it's extremely important, and always try to advocate for it, but I most certainly don't know everything and I would never pretend to.

Also, this is based on the WCAG Guidelines, because those are the ones I know pretty much off by heart and like the best.

Keyboard Navigation

One part of my job searching/applying process is to take a peek at a companies website. This gives me a feel for the companies core values, and I can dig into the code and see what's going on in the background.

Mostly, I'm doing this kind of thing on my laptop. And I'm also a lazy twat who uses her keyboard whenever possible to navigate websites. 100% of the websites I've viewed can not be navigated with the keyboard. There is always a point where it breaks, and I can't move any farther, or can't get to a button I was wanting to press. Not a single one was keyboard accessible! I'm constantly shocked at how many company websites don't focus on this, or just assume that it doesn't matter. Usually it can be solved by simply structuring your HTML correctly, and apparently no one thinks about it during the development process.

This may not be the biggest concern, but I believe it should be a concern, and one you think about as you're coding your website. It's really not that hard to implement.

Link to keyboard WCAG rule.

Colour Contrasting

Oh. My. God. Why does NO ONE think about colour contrast?

To be clear, I am not colour blind. But I am always looking to have enough contrast so something can be read clearly by anyone.

Apparently, not many companies are looking for that.

I was in an interview where I was given a few minutes to look at a prototype website and give my opinions on the design. There were multiple sections with dark grey images on a medium grey background. The same colour scheme on the massive footer with the little tiny text links. There was bold red with off white text. All of it was difficult for me to read. Some of the links I had to ask what they said! Imagine what it would be like for someone with sight issues. Or someone with failing sight.

They wouldn't have been able to read 90% of the website.

At this point, there are so many websites where you can check if your colours meet accessibility guidelines and have enough contrast. Please make use of them. They are there to help.

Link to colour contrast WCAG rule.

No JavaScript? No problem?

Another WCAG guideline states that your content needs to be viewable in different ways (ie simpler, without JavaScript, etc.)

The amount of sites I've come across that are chock full of JavaScript, that are basically unreadable without it... it's kind of ridiculous. With all of the little intricacies in different web browsers, and the amount of people who browse without JavaScript or are browsing on bad internet, you'd think you'd consider making your site readable and at least mildly functional without all the bells and whistles. Again, I think this is a case of people not realizing that this should be a concern, and something we think about as we code our sites.

Link to content WCAG rule.

Time Crunch

Slow. Down. Your. Sliders.

I notice this all over the web. People seem to think slideshows need to move quickly so people can see all the content before they scroll down. But instead, it's just moving so quickly there's no time to read the content before it moves to the next! A tip I've learned - can you read the content twice before it changes over? Good, now add another second or two. As the designer/developer, you are so used to reading the content that you can get through it at least twice as fast as someone who has never seen it before.

This isn't exactly in line with the time limit rule, but I like to lump it in there as well. It hinders people from reading your website, and they actually don't get the information they need because things are just moving too quickly.

Though I will also comment on the time limits on some job applications. I'm a quick writer and can usually make it well within the 10 minute limit, but that is much too short a time for someone to answer 5 questions and fill out every field. Double the time. Be nice.

Links to time limits WCAG rule.

Mobile

This is not really in line with any rule, but I needed to include it anyway.

Likely more than half of the users visiting your site are going to be viewing it on a phone. That is a LOT of people. This will obviously vary depending on your user base.

Please, PLEASE make your site responsive.

Normally, I view potential company sites on my laptop. But sometimes, I look them up on my phone. Sometimes I test them out just to see if they are responsive. And at least half of the time, they haven't been. Usually, it's sliders and videos and big complex sections of text that are broken. And they end up being so broken the site isn't viewable on my phone at all.

In this day and age, I honestly view that as a tragedy. But hey, at least it brings up a good talking point for potential interviews, and let's me show a place I could be invaluable to the company.

Conclusion

Not every company is like this, and not all of them fail at all the things I've listed above. Possibly it's because I like to apply for smaller companies, which might not have the biggest budget for web development. Possibly that's the reason they want to bring someone like me into the company!

I've just found it interesting how often I've noticed things not being compliant/not working as they should. It's something I've got ingrained in my brain, so seeing people who don't even think about it kind of shocks me.

And that's that! Please keep all these things in mind as you code your own sites, they really don't take that much time to implement and are invaluable to some people.

Forem: /*Sharkie*/

The Need For Speed: Microsessions in UX/UI Design

What are Microsessions?

Microsessions, but make it complex

How to Design for Microsessions

Notifications

Widgets

Quick Actions

Intelligent Assistants (Siri/Google Assistant)

Conclusion

Gaming the (UX) System

What Is Gamification?

The Issues

The Pros

How to Implement

Gamification in Shopping

Gamification in Education

Gamification in Exercise

Gamification in Real Life

Urinal Fly

Danish Gas Station F24

Conclusion

And Despite It All, Shayna Coded

It Begins

College

The Term from HELL

Camera Woes

The Terrifying Coding Exercise

Reflections, Comments, and a Conclusion

Just a Big Tech Girl, Working in a Low Tech Business

But like... this stuff is easy, right?

SHAYNA... can you fix my computer?

SHAYNNAAAA... the internet is broken, and I need it!

SHAYYYYNNNNAAAAAA... my phones broken. Come fix it?

Um... what the hell is on your computer? It looks broken. What's this weird language?

Why does insert program here do insert thing here? Can you make that NOT happen?

Why aren't you a manager yet? You know... everything?

What is this weird slogan you have on your coffee mug/sticker/shirt/other?

So... what do you actually do?

Conclusion

Flexin' like a Muscle - Advanced Flexbox

Let's Get it Started

Equal Height Columns

Grow on Hover

Input Add-ons

Margin: auto

Conclusion

The Short and Long of CSS Flexbox Child Properties

Parent/Child Relationship

Enter The Properties

Conclusion

The Long and Short of CSS Flexbox Container Properties

What is Flexbox

Family Matters

Flexible Containers

Container Specific Properties

Conclusion

Gimme your best Tech book recs!

Learning From The Past #3 - Internet Accounts!

Chapter 2 - A Dollar A Day Keeps The Internet At Bay

So You Want To Join The Internet

Who Ya Gonna Call?

Option 2

Stop Making Jokes, This is Serious Business

IAP

Time is Money

But Sharkie... Why Do I Need The Internet?

Okay, but why do I need an account on a computer system?

With Every Great Username, Comes Great Passwords

Easy, Inexpensive... So why not get 2?

Individual Internet Account

So you want to pay per hour:

So you want to pay a fixed monthly rate:

So you live in the middle of nowhere.

So what have we learned...

Learning from the Past: History Time! #2

Chapter 1 - Internet History and Technology - A Brief Introduction

But First!

Meet the Internet

The Electronic Taffy Pull

Forem: /Sharkie/