Categories
Online Marketing

dotCSS 2014 – Harry Roberts – 10 Principles for effective Front-end Development

Now I know this is um dot CSS. So I should really be talking about some hardcore sass, or maybe some really intricate CSS architecture. But one thing I’ve learned is that it’s really important every now and again to just leave our tool to learn, step back and take a much broader view of what we do.

So that’s why I’m speaking about these principles, they’re personal principles of mine – these are things that I do when I work and every bit of work I do, regardless of the technology, the stack, the tools I use tries to follow these principles. They’re very new. I’ve never shared these before. So if it interested to see what people think, but that’s I kind of that’s kind of thing, I’m going for today, less about tooling more about approaches so yeah, my name is Harry.

I’m a consultant web developer. That means that I spend a lot of time with a lot of different clients. I travel around a lot and learn about everybody’s problems. I’m like a developer therapist in doing this. I’ve realized that it doesn’t matter what stacks our company uses. It doesn’t matter what which preprocessor they’re used. They always have similar problems that can’t always be solved by specifics, and it’s really important to know specifics.

It’s good to know, flexbox why it’s valuable to know about SAS, it’s very, very valuable, to know different technologies, but specifics aren’t always that transferrable. One thing I’ve learned in the last few years, especially working for myself as a consultant, is that code is actually only a tiny, tiny part of what we do think about what you do. In your your day to day life, you might deal with clients, you might spend a lot of time discussing compromises with designers.

You might spend a lot of time explaining why things can’t be done to project managers. The actual code you write is a tiny, tiny part of your drug, so I think it’s important to realize that you know focuses, should shift and mind shifted a few years ago and much much for the better. I found that on a more effective developer, by ignoring the specifics and trying to focus on principle LED approach to development.

The interest is now anyone’s thoughts on this. So if you want to tweet during this talk, I’d be really grateful, so I’ve just 10 CSS will do. I know it says you know, principles for front-end development, but I only really write CSS. So all of these principles I applied directly to CSS start off with an easy one. The simplest option is usually the best. I got Hugo who’s speaking a little later to do some translations.

For me, if they’re wrong, it’s his fault, the simplest doctrine is usually the best. This seems quite obvious right. Let’s start with an obvious one. The simple option is probably the cheapest to implement the quickest and cheapest option to implement will be the simplest one. This is good for business and we’ll talk about business in a second that’s another one of my principles, but quick and cheap to implement is really valuable and it’s also easy for other developers to inherit.

When you pick up a system from someone, it’s really complex and over-engineer, that’s a horrible thing to try and work with, so always err on the side of simplicity. If you’ve got two or more options, two or more solutions to a problem, all let’s try and pick the simplest, it’s less likely to break it’s probably more robust. It’s just locks easier to work with also lessens the amount of cognitive overhead when working with a system.

It’s a really horrible thing to have to try and remember every moving part in a system which leads men to the next bit, always try and reduce the amount of moving parts in a system as a developer. It’s very easy just to do as you’re told, or it’s very easy to build the features that have been requested. I think it’s really valuable to say no to a lot of things. The best code is no occurred at all, so it’s a really good exercise for developers to get rid of unnecessary stuff.

Anything that could be removed from a project try and get rid that could be features in. I could be telling a client that you know we don’t really need this feature, let’s get rid of it or it could be actual lines of CSS. It could be reducing a 20 line mixing down into a single helper class right. Removing the amount of moving parts is a really valuable exercise. Every moving part in a system is a potential thing to go wrong.

It’s a potential point of failure. Everything you add to a system introduces the risk of something going wrong. It’s easier to men attained a system with fewer moving parts. I think it’s a really valuable exercise to get rid. The third principle understand the business now. In this context, the business could mean a few things. If you work for an agency, the business would be your managers and the client the person funding the project.

If you work in honks, if you work for a starter for a product like Kayla, get the financial times, the business is where you work every day, you’re surrounded by the business understand the business makes you a very valuable developer. It’s important to understand that every bit of work you do has a cost and a value associated with it. Try and understand the financials. I don’t mean you know, learning what your colleagues salary is, but perhaps knowing what the company charges you out on for a day right.

It makes you much more effective understanding. The cost and value of your work means that you can make very very informed decisions about what you do for the good of the company. Don’t waste other people’s money. I like to also make you a much more valuable developer. Imagine a company looks like this and you’re just a developer, you’re, not better than anyone else, you’re, no cleverer, no more important anyone else and unfortunately you’re, probably quite replaceable.

If you look around you right now, there are hundreds of people in this room who all do similar jobs so being a regular developer. Who just does their bit of the the task, isn’t necessarily a very valuable developer to have. It sounds really cruel, but I do believe it’s true um, so, instead of having this position within a business, try and have this position trying to connect yourself with everyone else’s problems, understand the cost and the value of your work.

It makes you much more valuable principle. Number four care, laughs and care appropriately. Another thing I learned in especially my time working in big companies. No one cares about your kurd more than you do. Your client doesn’t care if you’ve used SAS or less the business doesn’t really care. If you used an inline style or not, don’t stress too much about your own work and pick the right battles for everybody else, there are a lot more people working on that team than just you.

When you have. Whenever you have discussions, you have to balance everybody else’s needs and wants remain objective. When you do this care less about your own work and care about the good of the team, the stakeholders there’s a much bigger picture out there. The bigger picture looks something like this: we have the user, the person who needs the product you’re building the team. That would be you and your colleagues, designers developers, your solutions, architects, UX guys and then there’s the business.

The person funding this project. Now I’ve worked with a lot of developers who think in this degree they think about the team. They make decisions for the team. They want to use a preprocessor, because this is one we want to use good developers a bit like jugglers. Good developers will think here. The overlap, but great developers think about everybody else’s overlap. Great developers are very unselfish people, and I’ve found this in working with different companies that the most productive teams are the people who make sacrifices themselves for the good of everybody else, so care less about your own work and care more appropriately about everybody else.

The fifth of the ten principles – pragmatism, Trump’s perfection – it’s better to have good enough working today than it is to wait for perper for perfection tomorrow, get things alive. You’ve always got time to make things better. Perfect is a real real sort of misfire on the web. Anyway, think about all the different browsers devices network connections, we will never achieve perfect, so it’s not there’s no point even trying.

I worked with a client who delayed a release by nearly two weeks, because the color of the nav highlight was wrong. That’s insane! That’s! That is a you know, that is a very soft edge case thing to happen, but that’s expensive missing out on potentially two weeks of new signups, because the nav was slightly the wrong. Color is expensive users, don’t care if they’re now slightly the wrong color, because they never saw the PS DS, pragmatism, Trump’s perfection, something hacky that works today is better than something perfect that might work next week.

Never hold yourself back in the pursuit of perfection because it just slows teams down thinker, product level right. Some of these principles seem fairly interconnected. So this is a little like think about the business, but thinking up product levels, a really valuable thing for a developer. To do there’s a very sort of old but harmful view that as CSS developers, it’s our job to build PS, DS and that’s really harmful, because that’s not true at all.

We’ve got to think about the performance of occurred base. We need to think about the maintainability. The velocity of the team we’ve got a lot more to worry about than we realize so try not to put yourself in a bubble and figure out the entire product you’re in a very, very valuable position if you’ve started understanding the business and you’re a developer. So you understand the technology, you can make great decisions for that product.

True story. I once worked a company where a simple UI decision that I made save that company hundreds of thousands of pounds – it’s too long, a story to get into now, but you want to hear it over a beer I’ll. Let you buy me a beer, but yet we’ve got a profound ability to, in fact affect not in fact affect entire product. Use that wisely do what’s right for everyone. Seven do not design systems around edge cases.

I encounter this one quite a lot. Basically, don’t let the minority lead, the majority do not bet your entire product around statistical outliers or another example. For you, I worked with a company that was making a mobile website a mobile web app. They needed a spinner right, a little loading spinner. Now we had to accommodate a really old flavor of Android and a really old flavor of blackberry.

Now the Android didn’t support CSS animations and the BlackBerry didn’t support CSS and CSS animations or animated gifs, so the team spent nearly a month building a spinner that worked in every single browser. It was a combination of sprites, some horrible JavaScript and its really clunky and a really bad rendering performance, and this spinner went out to a hundred percent of our users. So, even though I only needed to be given to a small fraction of a percentage, this spinner went out to everyone.

Designing systems around edge cases is a really expensive thing to it can hold the quality of the product back solve every edge case as an edge case. Don’t let it leak in and influence the entire build of a system number eight another. Quite specific one. Don’t make decisions based on anecdotal evidence, another true story: I worked with a company who they really should have been using a preprocessor.

They had a big, a big UI and it would have really benefited from using SAS, and I got that I asked them. How can we don’t use SAS and the response was? Oh someone told me that variables don’t work very well in SAS. Well, of course, they do. Tens of thousands of people use sat every day, of course, variables working SAS. Did you not think to try this out yourself and they hadn’t they hadn’t fought to run their own tests.

They trusted a story. They trusted some box. I never trust stories, always trusted data. It’s very expensive to ignore the numbers. Another example you’re going out to eat a restaurant and you find a hundred five-star reviews for this place, and then you see one two-star review. You will obviously ignore that two-star review. The two-star review is a statistical outlier, get rid of anomalies, always trust numbers try and avoid trusting anecdotes and stories.

The ninth principle don’t build it until you’ve been asked for it. It’s really tempting, especially as a CSS developer, I’m speaking personally here to over-deliver. It’s really cool to say: I’ve made this mix in which does this, but if you pass in this parameter it does this. The problem is no one’s asked for that. So I’ve spent the business as money. I’ve made something that I haven’t paid for. I’ve spent an extra half day, sugarcoating some some sass, no one’s asked for that, but someone’s paid for it right.

So it’s a rephrasing of yeah. You ain’t going to need it. The the programming software engineering principle and it’s really valuable to try and follow it, can be harmful because you have the cost of the initial work upfront. If someone hasn’t asked for a feature, don’t build it because you’re spending someone else’s money, but also it can influence the rest of an entire project. If you build something now that has a certain dependency on a third-party library, your product is now hooked into that dependency.

So it might have a knock-on effect with future features. You want to add um and yet maintaining things that no one even wanted. Imagine having to tell your manager that I had to bug fix something, or what did you have to bug fix? You don’t really know about it, cuz, no one asked for it, but I built it anyway, and I’ve spent two days fixing it it’s a very unwise, irresponsible approach to building websites don’t build anything until you’ve been asked for it solve every single problem.

Only when you encounter it, you might be well aware that you need to support international ization in six months time. Do it in six months time, don’t do any work ahead of time expect and accommodate change. If this is the one thing that any sort of large-scale site developer should always try and do expect and accommodate change, I’ve been doing this long enough to know that clients will throw you a curve ball.

The business will make unusual decisions. Users will request odd features. Everything is subject to change, so expect it and accommodate it. Every bit of code you write, make sure you can undo it next. You can reverse decisions, keep yourself free to change direction, never tie yourself down, never put yourself into a corner. You can’t out of everything. Is subject to change so at least accommodate that, and you can use this as a really good way to just lessen the stress.

I get a lot of workshop attendees asking me: oh, we really struggle to find the right name for something. You know we spend a lot of time thing about the right name for something my advice is always pick something now right worry about something that fixes a problem right now, because they’ll probably change anyway, don’t try and predict the future always make make sure that you Can change direction, undo things and modify decisions that were made months ago because you’ll thank yourself in the long run? So just a recap, my ten principles, my 10 personal principles for effective front-end development, pick the simplest option.

It’s the quickest and the cheapest to implement it’s the easiest one to maintain its own, that’s least likely to go wrong. No one appreciates over-engineered kurd a website is not the place to show off, reduce the amount of moving parts, remove the amount of moving part from a system so that it’s more robust, more things going on in a system means more things that could potentially go wrong. It’s a really good exercise to develop as a developer, to build less.

The best code is no code at all. It’s the fastest. It’s the most robust. It’s the easiest to debug. Understand the business be aware of the fact that everything you do has a cost and a value associated with it be responsible with other people’s money. It makes you a better developer in terms of actually writing CSS, but it also makes you more employable more valuable. Member of the team, if it can be less selfish and spend your employees money wisely, you will get more effective products off the back of it and they will appreciate that work, care less and care appropriately.

When no one cares about your CSS more than you do. Stop being enclosed in a bubble and think about what you can do for everybody, pragmatism, Trump’s perfection, don’t be the guy who holds back, or at least for nearly two weeks, because the nav is slightly wrong. It’s expensive! It’s unwise and it doesn’t help anyone hacking something together. That works today is better than having something perfect in three weeks time: thinker product-level, the knowledge you have of the product you work on allows you to make very profound and far-reaching long-lasting decisions.

Do not design systems around edge cases? Do not let the minority influence the majority of your product, always design solutions to edge cases as edge cases themselves. There’s no point weighing down the entire product to cater to a minority. Good example would be if five percent of your revenue comes from ie7 users do not spend twenty five percent of your time accommodating those users it doesn’t make any sense.

I don’t make decisions based on anecdotal evidence. Anecdotes are, by definition, edge cases. Their stories always trust data, don’t build it until you’ve been asked for it. It’s tempting to build cool things before anyone needs it, but that adds blur to the codebase. It could always go wrong. You might have to maintain that for the next two years solve every problem as and when you encounter it and finally expect under comedy change.

You know full well that clients make weird decisions. They will change their mind. The business can change, focus and direction every bit of CSS. You write every bit of code. You write should facilitate that. Never tie yourself now, never put yourself into a corner, and that is me saying. Thank you very much for listening.


 

Categories
Online Marketing

Developer tools for designers – Designing in the Browser

Today, we’re going to dive into the tools that browsers give us to quite literally design in them will be using chrome, dev tools, a material design as our baseline to see where we can adjust and play. Let’s dive in like design tools, developer tools, help designers and developers build test and debug in the browser.

Luckily, there are a ton of great tools and plugins that make this process of prototyping iterating so much fun. There are tools from everything from color selection to finessing animation, to ensuring a nice user experience on a variety of devices and even testing load at various network speeds. Dev tools help us not only to see under the hood but to also make changes and decisions and see what those decisions look like in the browser, the medium in which we’re delivering the final product.

That’s why the series is so important as designers. We have to work in this medium and use it to our advantage to really have the most control and power over our designs and what’s the first tool that we need inspect element. This is the primary entry of dev tools. Inspect element is often how I open up dev tools just by left-clicking, an element and finding that inspect item in the drop down, inspect element lets you select an elements and get information inside of it.

This information includes the Cascade of styles, styles on various States, computed values, classes, shape and size and more you can even change the text content in order, the Dom of the element within the elements panel. You do so like this, so here I’m going to left-click on this heading and hit inspect, and now I’m opening up this information here – and this is the elements panel you can see. The sizing here is 350 pixels by 32 pixels and Heights.

We have the class name here of headlines, 6 and all of the class styles inside of that. You can see here that this Moz OSX font smoothing, is not being applied in favor of the WebKit font smoothing. So it shows you which styles are being applied and which ones are being applied. We also can see here this h1, so we’re getting styles from the h1 as well as the clasp on top of it, and it shows you which styles are being overridden.

For example, this font size of 2 M is being overridden in favor of a font size of 1.25 bream with the class MVC typography headline 6. There’s also a variety of element classes that I can play with here, and I think that this is a really great way to prototype. So inside of this, if I started typing MVC typography, we get an autocomplete evolve, the different type of graphic options, so you can just sort of scroll through and start to see what these would look like within here.

So you can see that headline. One highlight two aren’t actually making a difference and that’s because I still have MVC headline six selected, so you want to uncheck that and now we can see what the headline two looks like. So if you truly want to play with a baseline for the styling here, remove all the classes and then start to search the classes that are relevant to this element. So here we can see all the typographic styles and decide which ones make sense.

This also lets you separate your logic from your styling. Your logic is the date of the text content here. So this is a header one in this form fields element, but you can apply a class on top of it to style it. However, you want say we want to style this headline, one like a headline: five or headline six. We can do that and we can test that inside of this elements panel, I’m going to select the button now so here I’m just going to hit inspect on the button and it’s going to go right to that element, and we can see that this button has A few classes as well so right now we’re using the MVC buttons raised style.

But here I could select this outline style as well and put that in there. You can play with density inside of buttons, and these are all classes that I’ve just sort of playing with earlier applying them, seeing what they looked like testing this in the browser. So it’s a really powerful tool and there’s a ton that you can do by changing. Some of these Styles around you can reorder things in the Dom as well.

I’m going to just grow back into my UI here so say we want this headline. Maybe after the paragraph we could do that we’ll probably want to change that to be not an h1. In that case, you know make sure that your Dom still makes sense, but you could reorder things you could reorder the buns. You could reorder this remember this device text there and really just start to play with your UI in the browser.

So here you could even change the text of what this says: I’m finding this label here and now I can change this to always Pat disco, and now I’m checking I’m always going to Pat disco. This is a place where you can test our front language if you’re unsure how a piece of text will fit into an element on your screen, then you can test that and you can test this at various sizes. Let’s look at the color palette now.

In this example, we have a custom properties based theme playground for material design if you click to inspect the page and we’re opening up that panel and inside the HTML. You can see this route here with all the custom properties and their color values. So here we can start to play with what our colors look like. So if I want to change the primary theme color, I could click on that square and I have this whole array of color here that I can start to pick and choose and play with and see what that looks like in my UI.

Maybe I want like a bright paint color here. You can also change the color type, so here’s the hex code, if I click on these arrows here it changes from hex to RGB a to hsla and speaking of alpha. You can also use this alpha toggle to toggle the Alpha, which is the amount from transparent to full color and how much will show through to elma behind it. So we have all of these capabilities and another fun one.

Is this color palette, so in this color palette we get a base palette of colors, but we can also start to pick color from the page. So you see these page colors here were the initial page colors. These color variable is that the dev tools have found from the page as most proud colors on that page. So, if you’re working within a design – and you have a pallet that you’re working with you – can easily find the colors from that pallet inside of this dev tool here, there’s also the CSS variables that are being pulled out here that we can get the color values From and we can just start to really play with color in this way so say I want this to be a bright pink.

That sounds good. Maybe we want to change the color on that primary here. We can also change this color value. We can change the we can change the secondary color value, so we can change this to maybe a purple value and you can start to see how this cascades throughout the entire application. So now, if I scroll through, you can see that all the secondary values, like the check boxes, the switches.

This is all live code and we can see that this is in the browser, transitioned and transformed all these elements to be pulling in those colors in the drawer. Here we see a background on the active elements and that is also pulling from the primary color but being all but faded behind, so you can still see a contrast with the text on top of it. So by applying these color changed in the browser, you can really see what that looks like in various elements and in various states of those elements.

So let’s go back to the top up here and select this button. What we can also do in dev tools is figure out if something is accessible or not, which is a really great shortcut to have so here on the button, we have a color value on a background, color value. If I click on this color value, you can see that we have a contrast. Ratio of 8.5 point 1, that’s great. If we made that color value a little bit more closer to the background color that contrast ratio starts to get lower and you can see that that’s no longer accessible.

So we get a lot of help here when you have a color and background color within an element to help us make decisions on contrast and on colors that are accessible for our users. If we click this open, we can see where that’s accessible. So we can see that’s accessible for double a for a larger text and not necessarily for Triple A which means that we will have to have that white value for it to be triple a contrast, accessible and for this to work for our users.

Make sure that you’re keeping accessibility in mind at all times and you can use the color palette inside of dev tools to help you to do that, especially when it comes to color selection and readability on various elements. Let’s talk about the animations palette in episode 1, where we talk about motion on the web, we recreated this wringing button. So let’s inspect this element in dev tools and explore what that looks like behind the scenes.

So here I’m going to hit inspect on this button. I want to make sure that I have the button selected here and then in the bottom. Here we have this animations palette. Now, if you don’t have this, you can find it in this drop-down menu, this little kebab menu and you can hit more tools in the drop-down and then animations is the first item in that secondary drop-down. So that’s what’s going to bring up this animations palette for us so now, inside of here we see that we have multiple animations happening.

If I click open on those animations, we can find that on the button we have this grow animation, where it’s growing over time and on the icon. Inside of that button, we have this ring and I can actually toggle back and forth between here like this. Is a keyframe, I can go forwards and backwards. I can pause. I can play I’m going to pull this up a little bit here. So what I can also do is I can adjust the time stamps.

These are percentage based animations. So if I wanted to make this grow really long, this will break up the effect of ringing as it grows, but just to show you, I now have it sort of off-kilter. It’s ringing its ringing still sort of not changing its size, so you can start to really break things down here. I have it ringing very tightly in this section here. I could break that up too. You can move these around, so I can move it back and forth.

I can have this start to grow before I have the ring happening, I’m ruining this animation, but the idea is to show you that you can have animations that are separate from each other and then also test what this looks like together. So now I have it ringing off kilter from the size changes, but here, if you have a lot of animations that are complexed and you have to orchestrate them together, you can take a look at what that is what that looks like you can take a look At what the animations are happening inside of this element, so we have a box shadow change to as its growing and changing color there and then start to play with this start to finesse in the browser – and this is a really great opportunity for prototyping, because if Things are off, it’s a lot easier to see it visually.

That is, to try to read the code and figure out what’s a little bit off when those time stamps are different too. If you want to slow this down to get a little bit more of a finesse and detail here, you can also change the speed at which you’re animating. So here I’ve set 25 %, and I have this very slowly now, starting to grow and shake here. Starting to ring very slowly so this is another opportunity for you to adjust speeds and see where things are in a very precise way.

10 % is another speed option for very complex animations. Again, you can start to really get in there in the details and intricacies of these animations. Let’s talk about the device panel. Now I use this tool all the time and we’re going to showcase it. I’ve opened up the material dot, IO websites and I’m just going to hit inspect from any part of the page to open up dev tools, and here is that device toggle toolbar.

So I could also hit command shift M on my Mac computer, but anywhere that you’re using Chrome. You could always, let’s click into the browser, screen and open up dev tools, so I’ve clicked this open here. I have a few options. I have a responsive option, so I could see what this looks like at various screen sizes by dragging it over. You also have a drop-down here with some default devices like the Galaxy s5, the pixel to excel, to see what this looks like at various screen sizes.

We have the iPad pro here and you’re also able to adjust this from horizontal to vertical. So you can see what that looks like when you flip that device. That’s a little bit more dramatic on a phone here. So if you flip that you get a completely different layouts, you can also again use this responsive mode. You can even edit what the devices are that you want to showcase. So here in the dev tools, I’m going to pull this out and going to hit edit, and I have a bunch of devices here – you can add a custom device.

You can add devices that aren’t currently in your drop-down by default. So if you want to test, for example, on the iPhone 4 or if you want to test on the Nexus 7, I will now have these inside the drop-down. When I next open it so there they are iPhone 4 and the Nexus 7 somewhere in this drop-down right here. So you can see that that focal looks completely different than that iPhone 4 and that’s important for you to know.

As a designer. We also have various breakpoints here that allow for you to just quickly change between common sizes, mobile medium, large tablet, sizes, laptop sizes, and you get a percentage based visualization here, that’s scaled down to fit inside of this browser screen. So if you want, you can make this 100 % view you can make it a even larger view. If you want to sort of zoom into that, you can make it 50 % sort of fit in this area, and then you can see really large screens, 4k screens you’ve.

Even and if you don’t have a 4k screen, you can still test on those devices. Your design does change, based on the DPI of your screen and kind of is determinate of whether you have a Retina screen or non-retina screen, and that can also come into play when you’re deciding what images to send to your users. So if you want to test those, I have an example here with disco right how this high-res image and now inside of my dev tools, I can actually test to see that I’m sending a lower res image with the lower resolution browsers in my CSS.

I have a media query where I’m sending a different image based on the density of the screen. So here, if I have a high density, Retina screen, I’m sending a high resolution in and if I don’t it’s going to fall back to this low resolution image. So I can actually test this with a medium dpi screen inside of my dev tools, and this becomes really useful if you’re sending a lot of large images. And you want to think about performance for your users and for their devices.

And if all of those aren’t enough for you, there are some tools that you can use to extend these capabilities and make designing of the browser even easier. One of those tools is called this bug created by Adam Argyle. We’re going to fly over to him to have him explain why it’s so useful for designers right now. Hmm this page, I like the layout – I think, there’s a lot going for it, but it’s lacking some color.

Don’t you think? Well, let’s have fun and and try it out. Let’s make some color in here with this bug. All I have to do is launch it. In fact, I’m going to scoot it down off of here so that it’s not conflicting with the header and I’m going to start with the header. It’s just asking for a nice, bold color, don’t you think? What do you think of, like a purple, ooh, pink, a hot pink, I’m always down with hot pink all right? I’m actually settled that that’s great okay, you can see our guides tool is trying to help us make some alignment checks here, as we as we hover on other elements, you can get distance between them all right, but I’m also interested in changing this image up here And I’m going to drag in a new one.

Will I have an SVG icon here? It looks like this. Oh thanks for that that didn’t work out very well, but if I drop it up here, look at that. I replaced it. That’s kind of nice all right. So what about all of this these cards? I feel like they’re a little tight. I want to check. I want to check out their spacing here. So if I select I’m trying to select the card element in here and I’m having a little bit of a trouble because there’s so many elements in here look, I can actually select the elements inside of here.

That’s crazy town, but in order to get to these grid items, I’m going to select the parent and use keyboard navigation to help me get there. Someone hit Enter, which is going to select the first item as a child, so I selected the grid container. I hit enter and I selected the first one I hit command shift E, which is going to expand my selection. It’s going to find all the other elements to match.

I found them there. I still have the margin tool. So if I hit shift down twice, I’m going to add 20 pixels to the bottom, and that’s going to give me a little bit of spacing between my rows super neat. I can actually continue using this multi selection of I hit enter. I’m going to find that that each of these cards had a rapper element I hit enter again and I’m going to get the imaged container. That’s in the upper part.

If I hit tab I’ll find the next element in the layer tree – and I want to change the alignment of these, so I’m going to grab my flex box a line tool, I’m going to hit left and right and find a nice alignment and I’m going to Pick the center and I’m going to hit enter again and we’ll find that there’s a span inside of that container, and I want to change the text size of this. I grabbed the text tool I’m going to hit up on the the keyboard a few times here.

I’m going to hit command down to change the font weight and, of course it needs some hot pink. So I’m going to go over here to my color picker and grab that hot, pink from up top close out and see what I did and look at that. We brought some color to that page, really pretty quick and we’re able to just sort of express ourselves in a nice fast manner. That was fun. I hope you enjoyed seeing a little bit of taste of what vis bug can do for you super cool.

Thank you. Adam, I really love using dev tools. I use them every day for designing directly in the browser for prototyping for making decisions, and I find that these tools are just getting better and better and better, and that’s really exciting. For me, as somebody who likes to design and build the browser, what are your favorite to have tools? Are there any that we missed in the show, and that we didn’t mention tools that you use every day? I would love to hear your thoughts.

Please leave a comment below and thanks for reading the show we’ll see you next time save I just go.