Front-End Web Daily

Today is April 16, 2020, and for this Thursday Thoughts episode we're covering:

Let's dive in!

----

Treehouse published an article today titled 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.

----

Relate recently posted a new segment to their Thinking in Design Systems series. This post involved the colors of a design system and outlined the various steps and considerations involved. Some of the key topics were creating your essential color palette, naming your colors and theming.

----

A recent post on Shakuro outlined five 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.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 15, 2020, and for this Wednesday Wisdom episode we're covering:

Let's dive in!

----

Yesterday GitHub announced 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.

----

Firefox 75 was released on April 7th and it brought several new features for developers. 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.

----

Today Shopify announced a new initiative called the Shopify App Challenge: Commerce and COVID-19. 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.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 14, 2020, and for this Tuesday Tips episode we're covering Amazing Pure CSS Creations

Let's dive in!

----

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 to 3D animated shapes and objects, like an X-Wing from Star Wars. 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 or even Mario Kart.

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 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!

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 13, 2020, and for this Monday Medley episode we're covering:

Let's dive in!

----

CSS-Tricks published a post today titled 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.

----

A recent post on the DEV community discussed how to onboard a junior developer. 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.

----

WIRED published an article last month about open-source fonts 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.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 9, 2020, and for this Thursday Thoughts episode we're covering:

Let's dive in!

----

Buzzfeed News published a post 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.

----

Paul Jarvis published a post yesterday on the Fathom Analytics 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?

----

Squarespace published an article today 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?

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 8, 2020, and for this Wednesday Wisdom episode we're covering:

Let's dive in!

----

W3C, or the World-Wide Web Consortium, is the main international standards organization for the internet. Today they announced that they would be starting the process of a much needed website redesign. W3C will be using Studio 24 to work on the redesign and will be keeping as much of the process in the public eye.

----

Creative.onl 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.

----

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 today regarding tips to convert your store to an online shop to help.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 7, 2020, and for this Tuesday Tips episode we're covering The Four CSS Grid Properties You Need to Create Layouts

Let's dive in!

----

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.

----

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.

----

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.

----

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!

----

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.

----

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.

----

Today’s Tuesday Tips was adapted from a post on CSS-Tricks.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 6, 2020, and for this Monday Medley episode we're covering:

Let's dive in!

----

freeCodeCamp posted today 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 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 on their blog with tips and strategies for utilizing each system to their full potential.

----

Fast Company posted an interesting article 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?

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 2, 2020, and for this Thursday Thoughts episode we're covering:

Let's dive in!

----

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

----

We recently talked about the release of Dribbble’s first redesign in a decade. The social network for designers posted today 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.

----

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 that covers many use cases to help you get started.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!

Today is April 1, 2020, and for this Wednesday Wisdom episode we're covering:

Let's dive in!

----

Ever want to learn how to use Docker for front-end web development? A recent post by nystudio107 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 is a key component to any website with a lot of pages. Tubik posted about creating an effective user experience for your internal search. Tips included ensuring visibility, clear functionality, and displaying relevant content.

----

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 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 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, which is run by Figma. They even have a case study of their own design system.

----

Want to know more? Head to fewdaily.com for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!