00:00:08.910
Thanks for joining me for my talk on modular front-end development with HTML. However, that's not exactly the title of my presentation.
00:00:15.960
This talk is actually about Bob Ross, the painter.
00:00:22.800
I love Bob Ross, and I've been meaning to do presentations about him at various conferences. Unfortunately, my proposals were never accepted.
00:00:28.680
So, I decided to throw in some buzzwords like Sass and CoffeeScript, and it worked pretty well. You're in for a treat.
00:00:35.070
I did a talk a while back at EuroRuby in Amsterdam, and during my presentation, this was the hashtag, which trended on Twitter.
00:00:42.480
So do your best! For those who don't remember, Bob Ross is the white guy with the afro, the only one who could pull it off.
00:00:47.670
He used to be on PBS. Well, he still is, in reruns. Unfortunately, he has passed away.
00:00:53.940
I love to watch Bob. He used to create these awesome paintings, and Bob is the inventor of what I call micro-painting.
00:01:05.399
Here's a link between modular front-end development and Bob. He would have this happy little tree, a crooked tree, a house, and clouds, rearranging these modules to create new paintings within 30 minutes.
00:01:19.050
That's what we want to do with our front-end code. We want to take those modules, those bits and pieces, and reuse them. Like Bob, we all like to start with a blank canvas. There's nothing better than starting a new project because this time, we're going to do everything right. It’s going to be awesome—no refactoring!
00:01:39.770
So you start coding, and for a few weeks, you go at it like Bob Ross, riding a unicorn through a sky of rainbows. Just pure joy!
00:01:54.990
I found an awesome image online, Googling 'Bob Ross unicorn rainbow', and it turned out to be one of the top results.
00:02:01.830
After a few weeks of coding like Bob Ross, you take a step back, expecting your work to resemble an immaculate Bob Ross painting. But instead, you're greeted by something that looks more like a dead rat lying next to a bottle of ketchup.
00:02:14.550
I’ll leave that on for a bit while I sip some water. Oh, that’s gross.
00:02:19.050
So how did that happen? You have this h1, and you want it to be black—well, that makes sense.
00:02:31.920
But in some cases, it has to be red. So when it's used inside some element with the ID 'sidebar', it has to change.
00:02:39.000
Wait, for the Twitter widget, it needs to be green!
00:02:44.570
You see, CSS specificity can be tricky. The previous rule takes precedence unless you use '!important'—that’s how it works.
00:02:58.860
For tweets in the sidebar, they should indeed be green. I just do it like this; it’s only one more exception to the rule.
00:03:06.470
So you add an extra class, like 'alt-header', because that has significance in how you manage your code.
00:03:14.590
This is how you end up with code that looks like dead rats lying next to bottles of ketchup. Ah, as Bob would say, you’d be in agony by now.
00:03:24.110
I did not make this up. Again, the Internet’s go-to source for Bob Ross quotes is available.
00:03:31.010
A little about myself: My name is Roy Tomeij, and you can follow me on Twitter at @edroy.
00:03:41.230
I get a lot of mentions from people looking for a different Roy, and I appreciate your feedback, whether it’s positive or critical.
00:03:51.430
I'm the co-founder of Rubicas and 280 Beans in Amsterdam. Enough about me; my company Craft is the only one globally providing Photoshop PSD to HAML, Sass, and CoffeeScript services.
00:04:02.140
I’m also writing a book on the subject; here’s a shameless plug—visit roytomeij.io/book to sign up for the beta release.
00:04:11.290
To get started, a webpage is a collection of modules. Luckily, I don't have to explain this in too much detail because we all know Twitter Bootstrap.
00:04:28.100
Bootstrap has reusable modules that can be utilized anywhere on any page, and it will just work.
00:04:36.720
But we don’t want the entire Internet to look like Twitter Bootstrap; we already have that.
00:04:44.240
Bootstrap is great, but we want our own branding, our own modules styled according to our design.
00:04:50.140
What we're aiming for today is to create code for your design that leads to a Bootstrap-like approach.
00:04:58.120
The objective is to have your own modules reused throughout your application, meaning we shouldn't think of a webpage as just a page anymore.
00:05:05.870
Instead, we want to view it only as a collection of modules.
00:05:13.340
Let me illustrate by referencing the site for Eielson Air Force Base in Alaska. This site was constructed entirely out of tables.
00:05:27.390
That’s something we don't do anymore; we haven't been doing it for at least the past ten years.
00:05:34.360
Yet, tax money still goes to sites built this way.
00:05:40.600
But look at this—instead of assuming an H2 will only follow an H1, we should make every piece of code reusable.
00:05:49.180
The first aspect we must discuss is HTML5. Since its introduction, we now have new ways of writing code that encourage reuse.
00:06:01.670
In HTML4, you would have had only one H1 for SEO purposes, followed by other heading tags.
00:06:10.890
In HTML5, you can use multiple H1s. We now have new semantic elements.
00:06:18.220
Instead of a div with an ID, we should actually use an aside. Instead of a div with a class for an article, we can now use an article element.
00:06:26.640
All these new sectioning elements allow us to start with an H1 without breaking the hierarchy.
00:06:32.500
So please don't go around replacing all your divs with HTML5 elements just yet. Some divs are simply divs.
00:06:41.400
However, elements like aside and article can help you build a design that’s easier to reuse.
00:06:48.670
It's also essential to ensure that your code will work in older browsers; that's where tools like Modernizr come in handy.
00:06:56.370
Any SEO experts in the room? Oh, I once had a guy tell me he hated me for saying this.
00:07:05.190
He was vehement about the 'one H1' rule, but I challenged him.
00:07:12.510
We've been using multiple H1s for years without penalties from Google.
00:07:20.950
Google even used multiple H1s on their sites and products. In 2009, Google stated that using multiple H1s was fine.
00:07:29.610
So go ahead. SEO experts may have their opinions, but you should structure your code in a way that allows for easy reuse.
00:07:38.100
Just remember this is your world.
00:07:44.720
Next up is CSS. Now that we have structure, styling is key.
00:07:50.630
To style something modularly, the first step is to find a suitable designer.
00:07:59.480
I've seen designs where the same element appeared on multiple pages but looked slightly different each time.
00:08:06.640
You don't want that. Elements need to look alike to encourage reusability.
00:08:15.910
One trick I use is to print all designs, put them on a wall, and then cross out anything not unique.
00:08:23.490
You’ll end up with everything crossed out except for the truly unique modules.
00:08:30.900
However, I understand this isn't very eco-friendly.
00:08:33.860
If you want to save trees, look for ways to identify common elements without wasting paper.
00:08:41.100
When people ask me how to refactor an existing project, my answer is usually to throw out everything and start over.
00:08:48.820
People often resist this, especially when they’ve been working on a project for years.
00:08:55.780
Instead, I suggest they keep current code and start the refactoring process.
00:09:03.190
I'm not a Ruby developer, but I understand that refactoring Ruby code can be tough. Refactoring front-end code isn’t any more enjoyable.
00:09:11.600
Give those modules a new class name without changing the CSS file. Keep everything updated without worrying about breaking changes.
00:09:18.500
Finding and normalizing recurring modules that look slightly different can be achieved through discussions with your designers.
00:09:28.160
It’s essentially the only way to ensure you’re on the right path during refactoring.
00:09:35.620
Clean code leads to clean files. It’s perfectly fine to copy and paste code between files. Just remember to remove the duplicates from the old file.
00:09:45.580
Over time, you’ll end up with empty files, so just delete them and focus on maintaining clean new files.
00:09:52.090
When writing code, each module should have its own scope or namespace.
00:09:58.340
For example, I use a class name that starts with 'mod-'.
00:10:05.000
This indicates that the elements with this class name are expected to be reusable.
00:10:11.680
You should be able to copy and paste those HTML elements, up to the closing tag, and have it still work.
00:10:18.130
This emphasis on independent modules supports the best practices in CSS.
00:10:25.000
When dealing with generic modules used in other modules, like buttons and forms, you need super shallow selectors.
00:10:31.850
Don't limit your styling to specific HTML elements; use a class name without tying it directly to an element.
00:10:38.210
For instance, you may have a button that looks like a button, but you also want links that behave like buttons.
00:10:45.760
In practice, use descriptive class names to convey the meaning and styling for generic modules.
00:10:55.220
Media queries are also part of this reusable approach, so they belong inside your modules.
00:11:02.400
You can nest a media query inside a module class name to maintain its relevance and functionality.
00:11:10.360
This provides a great way to ensure your media queries are tied directly to your modules.
00:11:19.620
If you're wondering, this is not OO CSS or SMACSS, which are different approaches that require you to manage many class names.
00:11:26.600
My approach is about writing reusable code for back-end developers. They typically want to copy HTML and apply classes without heavy CSS influences.
00:11:33.190
People often mistakenly treat the entire page as a module, which works for truly unique pages like a signup or landing page.
00:11:41.290
However, many smaller modules exist in any design, and recognizing them is crucial to effective design.
00:11:48.000
Once you can identify these modules, you are well on your way to successful front-end development.
00:11:59.700
Now that we have structure and styling, let’s move on to behavior.
00:12:06.100
I follow a practice where I use class names for CSS and IDs for JavaScript.
00:12:14.340
In our example, we have a class name for articles, and I use it consistently across CSS.
00:12:21.050
However, for specific interactivity, I'll target elements based on unique IDs.
00:12:29.230
This keeps things clear and manageable when working with jQuery or other libraries.
00:12:34.230
Using IDs in CSS can be problematic, thus I reserve IDs purely for JavaScript.
00:12:41.420
This can help avoid unintended changes or conflicts within the CSS.
00:12:48.170
When an ID is changed, it could inadvertently affect the styling of the element. This often leads to broken UIs.
00:12:55.000
Keeping your JavaScript separate from CSS as much as possible is crucial.
00:13:02.250
Elements can be easier to manage if you maintain a clean separation.
00:13:08.600
Using data attributes is also a great way to maintain interactivity without overloading your CSS.
00:13:15.800
What does this look like? An example might include a list item with a data attribute indicating gender.
00:13:22.500
Using jQuery, you can easily target and manipulate elements based on those data attributes.
00:13:29.250
People often debate the efficiency of selecting elements by class names versus data attributes, but both have their merits.
00:13:36.140
For instance, you can compare performance and usability across various devices.
00:13:43.120
Using data attributes may provide clarity when working with JavaScript.
00:13:50.600
If you want to take it up a notch, run performance tests using various test cases to gauge effectiveness.
00:13:58.710
Each piece of functionality should align with a purpose within your code structure.
00:14:06.280
Finally, let’s talk about file structure. Your code needs to be organized.
00:14:12.580
I prefer to use a single Sass file per module, making it clear and concise.
00:14:19.370
We also apply this principle to JavaScript, with files named according to their module.
00:14:26.140
This ensures your code is cohesive and structured.
00:14:33.580
Here’s an example of my directory structure, with separate folders for base, generic, and module-specific styles.
00:14:41.680
This helps maintain order and ensures that your core styles load before module-specific styles.
00:14:48.000
Using Sass, you can control the load order and manage how your styles apply.
00:14:54.730
With this method, your code focus remains on maintaining a clean environment that is efficient and functional.
00:15:00.650
As we wrap up, always keep in mind that clean and modular code promotes effective design.
00:15:07.290
This is just the tip of the iceberg, but it provides a good foundation for developing responsive and adaptable interfaces.
00:15:14.050
Remember, successful code leads to better applications.
00:15:21.370
Thank you for your attention, and I’m happy to take any questions you may have.
00:15:30.450
What are your thoughts on using modules inside other modules?
00:15:35.500
Avoiding collisions is crucial. You may run into situations where one module assumes the default text size, leading to conflicts.”},{