Archiwum kategorii: CSS

lite.cnn.io

Post pobrano z: lite.cnn.io

This little website pulls in all the main stories from CNN and strips almost everything from the design; styles, images, fonts, ads, colors. Nada, zilch, gone. At first it looks like nothing but hypertext and it feels like an extraordinary improvement but Sam Saccone made a thread about potential improvements that the team could use to make that experience even faster such as server side rendering and replacing the React framework with something smaller, like Preact.

Either way this approach to news design is refreshing. However, I can’t find anything more about the the motivations for building this version of CNN.com besides the announcement on Twitter. It would certainly be fascinating to learn if CNN built this specifically for people caught in disastrous situations where battery life and load time might be a serious matter of life and death.

Direct Link to Article — Permalink


lite.cnn.io is a post from CSS-Tricks

Compilers are the New Frameworks

Post pobrano z: Compilers are the New Frameworks

Tom Dale:

Increasingly, the bytes that get shipped to browsers will bear less and less resemblance to the source code that web developers write.

Indeed. I suspected the same:

Because performance matters so much and there is so much opportunity to get clever with performance, we’ll see innovation in getting our code bases to production. Tools like webpack (tree shaking, code splitting) are already doing a lot here, but there is plenty of room to let automated tools work magic on how our code ultimately gets shipped to browsers.

Tom also says:

This is a loss in some ways (who else got their web development start with View Source?) but is a huge win for users, particularly in emerging markets.

It seems to me today’s world of GitHub, StackOverflow, and the proliferation of learning resources more than make up for learning via our own website spelunking, not to mention how insightful today’s DevTools are, even if what they are looking at isn’t hand-authored.

Direct Link to Article — Permalink


Compilers are the New Frameworks is a post from CSS-Tricks

Do you put anything in your code specifically for “Find in Project”?

Post pobrano z: Do you put anything in your code specifically for “Find in Project”?

During a having a team meeting the other day, a code formatting idea came up that I thought was super interesting. It had to do with formatting code in a such a way that made it easier to find what you were looking for later with any code editors „Find in Project” feature.

Here’s what it was.

When declaring a function in JavaScript, put a space after the function name and before the opening parenthesis, like…

function doSomething () {

}

That space between doSomething and () is perfectly fine. Then when you call the function, don’t use a space, like this:

doSomething();

It’s just a syntax convention.

But now, „Find in Project” is more useful. If we want to quickly find where that function was defined, we can search for „doSomething ()”, and if we want to find instances of where it is used, we can look for „doSomething()”.

You could extend the idea to classes or whatever too:

class myThing () {

  constructor () {

  }

  doThing () {

  }  

}

let example = new myThing();
example.doThing();

I’d say that’s worth doing.

It reminds me of when I need to where a Ruby method is definied, I can always search for „def foo” since that „def ” is required for creating the method.

I can imagine a scenario where it might be useful to define base classes in CSS like .module { but then if it’s a variation or nested or used again for any other reason… .module{.

Here’s a classic:

// TODO: 😅

— Charlotte Dann (@charlotte_dann) September 10, 2017

Leaving TODO comments throughout your code base turns a „Find in Project” for „TODO” an instant list of things you need to work on. Surely that could be even more nuanced, incorporating things like priority levels and assignments. Perhaps even emoji’s to help like Charlotte suggested!

Here’s an interesting one:

Use long classes/variables, mark future refactor points with comments. What are you looking for?

— Chris Pauley (@ChrisPauley) September 10, 2017

I like the idea of „long names”. I suppose the longer and more descriptively you name things, the easier they are to search for and get specific results (avoiding repetitive matches like you would with very simple names).

Comments are a great place to leave things to search for. I often use a convention where I put my own name in the comment if I want people to know it was me leaving the comment, but it’s not necessarily for me.

.thing {
  overflow: hidden; /* [Chris]: ugkghk this fixed a layout thing but I didn't have time to figure out exactly why. */
}

A smattering of responses:

At top of each template I add "<!– Start [name of template] –>", at bottom, same but "End." Helps FIP and in browser-rendered code.

— Dale Henry Geist (@dalehenrygeist) September 10, 2017

I use consistent and natural language to name things, so when documentation goes stale, at least the code itself is still easy to stab at.

— John James Jacoby (@JJJ) September 10, 2017

Not in the code itself but in Sublime settings folder_exclude_patterns you can pass in an array of folders to exclude from all searches

— Ian C Woodward (@IanCWoodward) September 10, 2017

// TODO 😕
// FIXME 😲
// WT* 😤💣

— Kamran Ahmed (@kamranahmedse) September 10, 2017

ctags is a lifesaver.

— Harry Roberts (@csswizardry) September 10, 2017

Naming conventions mate! BEM-esque those classes up `–thing` is always easier to find than `thing`

— James Bosworth (@fltwhte) September 11, 2017


Do you put anything in your code specifically for “Find in Project”? is a post from CSS-Tricks

Custom Elements Everywhere

Post pobrano z: Custom Elements Everywhere

Custom Elements Everywhere is a site created by Rob Dodson. It displays the results of a set of tests that check JS frameworks that use Custom Elements and Shadow DOM for interoperability issues.

It could look like a report card at first glance, but the description at the top of the site nicely sums up the goal of comparing frameworks:

This project runs a suite of tests against each framework to identify interoperability issues, and highlight potential fixes already implemented in other frameworks. If frameworks agree on how they will communicate with Custom Elements, it makes developers’ jobs easier; they can author their elements to meet these expectations.

Nice! Consensus and consistency are exactly what Custom Elements needs in light of the official spec being in working draft and the surge in JS frameworks using them.

Direct Link to Article — Permalink


Custom Elements Everywhere is a post from CSS-Tricks

Breaking the Grid

Post pobrano z: Breaking the Grid

If you thought CSS Grid solves issues where overflowed content escaping the confines of a horizontal layout, then think again. Dave Rupert writes up two ways he unintentionally broke outside the grid and how he wrangled things back into place.

As a Front-End developer nothing bothers me more than seeing an unexpected horizontal scrollbar on a website. While building out a checkout layout with CSS Grid I was surprised to find something mysterious was breaking the container. I thought Grid sort of auto-solved sizing.

Eventually I found two ways to break CSS Grid. As it would happen, I was doing both in the same layout.

Turns out these special cases boil down to:

  • Using overflow-x on an grid element
  • Using grid on form controls (or, more specifically, replaced elements)

Dave’s solution is a set of CSS rules affectionately named Fit Grid, which is a helper class that effectively removes and replaces the automated min-width: auto property assigned to grid items. This is a super helpful resource, though he admits it toes the line of „Clearfix 2.0” territory.

Direct Link to Article — Permalink


Breaking the Grid is a post from CSS-Tricks

Building a design system for HealthCare.gov

Post pobrano z: Building a design system for HealthCare.gov

Sawyer Hollenshead has written up his thoughts about how he collaborated with the designers and developers on the HealthCare.gov project.

In this post, I’d like to share some of the bigger technical decisions we made while building that design system. Fortunately, a lot of smart folks have already put a lot of thought into the best approaches for building scalable, developer-friendly, and flexible design systems. This post will also shine a light on those resources we used to help steer the technical direction.

There’s a lot going on in here, from guidelines on code architecture and documentation to build systems and versioning. In other words, there’s a lot of great detail on the inner workings of a massive public project that many of us are at least outwardly familiar with.

Interesting to note that this project is an offshoot of the United States Design Systems project, but tailored specifically for the Centers of Medicare & Medicaid Services, which oversees HealthCare.gov.

Direct Link to Article — Permalink


Building a design system for HealthCare.gov is a post from CSS-Tricks