## Fullstack Development Trends

Fullstack development has moved from rarity to commonplace over the past few years. In 2021 it is easier than ever to be a fullstack developer simply because of all of the tools available. A recent post on noupe.com highlights the [top 7 fullstack development trends to follow In 2021](https://www.noupe.com/development/fullstack-development-trends-to-follow-in-2021.html). It provides a stellar prediction of what to expect as the industry progresses this year and might even give you some ideas on new skills to learn.

## Responsive CSS Frameworks

Love 'em or hate 'em, CSS frameworks have become an integral part of web design and development. There are many out there, each with its own cult following, so Super Dev Resources has published a list of the [15 best responsive CSS frameworks for web design in 2021](https://superdevresources.com/responsive-css-frameworks/). Unsurprisingly, Bootstrap and Tailwind topped the list, but check out some of the others if you are looking for an alternative or have never used a framework before.

## State of Design in 2021

The design field is always changing and evolving so it's important to assess what happened last year to predict changes this year. Luckily, Abstract has done all of the hard work for us with their [State of Design in 2021](https://www.abstract.design/state-of-design). Besides the beautiful design and interface of the website, there are several key points that are thoroughly elaborated on with charts, data, and research. A couple of the top ones are the necessity for better ways to measure impact and the pain points of design collaboration.

## Success as a Creative in 2021

Last year changed the game for most designers as we had to find new ways to be collaborative, adaptive, and productive in a different environment. Hopefully, 2021 brings better predictability, but regardless it is important to stay up to date with trends and learn new skills. The latest post on Dribbble's blog outlines [how to get ahead as a digital creative in 2021](https://dribbble.com/stories/2021/01/21/bannersnack-tips-for-creative-success). With tips like learn to work with new tools and work on your management skills, it is a great overall guide to get your professional career started off right this year.

## Chrome 88

As of last Tuesday, version 88 of the Chrome browser has begun to roll out to the stable release. This version brings some great new features for developers such as manifest v3 for Chrome extensions and the *aspect-ratio* CSS property for any element. There are tons of new features, bug fixes, deprecations, and more to read about, so check out the [release post on the Chrome Developer blog](https://developer.chrome.com/blog/new-in-chrome-88/).

## Performant Animations and Micro-Interactions

There's no doubt about it, animations give your website that next-level, polished look. But there is a fine line between tasteful animations that enhance the experience and animation for animation's sake. Luckily, Logrocket is here to help with a recent post from their blog that explains [how to design highly performant animations and micro-interactions](https://blog.logrocket.com/how-to-design-highly-performant-animations-and-micro-interactions/). This highly detailed guide breaks down the importance of performance on website speed and accessibility through actionable examples, like trying to stick to the composition properties *transform* and *opacity.*


For many years the bane of any web designer's existence was something simple: centering an object on the page. Horizontally centering was one thing, but getting an item to vertically center was a whole different monster. Even worse was both vertically and horizontally centering an element. However, modern CSS stylings have made this a snap with just a few lines of code. Gone are the days of absolute positioning an element 50% of the top and left of its container and bumping it back negative 50% with a transform. Now we can use Flexbox or CSS Grid to quickly center the element and move on.

## Using Flexbox

Flexbox makes it very easy to align items in the center of the container with just three lines of CSS. Just set the display to `flex` and center the items horizontally (`justify-content: center`) and vertically (`align-items: center`).

``` css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
```

Now all items originate from the center of the container!

It is important to note that if you change to `flex-direction: column` the properties have the opposite effect: `justify-content` becomes the vertical axis and `align-items` becomes the horizontal. Think of it as rotating the container element's axes.

## Using CSS Grid

Meanwhile, CSS Grid makes it even easier by only needing `place-items: center` to center elements in the grid. Just set the display to `grid`, place the items, and you're off to the races.

``` css
.container {
    display: grid;
    place-items: center;
}
```

If you want to control the individual axes you can use the same properties as we did with Flexbox instead, `justify-content` for the horizontal axis and `align-items` for the vertical.

``` css
.container {
    display: grid;
    justify-content: center;
    align-items: center;
}
```

Never get tripped up with centering an element on your website again. Whether you are using Flexbox or CSS Grid add a couple lines of code and move on to something more deserving of your skill and attention.

## Credit

_Today’s Tuesday Tips was adapted from [a series of posts on Daily Dev Tips](https://daily-dev-tips.com/posts/css-grid-most-easy-center-vertical-and-horizontal/)._



CSS is one of the first languages that budding web designers learn. This is probably because the tangible results are easier and quicker to achieve than other languages. However, CSS can be used for so much more than changing a few background colors or positioning elements on the page. Modern day CSS has been used for some amazing creations that we never would have believed possible only a few years ago.

Recently, CSS has been used to create some astounding products in art and animation. These creations range from [a realistic painting made entirely out of CSS](https://github.com/cyanharlow/purecss-francine) to 3D animated shapes and objects, like [an X-Wing from Star Wars](https://codepen.io/juliangarnier/pen/hzDAF). With newer features and properties we can transform from using CSS as a design language to a developer language.

The next logical step is to build games with pure CSS. What once required JavaScript now can be done in with CSS, although it tends to take a lot of lines of CSS instead of a few JavaScript functions. Most games have been reminiscent of the games we have from the early 2000s like digital [tic tac toe](https://codepen.io/una/pen/aNZEbB) or even [Mario Kart](https://codesandbox.io/s/zk15o120xl).

Perhaps one of the biggest pure CSS creations is a search engine. Search engines are one of the most complex features on the internet with thousands of lines of JavaScript plus databases and other components. However, [Algolia was able to create a primitive search engine](https://community.algolia.com/algoliasearch-client-css/demo/) with pure CSS. Although you can’t expect it to search the web, it does a nice job of sorting through the predetermined results and filtering categories.

Again, it would be very simple to code with a few lines of JavaScript but it is really neat to see what can be accomplished with CSS. Each year we are breaking the limits of what we thought was possible with CSS. As new properties are added and people come up with creative utilizations of old and new features we are able to push the limits of what is possible.

Even using CSS in JavaScript frameworks like React or Angular is helping to progress the language. The biggest inhibitor is legacy browsers that are not supporting certain properties. However, we’ve seen a growing need to unify the web and companies are starting to remove support for legacy browsers in favor of modern ones.

With new properties like CSS Grid and additional pseudo classes the future of CSS is looking very bright!



## No Media Query Responsive Layouts

[CSS-Tricks](https://css-tricks.com/) published a post today titled _[Thinking in Behaviors, Not Screen Sizes](https://css-tricks.com/thinking-in-behaviors-not-screen-sizes/)_. The main point of the post is that in modern web development we should think beyond breakpoints for a more fluid layout. The post goes on to describe how to use CSS Grid to achieve a responsive website with no media queries.

## Onboarding a Junior Developer

A recent post on the [DEV community](https://dev.to/) discussed [how to onboard a junior developer](https://dev.to/carolstran/onboarding-a-junior-developer-to-your-team-here-s-12-tips-4g3a). The post gives actionable examples of integrating your new hire into the team and practices established by the company. Some of the tips include teaching the company’s Git process, learning their style, and always being available for questions.

## Open-Source Fonts

[WIRED](https://www.wired.com/) published an article last month about [open-source fonts](https://www.wired.com/story/open-source-fonts-love-letters-design-community/) and why they are becoming more popular. The open-source font Raleway, for example, has grown to 9 font weights and is one of the most popular options on Google Fonts. This has also led to variable fonts which are gaining more publicity in the web developer community.



There are four core CSS Grid properties that make up a vast majority of the grid utility. Essentially, if you can master these four you can handle the basics of creating a grid and placing your page elements inside it.

## Displaying the Grid

Before using these four grid properties we of course must set the `display` property to `grid`. Once we do that we have put our child elements inside a grid. You can also create multiple grids on one page to ensure that your layout doesn’t get too out of hand.

## Grid-Template-Columns

The first property that we’re going to discuss is `grid-template-columns`. This is applied to the grid container element and is used to define the columns of the grid. This property doesn’t just layout the columns but the widths of those columns. If you were to set this property to `200px 200px 200px`, your grid would have three columns each 200px wide.

## Grid-Template-Rows

The second property, similarly defined on the grid containing element we made, is `grid-template-rows`. This functions the exact same way as `grid-template-columns` but defines the number and heights of the rows.

For both the properties you can use values common to some other properties, like percentages, auto or px. But a great feature of grids is the fractional value, or fr. This value takes up a fraction of the space remaining, so in its basic form it is similar to percentages in that if you set the three columns each to 1fr they would each take up one third of the width. However, it can also be used in combination with other values.

For example, if we set the columns to `200px 1fr 2fr`, the first column would be 200px wide the second would take up 1 fraction of the remaining space and the third would take up two fractions of the remaining space. So, the second column would be one-third of the remaining space and the last column would fill up the remaining two-thirds. This allows for some pretty dynamic layouts!

## Grid-Gap

The third property is `grid-gap`, also set on the grid containing element. This sets the spacing between all grid elements, however it is different from a margin because there is no spacing around the outside of the grid. Think of it as if the grid was a tic-tac-toe board, the grid gap would be the spacing where the lines are drawn, so where two boxes touch. This property can be more specific by using `grid-column-gap` or `grid-row-gap` to set these values independently.

## Grid-Column and Grid Row

The final properties are `grid-column` and `grid-row` which allow us to place child elements in the grid. You can set span values for these properties on the child elements to delineate how many rows and / or columns that element should take up. So, for example, you could set the child element’s `grid-column` property to `span 3` and it would go across three grid columns.

With these handful of CSS Grid properties you can quickly and easily create website layouts. It is especially great for creating a wireframe or low fidelity mockup. Once you’ve mastered these you’ll feel confident taking on the more advanced properties.

## Credit

_Today’s Tuesday Tips was adapted from [a post on CSS-Tricks](https://css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs/)._



## No IE Support in Bootstrap 5

[A recent Themesberg post](https://themesberg.com/blog/bootstrap/bootstrap-5-ie-11-browser-support) discussed Bootstrap 5, which will be released later this spring, and how it will not support Internet Explorer 10 or 11. This decision is being made in the web community more often with many large companies already dropping support for IE. Despite the lowering usage Microsoft will continue to support IE 11 through 2025.

## Dribbble Website Redesign

[Dribbble](https://dribbble.com/), a social networking platform for designers and creatives, recently rolled out a [new website design](https://dribbble.com/stories/2020/03/16/a-brand-new-dribbble). This is the first redesign for the Dribbble website in ten years and strives to showcase the designers more. Included in the redesign is updated profiles, new collections and a new curator profile.

## New CSS Media Queries

[Logrocket released a post](https://blog.logrocket.com/new-media-queries-you-need-to-know/) a few weeks back about the forthcoming new CSS media queries. Some of the new media queries include light level, preference-based queries, and even custom media queries. These [new media queries are still in spec](https://drafts.csswg.org/mediaqueries-5/), so some are available while others are still being worked on.

## Leading a Remote Team

[Mark Boulton recently wrote](https://markboulton.co.uk/journal/found-yourself-leading-a-remote-design-team/) about leading a remote team, giving tips for leaders that are new to working remotely. Information like this is becoming increasingly important as teams are currently being forced into remote work longer than originally thought. Learn about creating rituals, asynchronous communication, and prioritizing your people.



Did you know that you can target specific versions of Internet Explorer right in your CSS stylesheet? There are several media queries and selectors that can combine to allow you to write CSS for a version of Internet Explorer. There are even queries that can select multiple versions in one fell swoop. This changes the game for how many designers and developers create their websites. Check out some examples below and view more at [browserhacks.com](http://browserhacks.com/)!

## IE 11 and above

``` css
_:-ms-fullscreen,
:root .ie11up {
	property: value;
}
```

## IE 10

``` css
_:-ms-lang(x),
.ie10 {
	property: value\9;
}
```

## IE 9

``` css
@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
	// IE9 CSS
	.ie9 {
		property: value;
	}
}
```

## IE 8

``` css
@media \0screen {
	.ie8 {
		property: value;
	}
}
```

## IE 7

``` css
* + html .ie7 {
	property: value;
}
```

## IE 6

``` css
.ie6 {
	_property: value;
}
```

## IE 6, 7, and 8

``` css
@media \0screen\, screen\9 {
	.ie678 {
		property: value;
	}
}
```

## IE 8, 9, and 10

``` css
@media screen\0 {
	.ie8910 {
		property: value;
	}
}
```

## IE 9 and 10

``` css
@media screen and (min-width: 0\0) {
	.ie910 {
		property: value\9;
	} /* backslash-9 removes ie11+ */
}
```

## Microsoft Edge

``` css
@supports (-ms-ime-align: auto) {
	.selector {
		property: value;
	}
}
```



## The CSS Podcast

Una Kravets and Adam Argyle, two developer advocates at Google, have started a podcast to discuss everything CSS. Aptly named [The CSS Podcast](https://pod.link/thecsspodcast), they’re covering all aspects of the web’s core styling language. So far there has been one episode released on March 12 that discusses the Box Model. The CSS Podcast is available on Apple Podcasts, Spotify and more.

## WordPress 5.4

WordPress 5.4 will be packed with updates and new features. Most notably are the updates to the block editor, including a new social icons block, a new buttons block that allows more than one inline button, and several updates to existing core block editor features. WordPress 5.4 is scheduled for release on March 31st. For more information, check out the [Kinsta](https://kinsta.com/blog/wordpress-5-4/) and [WPBeginner](https://www.wpbeginner.com/news/whats-coming-in-wordpress-5-4-features-and-screenshots/) blogs for more information, or see the [WordPress 5.4 development cycle](https://make.wordpress.org/core/5-4/).

## Variable Fonts Performance Effects

Variable fonts are a hot topic in the web design community because they include all the variations of a typeface in a single file, rather than individual files for each variation. However, it is important to recognize the performance effects of a single large file and how to mitigate them. For example, if you’re loading 12 variations of a static font, it is typically quicker to load the variable font. Read more about use cases and test cases for variable fonts on the [LogRocket blog](https://blog.logrocket.com/variable-fonts-is-the-performance-trade-off-worth-it/).


Posts Tagged with "css"

Wednesday Wisdom

Monday Medley

Tuesday Tips

Tuesday Tips

Monday Medley

Tuesday Tips

Monday Medley

Tuesday Tips

Monday Medley