Tag: “Full

Full Bleed

We’ve covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques.

Perhaps my favorite is this little utility class:

.full-width {   width: 100vw;   position: relative;   left: 50%;   right: 50%;   margin-left: -50vw;   margin-right: -50vw; }

That works as long as the column is centered and you don’t mind having to hide overflow-x on the column (or the body) as this can trigger horizontal overflow otherwise.

There was a little back and forth on some other ideas lately…

Josh Comeau blogged that you could set up a three-column grid, and mostly place content in the middle column, but then have the opportunity to bust out of it:

.wrapper {   display: grid;   grid-template-columns:     1fr     min(65ch, 100%)     1fr; } .wrapper > * {   grid-column: 2; } .full-bleed {   width: 100%;   grid-column: 1 / -1; }

I think this is clever. I’d probably use it. But I admit there are bits that feel weird to me. For instance…

  • Now everything within the container is a grid element. Not a huge deal, but the elements will behave slightly differently. No margin collapsing, for one.
  • You have to apply the default behavior you want to every single element. Rather than elements naturally stacking on top of each other, you have to select them and tell them where to go and let them stack themselves. Feels a little less like just going with the web’s grain. Then you still need a utility class to do the full bleed behavior.

What I really like about the idea is that it gives you this literal grid to work with. For example, your left spacer could be half the width of the right and that’s totally fine. It’s setting up that space to be potentially used, like Ethan talked about in his article on constrained grids.

Kilian Valkhof responded to the article with this idea:

body > *:not(img):not(video) {    position: relative;   max-width: 40rem;   margin: auto; }

Also very clever. This constrains the width of everything (in whatever container, and it wouldn’t have to be the body) except the elements you want to bust out (which could be a utility class there too, and not necessarily images and videos).

Again, to me, this feeling that I have to select every single element and provide it this fundamental information about layout feels slightly weird. Not like “don’t use it” weird, just not something I’m used to doing. Historically, I’m more comfortable sizing and positioning a container and letting the content in that container lay itself out without much further instruction.

You know what I like the most? That we have so many powerful layout tools in CSS and we have conversations about the pros and cons of pulling off exactly what we’re going for.


The post Full Bleed appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

,

Full Stack Panic

A new podcast from Sean Fioritto inspired by Joel Califa’s term “Full Stack Anxiety”.

… the little voice in your head says … “I should know all of this. Do I even know what I’m doing?” Why do web developers the world over feel like this?

There is an episode with Joel talking about it as well as other interesting angles like an episode with psychologist Dr. Sherry Walling.

The overall vibe is that of catharsis in that, hopefully, none of this matters as much as it seems like it might. I’d like to think we try to deliver that, through a bit of levity, on ShopTalk Show as well.

Oh hey and Panic started a podcast too, a must-subscribe from me as a long-time fan of all their interesting work.

Direct Link to ArticlePermalink

The post Full Stack Panic appeared first on CSS-Tricks.

CSS-Tricks

, ,
[Top]

What Does it Mean to Be “Full Stack”?

I was asked this recently by a fellow developer who was at the same web tech conference I was at. This developer had met a lot of new people who literally introduced themselves as full-stack developers sort of the way Bob Vance, Vance Refrigeration would on The Office, but it was Tony Frank, Full-Stack Developer instead.

I suspect the developer asking the question taken from the title of this post already knew the basic idea of what people mean by “full-stack developer,” but was wondering what the heck it’s all about. There was a tone in the question. A tone that suggested this person isn’t exactly in love with the term.

These days, probably a bit of DevOps (e.g. Git, testing, and getting sites to production). The “stack” is all these things combined, so a full-stack developer is shorthand for: when it comes to building websites, I can do it all.

There are some stacks that have achieved notoriety over the years. Maybe you’ve heard of the LAMP stack?

Linux Apache MySQL PHP

A full-stack developer on that stack means you know Linux, Apache, MySQL, and PHP. (Abstractly: server software, web server, database, back-end language.) This site runs on that stack, and I’m solely responsible for its development, so I guess I’m a full-stack developer in some loose sense.

But “loose” is a generous interpretation. I don’t know the first thing about Linux, except that’s what runs my web servers. I don’t know much about Apache, except that I sometimes use HTAccess directives to do things. I could count the number of MySQL queries I’ve written on my two hands, and I only really know PHP in the context of WordPress.

Looked at that way, I’m barely a developer at all. Full stack, on the other hand, generally refers to tossing front-end tasks into the mix and I’m competent enough in that space that my front-end skill set alone, has allowed me to build dozens (or hundreds!) of sites throughout my career. Full-stack-enough, anyway.

There are loads of other stacks.

LAMP isn’t particularly prescriptive about how you build the front-end. It came from an era where it was assumed you’d build a back end to spit out HTML and that’s your front end.

Another stack that’s achieved notoriety since the Grand Arrival of JavaScript is the MEAN stack.

MongoDB Express Angular Node

It is perfectly plausible to replace parts of a stack. Perhaps you’d use Nginx instead of Apache, or PostgreSQL instead of MySQL in what’s otherwise LAMP stack. MEAN is notable in that every layer of the stack was replaced with new technology. Node brought JavaScript to the back end, which could power web servers, handle routing, connect data sources, run build processes, compile code, and more.

A full-stack developer in this world is writing nearly everything in JavaScript. No wonder there is somewhat of an explosion of people considering themselves “full” stack. A single language, like JavaScript, that runs in browsers itself and is a paramount front-end technology is a widely transferrable skill.

The MEAN stack can have layers swapped out just as easily as LAMP. Perhaps you use a data store like Fauna or Firebase instead. Perhaps you use Vue or React instead of Angular. Perhaps you don’t need Express because you leave your routing to a framework or do it client-side.

Shawn Wang calls another a popular stack STAR:

Design Systems TypeScript Apollo React

That’s JavaScript all the way down.

It’s notable that, while we’re still thinking of this as a stack, we’re thinking less about our servers and server software to the point they aren’t really a key part of the stack. Not that developers and companies don’t take it seriously, but it’s more abstracted now than it has traditionally been. I’d point to the world of serverless as a case in point. The questions aren’t about what operating system our servers should use; it’s what platform is the most cost-effective to run our JavaScript functions.

So, stacks evolve over time. But it’s not just what technologies they use, but what technology we even consider a part of a stack. What full-stack means morphs over time.. We’re in a place right now where knowing JavaScript grants you a full-stack merit badge. You can work with client site frameworks, architect components and piece them together to build an entire front end. You can write web servers. You can write back-end code that talks to APIs. You can do all the state management you need. You can construct build processes and deployment pipelines. You can even bring CSS into JavaScript if you’re so inclined.

Even if you’re largely focused on JavaScript, people’s skillsets are generally wider than that. Throw in some HTML and CSS competency, Git foo, and a little DevOps hobby and you’re a real web powerhouse. You can do it all! A renaissance man! Lord of the seven kingdoms!

I think that’s kinda awesome, actually. It truly empowers developers. While it’s worth considering where the barriers of entrance for front-end development or high, it’s also interesting to consider all the places where that bar has been lowered. It’s particularly cool for me to see front-end development grow and grow to the point of nearly swallowing up the entire stack. The All-Powerful Front-End Developer, as it were.

It reminds me an awful lot of how powerful being a WordPress site-slinger feels. You can do a lot, even if you don’t deeply understand every little bit of it.

My conference acquaintance went on:

Why are some developers so proud of being a full stack? Many of them say it with a prideful smile. They, for some reason, feel the need to emphasize full stack when introducing themselves.

I suspect it’s just that: Pride.

Pride is a tricky thing. It meant the world to me when my parents ceaselessly told me they were proud of me or something I did. A positive thing on both sides. But, strangely enough, pride is also one of the seven deadly sins and one, as they say, that might be the root of all the rest. I don’t want to over-blow things, but I think there is some connection here. It’s one thing to be empowered and to feel strong and capable, but it’s another to be boastful and not sense the edges of your ability.

We’ve all got plenty of edges, particularly when it comes to doing an exemplary job versus merely getting the job done. Standing out these days requires being exemplary. How is your visual design skill? Are you building design systems or implementing existing ones? How many years have you maintained systems? Do you have a good eye for the most painful kinds of technical debt? How are you at helping co-workers succeed? Can you facilitate a user testing session? How good are you at diagnosing performance bottlenecks? What if there are serious server problems? Does your full stack moniker help you comprehend server logs? Are you versed in accessibility audits? Have you ever dealt with tricky relational data and slow queries?

I’m not trying to convince anyone they aren’t a full-stack developer or don’t deserve that particular merit badge — just that the web is a big place with divergent needs and ever-morphing stacks that all require different sets of skills. If you’re interviewing for a job asking for a full-stack developer, by all means, tell them how full-stack-y you are.

The post What Does it Mean to Be “Full Stack”? appeared first on CSS-Tricks.

CSS-Tricks

, ,
[Top]