DEV Community: Kevin McMinn

A few CSS tricks

Kevin McMinn — Thu, 18 Apr 2019 15:48:07 +0000

If you're anything like me, styling your application while programming can be somewhat addicting. You strive to make your webpage look pretty and will spend WAY too long on very minor details. Through lots of CSS googling, I've come across some lesser known CSS tricks that might change your page from bland, to beautiful! In this blog I will demp some of my favorites. If you know of any other cool CSS tricks, feel free to comment below and I'll add to the list.

Fonts

A good font can transform your page, adding character and life to your application. Luckily, CSS allows you to easily import fonts to your project. Google Fonts is one of the best resources for fonts and allows you to easily inject your favorite font into your project. Simply add the URL to your HTML file and specify in CSS which elements you want to inherit the font.

Cursors

I recently completed a project where I needed a different cursor style, but only over a specific area of my webpage. I learned that that is a Cursor option within CSS, where you can specify a div or other selector where this cursor will apply. Below you can see the cursor change when hovering over the text.

Fade In/Out

Animations can be very powerful in CSS. If you ever have a need to make text or other elements fade in or out from your page, you can easily add a fade property to CSS file. All you need to do is specify the starting and ending opacity, and how long you want the animation to take.

Transform

Another cool and useful animation is Transform, which allows you to move an element around on the page. Below I've added a rotate property to the image, and specify 4 full rotations to happen in 4s. You can do all types of animations with the transform property, such as scale, skew, translate(moves element horizontal/vertical), and even add 3d perspective.

Columns

If your webpage includes a lot of text, you may have had the idea to add columns or separations to your webpage. Luckily, this is easily achievable with the columns property in CSS. Below I've broken up my paragraph into 4 columns, while also specifying the thickness of the borders to visually separate the text.

Image Filters

Now you, yes you, can build Instagram! Well, there might be some additional programming knowledge involved, but Filters are a HUGE part of instagram. Luckily, the CSS filter property gives you a ton of control on how your images look. Below are some of the filters you can added to spice up your images.

Small Caps

This CSS trick may not be useful often, but that one time you want to fancy up your text, this may be the answer. With the font-variant 'small-caps', you can turn your boring text into classy, elegant strings.

Letter spacing

One more animation! I thought it was interesting you can define the spaces between letters, and use animation to have an effect of words coming together. This ensures a dramatic entrance!

*sources CSS Tricks

"Random" Blog

Kevin McMinn — Thu, 04 Apr 2019 15:55:08 +0000

Just last week, during my third project at Flatiron School in Seattle, I was creating a BlackJack App with my classmate Billy Witherspoon (If you want to try it out, you can play HERE. We used the Math.random() built in method of JavaScript to incorporate a shuffling function into our App. This got me thinking...if a computer is designed to extremely predictable and do exactly as it is told, how does a computer generate a random number? It can't TRULY be random, could it? I decided to look into Math.random() function to uncover what is going on behind the scenes.

Math.random()

SPOILER! the Math.random() function does NOT generate a random number. Although there is no truly random number generator in programming, JavaScript(actually browsers) does a pretty good job of simulating a random number. So what is doing? What it boils down to is JavaScript defines the rules, and it is up to the browser to decide how to generate the number. These are the rules that ECMAScript laid out

[Math.random] Returns a Number value with positive sign, greater than or equal to 0 but less than 1, chosen randomly or pseudo randomly with approximately uniform distribution over that range, using an implementation-dependent algorithm or strategy. This function takes no arguments.
Each Math.random function created for distinct code Realms must produce a distinct sequence of values from successive calls.

XORshift

Up until 2015, different browsers used different algorithms to conform to the standard set by ECMAScript. In 2015, all major browsers adopted a pseudo random number generator (PRNG) called xorshift128+.

So what the heck is going on in this function? Without diving into the details too much, essentially this function is taking in two seed values and performing shifting at the bit level. The << and >> operators are left and right-shift, respectively. In an example where the seed values may be 25 << 2, the computer takes a binary representation of 25, then shifts it 2 places to the left, resulting in a new number (100). You can visualize an example below.

You might also be wondering what the =^ symbol represents. This is the XOR assignment operator. XOR (meaning exclusive or) compares the binary representations of two numbers and outputs a 0 where corresponding bits match or a 1 where bits are different. Therefore, it takes our two seed value binary representations and runs it through the XOR logic gate, producing a new number based on the seed values that were shift.

To simplify, the algorithm takes two seed values that the browser determines, switches them with the '<<' and '>>' operators to produce two different binary representations, then sends the two binary numbers through a XOR logic gate to produce our final 'random' number. Even though it isn't truly random, it most-often meets the needs of programmers. If you're trying to generate a truly number, you need to seed the value with a number generated outside of the computer...such as the EXACT time a user action occurs, an example being .3567 seconds after they click a button. This makes the process very unpredictable and impossible to reverse engineer.

In Summary

JavaScript defines the rules of Math.random(), then it is up to the browser to decide how to accomplish this.
Most modern browsers use the xorshift128+ method to generate a random number
xorshift method takes in two seed values, switches them to binary, shifts around their value and then pushes these new values through a XOR gate to produce our final random number.
To generate a true random number, the seed values must be generated outside of the computer.

Programming: A Beginner's Guide

Kevin McMinn — Thu, 07 Mar 2019 20:58:06 +0000

You've decided you want to learn how to code. Maybe you want to learn a new skill, create the app you've been thinking about for years, or perhaps want to switch careers. These are all great reasons to dive in the world of code. But where do you start? There are so many different programming languages, concepts, schools, learning platforms, tutorials, etc. If you are struggling with knowing where to start, I've put together this guide to provide a few different routes/resources you can take to learn how to code, and how to achieve your goals.

Before we begin, there are widely varying opinions on the best programming learning path. This guide includes information and learning resources, with links if you would like to explore more. There is no "correct" path to take when learning programming, but hopefully these resources will help you get started on your coding journey. At the end of the day, it's your responsibility to pick the path that you feel is best suited for yourself.

Intro-Resources

Both of these courses(taken online) provided by Harvard and MIT are freely available to anyone who wants learn the basics of computer science, and is a great start to learn the fundamentals of programming.

CS 50
- "CS50 is Harvard University's introduction to the intellectual enterprises of computer science and the art of programming. Anyone may take CS50, even if not a student at Harvard."
MIT: Intro to CS and Programming in Python
- "Introduction to Computer Science and Programming in Python is intended for students with little or no programming experience. It aims to provide students with an understanding of the role computation can play in solving problems and to help students, regardless of their major, feel justifiably confident of their ability to write small programs that allow them to accomplish useful goals."

Languages

Before you begin writing your first line of code, you need to identify the language you're going to learn. If you aren't at the stage of needing your programs to perform specific tasks (languages are better than others at certain things), I would suggest one of the languages listed below. Python is the most popular languages for beginners, as it's a very readable and flexible language. Javascript is the most popular language across the tech industry, but if you are starting with JS I would suggest to learn HTML/CSS prior to jumping in to JS. If you're not starting with JS however, I recommend starting off with Python or Ruby, as HTML and CSS are NOT programming languages and this can be confusing to new coders.

Python
- "Python is relatively simple, so it's easy to learn since it requires a unique syntax that focuses on readability. Developers can read and translate Python code much easier than other languages. In turn, this reduces the cost of program maintenance and development because it allows teams to work collaboratively without significant language and experience barriers."
Ruby
- "Many Ruby developers find it fun to work with Ruby, and fun is a great motivator when learning to code. Ruby is a very high level language, which means Ruby abstracts away (i.e. handles for you) most of the complex details of the machine. Thus, you can quickly build something from scratch with less lines of code. Ruby was made popular by the Ruby on Rails framework, a full-stack web framework that makes prototyping a breeze, making it a web framework of choice for many startups and coding beginners alike."
HTML/CSS
- "Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web."
Javascript
- "It [Javascript] is a programming language that is characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[9] JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it,[10] and major web browsers have a dedicated JavaScript engine to execute it."

Personal Projects

One thing most programmers will agree on is the value of projects, especially personal projects that YOU want to build. I can say with confidence that the majority of my learning and understanding can be attributed to the projects I've built. Not only are projects fun and stimulating, in the end they are much more effective than books and tutorials. User books, tutorials, and videos to learn the basics...and then transition to project mode when you feel you have enough of a foundation to create something. Even when you start a new project, you will not know everything you need to know in order to finish, but having that foundation and utilizing online resources (section on that below) will likely get you started off on the right foot.

If you're struggling to think of beginner projects, check out this list that includes five small projects in Python.

Learning Platforms

FreeCodeCamp
- "FreeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, Medium publications and local organizations that intend to make learning web development accessible to anyone."
TeamTreeHouse
- "Treehouse believes in the democratization of technical education in order to overcome economic and psychological barriers. Our students learn at their own pace and become job ready within months at a fraction of the cost. We are committed to making education accessible to students of all races, genders, sexual orientations, and socio-economic backgrounds."
The Odin Project
- "The Odin Project is one of those "What I wish I had when I was learning" resources. Not everyone has access to a computer science education or the funds to attend an intensive coding school and neither of those is right for everyone anyway. This project is designed to fill in the gap for people who are trying to hack it on their own but still want a high quality education."

Bootcamps/Prep

At the time of writing this post, I am currently a software engineering student at the Flatiron School in Seattle, WA. If you're unfamiliar with bootcamps, they are defined as
...technical training programs that teach programming skills employers are looking for. They enable students with little coding proficiency to focus on the most important aspects of coding and immediately apply their new coding skills to solve real-world problems.
There are varying opinions on coding bootcamps, as most of the material taught at coding bootcamps can be learned on your own for free. Bootcamps tend to cost anywhere from $5,000-$15,000, depending on the school and location. For me, this was a great option to immerse myself in the programming world, and to accelerate my learning. You may find bootcamps are a great fit for you or you might prefer to learn on your own, both can be great options. My advice for bootcamps is to focus on narrowing down schools that have a great history of job placement success, and include a dedicated career services to help you find that dream job upon completion.

The three coding bootcamps below all have free prep courses (which I've linked to) that you can take online, and can are all amazing learning platforms. I highly recommend utilizing these free courses to start your learning. Flatiron School's free prep course even includes instant chat access to real instructors that are able to help you while working.

Interview prep

If you're learning code in order to switch careers or enter the job market for the first time, you will likely need to practice interview style questions, and learn to talk about your thought process and code. Below are some of the top resources to prepare for interviewing.

Cracking the Coding Interview
- Cracking the coding interview is arguably the most popular resource for interview prep. "Cracking the Coding Interview gives you the interview preparation you need to get the top software developer jobs. This is a deeply technical book and focuses on the software engineering skills to ace your interview. The book is over 500 pages and includes 150 programming interview questions and answers, as well as other advice."
Awesome Interview Questions
- A curated list technical interview questions, broken down by category/language
Leetcode
- "The purpose of LeetCode is to provide you hands-on training on real coding interview questions. The Online Judge gives you immediate feedback on the correctness and efficiency of your algorithm which facilitates a great learning experience."
HackerRank
- "HackerRank is a technology hiring platform that is the standard for assessing developer skills for over 1,000 companies around the world. By enabling tech recruiters and hiring managers to objectively evaluate talent at every stage of the recruiting process, HackerRank helps companies hire skilled developers and innovate faster."

Tools/Resources

Stack Overflow
- 'Founded in 2008, Stack Overflow is the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.' Stack overflow has been a staple in my own coding journey. Nearly every question you have has likely been a topic of discussion on Stack Overflow. It will be your best friend while learning code.
Repl.it
- Repl.it is a neat site where you can choose a programming language, write some code, and it will instantly show you the output of that code on the right hand side. This was my favorite tool when starting out, as I could test code without have to save/open files on my computer.
CSS Tools
- Flexbox Froggya game where you help Froggy and friends by writing CSS code!
- Grid Garden
- Digital Color Meter Mac only
Rubular
- Test regular expression in your browser
Text Editors(where you write code)
- Atom
- VScode
- Sublime

Thanks for reading! I will continue to update this list as I find more resources to share with everyone.

Basics of Object-Oriented Programming

Kevin McMinn — Thu, 21 Feb 2019 06:05:56 +0000

The first time I learned about Object-oriented programming, I was intrigued by the 'cool' name, but didn't completely understand how it worked. In this blog I discuss a few analogies that helped me better understand OOP.

What is an Object?

In programming, an object is simply a 'thing'. I know, I know...how can you define something as a 'thing'. Well, let's think about it - What do 'things' have? Attributes, right? Let's take a Song for example. A song has attributes! It has a Title, an Artist, a Genre, etc. How about a Dog - A dog has four legs, a color, a name, an owner, and a breed. Though there are millions Dogs with countless names, owners, etc, the one thing that ties them all together are the very fact that every single one can be described as a Dog.

Although this may seem like a not-very informative explanation, these types of examples are what ultimately made me understand Object-oriented programing. The set of activities that an object can perform is an Object's behavior. A dog can bark, wag it's tail, sit, and even shake if it's owner trains them. In the same way, a programmer can create an object and teach it tricks in order to achieve certain goals. In Ruby(my first programming language), EVERYTHING is an object. This means that every piece of code you encounter can perform certain tricks at your command, some are built into Ruby while others can be created at your disposal.

Let's look at a common element in programming, a simple string. As you can see, after the string is defined, I'm able to call different 'methods' or functions on the string I created. Ruby has several built in methods on common objects(ie strings, integers, arrays, and hashes.

An Object's Blueprint

As previously mentioned, there are MILLIONS of different dogs in the world, but one thing we can all agree on is that they are all Dogs. So how do we create a Dog, Song, Person, etc in our computer programs? First, we need to stitch together a 'blueprint' in order to build our objects. In Ruby, you create a blueprint by defining a 'Class'. You then have the freedom to decide what attributes every object in your class should include. Using our example, if we were to create a 'Dog' class, we would likely decide that every dog needs to have a name, breed, color, and size. The great thing about objects in programming, is that every instance of an object knows everything about itself. We could create a thousand dogs in our program, but still be able to ask each one it's name, breed, etc. This is the magic of Object-oriented programming. Every time you send an object somewhere in your program, you gain access to all of its attributes and can interact with it...just as if a person came to your house, you'd be able to ask anything about them and they can tell you.

In the below example, I've created a Dog class, or template, that each dog instance will be made from. Each and every dog is required to start with a name and breed, and all of the dogs will be able to bark. Woof Woof!

Two Advantages of Object-Oriented Programming

Re-Use

-Consider our Dog example. Let's say our program grows to the point where we need to create other Dog classes. We find out we need to add a Service dogs, which have have several abilities that normal dogs do not have. Service dogs need to know how to lead, comfort, and sense emergency. However, all Service dogs still have a name, breed, and need to be able to bark. This is where inheritance comes in to play, we can easily have our 'Service' dog class inherit everything from our Dog class, and still be able to add certain characteristics of Service dogs.

Encapsulation

-"Each object forms a separate entity whose internal workings are decoupled from other parts of the system." This means that a part of your program only has access to a specific object and all of its methods/attributes only when explicitly given permission by the programmer. This creates a healthy environment where all objects are protected from each-other, making error identification and debugging easier.