00:00:16.710
Well, good morning, everyone! Unless we're waiting for the seats to fill up, we will get started. Just kidding!
00:00:28.090
If you're looking for Sandy Metz, this is not her. We get mistaken all the time, but she's actually across the hall.
00:00:36.210
So, let's get started. Today's topic is "Front-End: Fun, Not Frustration." This will be an unordered list of 12 items, but we will get organized eventually.
00:00:43.210
I've compiled 12 things you should know as a back-end developer to make your life easier when working with front-end code, particularly CSS.
00:00:54.250
This presentation will cover some low-hanging fruit. Some of it you might already know, while some might be entirely new, but they're all useful.
00:01:07.570
If you have any remarks regarding this presentation, feel free to mention me on Twitter. I'm @roy. I'll be nice, though!
00:01:13.930
If you need to say something negative, then please, don’t mention me! I'm here to help you have more fun working with front-end code.
00:01:24.610
I flew here from Amsterdam, Holland, just to share tips on making front-end coding more enjoyable.
00:01:31.689
After a long day of working with front-end code, I want you to feel satisfied and not needing to call your friendly neighborhood front-end developer!
00:01:37.500
Let's dive into the list of 12 tips. The first thing I want to discuss is the box model and how to use it better.
00:01:55.689
To a browser, every element on a page is considered a box, and the box model helps the browser determine how to calculate the size of each box.
00:02:01.360
Traditionally, browsers use the box-sizing content-box model by default.
00:02:06.729
Let’s say you have an element with a width of 800 pixels, 100 pixels of padding around it, and a border of 10 pixels. The browser will render it like this. Your element is set to 800 pixels wide but then adds the padding, which means adding 100 pixels on both sides, along with the border width, which is 10 pixels on both sides.
00:02:25.519
So, what should be 800 pixels wide ends up being 1020 pixels wide. This issue can be easily solved by using the border-box model.
00:02:32.180
You can use the universal selector to set all elements to use box-sizing: border-box. This way, the total width of the element remains 800 pixels, including the padding and border.
00:02:50.840
This method saves you a lot of calculations and headaches when you change padding, preventing layout issues.
00:03:01.359
It’s especially useful for percentage-based layouts. For example, if you have three columns each set to 33% width and add some padding, using the traditional box model will lead to layout issues.
00:03:08.750
In fluid and responsive designs, using the border-box model is advisable. Otherwise, you might end up nesting elements to maintain width.
00:03:36.139
The second tip is about margins. Margins used to confuse me too!
00:03:43.570
Let’s say I have an element with a margin of 100 pixels all around it. If you stack two of these elements on top of each other, both having 100 pixel margins, you'll find they only have 100 pixels of space in between.
00:03:56.600
This happens because browsers collapse the horizontal margins. However, the vertical margins do not collapse the same way. You need to remember that horizontal margins will collapse, but vertical margins won't.
00:04:17.180
The next topic is positioning. By default, browsers treat all elements as statically positioned, meaning they stack on top of each other.
00:04:35.960
If an element grows, the element below it will move down accordingly. When an element on the left expands, the one on the right shifts too. Position static means everything is in the normal document flow.
00:05:06.000
Then, there's relative positioning, which is mainly used to absolutely position an element relative to another element.
00:05:13.570
You can still use offsets for positioned elements, giving you more control while maintaining their place in the document flow.
00:05:40.540
This is especially useful in responsive design, which can get messy if you're not careful with positioning.
00:06:00.169
Positioned elements can create overlapping issues if they’re placed absolutely, whereas using relative positioning can maintain proper alignment.
00:06:17.000
Next up, there’s fixed positioning. A fixed element always appears relative to the viewport, which can be useful for menus that stay on top when scrolling.
00:06:46.309
Knowing when to use which positioning method and ensuring it works across various browsers is important.
00:07:03.500
A common approach is to apply position relative to everything until it works, but I suggest taking the time to learn about these positioning values.
00:07:20.650
Now, let’s talk about inline-block elements.
00:07:28.410
Whenever I mention inline-block elements, it brightens people's day because they simplify many layout issues. In HTML, we have block-level elements and inline elements.
00:07:51.420
Block-level elements, like divs and paragraphs, stack on top of one another, whereas inline elements occupy only as much space as they need.
00:08:13.900
The trouble comes when trying to set width on inline elements. So, people resort to using floats, which often leads to layout problems.
00:08:43.180
Inline-block elements resolve this issue by allowing you to apply dimensions to elements while still behaving like inline elements.
00:09:02.280
For instance, if you have a list and make the list items inline-block, they can sit next to each other without using floats.
00:09:19.610
However, inline-block elements can bring extra spaces between them due to new lines in the markup.
00:09:37.100
To avoid this, you can set the font-size of the parent container to zero, and then reset it for the child elements, effectively removing any visible spacing.
00:09:57.320
This method is a clean way to achieve a horizontal layout without the unwanted gaps.
00:10:07.100
Next, we’ll discuss vertical alignment, an area where many back-end developers struggle.
00:10:30.340
When you want to center a box in the middle of the viewport both horizontally and vertically, a common, and easy solution is to use a table.
00:10:49.830
By creating a one-row, one-column table and setting it to 100% width and height with vertical alignment set to middle, you can achieve this easily.
00:11:07.250
Yet, you can also replicate tables' behavior using semantic markup. Set the parent element to display: table, and the nested element to display: table-cell, then apply vertical-align: middle.
00:11:27.920
This will work well across modern browsers, providing a cleaner, semantic method without tables.
00:11:45.040
Lastly, there’s the problem of styling buttons. Supporting various browsers such as older versions of Internet Explorer can be particularly tricky.
00:12:05.210
You have two primary options for buttons: either input type submit or the button element itself. By setting the type to submit, both will function similarly.
00:12:24.080
The key difference being that the button element allows for children markup—so you can include images, additional formatting, or text.
00:12:43.300
To style buttons optimally across different browsers, utilize pseudo-elements for extra flair and customization.
00:13:06.870
Now let’s briefly touch on pseudo-elements. These are CSS elements that let you insert content surgically into the DOM, behaving as if they were part of the document.
00:13:25.500
For example, using ::before and ::after allows you to insert images or text without cluttering the HTML markup.
00:13:50.230
You can also use them for various purposes, such as adding icons to links that are marked as secure through parameters detected in the href.
00:14:09.680
More importantly, pseudo-elements contribute significantly to responsive design, working hand in hand with media queries.
00:14:29.210
By creating CSS rules based on viewport characteristics, you tailor how your links and images appear across various screen sizes.
00:14:44.260
In CSS, we can select elements based on their attribute values—a helpful tool for improving user experience.
00:15:07.560
Moreover, you can group elements and style them uniformly, making your code easier to manage.
00:15:20.620
I encourage you to read the CSS Selectors Level 3 specification to explore its applications.
00:15:42.690
In addition, CSS animations can enhance the aesthetic appeal of a site without relying heavily on JavaScript.
00:15:56.490
I prefer using CSS for animations to avoid the complexity of JavaScript. With transitions and animations, you can create smooth visual changes without much effort.
00:16:30.700
For example, a transitioned element’s color might change gradually from red to blue when hovered.
00:16:50.490
You can also animate dimensions, like the width of a sidebar on scroll in and out actions via simple CSS manipulations.
00:17:10.480
This method opens doors for smoother user interactions and can reduce the need for heavy JavaScript libraries.
00:17:28.220
While CSS handles most animations gracefully, understanding how transforms work can be crucial for performance.
00:17:46.690
Hardware acceleration can improve the performance of animations, although it’s important to rely on the browser for optimal usage.
00:18:05.870
Transitioning from fixed design to responsive design can be a challenge. Fluidity represents a middle ground.
00:18:20.870
For instance, setting a min width of 320 pixels and max width of 1280 pixels allows for a flexible design that improves readability.
00:18:36.480
Simply centering your layout is a quick win that offers a better experience on large screens.
00:18:52.090
Let’s also discuss SAS, as many Rails developers use it for added benefits like placeholders.
00:19:09.780
Placeholders let you structure your CSS more flexibly, reducing redundant code when reusing styles.
00:19:25.960
Additionally, SAS lists help manage pairs of states and relevant icons efficiently.
00:19:42.430
In essence, SAS turns your CSS styling into a programming-like experience, which can greatly enhance your workflow.
00:19:59.440
Now, let’s quickly touch on SVGs. SVG is a scalable vector graphic format that is ideal for responsive designs.
00:20:21.920
It's retina-friendly, meaning it retains quality regardless of size, and it's compressible for better performance.
00:20:38.800
SVGs are also supported widely, making them a strong choice for modern web design.
00:20:53.300
We've covered a variety of tips that can make front-end coding easier and more enjoyable.
00:21:12.260
Thank you for your attention. My name is Roy Tomeij, and I’m with AppSignal, an awesome error tracking and performance monitoring tool for Rails.
00:21:27.570
If you have any questions, feel free to ask now or catch me later on Twitter. You can also download these slides at roytomeij.com. Thank you!
00:21:44.210
Thank you!