This commit is contained in:
chuanqisun 2021-10-30 00:40:18 +00:00
parent 03fbd3217c
commit 8b60e30812
3 changed files with 209 additions and 219 deletions

View file

@ -21,6 +21,24 @@
"feedUrl": "https://css-tricks.com/feed/",
"siteUrl": "https://css-tricks.com",
"articles": [
{
"id": "https://css-tricks.com/?p=354581",
"author": "Chris Coyier",
"description": "A guide to designing accessible, WCAG-compliant focus indicators — Sara Soueidan says you can make more accessible focus outlines by doing your own, rather than leaving it to the browser — as long as you do it right. Deep dive! \n…\nThe post Some Articles About Accessibility Ive Saved Recently IV appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/some-articles-about-accessibility-ive-saved-recently-iv/",
"publishedOn": "2021-10-29T18:28:38.000Z",
"wordCount": 881,
"title": "Some Articles About Accessibility Ive Saved Recently IV"
},
{
"id": "https://css-tricks.com/?p=354296",
"author": "Philippe Bernard",
"description": "There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented …\nThe post Create Your Own Automated Social Images With Resoc appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/create-your-own-automated-social-images-with-resoc/",
"publishedOn": "2021-10-29T14:14:55.000Z",
"wordCount": 3495,
"title": "Create Your Own Automated Social Images With Resoc"
},
{
"id": "https://css-tricks.com/?p=354922",
"author": "Chris Coyier",
@ -63,7 +81,7 @@
"description": "I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this “floating section headers” example, reminding me yet again how …\nThe post Sticky Definition Lists appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/sticky-definition-lists/",
"publishedOn": "2021-10-27T23:17:18.000Z",
"wordCount": 587,
"wordCount": 630,
"title": "Sticky Definition Lists"
},
{
@ -137,24 +155,6 @@
"publishedOn": "2021-10-22T17:57:30.000Z",
"wordCount": 136,
"title": "Can Include (a Certain HTML element within another Certain HTML Element)"
},
{
"id": "https://css-tricks.com/?p=353391",
"author": "Temani Afif",
"description": "Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! Thats what were going to look at as part of this “Exploring …\nThe post Exploring the CSS Paint API: Rounding Shapes 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-rounding-shapes/",
"publishedOn": "2021-10-22T14:02:54.000Z",
"wordCount": 3465,
"title": "Exploring the CSS Paint API: Rounding Shapes"
},
{
"id": "https://css-tricks.com/?p=354537",
"author": "Geoff Graham",
"description": "Its not uncommon for my front-end workflow to go something like this:\nWork on thing.\nSee that thing in an automatically refreshed browser.\nSee something wrong with that thing.\nInspect and correct the thing in DevTools.\nApply the correct code \n…\nThe post What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://christianheilmann.com/2021/10/12/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools/",
"publishedOn": "2021-10-21T22:14:21.000Z",
"wordCount": 575,
"title": "What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?"
}
]
},
@ -163,13 +163,27 @@
"feedUrl": "https://www.smashingmagazine.com/feed/",
"siteUrl": "https://www.smashingmagazine.com/",
"articles": [
{
"id": "https://smashingmagazine.com/2021/10/resources-tools-turbocharge-copywriting-skills/",
"author": "hello@smashingmagazine.com (Freya Giles)",
"description": "Stop wasting time and effort writing copy that falls flat. Raise your copywriting game and boost your powers of persuasion with these rich and informative online resources.",
"link": "https://smashingmagazine.com/2021/10/resources-tools-turbocharge-copywriting-skills/",
"publishedOn": "2021-10-29T10:00:00.000Z",
"wordCount": 2516,
"title": "50 Resources And Tools To Turbocharge Your Copywriting Skills",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/376436ee-7e40-4d99-ad14-e934df9f92c9/resources-tools-turbocharge-copywriting-skills.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/10/building-amazon-product-scraper-nodejs/",
"author": "hello@smashingmagazine.com (Robert Sfichi)",
"description": "The wealth of data that Amazon holds can make a huge difference when youre designing a product or hunting for a bargain. But, how can a developer get that data? Simple, by using a web scraper. Heres how to build your data extraction bot with Node.js.",
"link": "https://smashingmagazine.com/2021/10/building-amazon-product-scraper-nodejs/",
"publishedOn": "2021-10-28T11:00:00.000Z",
"wordCount": 3161,
"wordCount": 3175,
"title": "How To Build An Amazon Product Scraper With Node.js",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/069a1796-0f8d-4936-bfc0-4aa988ef0594/building-amazon-product-scraper-nodejs.jpg",
@ -183,7 +197,7 @@
"description": "Thanks to technology, eye-tracking has become more accessible to UX research as it allows researchers to get insights about users visual attention. This article explores the latest trends in the eye-tracking market and how the methodology can be included in the UX researchers toolbox.",
"link": "https://smashingmagazine.com/2021/10/eye-tracking-mobile-ux-research/",
"publishedOn": "2021-10-27T10:00:00.000Z",
"wordCount": 3505,
"wordCount": 3519,
"title": "Eye-Tracking In Mobile UX Research",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3012986b-e407-4c49-8186-13a99528ef13/eye-tracking-mobile-ux-research.jpg",
@ -197,7 +211,7 @@
"description": "Nx is a build framework that facilitates optimization, efficient scaling of applications, and other features such as shared libraries and components. In this article, we will be looking at how we can effectively scale Next.js applications by using Nx.",
"link": "https://smashingmagazine.com/2021/10/optimizing-nextjs-applications-nx/",
"publishedOn": "2021-10-26T10:00:00.000Z",
"wordCount": 3038,
"wordCount": 3026,
"title": "Optimizing Next.js Applications With Nx",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32b5517f-415c-43ed-98a6-70215d408f7a/optimizing-nextjs-applications-nx.jpg",
@ -211,7 +225,7 @@
"description": "In this article, we will go through how `object-fit` and `background-size` work, when we can use them, and why, along with some practical use cases and recommendations. Lets dive in.",
"link": "https://smashingmagazine.com/2021/10/object-fit-background-size-css/",
"publishedOn": "2021-10-25T13:00:00.000Z",
"wordCount": 2037,
"wordCount": 2035,
"title": "A Deep Dive Into object-fit And background-size In CSS",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/19e7f717-46d5-4949-96f4-671f4744d0e1/object-fit-background-size-css.jpg",
@ -225,7 +239,7 @@
"description": "Quasar is an open-source Vue.js-based cross-platform framework that allows you, as a developer, to easily build apps for both desktop and mobile using technologies such as Cordova and Electron and writing your code once. The app well build will store and get its data from Firebase, meaning that we will also be seeing how to use Firebase in Quasar.",
"link": "https://smashingmagazine.com/2021/10/introduction-quasar-framework-cross-platform-applications/",
"publishedOn": "2021-10-23T11:00:00.000Z",
"wordCount": 4922,
"wordCount": 4916,
"title": "An Introduction To Quasar Framework: Building Cross-Platform Applications",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e64d5e62-7c13-430a-90c6-f21b1c0325fe/introduction-quasar-framework-cross-platform-applications.jpg",
@ -239,7 +253,7 @@
"description": "This article highlights the process, technical decisions and lessons learned behind building the real-time game Autowuzzler. Learn how to share game state across multiple clients in real-time with Colyseus, do physics calculations with Matter.js, store data in Supabase.io and build the front-end with SvelteKit.",
"link": "https://smashingmagazine.com/2021/10/real-time-multi-user-game/",
"publishedOn": "2021-10-22T09:30:00.000Z",
"wordCount": 4639,
"wordCount": 4629,
"title": "How To Build A Real-Time Multi-User Game From Scratch",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f27da7cf-e0e3-4ed4-a845-6fd61fdb0e70/real-time-multi-user-game.jpg",
@ -253,7 +267,7 @@
"description": "The `prefers-reduced-motion` media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why theres no reason not to use it today to make your sites more accessible.",
"link": "https://smashingmagazine.com/2021/10/respecting-users-motion-preferences/",
"publishedOn": "2021-10-21T10:30:00.000Z",
"wordCount": 2881,
"wordCount": 2883,
"title": "Respecting Users Motion Preferences",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df53065e-5b99-4a67-ad0c-2cd67b07dc2a/respecting-users-motion-preferences.jpg",
@ -267,7 +281,7 @@
"description": "Back in January 2020, Ben Holmes set out to do what just about every web developer does each year: rebuild his personal site. In this article, he shares his story of how he set out to build his own build pipeline from absolute ground zero and created “Slinkity”.",
"link": "https://smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/",
"publishedOn": "2021-10-20T11:00:00.000Z",
"wordCount": 5046,
"wordCount": 5042,
"title": "Building The SSG Ive Always Wanted: An 11ty, Vite And JAM Sandwich",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1ff6275f-bf33-480f-bdd4-690e94f96314/building-ssg-11ty-vite-jam-sandwich.jpg",
@ -281,7 +295,7 @@
"description": "In this tutorial, Paul Scanlon explains how to build an API by using Gatsby Functions and what you need to keep in mind when deploying it to Gatsby Cloud.",
"link": "https://smashingmagazine.com/2021/10/building-api-gatsby-functions/",
"publishedOn": "2021-10-19T14:00:00.000Z",
"wordCount": 2535,
"wordCount": 2524,
"title": "Building An API With Gatsby Functions",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/110c2aa7-7744-48d6-a234-9e67e903cbe5/building-api-gatsby-functions.jpg",
@ -309,7 +323,7 @@
"description": "Cumulative Layout Shift is one of the hardest core web vital to debug. In this article, we go through different tools to investigate CLS, when to use them(and when not), and solutions to some of the CLS issues we faced in our Next.js-based e-commerce website.",
"link": "https://smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/",
"publishedOn": "2021-10-18T14:00:00.000Z",
"wordCount": 2143,
"wordCount": 2142,
"title": "Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e522651-eaf2-45e7-a544-9da7beb7b23e/nextjs-ecommerce-cls-case-study.jpg",
@ -323,7 +337,7 @@
"description": "In this article, well look at why taking care of our work-life balance is important, how to develop a simple and effective mental health routine, and the most common and efficient techniques you can use to make your custom routine.",
"link": "https://smashingmagazine.com/2021/10/effective-mental-health-routine-programmers/",
"publishedOn": "2021-10-16T10:00:00.000Z",
"wordCount": 2850,
"wordCount": 2847,
"title": "A Simple But Effective Mental Health Routine For Programmers",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c36dd2b2-f807-42a7-b8d1-9e6e9a00b3e7/effective-mental-health-routine-for-programmers.jpg",
@ -337,7 +351,7 @@
"description": "Customers may start using your app because you offer a unique product, but user experience is what makes them stay. For that, you need excellent UX designers, and the know-how to spot them when hiring.",
"link": "https://smashingmagazine.com/2021/10/tips-tricks-evaluating-ux-ui-designers/",
"publishedOn": "2021-10-15T13:00:00.000Z",
"wordCount": 4023,
"wordCount": 4021,
"title": "Tips And Tricks For Evaluating UX/UI Designers",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/727cbd89-cbf4-4a29-af64-ac51d777ffba/tips-tricks-evaluating-ux-ui-designers.jpg",
@ -351,7 +365,7 @@
"description": "Writing CSS has probably never been more fun and exciting than it is today. In this post well take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. If youre interested, weve also just recently covered [CSS auditing tools](https://www.smashingmagazine.com/2021/03/css-auditing-tools/), [CSS generators](https://www.smashingmagazine.com/2021/03/css-generators/), [front-end boilerplates](https://www.smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/) and [VS code extensions](https://www.smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/) — you might find them useful, too.",
"link": "https://smashingmagazine.com/2021/10/modern-css-solutions-for-common-problems/",
"publishedOn": "2021-10-14T12:00:00.000Z",
"wordCount": 3522,
"wordCount": 3523,
"title": "Smart CSS Solutions For Common UI Challenges",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e3bf0115-0bc9-41b7-b027-3ea8b6b7e848/transition-css-gradients-opt.png",
@ -379,7 +393,7 @@
"description": "React with JSX is a fantastic tool for making easy-to-use components. Typescript components make it an absolute pleasure for developers to integrate your components into their apps and explore your APIs. Learn about three lesser-known React APIs that can take your components to the next level, and help you build even better React Components in this article.",
"link": "https://smashingmagazine.com/2021/10/react-apis-building-flexible-components-typescript/",
"publishedOn": "2021-10-12T12:00:00.000Z",
"wordCount": 2342,
"wordCount": 2340,
"title": "Useful React APIs For Building Flexible Components With TypeScript",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8fbb65d7-6494-4494-9a78-099e178b83da/react-apis-building-flexible-components-typescript.jpg",
@ -407,7 +421,7 @@
"description": "A “dark pattern” is a deceptive UX pattern that tricks users into doing things they may not really want to do. In this article, Alvaro Montoro does a little experiment to find out how much privacy is taken away from users across three different browsers.",
"link": "https://smashingmagazine.com/2021/10/autofill-dark-pattern/",
"publishedOn": "2021-10-11T10:00:00.000Z",
"wordCount": 3732,
"wordCount": 3730,
"title": "The Autofill Dark Pattern",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8722ec01-912f-4013-8b8a-2ba0ab43cc20/autofill-dark-pattern.jpg",
@ -421,7 +435,7 @@
"description": "Most animation libraries like GSAP and Framer Motion are built purely with JavaScript or TypeScript, unlike AnimXYZ, which is labelled “the first composable CSS animation toolkit”, built mainly with SCSS While a simple library, it can be used to achieve a lot of awesome animation on the web in a short amount of time and little code.",
"link": "https://smashingmagazine.com/2021/10/composable-css-animation-vue-animxyz/",
"publishedOn": "2021-10-09T10:00:00.000Z",
"wordCount": 2819,
"wordCount": 2813,
"title": "Composable CSS Animation In Vue With AnimXYZ",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0b5365f4-e57d-4fa8-96ed-1742adb243ec/composable-css-animation-vue-animxyz.jpg",
@ -435,7 +449,7 @@
"description": "In this article, well be building an interactive fiction experience in which a user can insert words that match parts of speech given by the content creator. Lets go!",
"link": "https://smashingmagazine.com/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/",
"publishedOn": "2021-10-08T10:00:00.000Z",
"wordCount": 7101,
"wordCount": 7103,
"title": "Building A Static-First MadLib Generator With Portable Text And Netlify On-Demand Builder Functions",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d9de142e-09f1-4257-99f5-606cc09b8c00/static-first-madlib-generator-portable-text-netlify-builder-functions.jpg",
@ -449,7 +463,7 @@
"description": "Every once in a while, we publish [freebies](https://www.smashingmagazine.com/category/freebies/) related to different occasions and themes. We hope that with this icon set, every designer will be able to find their own use case and contribute to saving lives. Free for personal and commercial use.",
"link": "https://smashingmagazine.com/2021/10/freebie-coronavirus-icon-set/",
"publishedOn": "2021-10-07T09:00:00.000Z",
"wordCount": 1001,
"wordCount": 996,
"title": "Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef22f452-44d9-49ae-94f9-c7f1c57a8378/coronavirus.png",
@ -477,7 +491,7 @@
"description": "Have you ever struggled with testing cloud services locally? Specifically, have you ever struggled with locally testing an API that uses API Gateway and Lambda, with the Serverless framework, on AWS? In this article, Tom Hudson shares a quick overview of how easy it is to quickly set up your project to test locally before deploying to AWS.",
"link": "https://smashingmagazine.com/2021/10/local-testing-serverless-api-gateway-lambda/",
"publishedOn": "2021-10-05T10:00:00.000Z",
"wordCount": 1786,
"wordCount": 1799,
"title": "Local Testing A Serverless API (API Gateway And Lambda)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d43ff4a2-4767-4595-9f46-f1ca18f64060/local-testing-serverless-api-gateway-lambda.jpg",
@ -505,27 +519,13 @@
"description": "Many websites have some sort of search feature because it helps users navigate through their content easily. Implementing it the right way can be tricky and might not give a good user experience. In this tutorial, we will be integrating Algolia, a popular and powerful search service for the best experience on our Nuxt site.",
"link": "https://smashingmagazine.com/2021/10/search-functionality-nuxt-app-algolia-instantsearch/",
"publishedOn": "2021-10-01T10:00:00.000Z",
"wordCount": 4898,
"wordCount": 4901,
"title": "How To Implement Search Functionality In Your Nuxt App Using Algolia InstantSearch",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/584ac63f-f493-4e93-8d6a-5e6bc640d7ea/search-functionality-nuxt-app-algolia-instantsearch.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/09/desktop-wallpaper-calendars-october-2021/",
"author": "hello@smashingmagazine.com (Cosima Mielke)",
"description": "Get your desktop ready for fall and the upcoming Halloween season with a fresh batch of desktop wallpapers. Created with love by designers and artists from across the globe, they come in versions with and without a calendar for October 2021.",
"link": "https://smashingmagazine.com/2021/09/desktop-wallpaper-calendars-october-2021/",
"publishedOn": "2021-09-30T08:00:00.000Z",
"wordCount": 2479,
"title": "A Time Of Transition (October 2021 Desktop Wallpapers Edition)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8987d365-d643-429d-b840-56ff195a9da5/oct-21-autumn-vibes-preview-opt.png",
"length": "0",
"type": "image/png"
}
}
]
},
@ -534,6 +534,24 @@
"feedUrl": "https://www.freecodecamp.org/news/rss/",
"siteUrl": "https://www.freecodecamp.org/news",
"articles": [
{
"id": "61353325d6679a07b7d4318c",
"author": null,
"description": "Hello everyone, today we will talk about Ansible, a fantastic software tool that allows you to automate cross-platform computer support in a simple but effective way. Table of Contents What is Ansible? How Does Ansible Work? Ansible's Architecture Plugins Modules Inventories Playbook Benefits of Using Ansible Why is Ansible so",
"link": "https://www.freecodecamp.org/news/what-is-ansible/",
"publishedOn": "2021-10-29T20:42:16.000Z",
"wordCount": 1647,
"title": "What is Ansible? A Tool to Automate Parts of Your Job"
},
{
"id": "6178555333422e07df364ee9",
"author": null,
"description": "Many developers have written a demo login application at some point in time. We all start with the simple user defined ID and password. We then try to implement something like a social login with, say, Google or Twitter. There is, of course, a more complex process involved in setting",
"link": "https://www.freecodecamp.org/news/how-to-use-social-login-with-oauth-for-more-secure-apps/",
"publishedOn": "2021-10-29T14:50:00.000Z",
"wordCount": 985,
"title": "How to Use Social Login with OAuth to Make Your Apps More Secure"
},
{
"id": "617a55f533422e07df366544",
"author": null,
@ -605,24 +623,6 @@
"publishedOn": "2021-10-28T13:40:10.000Z",
"wordCount": 12249,
"title": "JavaScript Project: Create a PuzzleCam Game"
},
{
"id": "61772e2833422e07df36437b",
"author": null,
"description": "Recently at work, I came across an interesting method to handle encryption at scale called envelope encryption. First of all, it increases security and helps you ease out the management of encryption keys. But it's also a highly recommended pattern by PCI-DSS (Security Standard for Credit Card Processing) and results",
"link": "https://www.freecodecamp.org/news/envelope-encryption/",
"publishedOn": "2021-10-27T22:52:59.000Z",
"wordCount": 1497,
"title": "How to Manage Encryption at Scale with Envelope Encryption & Key Management Systems"
},
{
"id": "61798c3d33422e07df365d30",
"author": null,
"description": "Configuration is an essential part of every application. It helps enhance an application's flexibility and maintainability. With this in mind, it's very important that developers are able to correctly identify what items should be in configuration. In this article, I'll walk you through 8 items that should be configurable in",
"link": "https://www.freecodecamp.org/news/what-should-be-configurable-in-apps/",
"publishedOn": "2021-10-27T20:30:15.000Z",
"wordCount": 709,
"title": "What Items Should Be Configurable in an Application?"
}
]
}

115
feed.atom
View file

@ -1,10 +1,63 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>urn:2021-10-29T00:39:49.859Z</id>
<id>urn:2021-10-30T00:40:18.397Z</id>
<title>osmos::feed</title>
<updated>2021-10-29T00:39:49.859Z</updated>
<updated>2021-10-30T00:40:18.397Z</updated>
<generator>osmosfeed 1.11.3</generator>
<link rel="alternate" href="index.html"/>
<entry>
<title type="html"><![CDATA[What is Ansible? A Tool to Automate Parts of Your Job]]></title>
<id>61353325d6679a07b7d4318c</id>
<link href="https://www.freecodecamp.org/news/what-is-ansible/"/>
<updated>2021-10-29T20:42:16.000Z</updated>
<summary type="html"><![CDATA[Hello everyone, today we will talk about Ansible, a fantastic software tool that allows you to automate cross-platform computer support in a simple but effective way. Table of Contents What is Ansible? How Does Ansible Work? Ansible's Architecture Plugins Modules Inventories Playbook Benefits of Using Ansible Why is Ansible so]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Some Articles About Accessibility Ive Saved Recently IV]]></title>
<id>https://css-tricks.com/?p=354581</id>
<link href="https://css-tricks.com/some-articles-about-accessibility-ive-saved-recently-iv/"/>
<updated>2021-10-29T18:28:38.000Z</updated>
<summary type="html"><![CDATA[A guide to designing accessible, WCAG-compliant focus indicators — Sara Soueidan says you can make more accessible focus outlines by doing your own, rather than leaving it to the browser — as long as you do it right. Deep dive!
The post Some Articles About Accessibility Ive Saved Recently IV 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 Use Social Login with OAuth to Make Your Apps More Secure]]></title>
<id>6178555333422e07df364ee9</id>
<link href="https://www.freecodecamp.org/news/how-to-use-social-login-with-oauth-for-more-secure-apps/"/>
<updated>2021-10-29T14:50:00.000Z</updated>
<summary type="html"><![CDATA[Many developers have written a demo login application at some point in time. We all start with the simple user defined ID and password. We then try to implement something like a social login with, say, Google or Twitter. There is, of course, a more complex process involved in setting]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Create Your Own Automated Social Images With Resoc]]></title>
<id>https://css-tricks.com/?p=354296</id>
<link href="https://css-tricks.com/create-your-own-automated-social-images-with-resoc/"/>
<updated>2021-10-29T14:14:55.000Z</updated>
<summary type="html"><![CDATA[There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented …
The post Create Your Own Automated Social Images With Resoc appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Philippe Bernard</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[50 Resources And Tools To Turbocharge Your Copywriting Skills]]></title>
<id>https://smashingmagazine.com/2021/10/resources-tools-turbocharge-copywriting-skills/</id>
<link href="https://smashingmagazine.com/2021/10/resources-tools-turbocharge-copywriting-skills/"/>
<updated>2021-10-29T10:00:00.000Z</updated>
<summary type="html"><![CDATA[Stop wasting time and effort writing copy that falls flat. Raise your copywriting game and boost your powers of persuasion with these rich and informative online resources.]]></summary>
<author>
<name>hello@smashingmagazine.com (Freya Giles)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Secure Your React.js Application]]></title>
<id>617a55f533422e07df366544</id>
@ -151,26 +204,6 @@ The post Sticky Definition Lists appeared first on CSS-Tricks. You can support C
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Manage Encryption at Scale with Envelope Encryption &amp; Key Management Systems]]></title>
<id>61772e2833422e07df36437b</id>
<link href="https://www.freecodecamp.org/news/envelope-encryption/"/>
<updated>2021-10-27T22:52:59.000Z</updated>
<summary type="html"><![CDATA[Recently at work, I came across an interesting method to handle encryption at scale called envelope encryption. First of all, it increases security and helps you ease out the management of encryption keys. But it's also a highly recommended pattern by PCI-DSS (Security Standard for Credit Card Processing) and results]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What Items Should Be Configurable in an Application?]]></title>
<id>61798c3d33422e07df365d30</id>
<link href="https://www.freecodecamp.org/news/what-should-be-configurable-in-apps/"/>
<updated>2021-10-27T20:30:15.000Z</updated>
<summary type="html"><![CDATA[Configuration is an essential part of every application. It helps enhance an application's flexibility and maintainability. With this in mind, it's very important that developers are able to correctly identify what items should be in configuration. In this article, I'll walk you through 8 items that should be configurable in]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Implement and Style the Dialog Element]]></title>
<id>https://css-tricks.com/?p=354857</id>
@ -305,17 +338,6 @@ The post Can Include (a Certain HTML element within another Certain HTML Element
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Exploring the CSS Paint API: Rounding Shapes]]></title>
<id>https://css-tricks.com/?p=353391</id>
<link href="https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/"/>
<updated>2021-10-22T14:02:54.000Z</updated>
<summary type="html"><![CDATA[Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! Thats what were going to look at as part of this “Exploring …
The post Exploring the CSS Paint API: Rounding Shapes 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[How To Build A Real-Time Multi-User Game From Scratch]]></title>
<id>https://smashingmagazine.com/2021/10/real-time-multi-user-game/</id>
@ -326,23 +348,6 @@ The post Exploring the CSS Paint API: Rounding Shapes appeared first on CSS-Tric
<name>hello@smashingmagazine.com (Martin Grubinger)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?]]></title>
<id>https://css-tricks.com/?p=354537</id>
<link href="https://christianheilmann.com/2021/10/12/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools/"/>
<updated>2021-10-21T22:14:21.000Z</updated>
<summary type="html"><![CDATA[Its not uncommon for my front-end workflow to go something like this:
Work on thing.
See that thing in an automatically refreshed browser.
See something wrong with that thing.
Inspect and correct the thing in DevTools.
Apply the correct code
The post What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? 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[Respecting Users Motion Preferences]]></title>
<id>https://smashingmagazine.com/2021/10/respecting-users-motion-preferences/</id>
@ -545,14 +550,4 @@ Thank you: @hirdot]]></summary>
<name>hello@smashingmagazine.com (Miracle Onyenma)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[A Time Of Transition (October 2021 Desktop Wallpapers Edition)]]></title>
<id>https://smashingmagazine.com/2021/09/desktop-wallpaper-calendars-october-2021/</id>
<link href="https://smashingmagazine.com/2021/09/desktop-wallpaper-calendars-october-2021/"/>
<updated>2021-09-30T08:00:00.000Z</updated>
<summary type="html"><![CDATA[Get your desktop ready for fall and the upcoming Halloween season with a fresh batch of desktop wallpapers. Created with love by designers and artists from across the globe, they come in versions with and without a calendar for October 2021.]]></summary>
<author>
<name>hello@smashingmagazine.com (Cosima Mielke)</name>
</author>
</entry>
</feed>

View file

@ -15,6 +15,87 @@
<body>
<!-- %after-body-begin.html% -->
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-10-29">2021-10-29</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">Some Articles About Accessibility Ive Saved Recently IV</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/some-articles-about-accessibility-ive-saved-recently-iv/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>A guide to designing accessible, WCAG-compliant focus indicators — Sara Soueidan says you can make more accessible focus outlines by doing your own, rather than leaving it to the browser — as long as you do it right. Deep dive!
The post Some Articles About Accessibility Ive Saved Recently IV 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">Create Your Own Automated Social Images With Resoc</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/create-your-own-automated-social-images-with-resoc/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(12 min)</span>
<span>There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented …
The post Create Your Own Automated Social Images With Resoc 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 Ansible? A Tool to Automate Parts of Your Job</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-ansible/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>Hello everyone, today we will talk about Ansible, a fantastic software tool that allows you to automate cross-platform computer support in a simple but effective way. Table of Contents What is Ansible? How Does Ansible Work? Ansible&#x27;s Architecture Plugins Modules Inventories Playbook Benefits of Using Ansible Why is Ansible so</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Use Social Login with OAuth to Make Your Apps More Secure</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-use-social-login-with-oauth-for-more-secure-apps/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Many developers have written a demo login application at some point in time. We all start with the simple user defined ID and password. We then try to implement something like a social login with, say, Google or Twitter. There is, of course, a more complex process involved in setting</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">50 Resources And Tools To Turbocharge Your Copywriting Skills</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/resources-tools-turbocharge-copywriting-skills/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(8 min)</span>
<span>Stop wasting time and effort writing copy that falls flat. Raise your copywriting game and boost your powers of persuasion with these rich and informative online resources.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-10-28">2021-10-28</time></h2>
<ul class="sources card">
@ -233,34 +314,6 @@ The post Testing Vue Components With Cypress appeared first on CSS-Tricks. You c
</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">How to Manage Encryption at Scale with Envelope Encryption &amp; Key Management Systems</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/envelope-encryption/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>Recently at work, I came across an interesting method to handle encryption at scale called envelope encryption. First of all, it increases security and helps you ease out the management of encryption keys. But it&#x27;s also a highly recommended pattern by PCI-DSS (Security Standard for Credit Card Processing) and results</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">What Items Should Be Configurable in an Application?</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-should-be-configurable-in-apps/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Configuration is an essential part of every application. It helps enhance an application&#x27;s flexibility and maintainability. With this in mind, it&#x27;s very important that developers are able to correctly identify what items should be in configuration. In this article, I&#x27;ll walk you through 8 items that should be configurable in</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>
@ -441,18 +494,6 @@ The post Can Include (a Certain HTML element within another Certain HTML Element
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Exploring the CSS Paint API: Rounding Shapes</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(12 min)</span>
<span>Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! Thats what were going to look at as part of this “Exploring …
The post Exploring the CSS Paint API: Rounding Shapes 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">
@ -477,30 +518,6 @@ The post Exploring the CSS Paint API: Rounding Shapes appeared first on CSS-Tric
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-10-21">2021-10-21</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">What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?</summary>
<a class="article-summary-link article-summary-box-outer" href="https://christianheilmann.com/2021/10/12/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Its not uncommon for my front-end workflow to go something like this:
Work on thing.
See that thing in an automatically refreshed browser.
See something wrong with that thing.
Inspect and correct the thing in DevTools.
Apply the correct code
The post What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? 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>
@ -628,7 +645,7 @@ Thank you: @hirdot</span>
<summary class="article-expander__title">A Simple But Effective Mental Health Routine For Programmers</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/effective-mental-health-routine-programmers/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(10 min)</span>
<span class="article-reading-time">(9 min)</span>
<span>In this article, well look at why taking care of our work-life balance is important, how to develop a simple and effective mental health routine, and the most common and efficient techniques you can use to make your custom routine.</span>
</div>
</a>
@ -913,31 +930,9 @@ Thank you: @hirdot</span>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-09-30">2021-09-30</time></h2>
<ul class="sources card">
<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">A Time Of Transition (October 2021 Desktop Wallpapers Edition)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/desktop-wallpaper-calendars-october-2021/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(8 min)</span>
<span>Get your desktop ready for fall and the upcoming Halloween season with a fresh batch of desktop wallpapers. Created with love by designers and artists from across the globe, they come in versions with and without a calendar for October 2021.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<footer>
<time id="build-timestamp" datetime="2021-10-29T00:39:49.841Z">2021-10-29T00:39:49.841Z</time>
<time id="build-timestamp" datetime="2021-10-30T00:40:18.375Z">2021-10-30T00:40:18.375Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.3</a></span>
</footer>
<script src="index.js"></script>