
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/)._


## Reactathon 2020

[Reactathon](https://www.reactathon.com/) is typically a conference that takes place in San Francisco every March and involves technical talks and workshops centered around React. This year the conference has gone completely online and starts today through Wednesday. Tickets are available on the Reactathon website, but [freeCodeCamp will also be livestreaming the entire conference](https://www.freecodecamp.org/news/reactathon-2020-conference-live-youtube/) for free on their [YouTube channel](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ). If you are a React developer or just interested in React, this is one of the biggest conferences of the year.

## Helping Clients with a Website Content Strategy

As website designers and developers there is an aspect of the process that most of us lack experience in: website content. Our clients are not typically writers and neither are we, so how do we solve this problem? [Speckyboy posted an article today](https://speckyboy.com/help-clients-website-content-strategy/) outlining how to help clients with their website content strategy. The post gives suggestions like focusing on the most important details and promoting ease of use as strategies to help both you and your client.

## Questions to Ask as an Interviewee

Interviews are a challenging but necessary part of any profession. However, it is important to remember that they are not just a one-sided affair: you should be asking questions to the interviewer as well. A very thorough [post on the DEV community](https://dev.to/platisd/questions-you-should-ask-when-being-interviewed-57de) yesterday broke down some reverse interview questions for software engineers. With questions from categories like the company's technology stack, career paths, and more, this post is a perfect guide to read through before any interview.



## Landing Pages that Convert

Landing pages can make or break a product sale or other intended call-to-action. It can be difficult to create a landing page that boils down your product or service into a quick and easily consumable page. Yesterday, Dribbble posted about [how to design a landing page that converts](https://dribbble.com/stories/2020/09/10/design-landing-pages-that-convert) which offers several helpful tips on designing phenomenal landing pages. Tips include removing the main navigation, using shorter forms, and more.

## Scaffolding Web Development Tools

Many of us as web developers are constantly coming up with ideas and creating new repositories for them. But we want to get right in and starting coding our idea, and the last thing we want to do is take a long time setting up the basic elements of a new project. On Wednesday, SitePoint posted about [10 scaffolding web development tools to start new projects faster](https://www.sitepoint.com/start-new-projects-faster/). The list includes Meteor, Sails, Svelte, and more, giving a great place to start for any developer.

## Design Systems

Design systems help maintain consistency and brand presence across an organization. They take a lot of time and effort to create and maintain, but they are well worth the result of a elite-looking company. Toptal recently posted [a guide to design system models](https://www.toptal.com/designers/ui/design-system-model) that includes use case and principles to remember when creating a design system for your organization.



## Improving App Support

Without a doubt, when you think of a company you love, one of the key components is most likely a great support team. For me, the way a company handles a support request can make or break my opinion of the company. Luckily, Shopify brought together a panel of experts to give their opinions on [how to improve support for your application](https://www.shopify.com/partners/blog/expert-advice-on-how-to-10x-app-support). Tips range from automation to product ownership and can greatly assist coming into the end of the year.

## Website Considerations for Blind People

Many website users have disabilities or impairments that limit the way they interact with a website and it is important to consider as many of these use cases as possible. One such case is accessibility for blind users. A post yesterday on the DEV community listed [5 annoying website features for blind people](https://dev.to/kedark/5-most-annoying-website-features-a-blind-person-faces-every-single-day-2jm5), which include image descriptions, heading structure, and more. Check it out and make sure to consider these issues when building your next project.

## Tools for Website Accessibility

To continue on the accessibility route, there are many components of website design that us as developers only see through our lens. This is why it is important to research accessibility and solutions, but it can be hard to sift through all the information. Another post yesterday on the DEV community outlined some more [considerations for web accessibility and also some tools to help](https://dev.to/laasrinadiaa/tips-and-free-tools-to-make-your-website-accessible-554k). Make sure to add some of these tools to your design and development workflow if you haven't already.



## Reduced Motion Design

Modern web browsers now support a wide range of CSS and JavaScript properties that can create awesome interactive features and animations. However, it is important to keep accessibility in mind and realize that some people have sensitivities to too much motion. Yesterday's post on Smashing Magazine outlined [how to use the prefers-reduced-motion media query](https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/) to take these users into account. The feature has fairly good support now across browsers (sorry IE users) and can be used in both CSS and JavaScript.

## Linking to the Web Archive

When linking to an internal page on your website you can be confident that the content will always be there, or at least be redirected to. But when you link to an outside resource you are at the mercy of that website owner, or are you? A post on Monday from Hawaii GenTech brought up the interesting idea of [linking to a web archive version](https://hawaiigentech.com/post/commentary/why-i-link-to-waybackmachine-instead/) of that page to ensure consistency, avoid broken links, and perhaps have better link authority. What do you think: should you link to an archive like the [WaybackMachine](https://archive.org/web/) or to the direct source?

## Improving Client Communication

Quality communication with your client is the key to any successful project. Finding that perfect zone of not over-communicating or under-communicating can be challenging for many, especially those newer to client interactions. Last week SpeckyBoy published a post about [how to improve client communications](https://speckyboy.com/simple-ways-you-can-improve-your-communication-with-clients/) to avoid wasting your time and the client's. For example, being very specific about your services up-front can help avoid headaches down the line.



Recent events have brought to light the negative connotations of having the main branch on a repository called `master`. Whether you want to change your primary branch name for this reason or just for fun, it is important to know how to do so and there are a few key steps to ensure that the change goes smoothly.

## Changing Future Repositories

Before we jump into changing our existing repos, let's make sure that we avoid the issue altogether in our future projects. In GitHub, under `Settings > Repositories` there is an option to name your default branch for future projects. Remember, this changes it for your personal account, but you can do the same for an organization.

As a note, on October 1st of this year, GitHub will be setting the default branch for new repositories to `main`.

## Updating Existing Repos

Now, to change an existing repo to a new name add a new branch from the existing `master`, which we will call `main` for this example. With an exact copy now on `main` go to the repository `Settings > Branches` and change the default branch to `main`. Then we can delete the `master` branch, which will alert us that the open pull requests for `master` will be affected. You can use a tool, like [this one from Edward Thomson](https://github.com/ethomson/retarget_prs), to re-target the pull requests to the new branch.

And that's it! You've made the change away from the `master` branch. If you still think it sounds a bit too complicated or too much work, GitHub announced that it will be releasing a feature to make a seamless transition when renaming the default branch by the end of the year.

## Credit

Today's Tuesday Tips was adapted from [a post on the DEV Community](https://dev.to/tracycss/renaming-your-master-branch-to-main-in-github-24cm).



## Building a Portfolio for Your Dream Job

A web design portfolio can be one of the most difficult things to create. It can be hard to think up new ideas and projects to build from scratch. Yesterday, [The Next Web posted](https://thenextweb.com/growth-quarters/2020/09/03/web-designers-heres-how-to-build-a-great-portfolio-and-land-your-dream-job-syndication/) several suggestions to help create a great portfolio to land your dream job, including designing a WordPress theme and creating a UI toolkit. These are the perfect starting points to build the perfect portfolio.

## Successful Telecommuting

Telecommuting has become one of the most popular ways to work, whether it was forced upon us or not. While it seems to be here to stay, and certainly in a bigger way into the future, it certainly can be difficult for people who are not used to it. [Noupe posted an extensive guide to successful teleworking](https://www.noupe.com/business-online/guide-to-successful-telecommuting.html) that is definitely worth the read. Learn about advantages, disadvantages, and best practices for effective telecommuting.

## Free Courses for Web Designers

As web designers and developers it is important to continue to learn in this industry that is continually changing and evolving around us. However, it can be difficult to find the time and the resources to do so. [Webdesigner Depot posted a list of great free resources](https://www.webdesignerdepot.com/2020/09/5-best-free-courses-and-resources-to-level-up-as-a-web-designer/) to help learn new skills and stay up-to-date, including edX and Envato.



## Starting a Freelance Business

Starting a freelance business is the dream for many web designers and developers. Making your own schedule and working from anywhere are some of the benefits but there are also many cons to consider. Before you quit your full-time job and dive right in, read through [Sunday's post from Pixel77](https://pixel77.com/freelance-web-design-business/) about things to consider when creating a freelance business and actionable steps to start with.

## Finding Freelance Clients

So, you've started a freelance business, now comes the important part: getting clients. Before you start, take a look at the [post from earlier this month on creative.onl](https://www.creative.onl/how-to-find-web-design-clients/) that gives several suggestions on how to earn new clients for your business. They vary from proposals to content marketing to referrals and give methods for succeeding at each.

## Habits of Successful Freelancers

Now that you have your business and you are getting clients, how do you maintain and grow your business? The key is creating habits to make your business life consistent and run smoothly. There are several habits you can adopt, many of which are outlined in [yesterday's post on Dribbble](https://dribbble.com/stories/2020/09/02/habits-successful-freelance-designers), including setting up systems and marketing daily.



## Burnout Symptoms for Developers

Burnout is defined by the World Health Organization as "a syndrome conceptualized as resulting from chronic workplace stress that has not been successfully managed." And this stress is very common among developers who are frequently overworked and stressed. A recent [post on The Next Web goes into detail regarding burnout for developers](https://thenextweb.com/growth-quarters/2020/08/29/developers-watch-out-for-these-burnout-symptoms-syndication/) outlining what is burnout, possible syndromes developers might experience, common causes, and prevention. It is a very educational read that is perfect for anyone, but especially developers.

## Writing a Good Pull Request Description

Pull requests are an integral and important part of open-source and almost any other form of development. This is why writing a good pull request description is critical for maintaining the code base efficiently and effectively. A [post last week on freeCodeCamp outlined the components of a pull request description](https://www.freecodecamp.org/news/how-to-write-a-pull-request-description/) and why they are necessary. While each developer and even each repository might have its own format, it never hurts to have a refresher on key components for a quality pull request description.

## Improving Novice JavaScript Coding Patterns

There are many different ways to reach the same outcome with JavaScript. But some of these ways may give away that you are a novice developer, or at least have the coding habits of one. A post on Monday in the [DEV Community highlights a couple of ways that you can improve your code](https://dev.to/alexeychang/js-coding-patterns-that-give-you-away-as-a-junior-developer-4h61) to show that you are not just beginning your JavaScript career. Learn the strategies of "not overusing if and else statements" and "not using functional programming in a nonfunctional way."



There's no doubt about it, media queries are one of the most useful CSS features for a modern website. They allow you to create a breakpoint for your website where you can adjust styles for larger or smaller screen sizes. While this is great for use in CSS, what if you want to utilize media queries in JavaScript?

## Recognize a Media Query in JavaScript

As with anything in JavaScript, there are multiple ways to accomplish a task. For example, a method for recognizing media queries in JavaScript is to check if an element is visible. So, if the mobile menu button is visible do a certain JS function. And you would put this in a function whenever the window resizes. While this may get the job done, there is perhaps a better and cleaner way to accomplish the same task.

## matchMedia

There is a window listener in JavaScript called `matchMedia` which will listen for a specific value and trigger when true. For example:

``` js
var mediaQuery = window.matchMedia('(min-width: 768px)');
```

When we add a listener to the variable it can run a function:

``` js
mediaQuery.addListener(console.log);
```

This opens the possibility of passing any function to the listener and only having that function run on certain screen widths.

## Browser Support

The `matchMedia` function is [widely supported](https://caniuse.com/#search=matchmedia), including full support for Internet Explorer 10 and 11.

## Credit

_Today’s Tuesday Tips was adapted from [a post on Daily Dev Tips](https://daily-dev-tips.com/posts/getting-notified-in-javascript-when-a-media-query-changes/)._



## Open-Source for Beginners

One of the greatest parts of being a developer is using and participating in open-source projects. But it can seem intimidating for first-time developers to jump into a project. A post yesterday on the DEV community goes through [how to contribute to an open-source project for beginners](https://dev.to/tracycss/open-source-contribution-for-beginners-1mhe). It outlines some basic skills you might need to get started and some initial ideas for how to contribute.

## Bootstrap Icons

On Friday, Bootstrap released the first stable version of its custom icons. With over 1,100 icons in the initial release, you are bound to find the icon you are looking for. The icons are SVG-based, which makes them very versatile in their utility. Read more about Bootstrap icons from the [release notes](https://blog.getbootstrap.com/2020/08/28/bootstrap-icons-stable/) and the [documentation](https://icons.getbootstrap.com/).

## Using Frontity for Headless WordPress

Frontity allows for a headless version of WordPress with a React front-end. This means that you can manage your website content in WordPress and utilize the API functionality to create the front-end using a modern front-end framework and features. On Friday, LogRocket posted about [getting started with Frontity](https://blog.logrocket.com/getting-started-with-frontity/), which walks through the process of setting up a website with Frontity. For those who love to use WordPress and build React websites, it is the perfect combination.



## Landing Page Design

Landing pages are still an important promotional tool for many modern businesses. They allow a company or individual to promote a product, email list, or other services in a small and concise package. They are the perfect place to drive marketing campaigns and advertisements with a tailored page specifically designed for those leads. However, there is an art to designing these pages, and [a post yesterday from Line25 lists things to avoid when creating the perfect landing page](https://line25.com/ui-ux-design/9-things-not-to-do-while-designing-a-landing-page).

## Having a High-Quality Website in 2020

Website design and development is constantly changing and evolving, which is why it is important to keep your skills and your website up to date. On Wednesday, [a post on Torque](https://torquemag.io/2020/08/high-quality-website/), a publication by [WPEngine](https://wpengine.com/), highlighted key elements for a high-quality website in 2020. Topics included ease of use, fast loading, and accessibility and are a great point of reference to assess anyone's website.

## Getting More Newsletter Sign-Ups

While mailing lists may seem outdated they still rank as one of the best content marketing tactics with some of the highest engagement rates. But it isn't as easy as it sounds to build a massive email list, especially in 2020 when every website seems to have one. Creative.onl shared a post on Monday outlining _[5 techniques to get more newsletter sign-ups](https://www.creative.onl/5-techniques-to-get-more-newsletter-sign-ups-from-your-website/)_, which goes into detail on specific actions you can take, such as creating a compelling offer and properly utilizing a thank-you page.



## Fresh Content Marketing Strategies

As freelancers, we are always looking for new ways to establish our business as an expert in our respective fields. Content marketing has always been a staple strategy to drive our business forward, examples being blogs, ebooks, webinars, and podcasts. But it is important to be on the lookout for new strategies to help elevate our businesses to the top of the leaderboards. Check out yesterday's [post on The Next Web for content marketing strategies](https://thenextweb.com/growth-quarters/2020/08/26/7-fresh-content-marketing-strategies-you-havent-tried-plus-8-classic-ones-syndication/), both old and fresh.

## Google vs Netlify Analytics

Google Analytics has been around for a long time and has been a standard for every website. However, the age of serverless has brought about Netlify and their analytics service. For me, it can be hard to tell exactly how my analytics data is formed and it certainly becomes an overwhelming amount of information. Having had no experience with Netlify's analytics I found [Jim Nielsen's July blog post](https://blog.jim-nielsen.com/2020/google-vs-netlify-analytics/) to be incredibly informational as he compares the two services. The post is very in-depth and even offers some conflicting analytics between the two, which still makes me wonder just how accurate any of these services are.

## Increasing Productivity in the Workplace

If you're like me (and a lot of other people) you may struggle to be productive during your workday. Especially now with so many people still working from home or adjusting to the new normal in a changed office setting, it is perhaps the hardest it has ever been to be productive. A [post yesterday by actiTime highlighted some key ways to boost productivity](https://www.actitime.com/productivity/increase-productivity-in-the-workplace/) and each is backed a great person in history who suggested it. If you're looking for some new ways to boost your productivity or just need a refresher, give the article a read!



## WordPress Auto-Updates

With the recent release of WordPress 5.5, an auto-update feature was added for plugins and themes. This goes along with the auto-update feature for WordPress Core that was recently added. Allowing your WordPress site to update your themes or plugins can have pros and cons, which are highlighted in [a recent post on speckyboy.com](https://speckyboy.com/should-you-use-wordpress-auto-updates/). Luckily, you can choose to toggle this feature on a per theme or plugin basis.

## 10 Online Design Tools

Yesterday, Dribbble posted a list titled _[10 online design tools you never knew you needed](https://dribbble.com/stories/2020/08/24/online-graphic-web-design-tools)_. The list includes many great online tools like a brand book creator, a free screen recorder, and a sub-list of Chrome extensions. The next time you are starting a project, check out some of these awesome design tools!

## React vs Angular

Yesterday, SitePoint posted a phenomenal in-depth article [comparing Facebook's React framework to Google's Angular](https://www.sitepoint.com/react-vs-angular/). The post compares and contrasts their features, ecosystems, and more. It is a great read for developers of all skill sets with these frameworks and is a good read to decide which framework works best for you.



A very common blog logic is displaying posts or events on your website based on the date. We may want to not show a post if it is in the future or change how a past event is displayed. When looking at a Jamstack website this can be confusing as there are several places in the build lifecycle that this logic can occur. And each occurence comes with its own limitations.

## Write the HTML

The first option is to hardcode the elements by physically adding or modifying them in the HTML files. This is the most reliable as it happens before the website is built. However, this is also less than optimal: who wants to change their website manually every time a post needs to be published or an event passes?

## Structured Data with Logic at Build

The second option is to write structured data and do the logic at build time. Using a headless CMS or other ways to store data files, such as Markdown, we can utilize a static site generator to build our website. The generator would then use logic during the build process to display what we want. So, we could use conditional logic to say if the post is in the future do not display it or if the event has passed use the grayed out styles.

The issue with this process is that once the website is built it will not change until the next build. So, if we build the website today and have an event tomorrow, our website on the following day would still have it as an upcoming event. We could solve this issue by automating our build process every day or even every hour.

## Logic at the Edge

A less readily available option would be to do the logic with edge workers that would execute on a CDN request. The render function for our website would then update the website files every time a user requests it. This feature is still in the works but the ideal end goal is that it would perform nearly as well as a static site but allow for updates on each request.

## Logic at Run Time

The last option is to pass data to the front end and then execute the logic. For example, we might use an HTML data attribute for our event or post. Then, using this attribute, we could conditionally style the event using front-end JavaScript. This would not require a new build but could seem a bit clunky on the code side. However, if the performance is not affected and your user experience is working well then this might not be an issue.

In the end, it all comes down to the data you are trying to display, when it needs to be updated and how much manual work you are willing to put in each time.

## Credit

_Today’s Tuesday Tips was adapted from [a post on CSS-Tricks](https://css-tricks.com/where-does-logic-go-on-jamstack-sites/)._



## Most Appreciated Web Solutions of 2020

Web Designer Depot recently posted a list of [47 most appreciated web solutions of 2020](https://www.webdesignerdepot.com/2020/08/the-most-appreciated-web-solutions-in-2020/). The list ranges across many areas of web design, including WordPress tools, logo creators, and other web development services. Check out the list for some services you have seen and new ones you can add to your tool belt.

## Bootstrap Alternatives

[Bootstrap](https://getbootstrap.com/) has been an industry-standard framework to make it easier to develop modern responsive websites. However, Bootstrap has opened the door for a long list of alternative frameworks, each with their own merits. A [recent post on the DEV community](https://dev.to/codesnail/top-bootstrap-alternatives-4947) highlights five alternatives to Bootstrap, including [Tailwind CSS](https://tailwindcss.com/), a personal favorite of ours.

## Becoming a Full-Stack Developer without a Degree

[A post on the DEV community on Saturday](https://dev.to/catmcgeecode/want-to-be-a-full-stack-developer-without-a-degree-this-is-what-you-need-2kmm) gives a great list to help become a full-stack developer without a degree. The list includes tangibles like "one big project" as well as soft skills like personality and drive. It is a great start for new developers looking for some guidance on getting to the next step.



## Improve Your Website in 2020

Treehouse published an article today titled _[5 Ways to Improve Your Website in 2020](https://blog.teamtreehouse.com/5-ways-to-improve-your-website-in-2020)_. The post outlines common issues that people have with websites and how to address them. Some common issues include difficulty navigating the site, poor search results, and slow load time. The solutions provide tried and true results that can help with any website.

## Thinking in Design Systems

Relate recently posted a new segment to their Thinking in Design Systems series. [This post involved the colors of a design system](https://medium.com/relate/thinking-in-design-systems-colors-6af13af1c07a) and outlined the various steps and considerations involved. Some of the key topics were creating your essential color palette, naming your colors and theming.

## Improving Website Readability

A recent post on Shakuro outlined [five ways to improve website readability](https://shakuro.com/blog/crystal-clear-5-ways-to-improve-website-readability/). The post goes in depth on readability which most website owners don’t consider when evaluating their website. Tips include concentrating on typography, using white space, and color contrast.



## Free GitHub Team Accounts

[Yesterday GitHub announced](https://github.blog/2020-04-14-github-is-now-free-for-teams/) they were making core features free for team accounts. Previously team accounts could not have private repositories without having a paid account. Essentially, the team accounts will function like regular accounts, but with more options to collaborate. Paid team plans are still available with additional features but the price has dropped from $9 to $4 per user.

## New Firefox 75 Developer Features

Firefox 75 was released on April 7th and it brought [several new features for developers](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/75). The developer tools received some updates, such as resizing the measurement tool, locating elements with XPath expressions, and filtering WebSocket messages using regular expressions. Additional support and implementations were added to the HTML, CSS, Accessibility, JavaScript, and API sections.

## Shopify’s App Challenge

Today Shopify announced a new initiative called the [Shopify App Challenge: Commerce and COVID-19](https://www.shopify.com/partners/blog/shopify-app-challenge). As the name suggests, this challenge is for Shopify app developers to build apps that help merchants during the current pandemic. Winning apps can win up to $20,000, $1,000 in Shopify ad credits, a featured spot in the app store, and mentorship from the Shopify product and engineering team.



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.



## Google Bans Zoom

[Buzzfeed News published a post](https://www.buzzfeednews.com/article/pranavdixit/google-bans-zoom) discussing how Google has banned the use of the popular video conferencing app Zoom for their employees. Zoom has quickly gained traction in the video conferencing market due to the rise in people working from home. Due to the increased traffic, it has been revealed that Zoom’s security has some holes in it. Therefore, Google is banning access to Zoom on all company-issued computers.

## Targeted Advertising

[Paul Jarvis published a post yesterday](https://usefathom.com/blog/targeted-ads) on the [Fathom Analytics](https://usefathom.com/) blog discussing the need to ban targeted advertising. Jarvis goes into detail about how top companies like Google and Facebook are making a killing in marketing revenue by buying and selling user data. This topic has been heavily debated in the past few years with several large court cases related to the topic. So, what are your thoughts? Should the companies be allowed to monetize the data we provide or should we go about the difficult task of locking everything down in a digital society?

## Choosing a Domain Name

[Squarespace published an article today](https://www.squarespace.com/blog/how-to-get-a-domain-name) outlining how to choose a domain name. With many common domain names being purchased it can be hard to find the right domain name for yourself or your business. The post outlines some basics of choosing a domain name, including TLDs like .com or .org. What is your strategy for coming up with the perfect domain name?



## W3C Website Redesign

[W3C](https://www.w3.org/), or the World-Wide Web Consortium, is the main international standards organization for the internet. [Today they announced](https://www.w3.org/blog/2020/04/w3c-website-redesign-user-stories-brand-and-identity/) that they would be starting the process of a much needed website redesign. W3C will be using [Studio 24](https://www.studio24.net/) to work on the redesign and will be keeping as much of the process in the public eye.

## When to Use a Microsite

[Creative.onl](https://www.creative.onl/posts/when-does-it-make-business-sense-to-use-a-microsite/) published a post this week detailing when it makes sense to use a microsite. Microsites are small off-shoots of a main site that serve a separate but related purpose, perhaps as a marketing campaign. However, it does not always make sense to create one, such as when you consider the SEO effect of using a separate domain.

## Converting Your Store to Online

We are currently seeing the economic effects of the COVID-19 pandemic, especially on retail. Stores who made most of their sales in a physical location are taking the biggest hit. In response, [Shopify released an extensive blog post](https://www.shopify.com/partners/blog/brick-and-mortar) today regarding tips to convert your store to an online shop to help.



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/)._



## Web Development Tools

[freeCodeCamp posted today](https://www.freecodecamp.org/news/handy-web-development-toolkit/) about the top 10 web development tools that every programmer should know. Topping off the list were VSCode, Webpack, and Cyprus. Check out the list over on freeCodeCamp’s blog to see which tools you’ve checked off your list.

## Flexbox or CSS Grid

Flexbox and CSS Grid are two great systems for laying out elements on your website. But sometimes it can be difficult to determine which one to use in a particular scenario. Luckily, [LogRocket just posted a complete guide](https://blog.logrocket.com/flexbox-vs-css-grid/) on their blog with tips and strategies for utilizing each system to their full potential.

## Quarantine UX

[Fast Company posted an interesting article](https://www.fastcompany.com/90485589/to-stomp-out-covid-19-america-will-need-a-better-warning-system) last week on how COVID-19 has changed user experience. Most notably the article discussed how delivery services can’t keep up with demand and the resurgence of marginal products. This begs the question: does our user experience need to shift to accommodate the rapidly changing environment?



## Wireframing

Wifeframing is a very important process to any design or development project as it can save time and help visualize a product. [UserGuiding released a post](https://userguiding.com/blog/wireframe-design/) outlining what wireframing is, specific methods, and how to implement it in the design and development process. Save time on your next project by wireframing first.

## New Dribbble Profile Features

We recently talked about the release of Dribbble’s first redesign in a decade. [The social network for designers posted today](https://dribbble.com/stories/2020/04/02/get-creative-with-new-profiles) about how to make the most of your new profile. The post discusses how to utilize new features like the intro text and header image to create a unique and interesting profile.

## BEM Cheatsheets

The BEM, or Block Element Modifier, methodology is a way to write reusable CSS components that are easier to read and understand. Used by many large firms, BEM can have a bit of a learning curve to it which is why [9Elements created a BEM cheatsheet](https://9elements.com/bem-cheat-sheet/) that covers many use cases to help you get started.



## Local Development with Docker

Ever want to learn how to use Docker for front-end web development? [A recent post by nystudio107](https://nystudio107.com/blog/an-annotated-docker-config-for-frontend-web-development) detailed how to implement Docker from start to finish. The thorough post expands on every aspect of utilizing containers to optimize your web development process.

## Internal Search

Internal search is a key component to any website with a lot of pages. [Tubik](https://blog.tubikstudio.com/how-to-design-search/) posted about creating an effective user experience for your internal search. Tips included ensuring visibility, clear functionality, and displaying relevant content.

## Web Development Checklists

There are a countless number of tasks during the web development process, from development to launch and everything in between. Luckily, [SitePoint has put together a massive set of checklists](https://www.sitepoint.com/web-development-checklists/) for all aspects of a web development project. With over 30 checklists the comprehensive post is a huge asset to freelancers and agencies alike.

## Design Systems

Design systems are an integral foundation to a successful web project. They create consistent and reliable components that can have a wide variety of use cases. For some great examples and cases studies check out [designsystems.com](https://www.designsystems.com/), which is run by [Figma](https://www.figma.com/). They even have [a case study of their own design system](https://www.designsystems.com/how-a-small-team-built-figma-dot-coms-design-system/).



Cornonavirus has forced many businesses to adopt a remote working model. However, many more businesses have been forced to close, at least temporarily, such as retailers and restaurants. Even though your business may be closed it is important to approach pausing your website correctly so that you don’t lose the search engine data for your website.

First, do not disable your site. Even a few days of having your website disabled could cause a significant decrease in search visibility. It will be very difficult to bring your site back to the same visibility.

If you have to, limit the functionality of your website. Removing certain features can minimize any negative effects and also disable actions that you do not want the user to take.

Some examples of limiting functionality could be to disable the cart functionality or mark items as sold out in an online store. Additionally, if you are changing functionality you should let your customs know, such as a pop up or banner.

For more information, visit Google’s guidelines on structured data, event changes, and other business resources.

---

_Today’s Tuesday Tips was adapted from [a post on searchengineland.com](https://searchengineland.com/businesses-should-limit-not-disable-their-sites-during-temporary-closures-google-says-331661) and [another on the Google Webmaster Central blog](https://webmasters.googleblog.com/2020/03/how-to-pause-your-business-online-in.html)._



## 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.



## GitHub Acquires npm

Last week [GitHub announced](https://github.blog/2020-03-16-npm-is-joining-github/) that they would be acquiring the JavaScript package manager npm. GitHub stated that they would focus on the infrastructure, core experience, and engaging with the npm community. Additionally, GitHub will look to integrate npm into their services and structure.

## Why Distributed Teams Are the Future of Workforce

[A recent blog post by Taskade](https://blog.taskade.com/distributed-teams-future-workforce-remote/) discussed why distributed teams are the future of the workforce. The post discusses benefits and how to build distributed teams. With the current COVID-19 pandemic many companies have been forced into a distributed workplace and are looking for ways to improve virtual work now and in the future.

## Bootstrap 5 Icons vs Font Awesome

[Themesberg released a blog post](https://themesberg.com/blog/bootstrap/bootstrap-icons-vs-fontawesome) comparing Font Awesome and Bootstrap 5 Icons, which will be available when Bootstrap 5 is released later this spring. Currently, the Bootstrap icons are open source SVGs that can be added on an individual basis to your website. While not as easy to use as Font Awesome this does have the benefit of a smaller file size because the entire library does not need to be included.

## How to Manage Freelance Finances in a Crisis

[Webdesigner Depot](https://www.webdesignerdepot.com/2020/03/how-to-manage-your-freelance-finances-during-a-crisis/) posted about how to manage freelance finances during a crisis. With the current uncertainty around what the coming weeks or months will look like it is important to put your business on the best footing possible. Some tips include contacting clients, cutting expenses, and looking for ways to supplement your income.



## New GitHub Mobile App

[GitHub](https://github.com/), the popular development version control software, has launched its mobile app. The app lets users manage their projects, such as through merge and pull requests. The app does not yet have the ability to edit your code, but a lot of other features are available in an easy to use interface. GitHub is available on both [iOS](https://apps.apple.com/us/app/github/id1477376905) and [Android](https://play.google.com/store/apps/details?id=com.github.android) devices.

## Web Designers Can Help in a Crisis

The COVID-19 pandemic is affecting nearly every person in the world. However, there are quite a few ways that web designers can help during this crisis. For example, volunteering your services, raising money, or helping clients that are affected. Just because we’re stuck at home doesn’t mean we can’t do our part to help others. Read more from [the article at speckyboy.com](https://speckyboy.com/web-designers-can-help-in-a-crisis/).

## WPBlockTalk

WordPress is hosting an online event called [WPBlockTalk](https://wordpress.com/blog/2020/03/18/wpblocktalk-block-editor-event/), which focuses on the block editor. Topics will include building the core block editor, developing new blocks, and designing with blocks. The event will be held virtually on April 2nd and will be available after the event on [WordPress.tv](https://wordpress.tv/). You can also [join the email list](https://wpblocktalk.wordpress.stream/#signup) for more information and updates.

## MonoLisa Font

There is a new font that has developers buzzing. [MonoLisa](https://monolisa.dev/) is a monospace font designed to “improve developers’ productivity and reduce fatigue”. The font has many features that set it apart, including an increased width, better distinction of characters, and improved reading flow. MonoLisa is currently [available for purchase](https://monolisa.dev/buy) at two levels, a limited version for personal use at $59 and the full version for professional use at $279.



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/).


This page connot be found

Recent Posts

Tuesday Tips

Monday Medley

Friday Facts

Thursday Thoughts

Wednesday Wisdom