Author: phpInfo

When the conversation about the value of "View Source" rolls around, the #1 response I hear is along these lines: No way, Jose! I use View Source all the time! It's very useful when you want to look at the raw HTML, not the DOM. Yes, that is useful, and yes, there is a difference. But just because you are looking at DevTools doesn't mean the DOM is the only thing you can see.   This is Chrome DevTools. Safari has a Resources tab There is also a Network tab in DevTools for every browser. That's where you find a way to look at the document. Firefox's Network tab So, if your concern about losing View Source is that you'd have no possible way to see the document instead of just the DOM, that's just not true. You can rest assured that you have the same affordance in DevTools. ...

End-to-end testing is awesome because it mirrors the user’s experience. Where you might need a ton of unit tests to get good coverage (the kind where you test that a function returns a value you expect), you can write a single end-to-end test that acts like a real human as it tests several pieces of your app at once. It’s a very economical way of testing your app. Cypress is a new-ish test runner with some features that take some of the friction out of end-to-end testing. It sports the ability to automatically wait for elements (if you try to grab onto an element it can’t find), wait for Ajax requests, great visibility into your test outcomes, and an easy-to-use API. Note: Cypress is both a test runner and a paid service that records your tests, allowing you to play them back later. This ...

A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid isn’t just for pages! That is a common myth. Although it is certainly very useful for page layout, I find myself just as frequently reaching for grid when it comes to components. In this article I’ll address using CSS grid at the component level. Grid is neither a substitute for flexbox nor vice versa. In fact, using a combination of the two gives us even more power when building components. Building a simple component In this demo, I’ll walk through building a text-and-image component, something you might commonly find yourself building on a typical site, and which I have frequently built myself. This is what our first component should look...