Posts

Posted on

A Clever Sticky Footer Technique

Category Image 091

Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.

That’s not quite what I’m talking about here. “Sticky footers” were a UI concept before position: sticky existed and they mean something slightly different. The idea is that they stick to the bottom of the screen, even when the content of the page isn’t enough to push them there. But if there is enough content, they are happily pushed down.

We covered five ways to do this in years past, which included techniques that are somewhat modern, including calc(), flexbox, and CSS Grid.

Enter a sixth challenger! Reader Sílvio Rosa wrote in with this:

(Probably easiest to check out on a medium-sized desktop screen, which is kinda where sticky footers matter the most anyway.)

It’s pretty much just this:

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

What I like about it is that it doesn’t require any special extra wrapper for non-footer content.

It’s also a little brain-bending. When I see top: 100vh; I think well that won’t work because it will push the footer outside the viewable area. But that’s the clever bit. It will do that no matter how big the footer is (no magic numbers), and then the sticky positioning will “suck it back up” to stick along the bottom edge. But it will never overlap content, so it’s happy to be pushed down below content, which is a core tenant of the sticky footer pattern.

The post A Clever Sticky Footer Technique appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Line length revisited: following the research

Typography Definitions Cover

Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that shorter lines do not necessarily lead to faster reading. If you’re looking for a definitive answer to use in your next design review debate, though, no dice. The big finding is that long lines don’t slow things down as much as previously thought, not that they’re better or worse.

But there’s so much more meat in here that I found much more interesting, mostly because I’m largely ignorant on the topic and gained a dollop of context on writing, legibility, and behavior.

Things like…

There’s a term for transitioning between lines of text

It’s return sweeps. You know, like your eye hits the Return key at the end of the line and sweeps to the start of the next line. Then, there are undershoots. The idea is that eyes may not sweep to the exact start of the next line, instead stopping a bit short.

Showing four muted lines of test with jump arrows across each line taking the eye to the end of the line, followed by dashed arrow leading to the next line. Red arrows highlight where the eye could undershoot a new line and miss content.

Those little rapid eye movements between words and phrases? Those are called saccades. I had to look that up.

The impact of undershoots is what’s being challenged

The previous research we’ve relied on for years comes from 1940(!), a time when we obviously were more concerned with paper pages than bright digital displays. Longer lines, it said, increased the likelihood that eyes undershoot during a return sweep, and undershooting results in a regression that results in a 130ms to 250ms delay where the brain needs to get its bearings. The report refers to that as undersweep-fixation.

We can still process words during undersweep-fixation

This report cites a 2019 study that tried to correct undershoots by bolding the first word at the start of each new line, sort of like an anchor that naturally draws the eye closer to the left margin.

The 2019 study did find that the bolded words did decrease undershot return sweeps But despite that, reading speed did not improve. That’s the impetus for challenging the long-held assumption that shorter is better.

Mary explains further:

In seeking to reconcile why longer line lengths may not slow down reading on screen but do so when reading print, I outlined some differences, e.g. visual angle, time spent scrolling. But although physical differences between reading from screen and reading print still exist, we now have direct evidence to explain why longer lines were read at least as fast as shorter lines. Readers can process words during the brief fixation when undershooting the start of the new line. This saves time in subsequent processing. Now we might also acknowledge that there is greater consistency between the range of optimal line lengths for print and screen.

Where does this leave us today?

Well, nowhere closer to a clear answer we can use in our day-to-day work. But it’s good to dust off our collection of design and copywriting best practices and know that line length is less of a constraint than perhaps it has been.

Again, none of this tells us whether long or short lines are better. Mary ends her report by saying she cannot definitely recommend using longer lines of text because there are clear because there are still some factors at play, including:

  • Shorter lines are more effective for people with dyslexia.
  • More questions about return sweeps and undershooting need to be answered.
  • Several other studies indicate that users prefer shorter lines and judge longer lines as more difficult to read.

To Shared Link — Permalink on CSS-Tricks

The post Line length revisited: following the research appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Other Looks at the Conditional Border Radius Trick

Category Image 052

Remember when Ahmad Shadeed wrote about that border-radius “toggle” he found in Facebook’s CSS? It was interesting! I covered it. A few weeks after that surge of linkage, a couple of articles came out digging into it a little deeper.

In “Evaluating Clever CSS Solutions,” Michelle Barker wonders how clever is too clever?

While undoubtedly clever, and super interesting to read about, I side with Robin Rendle in the CSS-Tricks newsletter when he says:

I can’t help but feel that it’s a little too smart.

I have to agree here. Tricks like this have their place, and Facebook (which can clearly afford to hire the best of the best CSS developers) might be one of them. But speaking personally, when forced to pick between a trick like this and an ever-so-slightly less optimal but far more readable solution (say, a media query), in 99% of cases I’d plump for the latter.

Michelle is aware that a media query isn’t the same solution here. A non-clever solution would be a container query. I agree as well. I almost never opt for tricky solutions in production, as even if they seem to work, I worry about the long term maintenance and sometimes even the fragility of the solution.

Stefan Judis looked at how we might pull of the same “conditional border-radius” idea only using the upcoming container queries syntax. 

/* If the container's width is equal to or greater than 
   the viewport width, remove the border-radius */
@container (width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}

That’s pretty darn clear to me. Stefan also mentions that if we could use the theoretically upcoming @when feature, it could be even clearer:

@when container(width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
@else {
  .conditional-border-radius {
    border-radius: 1em;
  }
}

That is a big maybe, as there is no evidence these brand new specs will overlap like this. I hope they do though. CSS has gotten much more logical and readable over the years and this would keep that train moving.

Oh, and I mentioned this in the last article…

The 9999 multiplication means that you’ll never get low-positive numbers. It’s a toggle. You’ll either get 8px or 0px and nothing in between. Try removing that part, resizing the screen, and seeing it sorta morph as the viewport becomes close to the component size

But I regretted not putting a video in there to make the concept clearer, so I’ll rectify that here.

The post Other Looks at the Conditional Border Radius Trick appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Semantic menu context

Category Image 052

Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a list. I would suspect the intention is much like <nav> is today, but I really don’t know.

Short story: HTML 4 deprecated it, HTML 5 revived it—this time as a “group of commands”—and then HTML 5.2 deprecated it again. Kind of a bummer since it has some clear use cases.

So, it’s been quite the roller coaster for ol’ <menu>! There never seems to be any easy wins for HTML evolution. As of now, it’s in “don’t bother” territory:

I really wrote this post as a sort of counter point to the often uttered phrase “use semantic HTML and you get accessibility for free!” That statement, on its surface, is largely true. And you should use semantic HTML wherever its use is appropriate. <menu>, unfortunately, doesn’t really give us all that much, even though it has clearly defined semantics. Its intended semantics and what we actually need in reality are better served by either just using the more robust <ul> element, or creating your own role=toolbar, menubar, etc.. Using this semantic element, for semantics sake, is just that.

To Shared Link — Permalink on CSS-Tricks

The post Semantic menu context appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

React vs Angular vs Vue: Which Framework to Choose in 2022

Featured Imgs 23
React vs Angular vs Vue: Which Framework to Choose in 2022

When starting a new web app development, a lot of business owners ask themselves: "What tools are the most suitable to use?" “What web framework to choose for the project?”

JavaScript will obviously be the core as it provides the most extensive front-end functionality today. But a dilemma arises when choosing a development environment, namely the best JavaScript web frameworks because each is endowed with unique features.

Typically, the controversy is centered around three frameworks - React, Angular and Vue. In this article, we consider the advantages and disadvantages of each web framework as well as its popularity among developers. As a result, each business owner will choose his side on the neverending battle of React vs Angular vs Vue.

Developers' Choice

First of all, we analyzed developers’ surveys, including Stack Overflow and The State of JavaScript. Every year they provide the most accurate information regarding the popularity and state of web app development.

According to Stack Overflow Developer Survey 2021, React.js was named as the most commonly used web framework (among both categories: all respondents and among professionals). Angular took 4th place among all respondents (22.96%) while professional developers (26.23%) choose Angular as their most commonly used web framework. Despite the rapid development of Vue.js, this framework takes only 6th place in the ranking among professional developers (20.09%) and 5th among all respondents (18.97%).

React vs Angular vs Vue: Which Framework to Choose in 2022

Newcomer Svelte takes the top spot as the most loved web framework. At the same time, developers most of all enjoy working with React (69.28%) and Vue (64.41%), and Angular (55.82%). Among those who have not previously developed applications using these frameworks, React.js turned out to be the most desirable to learn (25.12%). It is followed by Vue.js (16.69%), followed by Angular (8.47%).

React vs Angular vs Vue: Which Framework to Choose in 2022

State of JS survey is this annual report is a major indicator of the development of JavaScript in general and all the tools associated with it. Predominantly, developers are happy with the workflow with React.js (88%) and Vue.js (85%), while Angular is 42% satisfied.

React vs Angular vs Vue: Which Framework to Choose in 2022

With regard to web app frameworks usage, most of the respondents chose React (80%) and Angular (56%) as the leading frameworks to solve problems. Starting from 2017, the popularity and usage of Vue (49%) started to grow, increasing the percentage of framework usage year after year.

React vs Angular vs Vue: Which Framework to Choose in 2022

It is noteworthy that relatively small businesses prefer React.js and Vue.js, while large companies (100+ 1000 employees) use Angular more often. Nevertheless, these indicators are approximately equal.

One of the important indicators of the development of a technology stack is the number of package downloads. NPM trends show the most accurate statistics for each tool, including not only the number of downloads but also the Github data.

React vs Angular vs Vue: Which Framework to Choose in 2022

Framework Development

Angular releases major updates, usually every six months. Since it is characterized by dependence on previous versions and components, the framework has a service with a detailed description for version migration. In addition, Angular has an Ivy compiler that indicates errors if they occur before the interpreter executes the code. The framework is based on the RxJs library and, in principle, functional code is based on reactive programming, which, in turn, leads to a declarative paradigm: the code is easily covered by unit tests, and testing tools come out of the box.

React is quite active in changing public APIs and behavior, and the updates themselves through versions are usually simple. Since Facebook stands for stability, there is full compatibility between versions and the ability to connect libraries of different versions to the application.

The dynamics of Vue development is the highest of the presented frameworks. The modular system includes all the attributes of the JS framework, working with full backward compatibility. And when moving from one version to another, Vue has a helper tool that runs in the console to help assess the state of the application.

Availability of Developers in the Market

If we evaluate the popularity of jobs with a request for specialists in these web frameworks, the Google Trends data looks like this.

React vs Angular vs Vue: Which Framework to Choose in 2022

It’s important to mention that most job listings say that they require experience with one of a few named frameworks, but a large share of those listings is actually hiring for React work. So, the job market reflects a clear hierarchy of React followed by Angular then Vue by almost every site sample. It’s worth noting the different cultures of the sites sampled. They all clearly have Vue as the third-tier framework, and Angular not too far off from React.

What is the Best Web Framework for the Project?

Angular as a framework is used to develop large applications, due to a number of architectural solutions come out of the box, including TypeScript. On the one hand, this can be a limitation, and on the other hand, it can be a quick solution to a standard case. There are also DI mechanisms for ease of testing and dependency replacement. Angular as a framework is highly specialized. And the threshold for entering development on it is quite high. In addition to the knowledge of an ordinary JS developer, you need to have a good understanding of how this framework works.

React has a large arsenal of related libraries. It is suitable for any task. It can be applied for MVP, small and medium projects. It can also be chosen for the development of sites with minimal business logic at the front, since there is a boilerplate. However, in React there are no "imposed" solutions out of the box, so competent specialists with good development experience and knowledge of both architectural patterns and the work of native JS (engine, in particular) are required. Otherwise, the likelihood of the appearance of irrelevant code (or, in professional slang, "crutches") in the project will increase.

Vue is suitable for medium applications and MVPs. High speed at the start allows you to make an MVP in a short time. The scalability of the Vue application will also help to dynamically develop the project. The cost of starting on this framework is lower than that of React due to the convenient CLI and a good supported set of libraries out of the box. At the same time, the ease of scaling is higher than that of Angular. Plus, Vue is easier to learn, so companies have begun to place more emphasis on hiring developers with knowledge of Vue.

Now let's take a look at each web application framework separately and talk about the pros and cons.

Pros and Cons of React Framework

React.js has been ranked #1 for the third year in a row. Some developers have no complaints about this framework at all, since it is rapidly evolving and becoming more stable. One of the key reasons behind the popularity of React.js is the support from the reputable company Facebook. Services such as Instagram, Whatsapp and Twitter work today on the basis of this development environment. They are all very fast and eye-catching. This has ensured a high level of trust in React.

Advantages of React

  • Maintained and supported by Facebook, framework has the large community;

  • Clear and detailed documentation;

  • Relatively easy learning curve;

  • Flexible in structure;

  • One-way data binding approach;

  • Uses virtual DOM to enhance the performance;

  • Ability to create reusable and easy-to-test code.

Disadvantages of React

  • Extensive flexibility meaning that devs have too much choice;

  • Extensive templates of JSX may seem confusing.

React will be the perfect solution for flexible and dynamic web applications with a high traffic. The framework will be suitable for projects with simple and clean frontend and high level of scalability. Companies that use React: Facebook, Instagram, New York Times, Airbnb, Netflix, Atlassian, Dropbox, Whatsapp, Codecademy.

Pros and Cons of Angular Framework

Angular has long been the top choice for UI development. So, it became part of the popular MEAN stack. Angular is perfect for complex and highly interactive web applications. Maintained by Google, Angular has a hight level of trust and a huge community of developers who constantly contributed to the solution.

Advantages of Angular

  • Maintained by Google, Angular has a huge community and defined implementation methodology;

  • Detailed tech documentation;

  • MVVM (Model-View-ViewModel) pattern;

  • Providing dependencies in modules;

  • One-way data binding approach.

Disadvantages of Angular

  • Quite steep learning curve, since a developer has to know additional tools like TypeScript, RxJS library, etc..

  • Migration issues from the older versions to the newer one.

Angular framework is perfect for complex and large-scale projects. If the business owner plans to scale the business in the future, Angular is the best choice since it guarantee smooth scalability of application. Companies using Angular are Google, Upwork, PayPal, Forbes, Samsung, Delta, Grasshopper.

Pros and Cons of Vue Framework

Recently, the popularity of Vue has grown without the input of large community of devs or organizations. Due to framework flexibility and easy learning path, Vue became one of the most beloved tools among frontend developers.

Advantages of Vue

  • Short learning curve since the syntax is quite simple;

  • Detailed documentation;

  • Easy structure;

  • Flexible integrations which can be easily setup with Typescript, JSX, etc.;

  • Two-way data binding approach;

  • Allow scale the product with no time.

Disadvantages of Vue

  • Maintained by a small team and supported by a small community, so there could be lack of resources.

Vue might be the perfect choice for the applications that tend to be released quickly to the market. In addition, this framework will benefit the development of high-performance, small and lightweight applications. Companies using Vue: Grammarly, Xiaomi, WizzAir, Adobe, Behance.

Final Thoughts … So, what to choose?

When choosing the best web framework for your projects, you should pay attention to popularity, speed of stack development, availability of specialists in the market, areas of application, and the project requirements.

Answering one of our clients' favorite questions - "What framework should I use for web app development?" we, first of all, advise you to pay attention to how well thought out the architecture of the project.

If it is well thought out and there is an understanding of the final look of the product, Angular may be the most obvious choice. In case the project is MVP, React or Vue will do their job best. Having accumulated all our development experience, we recommend choosing Angular for large-scale and complex projects. React is perfect when you need high performance, and the project itself is implemented under tight timing conditions. And if you have a minimum of time to train specialists in the framework and need a small project or MVP, you can safely choose Vue.

If you still have some questions regarding what web framework to choose, drop us a line in the contact us section below and we gladly help you!

Posted on

341: Challenges

Featured Imgs 23

Marie and Chris talk about CodePen Challenges, which have been going strong for many years now. The gist is that you pop in and make something along a theme. The “challenge” is doing the work (they aren’t meant to be tricky otherwise). We’ve seen people seriously level up their skills by participating, but of course, there is no obligation, and no prizes other than the satisfaction of a job well done.

One interesting twist is that Chris used to do a lot of the challenges while Marie was running the podcast, but we just up and switched jobs and we both prefer our new jobs much better (for now!).

Time Jumps

  • 00:51 Explaining how time works
  • 01:45 Having monthly themes
  • 06:33 Sponsor: Netlify
  • 08:08 How to be a part of challenges
  • 13:03 Putting together the challenge collections
  • 17:04 Makes sense from a business perspective
  • 19:28 Swapping roles and creating more joy for everyone
  • 25:47 Using better dashboards to build fun things

Sponsor: Netlify

Just look at the October 2021 changelog at Netlify. They are always building things and making the features they offer better. We know firsthand how difficult that is to pull off, so hats off! One feature (BETA) that is definitely worth a look is On-Demand Builders. What a great idea for making your builds and deploys fast and efficient.

The post 341: Challenges appeared first on CodePen Blog.

Posted on

How to Remove Render-Blocking JS & CSS for Site Speed

Category Image 052

How to Improve Speed by Removing Render-blocking JS & CSSWhile the aesthetics of a website are important, its content and loading speeds keep people coming back. WordPress supplies users with a sophisticated toolbox of plugins and themes to create their very own custom websites quickly. However, these themes and plugins require JavaScript (JS) and Cascading Style Sheets (CSS) to work. WordPress creates them automatically […]

The post How to Remove Render-Blocking JS & CSS for Site Speed appeared first on WPExplorer.

Posted on

WordPress Polyglots Team Launches New Monthly Newsletter

Category Image 006

WordPress’ Polyglots team has published the first edition of a new monthly newsletter aimed at helping contributors stay informed and engaged with the team’s activities.

WordPress has been translated by volunteers for more than 15 years since version 1.2, with the earliest contributions from the Hindi, French, Japanese, and Norwegian communities. Since that time the Polyglots team has grown to include the work of 55,427 translation contributors. They have also adopted more efficient tools like P2 and Slack to stay connected, but some translators find it difficult to follow the constant stream of posts and meetings.

The monthly newsletter was launched to provide a short-format digest of all the significant happenings and discussions in the translation community. It will include news related to upcoming releases and Polyglots tools, condensed so contributors don’t have to keep a close eye on the team’s P2 blog, Slack channels, or RSS feed.

The first edition features a brief summary of the month-long WordPress Translation Day 2021 event, which brought in 697 new translation contributors. Altogether the contributor teams submitted 518,710 approved translation strings during 22 local and six livestream events.

The majority of people using WordPress are using it with a translation. As of October 2021, 55.36% of WordPress sites are running a translated site. That figure is slowly inching upward as WordPress adoption grows in the non-English speaking world.

WordPress Locales

Even if you’re not a member of the Polyglots team, this newsletter is a good way to stay up-to-date with the exciting frontier of WordPress translations. Subscribers can sign up to receive monthly Polyglots updates directly via email.