Saturday, May 18, 2024
HomeCSSCSS { In Actual Life }

CSS { In Actual Life }


2019 text with fireworks

I’m going to attempt to maintain this 2019 retrospective transient, however like many individuals, I discover it cathartic to look again on the yr’s triumphs and disappointments (not dwelling for too lengthy on the latter), and prepared for myself for the yr forward.

I want to keep away from setting myself unrealistic or unattainable targets for the yr forward. However I do wish to set myself small, achievable ambitions and milestones, which received’t deliver the world crashing down if I pivot from the objective, or if life will get in the way in which, however will deliver a little bit of satisfaction to have one thing to test of the checklist by this time subsequent yr. So, please excuse me whereas I take a (barely self-indulgent) have a look at the yr simply gone.

This weblog

I’m continuously blown away by the (relative) success of this weblog. Over the previous yr I’ve acquired so many good messages which have boosted my confidence, from individuals who have discovered my articles useful, in addition to just a few individuals within the business I actually look as much as and admire for his or her work. It by no means will get tiring to listen to, and continuously jogs my memory why I write. So, thanks, in case you’ve learn this weblog and learnt one thing, or shared it with your mates.

I set myself the goal of publishing a minimum of two articles monthly, and I’ve caught to that – permitting myself the occasional dry spell of some weeks, however at all times making up for it later. This feels about proper, and I’ve no plans to lower the output in 2020.

One objective I set myself on the finish of final yr was to do extra illustration for this weblog. I’ve finished fairly effectively at illustrating ideas for articles, however probably not as a lot as I’d like. Hopefully I can enhance on {that a} bit extra in 2020.

A few (controversial?) choices I took in 2019 had been, firstly to permit advertisements on the weblog, and secondly so as to add analytics. I used to be approached by Carbon about promoting on this platform, and though I used to be initially skeptical, a little bit of investigation (together with suggestions from well-known business figures) satisfied me that they’re a good associate. Advertisements are at the moment restricted to the underside of articles, so they’re as unobtrusive as potential. Relaxation assured, I’m not making large quantities of cash from this, and I’m not at the moment planning to broaden the promoting any additional, so that you received’t see intrusive advertisements creeping in through the coming yr.

Including analytics was a private determination, and one which I contemplated for some time earlier than taking the plunge. I discover it helpful and attention-grabbing to see what sort of articles individuals are studying on the location, and seeing a gradual enhance in customers over time is extra rewarding than the instant-hit validation of Twitter. However I nonetheless contemplate this a trial interval, and it could be one thing I take away somewhat manner down the street.

What’s subsequent for CSS {IRL}?

Prime of the checklist is I’m contemplating a transfer away from Gatsby, the static web site generator this weblog at the moment makes use of. I don’t hate Gatsby, and it has rather a lot to advocate it – notably the method of getting began was tremendous easy, with nice documentation and tutorials. However as the location has grown, I’ve discovered it tougher so as to add new options, and are available up towards just a few roadblocks.

Whereas I used to be utilizing React day by day, it made sense to proceed to make use of a React-based SSG, however now that I’m not utilizing it for my day-to-day work I really feel this can be a good alternative to department out and take a look at one thing new. I’m contemplating 11ty, and each Andy Bell and Mike Riethmuller have revealed starter kits, which I count on to be taught rather a lot from, and even use instantly. One other risk is Gridsome, which is Vue-based. I’m beginning to be taught Vue for work, so it looks like it might be alternative to strive one thing new.

I need to fully rebuild the location from the bottom up, and that features a model new redesign too. Lots of the performance feels bolted on, moderately than being integral to the design from the start, so it could profit from due consideration. I need the redesign to incorporate a greater option to seek for articles, and discover different articles associated to the one you’re studying.

This alone is a fairly bold objective, and one which I anticipate taking over a good bit of time. Apart from that, I don’t foresee any main modifications from a content material standpoint. I discover myself naturally writing rather less about CSS Grid nowadays and somewhat extra about different CSS options specs that curiosity (like scroll snap and customized properties, however I received’t be leaving Grid behind solely. As I take advantage of it increasingly more in my day by day workflow, I’m positive I’ll at all times discover new issues to put in writing about it. I hope subsequent yr I’ll discover a while to actually discover the chances that subgrid brings.

Talking

In 2019 I turned a Mozilla Tech Speaker, and spoke at a complete of 9 occasions. Whereas that’s not rather a lot for some individuals, it’s definitely sufficient for me! Some private highlights had been Upfront (a convention I’ve attended a number of occasions), State of the Browser (which I used to be honoured to be invited to talk at for the second yr in a row!), and London CSS, run by the dynamic duo, Ana Rogrigues and Oliver Turner. Whereas there are parts of talking at conferences that I actually take pleasure in, and I’m grateful for the alternatives that talking has introduced me, I discover the entire course of fairly tense. Make no mistake, making ready a chat takes rather a lot of labor! Between talking and writing articles, I’ve unfold myself fairly thinly this yr, and in 2020 I need to give myself enough time for artistic private initiatives. I nonetheless plan to do some talking (I’ve a few engagements lined up already), however I’ll be extra selective about which alternatives I say “sure” to.

Writing

In addition to writing on this weblog, this yr I’ve written articles for Net Designer journal, LogRocket and 24Ways. The latter is an online builders’ introduction calendar I’ve been studying for years, so closing the yr by having one in all my articles revealed on it felt like an enormous private achievement. I used to be blown away by the reception the article acquired and am honoured to be in such nice firm!

Being requested to put in writing a canopy characteristic for Net Designer journal was an thrilling new problem, and gave me the right excuse to discover some new CSS specs I hadn’t beforehand had the possibility to dig into.

I’m open to writing for different publications in 2020, however need to keep a wholesome stability, reserving most of my writing for this weblog.

Work

After a yr of working with React Native at cell ordering startup Ordoo, in November I returned to company life, as lead entrance finish developer at Atomic Smash. A yr of (largely) writing Javascript has been enormously invaluable to me as a developer, however I finally needed to be working on the internet once more, and particularly with CSS. I’m excited to be working with such an awesome crew, and to deal with some thrilling challenges within the New Yr. Each week offers me with new discoveries, and my work has already furnished me with a rising backlog of writing matters – which I hope to discover on right here within the months forward.

Private

Extra usually, as we’ve reached the tip of a decade, I need to take a second to look again and really feel proud. I can scarcely imagine I transitioned from a profession in occasions administration lower than 5 years in the past, and managed a big a part of that main profession change whereas elevating my son. My journey into tech was a gradual course of (perhaps I’ll write about it sometime), it hasn’t at all times been straightforward, and I’m grateful for the assist of my household. For anybody starting their journey, particularly below comparable circumstances, please know that it is potential. For those who want any assets or steering, please ship me a message and I’ll do the perfect I can.

CSS

This being a CSS weblog, I can’t depart with out a few ideas on what excites me about CSS for 2020!

Subgrid

In direction of the tip of 2019, Firefox shipped assist for subgrid, a part of the CSS Grid Stage 2 specification. This has the potential to be a little bit of a recreation changer, and will encourage an entire lot of individuals to undertake CSS Grid who’ve in any other case resisted till now…however sadly, on the time of writing, no different browsers present indicators of implementing it. Till Chrome jumps on this, any real-world use goes to be restricted at greatest. (There’s an open situation.) Let’s hope 2020 is the yr that different browsers transfer in direction of assist.

Customized properties

I’ve written rather a lot about customized properties on this weblog, and I’m discovering extra makes use of for them on a regular basis (I collated some right here). As adoption will increase, I feel we’ll see increasingly more artistic and helpful purposes for them.

Logical properties

In a nutshell, the place now we have CSS property names that confer with the left, proper, prime or backside of a component (assume margin-left or border-top), logical properties reframe these to confer with the beginning or finish of the block or inline axis. In a horizontal left-to-write language (like English), margin-left turns into margin-inline-start, for instance. However in a right-to-left language, this is able to be the identical as utilizing margin-right.

There’s rather a lot to unpack right here, and this text by Adrian Roselli is an efficient place to begin. The implications for designing and creating internationally and inclusively for the net are fairly thrilling.

Variable fonts

I’ve had quite a lot of enjoyable experimenting with variable fonts within the latter half of 2019, and may’t wait to see what new variable fonts turn out to be obtainable in 2020. In addition to doubtlessly important efficiency enhancements, variable fonts open up an entire host of artistic potentialities. I hope we’ll see designers and builders greedy these because the know-how develops and extra foundries leap on the bandwagon. For inspiration, look no additional than Mandy Michael’s 24 Methods article, Interactivity and Animation with Variable Fonts.

Personalisation

Maybe 2020 would be the yr the thought of “pixel perfection“ lastly dies a dying. We have already got little or no management over how customers eat our content material – machine sort and display screen dimension are all unknowns, as are issues like whether or not somebody is utilizing a display screen reader or keyboard navigation, or has zoomed the net web page or adjusted their font dimension, to not point out the environmental situations by which somebody is utilizing your web site (low-light situations, for instance). With the appearance of Stage 5 media queries, we are able to cater for all types of potential situations and supply a extra tailor-made expertise (similar to offering a darkish theme through the use of the prefers-colour-scheme media question), whereas recognising that our web sites are completely not going to look the identical for everybody utilizing them.

Flex hole

Firefox has already shipped assist for the hole property in flexbox – a seemingly little factor that might make constructing flex structure a lot simpler! Now let’s hope another browsers comply with go well with ( you, Chrome).

Little doubt there’s far more that I’m forgetting proper now. However the way forward for CSS is trying vivid!



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments