DEV Community: Dan Murphy

CSS Basics - Naming Conventions and SASS

Dan Murphy — Fri, 08 Nov 2019 18:02:29 +0000

As a former print-designer who now lives life as a software developer, I’ve discovered a number of “warm fuzzy blankets” in the coding world that take me back to the “old days.” They allow me to apply the lessons I learned in a 20-year career as a print designer to modern technologies that are constantly in flux.

Things like the 12-column grid were a natural guidepost for me. Add in Google’s Material Design philosophy, one that is inspired by ink on paper, and I’m even more at home.

One thing I did not expect to geek out over as much as I have, however, has been the seemingly simple concept of naming conventions.
Excuse me while I grab some of my earliest CSS code …

This… This is a mess. And when we take a look at the corresponding HTML, it’s just as messy…

Ignoring all else that is likely wrong with this code (it was an early project), There’s no rhyme or reason to how things are named, and therefore the targeting in my CSS file is a nightmare. If you look closely, we have a class in the CSS (card-subtitle) that doesn’t even exist in the HTML!

There are countless ways to approach this particular problem, but I recently discovered the BEM method for naming elements in HTML.
BEM stands for Block, Element, Modifier. It not only makes for more descriptive code, but it makes targeting your elements in SASS so much easier.

Classes are written like so: “Block__Element--Modifier,” where the block is the name of the entire code block, the element is a particular item you are targeting, and modifier would be something like a particular size, like small, medium or large. Blocks are separated from Elements with two underscores, and modifiers are placed at the end with two dashes.

We’ll start with the “B”. These block elements are going to be things like divs, headers, sections, footers, etc. In the example above, our block element is the “ingredient card,” which I, in my infantile wisdom, classified as an ID. Let’s give it a class, start using some SASS, and then figure out our styling from there.

The "E"s are going to be each element within our "ingredient-card" block, so things like the __img, the __title and the __btn. Each of these can get its own style treatment, but with nested SCSS, they'll inherit whatever styles apply to the entire block. In this case, that's something like the font-family.

In this example, we only have one "M", and that's the modifier on our button element. We want one solid and one outlined, so you'll notice that while much of the styling applies to both, where the "--outline" modifier comes in, just a few styles need to be changed.

And here is how we can clean it up using nesting in SCSS…

Not only does it result in fewer lines of code, but this naming method makes our HTML much easier to follow. There’s no question as to what classes are being declared throughout the code block.

But it’s where we combine that with nesting in the SCSS that it really becomes clear. How many times did I declare the font-family in the original code? I can’t remember, but it was too many. With our improved code, we only have to do it once. Any modifications to weight or size are added later.

With BEM naming and SCSS, we can achieve truly dry and readable code that any other programmer can pick up and understand.

CSS Basics - how declaration conflicts are resolved

Dan Murphy — Mon, 21 Oct 2019 12:58:23 +0000

CSS is a very powerful tool that allows for nearly unlimited styling options for our HTML elements, but as a web site or app grows larger, so too does the possibility that an item targetted by two CSS rules may be receiving conflicting orders.
Take the following example:

Here, we are telling the

tag that the background color is blue AND green, so how does CSS decide where to apply its rules?

That’s where the C in CSS comes in: Cascade. The cascade is the process of combining different stylesheets and resolving any conflicts that may reside within the style declarations when more than one CSS rule applies to a certain HTML element.

Sources

First, we must look at where the CSS declaration is coming from, which can be a number of sources. Those include author declarations written by the developer; user declarations, which are changes made by the user in the browser; and default browser declarations. The cascade combines declarations from all these sources and then sorts them out based on the importance that is given to the element based on that order.

How are conflicts resolved?

To figure out which declaration will apply to an element, we need to examine, in order, its importance, its specificity and the order in which the conflicting declarations were declared in the code.

Importance

We first look at who declared the rules and whether a the !important tag was applied. The importance is read in the following order:
User !important declarations
Author !important declarations
Author declarations
User declarations
Default browser declarations
CSS will check this order and look for the !important tags, starting with what the user chooses as !important, since, because it was chosen by the user, it is the most important declaration we can have. If the developer uses the !important tag, it's obvious that that's the rule they want to be applied above all others. After that come vanilla author declarations followed by those chosen by the user in the browser, and finally the browser defaults.
But what if neither the user nor the author used !important? We then need to check specificity.

Specificity

If there’s no discernible difference in the importance of an element’s CSS rules, we need to move on to checking its specificity, particularly elements that are targeted by the CSS. Specificity is weighted, with weight decreasing in the following order: inline styles have the highest specificity; IDs; classes, pseudoclasses and attributes; and finally elements and pseudoelements. Each of these is represented as one of four numbers in a set of parentheses like so: (inline, ID, class, element). To determine which is most specific, create one of these sets for each CSS rule that targets the element and compare them. As you move from left to right, each rule that has a lower weight at each spot in the parentheses is dismissed until just one rule wins out.

Source Order

In the event that CSS rules have the same importance AND specificity, we finally turn to source order. This simply tells us to choose the declaration that is declared last in the code, and that will be the rule that is applied.

It can be easy to target the same HTML element with multiple CSS rules, but there's a great system in place to ensure that conflicts will ultimately be resolved. Knowing how that system works will make you a better coder and designer.

HTML and CSS basics - How id’s and classes differ

Dan Murphy — Mon, 14 Oct 2019 12:01:59 +0000

It wasn’t long ago that I was a clueless wannabe software developer who struggled with even the most basic of concepts. Divs? JQuery? Hell, I couldn’t even tell the difference between a class and an id, which led me to write this blog post.

HTML has a lot of built in styles, but if you want to do anything outside of the given tags, such as

,

These tags are useful for creating elements that you will target throughout your project. Does your page have a navbar? By giving the the unordered list in the nav bar its own class of nav, you can apply styles that only target elements with that class.

CSS uses these tags to target the styles it imposes on elements, but so do other languages and libraries, such as JQuery and JavaScript, so what exactly is the difference between ID and class?

To start, each element can only have one id, and each page can only have one element with that ID, which makes the id tag very selective. The fact that IDs are intended for just one element and classes can be applied to many elements may seem like a trivial difference to new coders — in fact, many purely HTML and CSS coders can get away with treating them the same — but there are many reasons to keep IDs to just one element and classes to another.

Classes, on the other hand, can apply to multiple elements on a page, and an element can itself have multiple classes. Say, for instance, that we have an unordered list

with the same CSS. By giving the
its own class of “nav”, we can style all of the
tags with a class of nav with just one block of CSS. If we want to have a style that makes one nav selection bold, it’s as simple as adding another class tag. The attributes of the first nav tag will still persist, so the second class simply adds to the styling. The limit on the number of classes you can apply is in the thousands, so feel free to be as specific as you can be.
Neither IDs nor classes have browser defaults, so simply adding a class name or an ID will do nothing at first. You can’t take a class or ID from one project and simply port it over to another. You have to give them definition, and you do that with CSS.

Browsers recognize IDs but not classes. Because there can only be one element on a page with a specific ID, we can use the url’s hash value to target that ID. Say we have a spot halfway down the page where we are displaying a new product. By giving that products div a class of new-product, we can add it to the URL after a hash to target it like so: http://web.com#new-product. When the page loads, it automatically scrolls to the section with the specified id.

Elements in the DOM can have both classes and ids, and that’s often a really good thing. Use the class to target a group of elements, while you use an id to target just one of those elements.

When it comes to CSS, IDs and classes are treated the same. CSS doesn’t care whether you’re wanting to style a whole class of elements or just one; it’s going to apply the styles regardless. JavaScript, on the other hand, does have an opinion on the matter. Like using a hash in the URL, JavaScript uses IDs to target specific elements with the getElementById() function.

A look at how CSS renders a web page

Dan Murphy — Mon, 14 Oct 2019 01:49:41 +0000

I’ve recently taken a deep dive into the world of CSS. As a former print designer-turned software engineer, I often find myself turning to knowledge gained in my previous career to help me with situations I encounter while developing. And I’ve learned that CSS is like my warm, fuzzy blanket.

I’ve also come to realize I’ve ignored a lot of its complexity, which leads to me throwing various class names at divs until I get the result I’m looking for. It’s effective if not practical, but I wanted to know the complexities of this powerful styling library, which has led me to the first in what I expect to be a series of CSS basics blog posts.

To start, I wanted to know how CSS works in the background, which led me to the visual formatting module. It’s an algorithm that calculates the size of boxes and figures out how to lay these boxes out on the page.

It’s one of the fundamentals of CSS and it takes into account a number of factors, including: the box type (is it inline? Inline-block? Block?); the box’s dimensions; any positioning directives its been give (is there a float? Is the position absolute?); where it’s stacked on the Z-axis; and how it relates to other elements in the render tree.

All elements are looked at as rectangles in the CSS model, and the box model is the epitome of that philosophy. Boxes can have width, height, margin, padding and border, and they are all optional.

Content is at the heart of the box model. It’s the text or images that make up your div. Padding is the transparent area immediately surrounding the content and is used to create white space inside the box.

The border goes around the padding and the content, and the margin is the space that is between the boxes on the page. Put it all together and you’ve got the fill area, in which you can place a background image or set a background color.

The total width of a box in the box model is the sum of the right border and padding, the specified width, and the left border and padding. Similarly, the height is determined by the top border and padding, the specified height and the bottom border and padding.

When you define height and width in CSS, it includes border and padding.
The visual formatting module also takes into account box type. Block-level boxes are elements that are formatted visually as blocks, and they take up 100 percent of the parent’s width. Block level boxes display stacked on top of each other vertically.

Inline boxes, on the other hand, are basically the opposite. Content in inline boxes is distributed in lines, and it occupies only the content’s space. You can’t set the height or width, and the padding and margin of inline boxes can only be set horizontally.

Another factor in the visual formatting module are positioning schemes. In a normal flow of content, rectangles are not floated, there's no absolute positioning, and elements are laid out according to their order in the source code.

Floats, on the other hand, shift elements to the right or left as much as possible. Elements are removed from the normal flow, and text and inline elements will wrap around the floated element. With floats, the container won't adjust its height to the element.

With absolute positioning, the element is also removed from the normal flow, but it has no impact on the surrounding content. It uses top, bottom, left and right values to offset the element from its relative positioned container.

Tips for surviving (and thriving) in an immersive coding program

Dan Murphy — Mon, 07 Oct 2019 14:04:44 +0000

In April, just two months before my 40th birthday, I left my dead-end career to start a six-month immersive coding program at Operation Spark, a Hack Reactor-like program in New Orleans, with the goal of getting out with a new career that didn’t have quite so many dead-end signs along the road.

“It’ll be easy,” I thought. I’ve been to college, gotten my degree. Hell, I even taught myself to be a professional brewer once. How hard could a six-month immersive coding program be? Let me tell you, I had no idea.

If there’s anything to be said about the people that attend these programs, it’s that we are a diverse bunch with varied backgrounds. Some of us are older with kids, while others are just getting out of school. Many were in dead-end jobs with no future. But we are all there for the same reason — to make our lives better. And by the time you are where my cohort is — just three weeks shy of finishing up the senior phase — you have to have put in an insane amount of time and work, but you’ve also expended an unfathomable amount of emotional and mental energy. The light at the end of the tunnel is growing brighter, but there’s still so much to do before we break out into the sunshine..

Now that I’m nearing the finish line, I have had some time to think about how I’ve done it and the toll it’s taken, and I’ve come up with some tips for other people who might be in the same situation as me. These won’t apply to everyone — but if you’re reaching midlife, have a child or just looking to start a whole new career, you might find some of these tips useful.

Nothing is hard. It’s just new.

I’m starting off with an unoriginal mantra that has been drilled into our brains since Day 1. I’ve questioned it more times than I can say, but the fact is, it’s true. I knew nothing about coding when I started Operation Spark, so everything I’ve encountered has been new. And yes, it’s felt hard at first. Impossible, even. But the day will come when it all starts to click, and you have to trust the process. It’s been proven to work, and while I’ve had plenty of doubts, it’s effective and it works.

Get sleep!

I mean it. Especially if you’re a little older like me. Like parenting, this program is young folks’ work. It’s exhausting, especially once you immerse yourself in the portion that takes up 11-plus hours of your day, six-plus days a week. If you don’t let yourself sleep, you won’t be able to recover. There just isn’t the time, and the program is too fast-paced. You may feel like you absolutely NEED to get everything done, even if it means staying up till the wee hours of the night, but a solid block of sleep will make it easier to absorb whatever new information that’s coming your way tomorrow.

Trust the process

It can be easy to question your sanity — as well as the structure of a program like this — during immersion. As one of my cohorts put it, “They’ve thrown us into the ocean to teach us how to swim,” and that is a jarring experience for anyone. New technologies, new theories, new EVERYTHING, is coming at you at a furious pace, and you will likely feel at times like you aren’t learning a thing. But you are.

Get plenty of Vitamin D

Sunshine is surprisingly important, especially when you’re holed up in a classroom with 10 other people for 11 hours a day. Take the time to get out and remind yourself that there’s an outside world, even if it’s just to go down the street for a snack walk.

Cry

Okay, this one may sound weird coming from a 40-year-old man, but what I’m really trying to say is, allow yourself to feel the emotions that will surely come. If you try to suppress them, they’ll build and build and explode when you least expect it. You have to manage your feelings and emotions, and let it all out when you have to.

Laugh

You’re in a very serious, very hard program. So is everyone else in the room. You’re all stressed beyond belief, so remember to recognize the lighter moments of the day. Smiles and laughter are contagious, and it’s amazing what they can do to brighten your day.

Hug your kid (or your spouse/parent/sibling/friend)

As hard as this program has been on me, it’s been nearly as hard on my family. I leave at 8 a.m. and get home at 8:30 p.m. I get about 15 minutes with my 4-year-old at night before reading books and about an hour with him in the morning, assuming I’m not working on code before class. My wife has basically been single-momming it for the past three months, and she often sees me in my most exhausted (i.e. cranky) state. Reminding her and my son that I love them, and being reminded that I’m doing this for all of us, has been amazing motivation in the hardest of times.

If you’re serious about learning a new career, a program like Operation Spark is a great option, but you have to give it all you have.

Prepare for Angular with a quick look at TypeScript

Dan Murphy — Mon, 30 Sep 2019 12:29:25 +0000

When, during the junior phase of the immersive coding program I’m taking, we learned three different frameworks in a week, I questioned why we were learning AngularJS (version 1.7) when there had been so many meaningful updates since.
In addition to the theory that you learn best by seeing how something works before learning how people have made it work easier, it was assumed that we didn’t learn Angular 2.+ because that was when it switched to TypeScript, and they didn’t want to burden us with learning another language while at the same time trying to wrap our heads around the entirely new concept of MVC.
And it was at that very moment that TypeScript became some scary mental impediment to learning one of the most popular frameworks out there.
It wasn’t until I actually had the time to sit and look at what TypeScript is and what it does that I realized that it’s not scary at all. In fact, at its core, it’s just JavaScript with some extras.

What is it?

Developed by Microsoft and released in 2012, TypeScript s a superset of JavaScript that compiles down to JavaScript, making it easy to integrate into existing JavaScript projects. It was designed for the development of large apps, and it’s fully compatible with ES6.

What does it offer?

Among TypeScript’s most notable features is also where it gets its name — static type checking, meaning that variables and functions can optionally be given “types” to indicate the data type that the programmer expects. If, for instance, you declare a variable like so — let myString: string; — and then try to assign it something other than a string, TypeScript will throw an error when compiling down to ES5, but be aware that it won’t actually stop you from assigning the wrong type, so you have to keep a close eye on the console. Type-checking makes it easier to find and prevent bugs, and it will make your code more readable and descriptive.
TypeScript types include familiar JavaScript datatypes, such as string, number, boolean, array, and null, but also any, void, tuple, enum, and generics.
With TypeScript, class-based objects provide true object-oriented programming to JavaScript. In lieu of prototypes, subclasses and inheritance keep functionality in order.
Using TypeScript in your JavaScript projects is as easy as compiling the code down by using the tsc prompt in the command line, and in doing so, you can help ensure that your code is more accurate and more readable.
If you're looking to learn about TypeScript and how it can help your code, there are a ton of resources out there, including this excellent list of tutorials from the folks at Hakr.io

Adobe XD helps bring prototypes to the next level

Dan Murphy — Mon, 16 Sep 2019 12:42:49 +0000

Early stages of app design can be messy. Lots of ideas are being tossed about, and everything is being committed to a white board for consideration. After initial ideas start taking shape, the white board tends to get even messier, and trying to add a wireframe of seemingly random shapes and arrows to that mess often just makes for even more mess. That's not to mention that so much of an app has to do with the tactile feel of using the app, and you can't replicate that with dry-erase markers and a whiteboard.

That’s where prototyping software comes in to breathe life into your team's designs. There are many to choose from, including Sketch, Axure and Proto.io, but if, like me, you are comfortable in some of Adobe Creative Suite’s other apps, Adobe XD is a great choice.
With XD, UI/UX designers can use artboards to seamlessly bring in files that the design team created in Photoshop, Illustrator or Sketch and give them interactivity. Got a page with a lot of menu items? Simply choose an item in prototype mode, grab the blue handle and drag a line to the page you want it to link to. Then, when you go to preview your design with the Play button, links will act like you’ll want them to when the app goes live.

Adobe XD accommodates for an impressive variety of screen sizes, allowing teams to see exactly how their app will behave on different devices with varying screen sizes and dimensions. And to be sure that your app has the right feel on the right device, Adobe offers access to a collection of free UI kits, ensuring that sliders and buttons in iOS or Android look just like they do throughout the rest of the operating system. Customizable collections allow for even more access to items that will be reused throughout the app, from typefaces to icons to colors.

Designers that are used to working in grids, such as Bootstrap’s and Materialize’s 12-column grid, will feel right at home designing with customizable layout grids that XD provides, making spacing and predicting responsiveness much easier at all screen sizes.
Adobe XD allows for collaboration through all levels of your team, from the designers to the engineers to the product owners and stakeholders. Once a first draft of a design is complete and is submitted for review, a link is sent to each member of the team. From there, they can offer feedback on user experience or design. With pins, feedback can be even more specific, nailing down changes to the granular level.

Once comments are given, changes are made and everyone’s happy with the look and feel of the app, XD offers an option to Share for Development, which provides a link to developers with all of the pertinent information and files, from what colors and fonts are being used to the css styles for each element. This puts everyone on the same page and makes for easier collaboration among designers, engineers and product owners.

Double your linked list, double your fun!

Dan Murphy — Mon, 05 Aug 2019 12:14:32 +0000

Doubly linked lists may not be the sexiest complex data structures around — we’re lookin’ at you, hash tables — but when you browse the internet or use a music player like Spotify, chances are you’ve traversed one of these complex data structures.

Much like a linked list, a doubly linked list consists of non-contiguous nodes in memory that are connected via “pointers” that tell the computer where the next piece of the chain is in memory. They both also have a head, which points to the first node in the list, and a tail that points to the end, but while the nodes of single linked lists only reference the node that follows them in the chain, nodes in double linked lists refer both to the node that follows and the one that came before.

This gives doubly linked lists an advantage when it comes to time complexity, but puts them at a disadvantage when it comes to the amount of memory they take up compared with singly linked lists. Because they require not just one, but two references to other nodes, the nodes in a double linked list take up more space in memory, but, if you know the “address” of a node in the chain, that extra information makes tasks like lookups, insertions and deletions much more efficient. Because a single linked list must be traversed from the head, all operations are at least linear time complexities, but double linked lists can be traversed from either the head or the tail, and the time complexity of deletion and insertion of specific nodes is constant because the only references that need to change are the nodes on either side of our target node — and we already know where to point them thanks to the information provided by our target node.
These lists are helpful for providing the forward and back buttons on a music player or web browser, giving undo and redo functionality to applications, and offering the ability to serve up a “recently used” list of files in an application’s file menu.