00:00:12.080
Hey guys, thanks for joining me today. We'll be discussing modular and reusable front-end code with HTML5, Sass, and CoffeeScript.
00:00:18.640
These principles can also be applied to vanilla CSS or vanilla JavaScript as well. I might have lured you in talking about Sass and CoffeeScript, but they are just part of the conversation today.
00:00:29.920
Switching gears a bit, let’s go on a journey to explore front-end design. I found out that Bob Ross, the painter, isn’t well-known in Poland, so I’ll show you one of his paintings.
00:00:41.120
This painting by Bob embodies what I call modular painting. He had a TV show where he created paintings in just 30 minutes using modules like 'happy little trees', crooked trees, mountains, lakes, and clouds.
00:01:00.640
He would take those elements and create new compositions rapidly. Bob was a charming figure with a distinctive afro and a soft voice that captivated many, including myself as a child.
00:01:14.320
As developers, we often start with a blank canvas, similar to Bob’s approach. While this isn't strictly a Ruby talk, I know many of you work with Rails, implementing front-end code, and sometimes you find yourself in a maze when it comes to CSS.
00:01:39.840
You may not always want to rely on frameworks like Bootstrap, so it's crucial to establish clean structures from the outset. Imagine coding for weeks, only to take a step back and see your work resembling a disaster instead of a masterpiece.
00:02:10.080
It’s easy to see how quickly a simple CSS rule can spiral into chaos. For example, you start with an H1 tag that you want to be black. If you later want it to be blue in certain contexts (like in the sidebar), or red in a Twitter widget, you’re quickly adding exceptions that lead to a tangled mess of specificity.
00:02:48.239
This can lead to a situation where you end up with code that resembles a chaotic mix, creating a painful experience when maintaining your styles as Bob would say, 'you’d be in agony'.
00:03:00.000
My name is Roy, and you can find me on Twitter as @roy. I’m a co-founder of 80 Beans and Rubik's Lacy in Amsterdam, as well as Slicecraft, which offers PSD to Hamel and Sass services. With 12 years of front-end experience, the last seven focusing on Ruby on Rails, I have completed numerous projects utilizing the same principles of modular design using Hamel and Sass.
00:03:52.879
Today, we will explore how to structure your HTML for reusability, bind styling and behavior effectively, and organize your files for better maneuverability. First, it’s essential to stop perceiving a web page as merely a single page. Instead, view it as an assemblage of modules.
00:04:41.120
Looking back at Bob’s life, he was born in Florida and joined the Air Force at 18, eventually stationed in Alaska. If you were to think about the internet back then, Bob wouldn’t have had a website. Today, however, the Alaskan Air Force Base has a rather outdated website that relies entirely on tables, which we wouldn’t dream of using anymore.
00:05:22.639
Instead of thinking of a web page as a single entity, consider it constructed from interchangeable modules. This modular approach allows for easy movement and reusability across your projects, which is especially beneficial in team environments with both front-end and back-end developers.
00:05:59.120
For instance, as a backend developer, you should be able to take a module, apply a CSS class, and expect it to work seamlessly.
00:06:17.440
To accomplish this, I leverage HTML5. Let’s take a quick sip of water.
00:06:30.319
Previously, in HTML4, our document outlines were quite limited. We used to have a single H1 heading, followed by H2s and H3s, leading us into a hierarchy that could complicate reusability. Now, in HTML5, we have more sectioning elements that allow multiple H1s within different contexts, facilitating reusability without the constraints of previous versions.
00:07:03.599
While the new sectioning elements are great, it's important not to replace all of your divs indiscriminately. Some divs are necessary for styling or as hooks for JavaScript. Use the new elements semantically, ensuring your sections can also start with an H1, which greatly enhances partial reuse.
00:07:49.440
Now, for compatibility with older browsers like Internet Explorer, it’s crucial to use tools like HTML5 Shiv or Modernizr, which can help smooth out the functionality across different environments. HTML5 can be used widely, and while some may argue about following old conventions of having just one H1, I assert that these practices are outdated.
00:08:38.640
Google uses HTML5 extensively in their apps that rank well, not purely due to HTML5, but because of how it's integrated effectively within their broader design strategies.
00:09:07.040
So, when it comes to HTML5, don’t let the so-called experts tell you otherwise. Embrace your creativity within the framework and remember, it’s your domain; unleash your potential, as Bob would encourage.
00:09:52.400
For modular CSS, consider how you can employ principles from Bootstrap, but remember, you don’t want all of your apps to bear the same visual stamp. You must ensure that your designs are reusable yet distinct, starting with solid design principles.
00:10:07.600
It’s vital to find a designer who understands the importance of reusability in design, ensuring that they create components that can serve multiple purposes rather than presenting a slight variation of the same element multiple times.
00:10:41.440
Refactoring can be a tough process, and you may want to approach a new project afresh rather than overhaul existing code. When considering how to design reusable components, taking the original designs and marking up the unique features can help highlight what needs to stand out.
00:11:26.720
Each module you create should have its own scope, making the code cleaner and providing clarity. Use generic class names and employ plural class names for collections. Remember, using IDs for identifying unique elements can lead to issues with validation later on.
00:12:09.840
Create shallow selectors; for example, avoid deep nesting like `#main .sidebar .twitter h1`. This specificity becomes problematic. Instead, aim for shallow selectors so your styles can be reused across your application without running into specificity clashes.
00:12:54.720
Let’s dive into an example. When dealing with articles, there can be several instances. We'll start our articles section with an H1, and every article follows afterward. In Sass, you can leverage a clean structure that’s easy to implement across all sections of your site.
00:13:36.960
This modularity allows easy adaptations across devices as they scale. Bootstrap often exemplifies this principle. When designing buttons, ensure their usability across various modules. Use shallow selectors strategically, allowing you to implement buttons in multiple contexts without being restricted by the preceding HTML structure.
00:14:12.960
Your class names should be semantically correct and descriptive of their function, not solely of their appearance. Having clear distinctions between what an element is and how it looks can streamline your design and application process.
00:14:51.520
Adopting this mindset will greatly enhance your workflow. Recognize modules and identify what elements can be reused or adapted. With time, this practice will lead to a more organized and efficient coding environment.
00:15:23.680
When dealing with JavaScript, bind your scripts to your HTML naturally. I recommend using class names for CSS and IDs primarily for JavaScript functionality. If IDs aren’t unique, consider data attributes for enhanced flexibility.
00:16:20.400
This division can solidify your testing process; clear separations between styles and script bindings can prevent mishaps during code adjustments. If you maintain a consistent structure, you'll find that changes within your CSS won’t disrupt your JS operations.
00:16:55.120
Data attributes can offer a helpful workaround for selectors. For example, using data attributes allows you to reference your elements efficiently through jQuery or other frameworks. Just remember, although switching to data attributes can yield issues related to performance, generally, the trade-offs are manageable.
00:17:38.560
Embrace the conceptual approach as your work can reflect a masterpiece by utilizing these aesthetic methods, much like Bob Ross’s approach to painting. Rearranging elements can yield new designs and efficiencies, creating a vivid picture of your project.
00:18:14.560
Structuring your files aptly is essential. Consider a structure where each module has its own Sass file, such as your widgets and headers. This practice keeps your project organized and promotes better collaboration across teams.
00:18:56.159
With JavaScript files configured similarly—one for each module—you ensure every piece remains well-defined. For example, linking a Twitter module will consistently call relevant styles and scripts, maintaining a seamless integration throughout.
00:19:38.480
Using proper importations helps, and I usually prefer application-wide setups for CSS that handle resets, layouts, and modules. By following this approach, you can always manage your file structure in a way that promotes fluid interaction among your components.
00:20:10.800
Relying solely on Sprockets for file concatenation often leads to issues since components become unaware of each other’s context. Instead, consolidate your Sass imports effectively to retain their interactions and corresponding variables.
00:20:56.440
It's vital to retain clarity where CSS and JavaScript communicate without overlap; a coherent structure sets the pathway to usability and reusability across your projects. Essentially, using a modular approach, illustrated with Bob Ross references, can enhance your development workflow, resulting in comprehensive solutions.
00:21:48.640
In wrapping up, it’s evident that structured methodologies promote cleaner, more maintainable code. Just as Bob rearranged elements for new perspectives, you too can build your front-end strategies to reflect creativity while ensuring functionality.
00:22:27.200
If anyone has questions or insights to share, now is the perfect time. I value your input and can expand on any areas of interest, including my methods or specific coding practices.
00:23:09.040
Thank you all for your attention; it’s been a pleasure sharing these insights with you today!
00:23:46.120
Are there any final thoughts or questions?