Episódios
-
Today is January 28, 2021, and for this Thursday Thoughts episode we're covering:
Getting Your First Dev Job What You Should Do as a Junior Developer Helping Developers Be LeadersLet's dive in!
----
When starting off as a web developer it can be difficult to juggle learning and job searching. Therefore, it is important to know what potential employers are looking for to ensure you are prioritizing the right tasks and opportunities. A recent post on freeCodeCamp gives a handful of tips from a hiring manager's perspective of what they look for when reviewing developer résumés. One of the key factors is regular commits on Github, which shows that you are just as passionate about coding as you claim to be.
----
Starting your career as a junior developer is very exciting, but it can also be overwhelming. A post on Hello Dev World from last week outlines some things you can do to improve as a junior developer. This includes asking questions, finding a mentor, and learning to debug. Remember, these first few years are all about learning and growing as a developer, so don't stress!
----
As a manager of a development team, it is important to help developers that aspire to be a leader to do so. Fostering an environment that allows career growth for these developers can be done with a bit of effort on your end. Monday's post on The Next Web gives some helpful insights on how to help developers be leaders. By providing opportunities, openly communicating, and more you can help boost your developers to the next level.
----
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 January 27, 2021, and for this Wednesday Wisdom episode we're covering:
Fullstack Development Trends Responsive CSS Frameworks State of Design in 2021Let's dive in!
----
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. 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.
----
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. 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.
----
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. 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.
----
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!
-
Estão a faltar episódios?
-
Today is January 26, 2021, and for this Tuesday Tips episode we're covering How to Setup Your M1 MacBook for Web Development
Let's dive in!
----
The worst part (or perhaps the most fun for some) of getting a new laptop is setting up everything you need as a web developer. Adding programs and tools that you had installed over the many years of ownership of your previous laptop can seem daunting. With the release of the new Macbook M1 laptops, there are some interesting new considerations as well that you may not be aware of. So, let's jump in and get the basics set up so you can hit the ground running developing your next project.
----
The first thing you should install is Rosetta 2, which allows you to run Intel-based software on the new ARM chip. Because Apple has created their own chips they needed a way to provide backward compatibility with programs that do not yet support ARM and Rosetta 2 is that solution.
----
Homebrew will be the best way to add the other software and tools on our computer, so we want to install that next. A quick tip that is good to know is when you go to open the built-in Terminal in the Applications folder: right-click, select Get Info, and check the Open with Rosetta box.
----
There are a lot of tools to consider when setting up your Macbook from scratch, so one of the quickest ways to add a lot of the important ones is to use a script. I recommend the script created by the author of the original post that this is based on, but feel free to use a different one or modify this one for yourself.
Opening the download script folder in your terminal you can choose to run the install script or modify what will be installed from the brew-installs.sh file. Once you're satisfied, run the script.
Some of the tools and applications included in the script are:
MongoDB node git zsh Firefox Chrome VSCode Zoom Slack Discord Notion and more...----
Something that is not included in the script is nvm because there have been difficulties installing this with the ARM chip. To get around this you will have to use a curl command and make a couple of modifications afterward.
----
Git was installed with the brew install script so make sure to configure the settings and use a personal access token to authenticate GitHub.
----
Make sure to use the Settings Sync plugin to keep all of your VSCode settings in sync with a stored GitHub gist.
----
You should now be all set to start developing! Thanks to the script many tools and applications were installed for us, minimizing the manual install process.
----
Today’s Tuesday Tips was adapted from a post on the Logrocket blog.
----
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 January 25, 2021, and for this Monday Medley episode we're covering:
Success as a Creative in 2021 Chrome 88 Performant Animations and Micro-InteractionsLet's dive in!
----
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. 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.
----
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.
----
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. 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.
----
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
-
Today is December 8, 2020, and for this Tuesday Tips episode we're covering The Modern Way to Center Content in CSS
Let's dive in!
----
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.
----
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).
.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.
----
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.
.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.
.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.
----
Today’s Tuesday Tips was adapted from a series of posts on Daily Dev Tips.
----
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 December 7, 2020, and for this Monday Medley episode we're covering:
Reactathon 2020 Helping Clients with a Website Content Strategy Questions to Ask as an IntervieweeLet's dive in!
----
Reactathon 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 for free on their YouTube channel. If you are a React developer or just interested in React, this is one of the biggest conferences of the year.
----
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 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.
----
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 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.
----
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 September 11, 2020, and for this Friday Facts episode we're covering:
Landing Pages that Convert Scaffolding Web Development Tools Design SystemsLet's dive in!
----
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 which offers several helpful tips on designing phenomenal landing pages. Tips include removing the main navigation, using shorter forms, and more.
----
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. The list includes Meteor, Sails, Svelte, and more, giving a great place to start for any developer.
----
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 that includes use case and principles to remember when creating a design system for your organization.
----
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 September 10, 2020, and for this Thursday Thoughts episode we're covering:
Improving App Support Website Considerations for Blind People Tools for Website AccessibilityLet's dive in!
----
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. Tips range from automation to product ownership and can greatly assist coming into the end of the year.
----
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, which include image descriptions, heading structure, and more. Check it out and make sure to consider these issues when building your next project.
----
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. Make sure to add some of these tools to your design and development workflow if you haven't already.
----
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 September 9, 2020, and for this Wednesday Wisdom episode we're covering:
Reduced Motion Design Linking to the Web Archive Improving Client CommunicationLet's dive in!
----
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 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.
----
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 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 or to the direct source?
----
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 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.
----
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 September 8, 2020, and for this Tuesday Tips episode we're covering How to Rename Your Master Branch on GitHub
Let's dive in!
----
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.
----
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.
----
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, 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.
----
Today's Tuesday Tips was adapted from a post on the DEV 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 September 4, 2020, and for this Friday Facts episode we're covering:
Building a Portfolio for Your Dream Job Successful Telecommuting Free Courses for Web DesignersLet's dive in!
----
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 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.
----
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 that is definitely worth the read. Learn about advantages, disadvantages, and best practices for effective telecommuting.
----
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 to help learn new skills and stay up-to-date, including edX and Envato.
----
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 September 3, 2020, and for this Thursday Thoughts episode we're covering:
Starting a Freelance Business Finding Freelance Clients Habits of Successful FreelancersLet's dive in!
----
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 about things to consider when creating a freelance business and actionable steps to start with.
----
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 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.
----
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, including setting up systems and marketing daily.
----
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 September 2, 2020, and for this Wednesday Wisdom episode we're covering:
Burnout Symptoms for Developers Writing a Good Pull Request Description Improving Novice JavaScript Coding PatternsLet's dive in!
----
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 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.
----
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 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.
----
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 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."
----
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 September 1, 2020, and for this Tuesday Tips episode we're covering How to Integrate Media Queries into JavaScript
Let's dive in!
----
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?
----
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.
----
There is a window listener in JavaScript called matchMedia which will listen for a specific value and trigger when true. For example:
var mediaQuery = window.matchMedia('(min-width: 768px)');When we add a listener to the variable it can run a function:
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.
----
The matchMedia function is widely supported, including full support for Internet Explorer 10 and 11.
----
Today’s Tuesday Tips was adapted from a post on Daily Dev Tips.
----
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 August 31, 2020, and for this Monday Medley episode we're covering:
Open-Source for Beginners Bootstrap Icons Using Frontity for Headless WordPressLet's dive in!
----
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. It outlines some basic skills you might need to get started and some initial ideas for how to contribute.
----
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 and the documentation.
----
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, 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.
----
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 August 28, 2020, and for this Friday Facts episode we're covering:
Landing Page Design Having a High-Quality Website in 2020 Getting More Newsletter Sign-UpsLet's dive in!
----
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.
----
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, a publication by WPEngine, 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.
----
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, which goes into detail on specific actions you can take, such as creating a compelling offer and properly utilizing a thank-you page.
----
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 August 27, 2020, and for this Thursday Thoughts episode we're covering:
Fresh Content Marketing Strategies Google vs Netlify Analytics Increasing Productivity in the WorkplaceLet's dive in!
----
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, both old and fresh.
----
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 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.
----
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 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!
----
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 August 26, 2020, and for this Wednesday Wisdom episode we're covering:
WordPress Auto-Updates 10 Online Design Tools React vs AngularLet's dive in!
----
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. Luckily, you can choose to toggle this feature on a per theme or plugin basis.
----
Yesterday, Dribbble posted a list titled 10 online design tools you never knew you needed. 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!
----
Yesterday, SitePoint posted a phenomenal in-depth article comparing Facebook's React framework to Google's 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.
----
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 August 25, 2020, and for this Tuesday Tips episode we're covering How to Determine Where to Put Logic for Jamstack Websites
Let's dive in!
----
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 occurrence comes with its own limitations.
----
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?
----
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.
----
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.
----
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.
----
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 August 24, 2020, and for this Monday Medley episode we're covering:
Most Appreciated Web Solutions of 2020 Bootstrap Alternatives Becoming a Full-Stack Developer without a DegreeLet's dive in!
----
Web Designer Depot recently posted a list of 47 most appreciated web solutions of 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 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 highlights five alternatives to Bootstrap, including Tailwind CSS, a personal favorite of ours.
----
A post on the DEV community on Saturday 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.
----
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!
- Mostrar mais
