prehistoric-systems/osmosfeed-template
1
0
Fork 0
mirror of https://github.com/osmoscraft/osmosfeed-template.git synced 2026-03-11 14:44:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

deploy: 1f5684a2ae

Browse source
This commit is contained in:
chuanqisun 2021-08-31 00:40:45 +00:00
parent 7c3b004039
commit 59576c07f1
3 changed files with 416 additions and 386 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
cache.json
View file

@ -11,6 +11,24 @@
"feedUrl": "https://css-tricks.com/feed/",
"siteUrl": "https://css-tricks.com",
"articles": [
{
"id": "https://css-tricks.com/?p=350670",
"author": "Geoff Graham",
"description": "A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.\nCodePen Embed…\nThe post CSS Pseudo Commas appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://codepen.io/ShadowShahriar/pen/LYyvVjo",
"publishedOn": "2021-08-30T21:20:00.000Z",
"wordCount": null,
"title": "CSS Pseudo Commas"
},
{
"id": "https://css-tricks.com/?p=350574",
"author": "Temani Afif",
"description": "After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But …\nThe post Exploring the CSS Paint API: Blob Animation appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/exploring-the-css-paint-api-blob-animation/",
"publishedOn": "2021-08-30T14:43:42.000Z",
"wordCount": 4281,
"title": "Exploring the CSS Paint API: Blob Animation"
},
{
"id": "https://css-tricks.com/?p=350782",
"author": "Chris Coyier",
@ -26,7 +44,7 @@
"description": "What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even …\nThe post The Fixed Background Attachment Hack appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/the-fixed-background-attachment-hack/",
"publishedOn": "2021-08-27T14:42:16.000Z",
"wordCount": 1907,
"wordCount": 2015,
"title": "The Fixed Background Attachment Hack"
},
{
@ -80,7 +98,7 @@
"description": "This is a bit of advice for developers on Macs I’ve heard quite a few times, and I’ll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn’t about you, it’s …\nThe post Scrollbar Reflowing appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/scrollbar-reflowing/",
"publishedOn": "2021-08-24T19:13:30.000Z",
"wordCount": 1134,
"wordCount": 1177,
"title": "Scrollbar Reflowing"
},
{
@ -98,7 +116,7 @@
"description": "Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM. It compiles templates down to real DOM nodes once and wraps updates in fine-grained reactions so that when state updates, only the related code runs.\nThis …\nThe post Introduction to the Solid JavaScript Library appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/introduction-to-the-solid-javascript-library/",
"publishedOn": "2021-08-24T14:30:50.000Z",
"wordCount": 2032,
"wordCount": 2058,
"title": "Introduction to the Solid JavaScript Library"
},
{
@ -127,24 +145,6 @@
"publishedOn": "2021-08-20T19:59:47.000Z",
"wordCount": 824,
"title": "“Disambiguating Tailwind”"
},
{
"id": "https://css-tricks.com/?p=346702",
"author": "Ganesh Dahal",
"description": "Frontity is a WordPress-focused React-based server-side dynamic-rendering framework (phew!) that allows us to create fast headless websites. Chris has a good introduction to Frontity. I guess you could think of it like Next.js for WordPress. And while the demand …\nThe post Creating a Headless WordPress Site With Frontity appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/creating-headless-wordpress-site-with-frontity/",
"publishedOn": "2021-08-20T14:59:30.000Z",
"wordCount": 2966,
"title": "Creating a Headless WordPress Site With Frontity"
},
{
"id": "https://css-tricks.com/?p=350054",
"author": "Chris Coyier",
"description": "I’ve seen this confuse more than a handful of people recently, including myself, so I’m making sure it’s written down.\nLet’s chuck a couple of custom properties into CSS:\nhtml {\n --color-1: red;\n --color-2: blue;\n}\nLet’s use them right …\nThe post The Big Gotcha With Custom Properties appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/the-big-gotcha-with-custom-properties/",
"publishedOn": "2021-08-19T19:04:48.000Z",
"wordCount": 1482,
"title": "The Big Gotcha With Custom Properties"
}
]
},
@ -153,13 +153,27 @@
"feedUrl": "https://www.smashingmagazine.com/feed/",
"siteUrl": "https://www.smashingmagazine.com/",
"articles": [
{
"id": "https://smashingmagazine.com/2021/08/refactoring-css-optimizing-size-performance-part3/",
"author": "hello@smashingmagazine.com (Adrian Bece)",
"description": "There are many CSS optimization techniques to tackle potential file size and performance issues. Let’s take a look at some of them. After all, if deploying the refactored codebase causes loading or performance issues, it will result in less traffic and revenue, which might leave the management and project managers dissatisfied.",
"link": "https://smashingmagazine.com/2021/08/refactoring-css-optimizing-size-performance-part3/",
"publishedOn": "2021-08-30T10:00:00.000Z",
"wordCount": 3695,
"title": "Refactoring CSS: Optimizing Size And Performance (Part 3)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fa4e0eab-b23c-42ac-a622-b2ca8a02edd0/refactoring-css-optimizing-size-performance-part3.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/08/compound-components-react/",
"author": "hello@smashingmagazine.com (Ichoku Chinonso)",
"description": "Compound components help developers build more expressive and flexible APIs to share state and logic within components. This tutorial explains how this can be achieved with the help of using the Context API and React to build components by using this advanced pattern.",
"link": "https://smashingmagazine.com/2021/08/compound-components-react/",
"publishedOn": "2021-08-27T13:00:00.000Z",
"wordCount": 3108,
"wordCount": 3107,
"title": "Compound Components In React",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e9df8cb4-b274-407a-97a8-f06488571802/compound-components-react.jpg",
@ -173,7 +187,7 @@
"description": "The Web is still wrestling with issues we take for granted offline, privacy chief among them. These are steps The New York Times took to protect users’ data, and how you can too.",
"link": "https://smashingmagazine.com/2021/08/against-privacy-infringement-web/",
"publishedOn": "2021-08-26T08:00:00.000Z",
"wordCount": 3776,
"wordCount": 3768,
"title": "Pushing Back Against Privacy Infringement On The Web",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fbab17a6-483b-4e8e-b9f1-9ab583202df1/against-privacy-infringement-web.jpg",
@ -187,7 +201,7 @@
"description": "In this article, Leonardo explains how to use a \"multi-monorepo\" approach for making the development experience faster, yet keeping your PHP packages private. This solution can be especially beneficial for PRO plugin creators.",
"link": "https://smashingmagazine.com/2021/08/public-private-multi-monorepo-php-projects/",
"publishedOn": "2021-08-25T07:10:00.000Z",
"wordCount": 3507,
"wordCount": 3497,
"title": "Creating A Public/Private Multi-Monorepo For PHP Projects",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a223ab2b-d926-4fec-a422-bed6e7b02178/01-architecture.png",
@ -201,7 +215,7 @@
"description": "In this article, you’ll learn how to save hours of tedious work of writing, updating, and correcting technical documentation. In this article, you will learn how to automate your documentation workflow with Vale and GitHub Actions.",
"link": "https://smashingmagazine.com/2021/08/automate-documentation-workflow-for-developers/",
"publishedOn": "2021-08-24T13:00:00.000Z",
"wordCount": 3234,
"wordCount": 3238,
"title": "How To Automate Documentation Workflow For Developers",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68266575-8f47-415b-9c91-7004a02944ee/action-github-1.png",
@ -215,7 +229,7 @@
"description": "After almost five years in development, the new HTTP/3 protocol is nearing its final form. Let’s take a close look at the performance improvements of HTTP/3, congestion control, head-of-line-blocking, and 0-RTT connection set-up.",
"link": "https://smashingmagazine.com/2021/08/http3-performance-improvements-part2/",
"publishedOn": "2021-08-23T06:20:00.000Z",
"wordCount": 10551,
"wordCount": 10545,
"title": "HTTP/3: Performance Improvements (Part 2)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9d5e5ddd-7a90-48c6-84c5-dc5c335e2305/congestion-control.png",
@ -229,7 +243,7 @@
"description": "The story of Jamstack CMSs goes all the way back to the 90s. In this article, we take a trip down memory lane to see how we got to the modern Jamstack CMSs we have today, and where they’re heading in the next decade.",
"link": "https://smashingmagazine.com/2021/08/history-future-jamstack-cms/",
"publishedOn": "2021-08-20T08:00:00.000Z",
"wordCount": 4608,
"wordCount": 4610,
"title": "Jamstack CMS: The Past, The Present and The Future",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f2f37c71-d2c5-4634-b62c-2dc2eea127c1/history-future-jamstack-cms.jpg",
@ -243,7 +257,7 @@
"description": "Through a simple step-by-step approach, you can build an ethical practice within your organization that will ensure you’re respecting the dignity and welfare of your research participants.",
"link": "https://smashingmagazine.com/2021/08/ethical-user-research-practice/",
"publishedOn": "2021-08-19T10:00:00.000Z",
"wordCount": 5345,
"wordCount": 5353,
"title": "How To Build An Ethical User Research Practice At Any Organization",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/72fbade7-8284-47ba-93d7-0f8a7aefdb7e/ethical-user-research-practice.jpg",
@ -257,7 +271,7 @@
"description": "In this article, we will code a Gantt chart as a reusable Web component. We will focus on the architecture of the component, rendering the calendar with CSS Grid and managing the state of the draggable tasks with JavaScript Proxy Objects.",
"link": "https://smashingmagazine.com/2021/08/interactive-gantt-chart-component-vanilla-javascript/",
"publishedOn": "2021-08-18T08:00:00.000Z",
"wordCount": 3317,
"wordCount": 3320,
"title": "Creating An Interactive Gantt Chart Component With Vanilla JavaScript",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3bcf1248-c58e-47f4-a94f-3cbac5c60b45/interactive-gantt-chart-component-vanillajs.jpg",
@ -271,7 +285,7 @@
"description": "Your project is on a tight budget? We’ve collected some wonderful, free icons and goodies that we’ve discovered lately and that are bound to give your design the finishing touch. We’ve also just recently covered [Figma plugins](https://www.smashingmagazine.com/2021/08/figma-tools-plugins-resources/), [SVG generators](https://www.smashingmagazine.com/2021/03/svg-generators/), [accessible front-end components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/) and [front-end boilerplates](https://www.smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/) — you might find them useful, too.",
"link": "https://smashingmagazine.com/2021/08/open-source-icons/",
"publishedOn": "2021-08-17T07:25:00.000Z",
"wordCount": 1868,
"wordCount": 1865,
"title": "Free Open-Source Icons",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/337b471a-0798-410d-9670-1d63c5bebfdc/05-tourism.jpg",
@ -285,7 +299,7 @@
"description": "Software development without a roadmap is akin to driving off a cliff — an undertaking that seriously jeopardizes your product’s life. Here’s how to develop a business technology roadmap that ensures your project safely reaches its final destination.",
"link": "https://smashingmagazine.com/2021/08/develop-business-technology-roadmap/",
"publishedOn": "2021-08-16T06:55:00.000Z",
"wordCount": 2945,
"wordCount": 2955,
"title": "How To Develop Your Business’ Technology Roadmap",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a6b3fa2a-b540-45e6-9423-f299fc4b6835/develop-business-technology-roadmap.jpg",
@ -299,7 +313,7 @@
"description": "Useful Figma plugins that will help you fix all the little slowdowns and boost your productivity. From color management and image assets to SVG shapes and animation. That’s our new guide to Figma.",
"link": "https://smashingmagazine.com/2021/08/Figma-tools-plugins-resources/",
"publishedOn": "2021-08-12T13:30:00.000Z",
"wordCount": 6660,
"wordCount": 6650,
"title": "Useful Figma Plugins And Tools",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2a4221c8-35b1-4545-9561-12fe84087ae6/6681a4b9-c319-4421-8364-6d2654cf6e53-cover.jpg",
@ -327,7 +341,7 @@
"description": "Often you need two different sets of navigation stacks for pre and post user authentication. Usually, to see more content, you have to be authenticated in some way. Let’s look at how to mount and unmount navigation stack based on a met condition in React Native.",
"link": "https://smashingmagazine.com/2021/08/mounting-unmounting-navigation-routes-react-native/",
"publishedOn": "2021-08-11T11:40:00.000Z",
"wordCount": 5028,
"wordCount": 5035,
"title": "Handling Mounting And Unmounting Of Navigation Routes In React Native",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/03d97d60-d23b-419c-acb3-23e467d4cc16/mounting-unmounting-navigation-routes-react-native.jpg",
@ -397,7 +411,7 @@
"description": "How can we make disabled buttons more inclusive? When do they work well, and when do they fail on us? And finally, when do we actually need them, and how can we avoid them? Let’s find out.",
"link": "https://smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/",
"publishedOn": "2021-08-05T13:30:00.000Z",
"wordCount": 6582,
"wordCount": 6584,
"title": "Frustrating Design Patterns: Disabled Buttons",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b9a10b5d-3bad-4083-a83c-082ff772fa9f/frustrating-design-patterns-disabled-buttons.jpg",
@ -425,7 +439,7 @@
"description": "Resilience is intrinsic to the web and therefore us, web developers. This article explores how graceful degradation, defensive coding, observability, and a healthy attitude towards failures better equips us before, during, and after an error occurs.",
"link": "https://smashingmagazine.com/2021/08/build-resilient-javascript-ui/",
"publishedOn": "2021-08-03T11:00:00.000Z",
"wordCount": 2955,
"wordCount": 2958,
"title": "How To Build Resilient JavaScript UIs",
"enclosure": {
"url": "blob:http://www.smashingmagazine.com/c8b93225-8b34-431c-94f1-2f2d0a4fb95a",
@ -439,7 +453,7 @@
"description": "In this article, we’ll take a deep dive into the refactoring process itself, and cover incremental refactoring strategy, visual regression testing, and maintaining the refactored codebase.",
"link": "https://smashingmagazine.com/2021/08/refactoring-css-strategy-regression-testing-maintenance-part2/",
"publishedOn": "2021-08-02T11:00:00.000Z",
"wordCount": 5989,
"wordCount": 6067,
"title": "Refactoring CSS: Strategy, Regression Testing And Maintenance (Part 2)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1005065b-5daf-4b21-8ac6-89b91effa5b9/refactoring-css-strategy-regression-testing-maintenance-part2.jpg",
@ -455,94 +469,94 @@
"siteUrl": "https://www.freecodecamp.org/news",
"articles": [
{
"id": "600dc4230a2838549dcb6e8e",
"id": "610648fd3306a507d1bfbfed",
"author": null,
"description": "Arrays are a powerful data type in PHP. And knowing how to quickly determine the size of an array is a useful skill. In this article I'll give you a quick overview of how arrays work, and then I'll dive into how to get the size of PHP arrays. If",
"link": "https://www.freecodecamp.org/news/php-array-length-how-to-get-an-array-size/",
"publishedOn": "2021-08-27T19:10:13.000Z",
"wordCount": 1138,
"title": "PHP Array Length Tutorial – How to Get an Array Size"
"description": "If you are new to the tech industry, you might have heard of the term Full Stack. But what does that mean exactly? In this article, I will explain what Full Stack Development is, what skills you need to become a Full Stack Developer, salary expectations, and tips for landing",
"link": "https://www.freecodecamp.org/news/what-is-a-full-stack-developer-back-end-front-end-full-stack-engineer/",
"publishedOn": "2021-08-30T21:56:06.000Z",
"wordCount": 1770,
"title": "What is a Full Stack Developer? Back End + Front End = Full Stack Engineer"
},
{
"id": "612796f53bccf807612a8b55",
"id": "611d6736e884de07521811e6",
"author": null,
"description": "I first had what I can only describe as a spiritual awakening about 10 years ago to the fact that technology would (figuratively) rule the world. And since then, I've been obsessed with wanting to understand how software works and how to build it. Since that moment, my life has",
"link": "https://www.freecodecamp.org/news/the-new-creator-economy-daos-community-ownership-and-cryptoeconomics/",
"publishedOn": "2021-08-27T17:02:29.000Z",
"wordCount": 2650,
"title": "The New Creator Economy – DAOs, Community Ownership, and Cryptoeconomics"
"description": "Linux is a popular open source operating system, and its features are often available in your development environment. If you can learn its basic commands, it'll make your life as a developer much easier. In this guide you will learn how to delete directories and files from the Linux command",
"link": "https://www.freecodecamp.org/news/remove-a-directory-in-linux-how-to-delete-directories-and-contents-from-the-command-line/",
"publishedOn": "2021-08-30T21:35:33.000Z",
"wordCount": 745,
"title": "Remove a Directory in Linux – How to Delete Directories and Contents From the Command Line"
},
{
"id": "6127e0efb5177808226d29cb",
"id": "612a9e08b5177808226d384b",
"author": null,
"description": "When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile phone users had to endlessly zoom and scroll to access and view different parts of those same websites. Thankfully, this is no longer",
"link": "https://www.freecodecamp.org/news/responsive-web-design-modern-website-code-for-beginners/",
"publishedOn": "2021-08-27T16:33:18.000Z",
"wordCount": 2359,
"title": "Responsive Web Design – Modern Website Code for Beginners"
"description": "Async and await might sound complicated...but they're as easy as pizza pie once you dive in. We all use async and await in our daily routines. What is an async task? An async task lets you complete other tasks while the async task is still working towards completion. Here",
"link": "https://www.freecodecamp.org/news/async-await-javascript-tutorial-explained-by-making-pizza/",
"publishedOn": "2021-08-30T20:20:59.000Z",
"wordCount": 980,
"title": "Async and Await in JavaScript Explained by Making Pizza"
},
{
"id": "612203fb3bccf807612a5756",
"id": "61274ec43bccf807612a85b9",
"author": null,
"description": "Have you ever wondered if there is a method to delay your JavaScript code by a few seconds? In this article, I will explain what the setTimeout() method is with code examples and how it differs from setInterval(). What is setTimeout() in JavaScript?setTimeout() is a method that will execute",
"link": "https://www.freecodecamp.org/news/javascript-settimeout-js-timer-to-delay-n-seconds/",
"publishedOn": "2021-08-26T23:57:34.000Z",
"wordCount": 1114,
"title": "JavaScript setTimeout() – JS Timer to Delay N Seconds"
"description": "In this tutorial, we are going to be building a simple movie generator which automatically generates a new movie every 40 seconds. It will also contain a button called “Generate New Movie” to display another movie on demand. This app will display a movie along with its title, release date,",
"link": "https://www.freecodecamp.org/news/react-tutorial-build-a-movie-list-generator-with-react-and-harperdb/",
"publishedOn": "2021-08-30T19:07:30.000Z",
"wordCount": 4102,
"title": "React Tutorial – Build a Movie List Generator with React and HarperDB"
},
{
"id": "6117b37a72231b077cdafea8",
"id": "612686bf3bccf807612a7fdc",
"author": null,
"description": "Choosing the right font is an important first step in making your website usable and accessible. How text is formatted affects how readable your designs and webpages are. You can modify how your HTML text appears in many ways using CSS. You can select the type of font you want",
"link": "https://www.freecodecamp.org/news/html-font-css-font-family-example-serif-and-sans-serif-characters/",
"publishedOn": "2021-08-26T22:15:30.000Z",
"wordCount": 1459,
"title": "HTML Font – CSS Font Family Example (Serif and Sans Serif Characters)"
"description": "I just joined Cisco Systems, India as a Senior Software Engineer (SDE III) on July 28, 2021. I am working with the Cisco Customer Experience team as a UI developer. The entire journey from applying for the job to accepting the offer was two months long. I wish to share",
"link": "https://www.freecodecamp.org/news/senior-software-engineer-interview-questions-how-i-got-a-job-as-an-sde-3-and-how-you-can-prepare-for-the-rounds/",
"publishedOn": "2021-08-30T17:56:48.000Z",
"wordCount": 2817,
"title": "Senior Software Engineer Interview Questions – Tips to Help You Prepare for a Job Interview"
},
{
"id": "6107c0083306a507d1bfc549",
"id": "6124028b3bccf807612a69ee",
"author": null,
"description": "In a Relational Database, tables are often related to each other in a way that allows their information to only be written once in the whole database. Then, when you need to analyze the data, you'll need to combine the info from those related tables. To do this in SQL,",
"link": "https://www.freecodecamp.org/news/sql-left-join-example-join-statement-syntax/",
"publishedOn": "2021-08-26T20:29:12.000Z",
"wordCount": 1425,
"title": "SQL Left Join – Example Join Statement Syntax"
"description": "Gitpod and GitHub Codespaces are cloud based developer environments that allow you to spin-up high-performance, automated dev environments in seconds. Over the past few months I have gone down the rabbit hole of cloud-based developer environments. I'm moving several of my projects to the cloud so that developers can deploy",
"link": "https://www.freecodecamp.org/news/github-codespaces-vs-gitpod-cloud-based-dev-environments/",
"publishedOn": "2021-08-30T17:10:36.000Z",
"wordCount": 2802,
"title": "GitHub Codespaces vs Gitpod – Full Stack Development Moves to the Cloud"
},
{
"id": "60b5025111ffb70827ef9ebe",
"id": "6125e9f83bccf807612a7a65",
"author": null,
"description": "Would you like to talk to a chatbot that speaks like your favorite character, fictional or non-fictional? Let's build one! In case you've seen my previous tutorial on this topic, stick with me as this version features lots of updates. You can follow along with this tutorial using the code",
"link": "https://www.freecodecamp.org/news/discord-ai-chatbot/",
"publishedOn": "2021-08-26T19:30:00.000Z",
"wordCount": 1750,
"title": "How to Build a Discord AI Chatbot that Talks Like Your Favorite Character"
"description": "Contact forms are useful on websites if you want your users to be able to interact with you over email. And there are lots of ways to build them. Traditionally you'd have either used PHP for sending emails over the server or some third party service that would take care",
"link": "https://www.freecodecamp.org/news/how-to-build-a-working-contact-form-with-sendgrid-and-next-js/",
"publishedOn": "2021-08-30T15:24:14.000Z",
"wordCount": 3593,
"title": "How to Build a Contact Form with SendGrid and Next.js"
},
{
"id": "6125f93b3bccf807612a7b84",
"id": "6128e12fb5177808226d2e4f",
"author": null,
"description": "Git is a popular version control system and an essential tool in a web developer's toolkit. Branches are a powerful and integral part of working with Git. In this article, you will learn the basics about how to remove local and remote branches in Git. What are Branches in Git?",
"link": "https://www.freecodecamp.org/news/git-delete-branch-how-to-remove-a-local-or-remote-branch/",
"publishedOn": "2021-08-26T17:00:36.000Z",
"wordCount": 1172,
"title": "Git Delete Branch – How to Remove a Local or Remote Branch"
"description": "PHP is an open-source server-side scripting language that many devs use for web development. It is also a general-purpose language that you can use to make lots of projects, including Graphical User Interfaces (GUIs). In this article, I will help you explore the world of PHP so you can learn",
"link": "https://www.freecodecamp.org/news/what-is-php-the-php-programming-language-meaning-explained/",
"publishedOn": "2021-08-30T15:13:30.000Z",
"wordCount": 1285,
"title": "What is PHP? The PHP Programming Language Meaning Explained"
},
{
"id": "612439163bccf807612a6e69",
"id": "6120ec0b3bccf807612a4bf3",
"author": null,
"description": "Welcome! If you speak Spanish and you want you learn JavaScript, you're in the right place. freeCodeCamp just published a free 9-hour JavaScript course for beginners. You will learn everything you need to know to get started with JavaScript, a key programming language for web development and many other applications.",
"link": "https://www.freecodecamp.org/news/learn-javascript-in-spanish-full-course-for-beginners/",
"publishedOn": "2021-08-26T16:35:47.000Z",
"wordCount": 567,
"title": "Learn JavaScript in Spanish – Full Course for Beginners"
"description": "NodeJS is an asynchronous event-driven JavaScript runtime environment designed to build scalable network applications. Asynchronous here refers to all those functions in JavaScript that are processed in the background without blocking any other request. In this article, you will learn and understand how NodeJS works and handles all functions or",
"link": "https://www.freecodecamp.org/news/nodejs-eventloop-tutorial/",
"publishedOn": "2021-08-30T15:11:16.000Z",
"wordCount": 1414,
"title": "Event Loops in NodeJS – Beginner's Guide to Synchronous and Asynchronous Code"
},
{
"id": "611f3dde3bccf807612a37c3",
"id": "6127b75d3bccf807612a8c40",
"author": null,
"description": "In this article, we're going to learn how to integrate a splash screen in a Flutter app. But first, why is having a splash screen in your app essential? What is a Splash Screen?A splash screen is an initial screen that gets displayed right when the user launches the",
"link": "https://www.freecodecamp.org/news/how-to-add-a-splash-screen-in-flutter-app/",
"publishedOn": "2021-08-26T16:30:17.000Z",
"wordCount": 1515,
"title": "How to Add a Splash Screen to Your Flutter App"
"description": "Every day more and more use cases are found for machine learning. It is a great field to get into. We just released a 10-hour machine learning course for beginners on the freeCodeCamp.org YouTube channel. Ayush Singh developed this course. He is a young data scientist and machine learning",
"link": "https://www.freecodecamp.org/news/free-machine-learning-course-10-hourse/",
"publishedOn": "2021-08-30T13:36:04.000Z",
"wordCount": 516,
"title": "Free 10-Hour Machine Learning Course"
}
]
}

265
feed.atom
View file

@ -1,10 +1,143 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>urn:2021-08-30T00:39:17.279Z</id>
<id>urn:2021-08-31T00:40:45.284Z</id>
<title>osmos::feed</title>
<updated>2021-08-30T00:39:17.279Z</updated>
<updated>2021-08-31T00:40:45.284Z</updated>
<generator>osmosfeed 1.11.0</generator>
<link rel="alternate" href="index.html"/>
<entry>
<title type="html"><![CDATA[What is a Full Stack Developer? Back End + Front End &#x3D; Full Stack Engineer]]></title>
<id>610648fd3306a507d1bfbfed</id>
<link href="https://www.freecodecamp.org/news/what-is-a-full-stack-developer-back-end-front-end-full-stack-engineer/"/>
<updated>2021-08-30T21:56:06.000Z</updated>
<summary type="html"><![CDATA[If you are new to the tech industry, you might have heard of the term Full Stack. But what does that mean exactly? In this article, I will explain what Full Stack Development is, what skills you need to become a Full Stack Developer, salary expectations, and tips for landing]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Remove a Directory in Linux – How to Delete Directories and Contents From the Command Line]]></title>
<id>611d6736e884de07521811e6</id>
<link href="https://www.freecodecamp.org/news/remove-a-directory-in-linux-how-to-delete-directories-and-contents-from-the-command-line/"/>
<updated>2021-08-30T21:35:33.000Z</updated>
<summary type="html"><![CDATA[Linux is a popular open source operating system, and its features are often available in your development environment. If you can learn its basic commands, it'll make your life as a developer much easier. In this guide you will learn how to delete directories and files from the Linux command]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[CSS Pseudo Commas]]></title>
<id>https://css-tricks.com/?p=350670</id>
<link href="https://codepen.io/ShadowShahriar/pen/LYyvVjo"/>
<updated>2021-08-30T21:20:00.000Z</updated>
<summary type="html"><![CDATA[A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.
CodePen Embed…
The post CSS Pseudo Commas appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Geoff Graham</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Async and Await in JavaScript Explained by Making Pizza]]></title>
<id>612a9e08b5177808226d384b</id>
<link href="https://www.freecodecamp.org/news/async-await-javascript-tutorial-explained-by-making-pizza/"/>
<updated>2021-08-30T20:20:59.000Z</updated>
<summary type="html"><![CDATA[Async and await might sound complicated...but they're as easy as pizza pie once you dive in. We all use async and await in our daily routines. What is an async task? An async task lets you complete other tasks while the async task is still working towards completion. Here]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[React Tutorial – Build a Movie List Generator with React and HarperDB]]></title>
<id>61274ec43bccf807612a85b9</id>
<link href="https://www.freecodecamp.org/news/react-tutorial-build-a-movie-list-generator-with-react-and-harperdb/"/>
<updated>2021-08-30T19:07:30.000Z</updated>
<summary type="html"><![CDATA[In this tutorial, we are going to be building a simple movie generator which automatically generates a new movie every 40 seconds. It will also contain a button called “Generate New Movie” to display another movie on demand. This app will display a movie along with its title, release date,]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Senior Software Engineer Interview Questions – Tips to Help You Prepare for a Job Interview]]></title>
<id>612686bf3bccf807612a7fdc</id>
<link href="https://www.freecodecamp.org/news/senior-software-engineer-interview-questions-how-i-got-a-job-as-an-sde-3-and-how-you-can-prepare-for-the-rounds/"/>
<updated>2021-08-30T17:56:48.000Z</updated>
<summary type="html"><![CDATA[I just joined Cisco Systems, India as a Senior Software Engineer (SDE III) on July 28, 2021. I am working with the Cisco Customer Experience team as a UI developer. The entire journey from applying for the job to accepting the offer was two months long. I wish to share]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[GitHub Codespaces vs Gitpod – Full Stack Development Moves to the Cloud]]></title>
<id>6124028b3bccf807612a69ee</id>
<link href="https://www.freecodecamp.org/news/github-codespaces-vs-gitpod-cloud-based-dev-environments/"/>
<updated>2021-08-30T17:10:36.000Z</updated>
<summary type="html"><![CDATA[Gitpod and GitHub Codespaces are cloud based developer environments that allow you to spin-up high-performance, automated dev environments in seconds. Over the past few months I have gone down the rabbit hole of cloud-based developer environments. I'm moving several of my projects to the cloud so that developers can deploy]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Build a Contact Form with SendGrid and Next.js]]></title>
<id>6125e9f83bccf807612a7a65</id>
<link href="https://www.freecodecamp.org/news/how-to-build-a-working-contact-form-with-sendgrid-and-next-js/"/>
<updated>2021-08-30T15:24:14.000Z</updated>
<summary type="html"><![CDATA[Contact forms are useful on websites if you want your users to be able to interact with you over email. And there are lots of ways to build them. Traditionally you'd have either used PHP for sending emails over the server or some third party service that would take care]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What is PHP? The PHP Programming Language Meaning Explained]]></title>
<id>6128e12fb5177808226d2e4f</id>
<link href="https://www.freecodecamp.org/news/what-is-php-the-php-programming-language-meaning-explained/"/>
<updated>2021-08-30T15:13:30.000Z</updated>
<summary type="html"><![CDATA[PHP is an open-source server-side scripting language that many devs use for web development. It is also a general-purpose language that you can use to make lots of projects, including Graphical User Interfaces (GUIs). In this article, I will help you explore the world of PHP so you can learn]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Event Loops in NodeJS – Beginner&#x27;s Guide to Synchronous and Asynchronous Code]]></title>
<id>6120ec0b3bccf807612a4bf3</id>
<link href="https://www.freecodecamp.org/news/nodejs-eventloop-tutorial/"/>
<updated>2021-08-30T15:11:16.000Z</updated>
<summary type="html"><![CDATA[NodeJS is an asynchronous event-driven JavaScript runtime environment designed to build scalable network applications. Asynchronous here refers to all those functions in JavaScript that are processed in the background without blocking any other request. In this article, you will learn and understand how NodeJS works and handles all functions or]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Exploring the CSS Paint API: Blob Animation]]></title>
<id>https://css-tricks.com/?p=350574</id>
<link href="https://css-tricks.com/exploring-the-css-paint-api-blob-animation/"/>
<updated>2021-08-30T14:43:42.000Z</updated>
<summary type="html"><![CDATA[After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But …
The post Exploring the CSS Paint API: Blob Animation appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Temani Afif</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Free 10-Hour Machine Learning Course]]></title>
<id>6127b75d3bccf807612a8c40</id>
<link href="https://www.freecodecamp.org/news/free-machine-learning-course-10-hourse/"/>
<updated>2021-08-30T13:36:04.000Z</updated>
<summary type="html"><![CDATA[Every day more and more use cases are found for machine learning. It is a great field to get into. We just released a 10-hour machine learning course for beginners on the freeCodeCamp.org YouTube channel. Ayush Singh developed this course. He is a young data scientist and machine learning]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Refactoring CSS: Optimizing Size And Performance (Part 3)]]></title>
<id>https://smashingmagazine.com/2021/08/refactoring-css-optimizing-size-performance-part3/</id>
<link href="https://smashingmagazine.com/2021/08/refactoring-css-optimizing-size-performance-part3/"/>
<updated>2021-08-30T10:00:00.000Z</updated>
<summary type="html"><![CDATA[There are many CSS optimization techniques to tackle potential file size and performance issues. Let’s take a look at some of them. After all, if deploying the refactored codebase causes loading or performance issues, it will result in less traffic and revenue, which might leave the management and project managers dissatisfied.]]></summary>
<author>
<name>hello@smashingmagazine.com (Adrian Bece)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[My tiny side project has had more impact than my decade in the software industry]]></title>
<id>https://css-tricks.com/?p=350782</id>
@ -16,36 +149,6 @@ The post My tiny side project has had more impact than my decade in the software
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[PHP Array Length Tutorial – How to Get an Array Size]]></title>
<id>600dc4230a2838549dcb6e8e</id>
<link href="https://www.freecodecamp.org/news/php-array-length-how-to-get-an-array-size/"/>
<updated>2021-08-27T19:10:13.000Z</updated>
<summary type="html"><![CDATA[Arrays are a powerful data type in PHP. And knowing how to quickly determine the size of an array is a useful skill. In this article I'll give you a quick overview of how arrays work, and then I'll dive into how to get the size of PHP arrays. If]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[The New Creator Economy – DAOs, Community Ownership, and Cryptoeconomics]]></title>
<id>612796f53bccf807612a8b55</id>
<link href="https://www.freecodecamp.org/news/the-new-creator-economy-daos-community-ownership-and-cryptoeconomics/"/>
<updated>2021-08-27T17:02:29.000Z</updated>
<summary type="html"><![CDATA[I first had what I can only describe as a spiritual awakening about 10 years ago to the fact that technology would (figuratively) rule the world. And since then, I've been obsessed with wanting to understand how software works and how to build it. Since that moment, my life has]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Responsive Web Design – Modern Website Code for Beginners]]></title>
<id>6127e0efb5177808226d29cb</id>
<link href="https://www.freecodecamp.org/news/responsive-web-design-modern-website-code-for-beginners/"/>
<updated>2021-08-27T16:33:18.000Z</updated>
<summary type="html"><![CDATA[When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile phone users had to endlessly zoom and scroll to access and view different parts of those same websites. Thankfully, this is no longer]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[The Fixed Background Attachment Hack]]></title>
<id>https://css-tricks.com/?p=350201</id>
@ -67,16 +170,6 @@ The post The Fixed Background Attachment Hack appeared first on CSS-Tricks. You
<name>hello@smashingmagazine.com (Ichoku Chinonso)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[JavaScript setTimeout() – JS Timer to Delay N Seconds]]></title>
<id>612203fb3bccf807612a5756</id>
<link href="https://www.freecodecamp.org/news/javascript-settimeout-js-timer-to-delay-n-seconds/"/>
<updated>2021-08-26T23:57:34.000Z</updated>
<summary type="html"><![CDATA[Have you ever wondered if there is a method to delay your JavaScript code by a few seconds? In this article, I will explain what the setTimeout() method is with code examples and how it differs from setInterval(). What is setTimeout() in JavaScript?setTimeout() is a method that will execute]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Designing for the Unexpected]]></title>
<id>https://css-tricks.com/?p=350573</id>
@ -88,26 +181,6 @@ The post Designing for the Unexpected appeared first on CSS-Tricks. You can supp
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[HTML Font – CSS Font Family Example (Serif and Sans Serif Characters)]]></title>
<id>6117b37a72231b077cdafea8</id>
<link href="https://www.freecodecamp.org/news/html-font-css-font-family-example-serif-and-sans-serif-characters/"/>
<updated>2021-08-26T22:15:30.000Z</updated>
<summary type="html"><![CDATA[Choosing the right font is an important first step in making your website usable and accessible. How text is formatted affects how readable your designs and webpages are. You can modify how your HTML text appears in many ways using CSS. You can select the type of font you want]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[SQL Left Join – Example Join Statement Syntax]]></title>
<id>6107c0083306a507d1bfc549</id>
<link href="https://www.freecodecamp.org/news/sql-left-join-example-join-statement-syntax/"/>
<updated>2021-08-26T20:29:12.000Z</updated>
<summary type="html"><![CDATA[In a Relational Database, tables are often related to each other in a way that allows their information to only be written once in the whole database. Then, when you need to analyze the data, you'll need to combine the info from those related tables. To do this in SQL,]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Some Articles About Accessibility I’ve Saved Recently III]]></title>
<id>https://css-tricks.com/?p=350298</id>
@ -120,46 +193,6 @@ The post Some Articles About Accessibility I’ve Saved Recently III appeared fi
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Build a Discord AI Chatbot that Talks Like Your Favorite Character]]></title>
<id>60b5025111ffb70827ef9ebe</id>
<link href="https://www.freecodecamp.org/news/discord-ai-chatbot/"/>
<updated>2021-08-26T19:30:00.000Z</updated>
<summary type="html"><![CDATA[Would you like to talk to a chatbot that speaks like your favorite character, fictional or non-fictional? Let's build one! In case you've seen my previous tutorial on this topic, stick with me as this version features lots of updates. You can follow along with this tutorial using the code]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Git Delete Branch – How to Remove a Local or Remote Branch]]></title>
<id>6125f93b3bccf807612a7b84</id>
<link href="https://www.freecodecamp.org/news/git-delete-branch-how-to-remove-a-local-or-remote-branch/"/>
<updated>2021-08-26T17:00:36.000Z</updated>
<summary type="html"><![CDATA[Git is a popular version control system and an essential tool in a web developer's toolkit. Branches are a powerful and integral part of working with Git. In this article, you will learn the basics about how to remove local and remote branches in Git. What are Branches in Git?]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Learn JavaScript in Spanish – Full Course for Beginners]]></title>
<id>612439163bccf807612a6e69</id>
<link href="https://www.freecodecamp.org/news/learn-javascript-in-spanish-full-course-for-beginners/"/>
<updated>2021-08-26T16:35:47.000Z</updated>
<summary type="html"><![CDATA[Welcome! If you speak Spanish and you want you learn JavaScript, you're in the right place. freeCodeCamp just published a free 9-hour JavaScript course for beginners. You will learn everything you need to know to get started with JavaScript, a key programming language for web development and many other applications.]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Add a Splash Screen to Your Flutter App]]></title>
<id>611f3dde3bccf807612a37c3</id>
<link href="https://www.freecodecamp.org/news/how-to-add-a-splash-screen-in-flutter-app/"/>
<updated>2021-08-26T16:30:17.000Z</updated>
<summary type="html"><![CDATA[In this article, we're going to learn how to integrate a splash screen in a Flutter app. But first, why is having a splash screen in your app essential? What is a Splash Screen?A splash screen is an initial screen that gets displayed right when the user launches the]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How I Made a Generator for SVG Loaders With Sass and SMIL Options]]></title>
<id>https://css-tricks.com/?p=350223</id>
@ -318,17 +351,6 @@ The post “Disambiguating Tailwind” appeared first on CSS-Tricks. You can sup
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Creating a Headless WordPress Site With Frontity]]></title>
<id>https://css-tricks.com/?p=346702</id>
<link href="https://css-tricks.com/creating-headless-wordpress-site-with-frontity/"/>
<updated>2021-08-20T14:59:30.000Z</updated>
<summary type="html"><![CDATA[Frontity is a WordPress-focused React-based server-side dynamic-rendering framework (phew!) that allows us to create fast headless websites. Chris has a good introduction to Frontity. I guess you could think of it like Next.js for WordPress. And while the demand …
The post Creating a Headless WordPress Site With Frontity appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Ganesh Dahal</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Jamstack CMS: The Past, The Present and The Future]]></title>
<id>https://smashingmagazine.com/2021/08/history-future-jamstack-cms/</id>
@ -339,23 +361,6 @@ The post Creating a Headless WordPress Site With Frontity appeared first on CSS-
<name>hello@smashingmagazine.com (Mike Neumegen)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[The Big Gotcha With Custom Properties]]></title>
<id>https://css-tricks.com/?p=350054</id>
<link href="https://css-tricks.com/the-big-gotcha-with-custom-properties/"/>
<updated>2021-08-19T19:04:48.000Z</updated>
<summary type="html"><![CDATA[I’ve seen this confuse more than a handful of people recently, including myself, so I’m making sure it’s written down.
Let’s chuck a couple of custom properties into CSS:
html {
--color-1: red;
--color-2: blue;
}
Let’s use them right …
The post The Big Gotcha With Custom Properties appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How To Build An Ethical User Research Practice At Any Organization]]></title>
<id>https://smashingmagazine.com/2021/08/ethical-user-research-practice/</id>

331
index.html
View file

@ -15,6 +15,175 @@
<body>
<!-- %after-body-begin.html% -->
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-08-30">2021-08-30</time></h2>
<ul class="sources card">
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">CSS Pseudo Commas</summary>
<a class="article-summary-link article-summary-box-outer" href="https://codepen.io/ShadowShahriar/pen/LYyvVjo">
<div class="article-summary-box-inner">
<span class="article-reading-time">(0 min)</span>
<span>A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.
CodePen Embed…
The post CSS Pseudo Commas appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Exploring the CSS Paint API: Blob Animation</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/exploring-the-css-paint-api-blob-animation/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(14 min)</span>
<span>After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But …
The post Exploring the CSS Paint API: Blob Animation appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">What is a Full Stack Developer? Back End + Front End &#x3D; Full Stack Engineer</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-a-full-stack-developer-back-end-front-end-full-stack-engineer/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(6 min)</span>
<span>If you are new to the tech industry, you might have heard of the term Full Stack. But what does that mean exactly? In this article, I will explain what Full Stack Development is, what skills you need to become a Full Stack Developer, salary expectations, and tips for landing</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Remove a Directory in Linux – How to Delete Directories and Contents From the Command Line</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/remove-a-directory-in-linux-how-to-delete-directories-and-contents-from-the-command-line/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Linux is a popular open source operating system, and its features are often available in your development environment. If you can learn its basic commands, it&#x27;ll make your life as a developer much easier. In this guide you will learn how to delete directories and files from the Linux command</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Async and Await in JavaScript Explained by Making Pizza</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/async-await-javascript-tutorial-explained-by-making-pizza/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Async and await might sound complicated...but they&#x27;re as easy as pizza pie once you dive in. We all use async and await in our daily routines. What is an async task? An async task lets you complete other tasks while the async task is still working towards completion. Here</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">React Tutorial – Build a Movie List Generator with React and HarperDB</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/react-tutorial-build-a-movie-list-generator-with-react-and-harperdb/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(14 min)</span>
<span>In this tutorial, we are going to be building a simple movie generator which automatically generates a new movie every 40 seconds. It will also contain a button called “Generate New Movie” to display another movie on demand. This app will display a movie along with its title, release date,</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Senior Software Engineer Interview Questions – Tips to Help You Prepare for a Job Interview</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/senior-software-engineer-interview-questions-how-i-got-a-job-as-an-sde-3-and-how-you-can-prepare-for-the-rounds/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(9 min)</span>
<span>I just joined Cisco Systems, India as a Senior Software Engineer (SDE III) on July 28, 2021. I am working with the Cisco Customer Experience team as a UI developer. The entire journey from applying for the job to accepting the offer was two months long. I wish to share</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">GitHub Codespaces vs Gitpod – Full Stack Development Moves to the Cloud</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/github-codespaces-vs-gitpod-cloud-based-dev-environments/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(9 min)</span>
<span>Gitpod and GitHub Codespaces are cloud based developer environments that allow you to spin-up high-performance, automated dev environments in seconds. Over the past few months I have gone down the rabbit hole of cloud-based developer environments. I&#x27;m moving several of my projects to the cloud so that developers can deploy</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Build a Contact Form with SendGrid and Next.js</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-build-a-working-contact-form-with-sendgrid-and-next-js/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(12 min)</span>
<span>Contact forms are useful on websites if you want your users to be able to interact with you over email. And there are lots of ways to build them. Traditionally you&#x27;d have either used PHP for sending emails over the server or some third party service that would take care</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">What is PHP? The PHP Programming Language Meaning Explained</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-php-the-php-programming-language-meaning-explained/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>PHP is an open-source server-side scripting language that many devs use for web development. It is also a general-purpose language that you can use to make lots of projects, including Graphical User Interfaces (GUIs). In this article, I will help you explore the world of PHP so you can learn</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Event Loops in NodeJS – Beginner&#x27;s Guide to Synchronous and Asynchronous Code</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/nodejs-eventloop-tutorial/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>NodeJS is an asynchronous event-driven JavaScript runtime environment designed to build scalable network applications. Asynchronous here refers to all those functions in JavaScript that are processed in the background without blocking any other request. In this article, you will learn and understand how NodeJS works and handles all functions or</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Free 10-Hour Machine Learning Course</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/free-machine-learning-course-10-hourse/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Every day more and more use cases are found for machine learning. It is a great field to get into. We just released a 10-hour machine learning course for beginners on the freeCodeCamp.org YouTube channel. Ayush Singh developed this course. He is a young data scientist and machine learning</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">Refactoring CSS: Optimizing Size And Performance (Part 3)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/08/refactoring-css-optimizing-size-performance-part3/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(12 min)</span>
<span>There are many CSS optimization techniques to tackle potential file size and performance issues. Let’s take a look at some of them. After all, if deploying the refactored codebase causes loading or performance issues, it will result in less traffic and revenue, which might leave the management and project managers dissatisfied.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-08-27">2021-08-27</time></h2>
<ul class="sources card">
@ -39,7 +208,7 @@ The post My tiny side project has had more impact than my decade in the software
<summary class="article-expander__title">The Fixed Background Attachment Hack</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/the-fixed-background-attachment-hack/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(6 min)</span>
<span class="article-reading-time">(7 min)</span>
<span>What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even …
The post The Fixed Background Attachment Hack appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
@ -48,45 +217,6 @@ The post The Fixed Background Attachment Hack appeared first on CSS-Tricks. You
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">PHP Array Length Tutorial – How to Get an Array Size</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/php-array-length-how-to-get-an-array-size/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>Arrays are a powerful data type in PHP. And knowing how to quickly determine the size of an array is a useful skill. In this article I&#x27;ll give you a quick overview of how arrays work, and then I&#x27;ll dive into how to get the size of PHP arrays. If</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">The New Creator Economy – DAOs, Community Ownership, and Cryptoeconomics</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/the-new-creator-economy-daos-community-ownership-and-cryptoeconomics/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(9 min)</span>
<span>I first had what I can only describe as a spiritual awakening about 10 years ago to the fact that technology would (figuratively) rule the world. And since then, I&#x27;ve been obsessed with wanting to understand how software works and how to build it. Since that moment, my life has</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Responsive Web Design – Modern Website Code for Beginners</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/responsive-web-design-modern-website-code-for-beginners/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(8 min)</span>
<span>When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile phone users had to endlessly zoom and scroll to access and view different parts of those same websites. Thankfully, this is no longer</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
@ -152,89 +282,6 @@ The post How I Made a Generator for SVG Loaders With Sass and SMIL Options appea
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">JavaScript setTimeout() – JS Timer to Delay N Seconds</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/javascript-settimeout-js-timer-to-delay-n-seconds/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>Have you ever wondered if there is a method to delay your JavaScript code by a few seconds? In this article, I will explain what the setTimeout() method is with code examples and how it differs from setInterval(). What is setTimeout() in JavaScript?setTimeout() is a method that will execute</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">HTML Font – CSS Font Family Example (Serif and Sans Serif Characters)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/html-font-css-font-family-example-serif-and-sans-serif-characters/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>Choosing the right font is an important first step in making your website usable and accessible. How text is formatted affects how readable your designs and webpages are. You can modify how your HTML text appears in many ways using CSS. You can select the type of font you want</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">SQL Left Join – Example Join Statement Syntax</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/sql-left-join-example-join-statement-syntax/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>In a Relational Database, tables are often related to each other in a way that allows their information to only be written once in the whole database. Then, when you need to analyze the data, you&#x27;ll need to combine the info from those related tables. To do this in SQL,</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Build a Discord AI Chatbot that Talks Like Your Favorite Character</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/discord-ai-chatbot/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(6 min)</span>
<span>Would you like to talk to a chatbot that speaks like your favorite character, fictional or non-fictional? Let&#x27;s build one! In case you&#x27;ve seen my previous tutorial on this topic, stick with me as this version features lots of updates. You can follow along with this tutorial using the code</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Git Delete Branch – How to Remove a Local or Remote Branch</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/git-delete-branch-how-to-remove-a-local-or-remote-branch/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>Git is a popular version control system and an essential tool in a web developer&#x27;s toolkit. Branches are a powerful and integral part of working with Git. In this article, you will learn the basics about how to remove local and remote branches in Git. What are Branches in Git?</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Learn JavaScript in Spanish – Full Course for Beginners</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/learn-javascript-in-spanish-full-course-for-beginners/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Welcome! If you speak Spanish and you want you learn JavaScript, you&#x27;re in the right place. freeCodeCamp just published a free 9-hour JavaScript course for beginners. You will learn everything you need to know to get started with JavaScript, a key programming language for web development and many other applications.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Add a Splash Screen to Your Flutter App</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-add-a-splash-screen-in-flutter-app/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>In this article, we&#x27;re going to learn how to integrate a splash screen in a Flutter app. But first, why is having a splash screen in your app essential? What is a Splash Screen?A splash screen is an initial screen that gets displayed right when the user launches the</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
@ -460,18 +507,6 @@ The post “Disambiguating Tailwind” appeared first on CSS-Tricks. You can sup
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Creating a Headless WordPress Site With Frontity</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/creating-headless-wordpress-site-with-frontity/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(10 min)</span>
<span>Frontity is a WordPress-focused React-based server-side dynamic-rendering framework (phew!) that allows us to create fast headless websites. Chris has a good introduction to Frontity. I guess you could think of it like Next.js for WordPress. And while the demand …
The post Creating a Headless WordPress Site With Frontity appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
@ -496,30 +531,6 @@ The post Creating a Headless WordPress Site With Frontity appeared first on CSS-
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-08-19">2021-08-19</time></h2>
<ul class="sources card">
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">The Big Gotcha With Custom Properties</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/the-big-gotcha-with-custom-properties/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>I’ve seen this confuse more than a handful of people recently, including myself, so I’m making sure it’s written down.
Let’s chuck a couple of custom properties into CSS:
html {
--color-1: red;
--color-2: blue;
}
Let’s use them right …
The post The Big Gotcha With Custom Properties appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
@ -827,7 +838,7 @@ The post The Big Gotcha With Custom Properties appeared first on CSS-Tricks. You
</section>
<footer>
<time id="build-timestamp" datetime="2021-08-30T00:39:17.260Z">2021-08-30T00:39:17.260Z</time>
<time id="build-timestamp" datetime="2021-08-31T00:40:45.268Z">2021-08-31T00:40:45.268Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.0</a></span>
</footer>
<script src="index.js"></script>