DEV Community: Jamie McCarville 🇨🇦

JS Flashcards: Flipping Cards Part 1

Jamie McCarville 🇨🇦 — Sat, 28 Mar 2020 23:19:03 +0000

This article was originally posted on mccarville.dev

When I set out to develop a project that uses flash cards, it was obvious that it would be essential to have cards that would flip when you click on them. I had not worked much with animations other than some transitions and hover effects, so I was going to have to do some googling and find some examples of how I could build my cards.

I will be breaking down the article into two parts that will address the obstacles that I came across at each step. Part 1 will cover how I went about building the cards and getting them to flip using Vue. In Part 2, I will cover how I put the content in the cards and some of the issues I had to work around.

Building a Flipping card

The first step was to find some examples of some card flipping and then translate that to use in Vue. This actually ended up taking more time and being harder than I had anticipated. I found a lot of codepens and some Vue plugins that had flipping cards, but many of the examples weren't exactly what I was looking for. Some of the implementations just didn't work for how I wanted to build my cards and I was having a difficult time wrapping my head around how I was going to put the cards together. After lots of searching, I came across a great article by David Desandro called "Intro to CSS 3D Animations." His description of how to build the card clicked in a way that none of the other articles that I read had. It just made sense and I could see a path for implementing the card in Vue. I'm going to put the beginning of the article here, but I would highly recommend that you check out David's full article.

Card structure - excerpt from David's article

"Here’s the basic markup we’ll need:

<div class="scene">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>

The .scene will house the 3D space. The .card acts as the 3D object. Two separate .card__face elements are used for the faces of the card. I recommend using this same pattern for any 3D transform: scene, object, and faces. Keeping the 3D space element and the object element separate establishes a paradigm that is simple to understand and easier to style."

Check out the rest of the article to see how he styles the card. Here is his codepen of the card in action.

Implementing the flipping card in Vue.js

In the first example, David used vanilla JS to get the card to flip. He selected the .card element with document.querySelector() and then added an event listener that implemented a class toggle on click. I did something very similar, but using Vue. Take a look at the code below and I'll walk you through my implementation.

(you can drag the white bar on the left to shrink the preview and see the code)

line 21 - I added the data property cardOne and set the value to "start".
line 6 - I added a click listener on .card that toggles the data property cardOne. It uses a ternary operator to determine what cardOne is set to and then changes it, either to "flipped" or back to "start".
line 7 - I pass the object {flipme: cardOne == 'flipped'} to v-bind:class to dynamically toggle classes. When cardOne == 'flipped', the flipme class (line 71) will be applied to .card.

And there you have it, a flipping card implemented in Vue.js. If you haven't had a chance to check out JS Flashcards, you can find the project here.

Next up in Part 2, I will be covering how I went about putting content in the cards and how I got multiple cards to work together.

** I hope everyone is staying safe as we deal with COVID-19. My best wishes to everyone during this time and I hope you and yours are doing well.

JS Flashcards: Design Choices

Jamie McCarville 🇨🇦 — Fri, 24 Jan 2020 22:07:23 +0000

This is the first in a series of articles where I will be breaking down how I put together my project JS Flashcards. What is JS Flashcards you ask? You can check out the original post introducing the project here or check out JS Flashcards here.

Starting Point for Design Choices

Trying to figure out what direction you want to go with your design choices at the start of a project is not always an easy process. I always find it easier when I have a jumping off point to work from, helping to inform my design decisions. When you are creating your own projects, a little inspiration can help kickstart the process.

When I was putting together my portfolio site, I was searching images on Unslplash and came across a picture of a giraffe that I really liked. I used the picture as my hero image and it gave me a central theme to work around. I was able to come up with a logo and tagline related to the giraffe theme. You can check out my site here.

For JS Flashcards, the inspiration that helped me to make my design choices was the JS logo. I used the yellow color of the background, the text color and the font as the starting point of my design.

JS logo background - Minion Yellow (#F0DB4F)
JS logo text color - Dark Charcoal (#323330)
JS logo font - Neutraface Text Bold

Implementing the Design

Colors

For the background of the main page, I used a repeatable SVG background pattern. The background color is Minion yellow and the circuit board design is Dark Charcoal with the opacity turned down. I found the pattern on the site Hero Patterns. The patterns are free to use and there are a lot to choose from. Steve Schoger, the creator of the site also has a couple of SVG icons libraries, one free (Zondicons) and one paid (Hero Icons). I have used icons from the free set in other projects. For the text on the main page, I used Dark Charcoal.

With Minion yellow as a base color to work with, I was able to use it as the starting point to pick the other colors. First off, I knew that I wanted to use the rainbow pattern. I already had yellow and I had to figure out how to pick the remaining colors. I decided to use HSL to help choose the other colours.

Quick HSL Primer (go ahead and skip if you know how it works)

HSL stands for Hue, Saturation and Lightness and is an alternate way of representing colours. HSL is written like this:

hsl(hue, saturation, lightness)

Hue is the degree on the colour wheel from 0-360 (0 is red, 120 is green, 240 is blue). Saturation is written as a percentage. The larger the percentage, the more "colorful" the color is. Lightness is how far away from white or black the color is. A lightness of 50% means the color is perfectly balanced between light and dark. Below are some HSL resources that I have used.

Picking the Color

I used the color generator at colorizer.org and I put in the hex value for Minion yellow - #F0DB4F - and it converted it to HSL for me - hsl(52.2, 84.3%, 62.5%)

I was then able to scroll down and see all of the other colors that it generated for me.

The benefit of the colors that it generated is that they all share the same saturation and lightness (84.3%, 62.5%) and just the hue is different. This means that the colors are all connected and they fit well together.

Colors for Section Pages

Now that I had the colors that I was going to use for my sections, I had to decide how exactly I was going to use then. What I decided to do was to use the main section color for the page background, and then use the same color for the flashcard background and text, but adjust the lightness. I made the flashcard background lighter and the text darker. Here are the HSL values:

// page background

hsl(352.2, 84.3%, 62.5%)


// flashcard background

hsl(355.2, 84.3%, 95%)


// flashcard text

hsl(355.2, 84.3%, 20%)

I used a site called contrastratio.com to play around with the lightness and make sure I was getting a contrast ration that would be easy to read.

Now that I had all the colors, I put them together on the Basics page.

The result is all the colors work together cohesively. I then did the same process for the other sections, using the main section color for the page background and then making it lighter/darker for the flashcard background/text.

All in all, I was very happy with how the colors turned out.

Font

The font used in the JS logo is Neutraface Text Bold. It is not free to use and I wan't interested in shelling out the $125 to use it in this project, so I went with an alternative. I found an article that listed a number of designer fonts and their free alternatives. The font that it suggested was Josefin Sans, available on Google Fonts. I added it to the project and I used it on the front of all the flashcards.

That wraps up the first article in my series about how I built JS Flashcards. Stay tuned for next week's article about how I built the flipping cards.

P.S. I started my job search earlier this week. I am looking for a remote Front End Developer Position. You can find out more about it here.

JS Flashcards

Jamie McCarville 🇨🇦 — Fri, 17 Jan 2020 21:27:52 +0000

Learn JS With Flashcards

I built a site using Vue and Tailwind to create flashcards for learning JS. I have been working on the site the last few weeks and it is ready to check out. You can find it here. It is currently a work in progress, but the first two sections are complete. I plan to work on it on a weekly basis and add more sections and content.

Why I built the site

I built the site for 2 reasons.

The first reason was to create a Vue project that was my own idea. This has allowed me to practice both my Vue and general front end skills.
The second reason was was to create flashcards to help other people learn JS while also solidifying my own learning. The process of trying to figure out what and how much content to put on the cards has been a great exercise, strengthening my own understanding. It's definitely true that one of the best ways to make sure that you understand something is to try and teach it to someone else.

Article Series

Over the next few weeks I will be posting an article series explaining how I put together some of the elements and detailing how I overcame the challenges that I came across. Here is a list of some of topics that I will be covering:

Design and Color scheme - how I went about choosing the design and colors for the project
Nav bar - using flexbox to have one element on the opposite side of the others
Mobile Nav - hamburger menu and hiding on larger screens
Flipping cards - adding content and animating
Modals - show and hide on click
Buttons - click buttons on flipping card without the card flipping
Style with Tailwind CSS - extend theme in tailwind.config.js

Make your own flashcards

I used Vue as the framework and JS as the topic, but you could use any framework or subject and make your own flashcards. You can either stay tuned for the articles or check out the project now on Github.

Comments and suggestions are welcome.

Thanks for checking out the project!

Hacktoberfest: Race to the Finish

Jamie McCarville 🇨🇦 — Wed, 30 Oct 2019 15:37:33 +0000

Getting to the Finish Line

When October rolls around, it is impossible to miss all the posts and excitement for Hacktoberfest. It was a goal of mine to participate this year, but because I was in the middle of some other projects, I was not able to contribute until the last couple of days. I actually submitted my first PR yesterday! Being a self-taught developer, wading into Open Source can be intimidating. I wanted to highlight the resources and repositories that helped me in the process of contributing.

Helpful Articles

The first article I read was from Victoria Fluharty. Her article "Hacktoberfest: Getting Over the Fear of Open Source" was an encouraging read about getting over the fear of contributing and her excitement upon completing Hacktoberfest.

I also found this great article by Sarah Drasner called "How to Contribute to an Open Source Project". The article does a great job of laying out the steps required to contribute to a project.

(In case you aren't already Sarah Drasner is totally worth following on Twitter)

Projects for Beginners to Contribute to

The following are projects that are great for first timers to contribute to. I selected issues that accept multiple PR's, so you don't have to be "first" to the issue.

Quotebox - https://github.com/bauripalash/quotebox/issues/1

Add More Movie Quotes - https://github.com/NikhilNamal17/popular-movie-quotes/issues/3

Inspirational Quotes - https://github.com/vinitshahdeo/inspirational-quotes/issues/4

Add a Drink Recipe - https://github.com/alfg/opendrinks/issues/633
(there are multiple issues in this repo that you could tackle)

You Can Do it!

If you started Hacktoberfest and haven't completed it yet, you still have time to contribute!

If you haven't signed up yet, you can head to https://hacktoberfest.digitalocean.com/ to get signed up.

I hope these resources are helpful in getting you across the finish line 😄

The start of my coding journey

Jamie McCarville 🇨🇦 — Tue, 30 Apr 2019 20:37:53 +0000

This will be the first of 3 posts chronicling my coding journey to this point. I got the idea of doing a bit of a retrospective after I recently finished my second round of #100DaysOfCode and was reflecting on my experience and all I have learned to this point.

About Me

I am 36 years old, married, and the father of 2 beautiful girls - 9 and 11. I am from Ottawa, Ontario originally and for the last 14 years have called Manitoulin Island home. (The world's largest freshwater island! About a 7.5 hour drive from Ottawa). As a family we love to ski in the winter and go camping in the summer. In a move that many might consider un-Canadian, I quit playing hockey after grade 8 so that I could focus my attention on my favorite sport, basketball. I played through high school and still play pick up. During the golf season I get out at least a couple of times during the week. I coach the basketball and golf teams at the high school I work at and I also run kids programs and teach golf lessons at our local course.

Start of the Journey

Here is my story of how and why I made the decision to get serious about learning to code. In 2012 I started doing University courses part time through distance education. My goal was to finish my undergraduate degree and then go to teachers college.(I had previously completed a 3 year diploma program at my local community college) I took courses part time for two years. The class that I enjoyed the most was an introduction to computer science class. I had an opportunity to learn some basic Java and Python. Other than some simple HTML in high school, this was my first real introduction to coding. I really enjoyed it and knew that I would want to pursue learning it further somewhere down the line. While I was enrolled in my program, the Province of Ontario made a change to their teachers college program, extending it to two years instead of one. This change meant that attending teachers college would be a larger investment of time and money than I was able to make at that time with a young family. Around then I also saw some information on coding bootcamps. I took a look but they were on site bootcamps and ultimately it was not going to fit into my life at that time. I continued to substitute teach during the school year and work as Assistant Manager at a local golf course during the golf season. I then accepted a contract as an Educational Assistant at the high school I was substituting at.

Fast forward to October 2017. Every three years, our Board of Education holds an Education Conference, bringing in many different and talented speakers. One of the speakers they brought in was Brian Aspinall, a teacher in Ontario with a background in computer science and a love for all things coding. I attended his workshop session on using Scratch in the classroom. After a quick intro to the platform, I dove in and had a lot of fun coding and playing around. The first project I worked on was a probability simulator for a six sided die. I started it during the workshop and continued working on it at the my table while I listened to the next keynote speaker. I spent the most of my time the next day of the conference working away on other projects in Scratch while listening to the other speakers. I was just loving working with the code and building cool things. I showed it to my girls when I got home and they had both just done an intro to Scratch at their school. We spent a good chunk of the weekend building cool projects together. Needless to say, I was loving it! The experience at the conference reignited my interest in coding and I started thinking more seriously about learning to code and potentially pursuing it as a career.

I found the idea of coding and working remotely from home to be very exciting, as I would be able to work in a field I am passionate about and it would allow me to have more flexibility and balance in my life. So with all this in mind, I started to look at all of the various options for learning to code online. I started with an intro to HTML course with Codecademy and then moved over to the lessons at Free Code Camp. I also committed to the #100daysofcode challenge on Twitter. It was during this time in November while working through the Free Code Camp lessons that I stumbled upon Skillcrush. It looked interesting so I signed up for the 10 day free bootcamp. After completing the bootcamp and being impressed with the materials, I took a look at the Break Into Tech Blueprint. I ultimately decided to sign up for a couple of different reasons. First, I really liked the way the course was laid out. I liked having the option to focus on either a design or development track and appreciated all the teacher and peer support that was built in. Second, I felt that there was a lot of value in choosing a paid course. I figured I couldn’t go wrong making an investment in myself. Also, by choosing a paid course, I felt there would be extra motivation to follow through, especially on those days when it is tougher. It was for these reasons that I made the leap and signed up for the Break Into Tech Blueprint at the beginning of December 2017. Since then I have been working through the classes and coding as much as I can. I almost can’t believe how much I’ve learned in the last 3 months and I am excited to keep moving forward.

(Most of the content for this post was originally written in March 2018)

Thanks for reading about the start of my journey into coding. Stay tuned for my post next week, My first #100DaysOfCode.

How to Open Files and File Explorer From the Command Line - Windows

Jamie McCarville 🇨🇦 — Fri, 11 Jan 2019 03:54:03 +0000

Terminal Upgrade

Last month I went down the rabbit hole setting up my terminal on my Windows laptop. I had been using Git bash for all of my git & Github work, but did not have much other experience with the command line and wanted to improve my skills and upgrade my tools. As a starting point I followed the free video series from Wes Bos called "Command Line Power User." The goal of the video series is to get you up and running using Zsh and oh-my-zsh. I also used the GitHub repo "CmderZSH" by Dylan Fontana to help with some of the nitty gritty of installing on Windows. I decided to go with the Powerline9k theme to add some customzation.

My Current Setup

I won't get into the process of setting it all up as the links above can help you with that. With that being said, here is my current setup:

Cygwin ("...provide functionality similar to Linux on Windows")
Mintty (default terminal emulator for Cygwin)
Cmder (console emulator)
Zsh (Z shell)
oh-my-zsh (framework for managing Zsh configuration)
Powerline9k theme

Opening Files and File Explorer

After spending (more than anticipated!) time setting it all up, there was still something that I was struggling to get working. In Wes' videos, he has examples of opening files in his code editor using the 'open' command. I could not get it to work for me and after trying a few different things unsuccessfully, I left it and came back to it later.

The Solution

After some searching, I came across the answer that I was looking for. In Windows, we have a similar command to 'open' and that is the 'explorer' command. Here are a few examples of the command in action.

Open a File Explorer

Open a File Explorer in Current Directory

Open a File with the Default Program

Open a File with VSCode

*different command but similar functionality

That concludes my first blog post since I started learning to code! I have benefited greatly from so many posts and articles and I am hoping that I will be able to give back by sharing what I am learning as I dig into JavaScript and work towards landing a full time remote dev job. Best of luck to everyone on their goals for 2019 and I hope to post again soon.