mirror of
https://github.com/osmoscraft/osmosfeed-template.git
synced 2026-03-11 14:44:24 +00:00
deploy: 1f5684a2ae
This commit is contained in:
chuanqisun
parent
4d4a26ef53
commit
f549085968
3 changed files with 308 additions and 294 deletions
202
cache.json
202
cache.json
|
|
@ -11,13 +11,31 @@
|
|||
"feedUrl": "https://css-tricks.com/feed/",
|
||||
"siteUrl": "https://css-tricks.com",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=350311",
|
||||
"author": "Chris Coyier",
|
||||
"description": "A question:\nIf you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?\nMatt Stauffer, Twitter\n\nI wrote about doing this in Sublime Text a …\nThe post One Way to Convert Code Indentation appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/one-way-to-convert-code-indentation/",
|
||||
"publishedOn": "2021-08-25T22:34:04.000Z",
|
||||
"wordCount": 754,
|
||||
"title": "One Way to Convert Code Indentation"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=346612",
|
||||
"author": "Eli Penner",
|
||||
"description": "Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and …\nThe post Stealing Game Animation Techniques to Engage Users appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/stealing-game-animation-techniques-to-engage-users/",
|
||||
"publishedOn": "2021-08-25T14:55:17.000Z",
|
||||
"wordCount": 2905,
|
||||
"title": "Stealing Game Animation Techniques to Engage Users"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=350486",
|
||||
"author": "Chris Coyier",
|
||||
"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": 693,
|
||||
"wordCount": 1052,
|
||||
"title": "Scrollbar Reflowing"
|
||||
},
|
||||
{
|
||||
|
|
@ -26,7 +44,7 @@
|
|||
"description": "(This is a sponsored post.)\nFree event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It’s just a little half-day thing. No brainer.\nJoin us for a special event where we’ll highlight business \n…\nThe post Architecting With Next.js appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://www.netlify.com/events/architecting-with-nextjs",
|
||||
"publishedOn": "2021-08-24T19:12:23.000Z",
|
||||
"wordCount": 441,
|
||||
"wordCount": 349,
|
||||
"title": "Architecting With Next.js"
|
||||
},
|
||||
{
|
||||
|
|
@ -35,7 +53,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": 1860,
|
||||
"wordCount": 1907,
|
||||
"title": "Introduction to the Solid JavaScript Library"
|
||||
},
|
||||
{
|
||||
|
|
@ -80,7 +98,7 @@
|
|||
"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": 1421,
|
||||
"wordCount": 1482,
|
||||
"title": "The Big Gotcha With Custom Properties"
|
||||
},
|
||||
{
|
||||
|
|
@ -116,7 +134,7 @@
|
|||
"description": "Have you already tried using WordPress headlessly with Gatsby? If you haven’t, you might check this article around the new Gatsby source plugin for WordPress; gatsby-source-wordpress is the official source plugin introduced in March 2021 as a part of the …\nThe post Native Search vs. Jetpack Instant Search in Headless WordPress With Gatsby appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/native-search-vs-jetpack-instant-search-in-headless-wordpress-with-gatsby/",
|
||||
"publishedOn": "2021-08-18T14:46:09.000Z",
|
||||
"wordCount": 3678,
|
||||
"wordCount": 3679,
|
||||
"title": "Native Search vs. Jetpack Instant Search in Headless WordPress With Gatsby"
|
||||
},
|
||||
{
|
||||
|
|
@ -127,24 +145,6 @@
|
|||
"publishedOn": "2021-08-17T21:09:32.000Z",
|
||||
"wordCount": 542,
|
||||
"title": "DX, to Whom?"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=346449",
|
||||
"author": "Leonardo Losoviz",
|
||||
"description": "I’ve been working on the same project for several years. Its initial version was a huge monolithic app containing thousands of files. It was poorly architected and non-reusable, but was hosted in a single repo making it easy to work …\nThe post From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/from-a-single-repo-to-multi-repos-to-monorepo-to-multi-monorepo/",
|
||||
"publishedOn": "2021-08-17T14:53:41.000Z",
|
||||
"wordCount": 4204,
|
||||
"title": "From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=346418",
|
||||
"author": "Chris Coyier",
|
||||
"description": "Brian Kardell shares a bit about the progress of bringing \"Tabs\" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.\nThe post Tabs in HTML? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://bkardell.com/blog/SpicySections.html",
|
||||
"publishedOn": "2021-08-16T23:31:01.000Z",
|
||||
"wordCount": 1914,
|
||||
"title": "Tabs in HTML?"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -153,13 +153,27 @@
|
|||
"feedUrl": "https://www.smashingmagazine.com/feed/",
|
||||
"siteUrl": "https://www.smashingmagazine.com/",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/08/public-private-multi-monorepo-php-projects/",
|
||||
"author": "hello@smashingmagazine.com (Leonardo Losoviz)",
|
||||
"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": 3496,
|
||||
"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",
|
||||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/08/automate-documentation-workflow-for-developers/",
|
||||
"author": "hello@smashingmagazine.com (Portia Burton)",
|
||||
"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": 3227,
|
||||
"wordCount": 3243,
|
||||
"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",
|
||||
|
|
@ -173,7 +187,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": 10549,
|
||||
"wordCount": 10544,
|
||||
"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",
|
||||
|
|
@ -187,7 +201,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": 4598,
|
||||
"wordCount": 4593,
|
||||
"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",
|
||||
|
|
@ -201,7 +215,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": 5340,
|
||||
"wordCount": 5343,
|
||||
"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",
|
||||
|
|
@ -215,7 +229,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": 3316,
|
||||
"wordCount": 3319,
|
||||
"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",
|
||||
|
|
@ -229,7 +243,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": 1866,
|
||||
"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",
|
||||
|
|
@ -243,7 +257,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": 2947,
|
||||
"wordCount": 2946,
|
||||
"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",
|
||||
|
|
@ -257,7 +271,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": 6663,
|
||||
"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",
|
||||
|
|
@ -285,7 +299,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": 5027,
|
||||
"wordCount": 5028,
|
||||
"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",
|
||||
|
|
@ -327,7 +341,7 @@
|
|||
"description": "What exactly is HTTP/3? Why was it needed so soon after HTTP/2 (which was only finalized in 2015)? How can or should you use it? And especially, how does this improve web performance? Let’s find out.",
|
||||
"link": "https://smashingmagazine.com/2021/08/http3-core-concepts-part1/",
|
||||
"publishedOn": "2021-08-09T11:00:00.000Z",
|
||||
"wordCount": 6959,
|
||||
"wordCount": 6962,
|
||||
"title": "HTTP/3 From A To Z: Core Concepts (Part 1)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8f9f9146-4b77-494d-af72-4db28567a6fe/http3-core-concepts-part1.jpg",
|
||||
|
|
@ -341,7 +355,7 @@
|
|||
"description": "VS Code can be supercharged wuth hundreds of [VS Code extensions](https://www.smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/). In this article, Leonardo shares four useful extensions that help him in his daily work.",
|
||||
"link": "https://smashingmagazine.com/2021/08/useful-vscode-extensions-web-developers/",
|
||||
"publishedOn": "2021-08-06T10:00:00.000Z",
|
||||
"wordCount": 586,
|
||||
"wordCount": 580,
|
||||
"title": "Four Useful VSCode Extensions For Web Developers",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2f984846-0510-48f5-a415-326027d14a88/3-useful-vscode-extensions-web-developers.png",
|
||||
|
|
@ -355,7 +369,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": 6577,
|
||||
"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",
|
||||
|
|
@ -369,7 +383,7 @@
|
|||
"description": "In this article, we’ll discuss and learn about the use case of iterating over React `children` and the ways to do it. In particular, we will deep dive into one of the utility methods, `React.Children.toArray`, that React gives us, which helps to iterate over the children in a way which ensures performance and determinism.",
|
||||
"link": "https://smashingmagazine.com/2021/08/react-children-iteration-methods/",
|
||||
"publishedOn": "2021-08-04T10:30:00.000Z",
|
||||
"wordCount": 3340,
|
||||
"wordCount": 3345,
|
||||
"title": "React Children And Iteration Methods",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ae9c0d62-009e-45c0-a600-d747533e49e5/react-children-iteration-methods.jpg",
|
||||
|
|
@ -383,7 +397,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": 2953,
|
||||
"wordCount": 2951,
|
||||
"title": "How To Build Resilient JavaScript UIs",
|
||||
"enclosure": {
|
||||
"url": "blob:http://www.smashingmagazine.com/c8b93225-8b34-431c-94f1-2f2d0a4fb95a",
|
||||
|
|
@ -397,7 +411,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": 5992,
|
||||
"wordCount": 5995,
|
||||
"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",
|
||||
|
|
@ -411,7 +425,7 @@
|
|||
"description": "New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2021. Created with love by the community for the community, they come in versions with and without a calendar for the month.",
|
||||
"link": "https://smashingmagazine.com/2021/07/desktop-wallpaper-calendars-august-2021/",
|
||||
"publishedOn": "2021-07-31T07:15:00.000Z",
|
||||
"wordCount": 2540,
|
||||
"wordCount": 2539,
|
||||
"title": "Good Vibes In August (2021 Desktop Wallpapers Edition)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44276d4d-0b57-4f7a-91cd-c6f3708d09d7/aug-21-cowabunga-preview-opt.png",
|
||||
|
|
@ -425,7 +439,7 @@
|
|||
"description": "Having an e-commerce store is crucial for any store owner as more and more customers are turning to online shopping. In this tutorial, we shall go through how to create an e-commerce site with Angular 11. The site will use the Commerce Layer as a headless e-commerce API and use Paypal to process payments.",
|
||||
"link": "https://smashingmagazine.com/2021/07/ecommerce-angular11-headless-paypal/",
|
||||
"publishedOn": "2021-07-30T11:00:00.000Z",
|
||||
"wordCount": 12561,
|
||||
"wordCount": 12548,
|
||||
"title": "How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/959013b7-26f7-4620-af11-f26f306c1512/ecommerce-angular11-headless-paypal.jpg",
|
||||
|
|
@ -439,7 +453,7 @@
|
|||
"description": "What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? In this article, Elad Shechter explains why CSS absolute units aren’t so absolute.",
|
||||
"link": "https://smashingmagazine.com/2021/07/css-absolute-units/",
|
||||
"publishedOn": "2021-07-29T10:30:00.000Z",
|
||||
"wordCount": 2963,
|
||||
"wordCount": 2965,
|
||||
"title": "There Is No Such Thing As A CSS Absolute Unit",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ee35630-bbe1-486c-8877-dacdd4b12869/css-absolute-units.jpg",
|
||||
|
|
@ -453,27 +467,13 @@
|
|||
"description": "Dialogs are everywhere in modern interface design (for good or for bad), and yet many of them are not accessible to assistive technologies. In this article, we will dig into how to create a short script to create accessible dialogs.",
|
||||
"link": "https://smashingmagazine.com/2021/07/accessible-dialog-from-scratch/",
|
||||
"publishedOn": "2021-07-28T11:00:00.000Z",
|
||||
"wordCount": 3088,
|
||||
"wordCount": 3098,
|
||||
"title": "Creating An Accessible Dialog From Scratch",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4ef51448-125a-4906-98f1-11af0e3fad58/accessible-dialog-from-scratch.jpg",
|
||||
"length": "0",
|
||||
"type": "image/jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/07/global-local-styling-nextjs/",
|
||||
"author": "hello@smashingmagazine.com (Alexander Dubovoy)",
|
||||
"description": "Next.js has strong opinions about how to organize JavaScript but not CSS. How can we develop patterns that encourage best CSS practices while also following the framework’s logic? The answer is surprisingly simple — to write well-structured CSS that balances global and local styling concerns.",
|
||||
"link": "https://smashingmagazine.com/2021/07/global-local-styling-nextjs/",
|
||||
"publishedOn": "2021-07-27T11:00:00.000Z",
|
||||
"wordCount": 3573,
|
||||
"title": "Global vs. Local Styling In Next.js",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a1756133-541e-429d-82dd-fb6f3988ef56/global-local-styling-nextjs.jpg",
|
||||
"length": "0",
|
||||
"type": "image/jpg"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -482,6 +482,51 @@
|
|||
"feedUrl": "https://www.freecodecamp.org/news/rss/",
|
||||
"siteUrl": "https://www.freecodecamp.org/news",
|
||||
"articles": [
|
||||
{
|
||||
"id": "612114773bccf807612a5084",
|
||||
"author": null,
|
||||
"description": "In 2012, Harvard Business Review named data science the sexiest job of the 21st century. But if you want to get a job as a data scientist, you'll need to go through a tough interview process. During data science job interviews, the interviewer will likely ask questions from different data",
|
||||
"link": "https://www.freecodecamp.org/news/23-common-data-science-interview-questions-for-beginners/",
|
||||
"publishedOn": "2021-08-25T21:39:37.000Z",
|
||||
"wordCount": 2157,
|
||||
"title": "Data Science Interview Questions for Beginners"
|
||||
},
|
||||
{
|
||||
"id": "612633433bccf807612a7bf4",
|
||||
"author": null,
|
||||
"description": "JSON stands for JavaScript Object Notation. A JSON file has .json as its extension and the data inside are represented in a key:value pair, just like a traditional JavaScript object. JSON and objects aren't exactly the same, though. The core difference is that the key in JSON must be",
|
||||
"link": "https://www.freecodecamp.org/news/what-is-a-json-file-example-javascript-code/",
|
||||
"publishedOn": "2021-08-25T20:04:19.000Z",
|
||||
"wordCount": 1085,
|
||||
"title": "What is a JSON File? Example JavaScript Code"
|
||||
},
|
||||
{
|
||||
"id": "611e7d553bccf807612a33ec",
|
||||
"author": null,
|
||||
"description": "IntroductionAre you curious about the IoT (Internet of Things?) Have you always wanted to try to make your own robot, smart mirror, or bird feeder camera? What about building a computer for a fraction of the cost of a commercially available machine? If you said yes to any of these",
|
||||
"link": "https://www.freecodecamp.org/news/what-is-raspberry-pi-specs-and-models-2021-guide/",
|
||||
"publishedOn": "2021-08-25T16:17:20.000Z",
|
||||
"wordCount": 1210,
|
||||
"title": "What is Raspberry Pi? Specs and Models (2021 Guide)"
|
||||
},
|
||||
{
|
||||
"id": "61064a8d3306a507d1bfbff9",
|
||||
"author": null,
|
||||
"description": "JavaScript was created over 26 years ago and is currently one of the most popular programming languages. But what is JavaScript? JavaScript is used with HTML and CSS to create dynamic and interactive web pages and mobile applications. We often call it one of the building blocks of web development.",
|
||||
"link": "https://www.freecodecamp.org/news/what-is-javascript-javascript-code-explained-in-plain-english/",
|
||||
"publishedOn": "2021-08-25T15:44:41.000Z",
|
||||
"wordCount": 1396,
|
||||
"title": "What is JavaScript? JavaScript Code Explained in Plain English"
|
||||
},
|
||||
{
|
||||
"id": "6063b8f89618b008528a9d7d",
|
||||
"author": null,
|
||||
"description": "Today we're gonna learn how to use the CSS units EM, REM, VW and VH by working through some practical examples. We'll also see how to make responsive websites with these units. Let's start. 💖 Table of ContentsWhy learn relative units?What are REM Units?How to make responsive websites with",
|
||||
"link": "https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/",
|
||||
"publishedOn": "2021-08-25T15:34:28.000Z",
|
||||
"wordCount": 1563,
|
||||
"title": "Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨"
|
||||
},
|
||||
{
|
||||
"id": "611f54d33bccf807612a38c4",
|
||||
"author": null,
|
||||
|
|
@ -526,51 +571,6 @@
|
|||
"publishedOn": "2021-08-24T19:02:30.000Z",
|
||||
"wordCount": 1391,
|
||||
"title": "Sacrificial Architecture – How to Make Tough Decisions to Abandon and Rebuild Systems"
|
||||
},
|
||||
{
|
||||
"id": "61225b3f3bccf807612a5aae",
|
||||
"author": null,
|
||||
"description": "Dictionaries are powerful built-in data structures in Python that store data as key-value pairs. Dictionary Comprehension can be super helpful in creating new dictionaries from existing dictionaries and iterables. In this tutorial, we'll learn how dictionary comprehensions work in Python by coding some simple examples. What is a Dictionary in",
|
||||
"link": "https://www.freecodecamp.org/news/dictionary-comprehension-in-python-explained-with-examples/",
|
||||
"publishedOn": "2021-08-24T17:34:03.000Z",
|
||||
"wordCount": 1378,
|
||||
"title": "Dictionary Comprehension in Python – Explained with Examples"
|
||||
},
|
||||
{
|
||||
"id": "612116513bccf807612a50db",
|
||||
"author": null,
|
||||
"description": "In JavaScript, you'll often need to iterate through an array collection and execute a callback method for each iteration. And there's a helpful method JS devs typically use to do this: the forEach() method. The forEach() method calls a specified callback function once for every element it iterates over inside",
|
||||
"link": "https://www.freecodecamp.org/news/javascript-array-foreach-tutorial-how-to-iterate-through-elements-in-an-array-with-map/",
|
||||
"publishedOn": "2021-08-24T17:16:41.000Z",
|
||||
"wordCount": 1664,
|
||||
"title": "JavaScript Array.forEach() Tutorial – How to Iterate Through Elements in an Array"
|
||||
},
|
||||
{
|
||||
"id": "6124d7c33bccf807612a70b0",
|
||||
"author": null,
|
||||
"description": "HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages. It is one of the most basic building blocks of every website, so it's crucial to learn if you want to have a career in web development. In this article, I",
|
||||
"link": "https://www.freecodecamp.org/news/what-is-html-definition-and-meaning/",
|
||||
"publishedOn": "2021-08-24T16:38:12.000Z",
|
||||
"wordCount": 1688,
|
||||
"title": "What is HTML – Definition and Meaning of Hypertext Markup Language"
|
||||
},
|
||||
{
|
||||
"id": "611d6726e884de07521811e2",
|
||||
"author": null,
|
||||
"description": "It is considered a best practice to have your CSS stylesheets in an external file. So how can you link that CSS to your HTML file? Linking to an external CSS file is an important part of any HTML page boilerplate. And in this article, we'll learn how to do",
|
||||
"link": "https://www.freecodecamp.org/news/external-css-stylesheets-how-to-link-css-to-html-and-import-into-head/",
|
||||
"publishedOn": "2021-08-24T15:44:49.000Z",
|
||||
"wordCount": 735,
|
||||
"title": "External CSS Stylesheets – How to Link CSS to HTML and Import into Head"
|
||||
},
|
||||
{
|
||||
"id": "611813bf72231b077cdb01fe",
|
||||
"author": null,
|
||||
"description": "Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android. We just released a course on the freeCodeCamp.org YouTube channel that will teach you how to create a Sudoku Android app with Kotlin and Jetpack Compose. Along the way you will",
|
||||
"link": "https://www.freecodecamp.org/news/create-an-android-app/",
|
||||
"publishedOn": "2021-08-24T15:43:51.000Z",
|
||||
"wordCount": 18594,
|
||||
"title": "Create an Android App With Kotlin and Jetpack Compose"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
172
feed.atom
172
feed.atom
|
|
@ -1,10 +1,96 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<id>urn:2021-08-25T00:39:27.374Z</id>
|
||||
<id>urn:2021-08-26T00:36:54.793Z</id>
|
||||
<title>osmos::feed</title>
|
||||
<updated>2021-08-25T00:39:27.374Z</updated>
|
||||
<updated>2021-08-26T00:36:54.793Z</updated>
|
||||
<generator>osmosfeed 1.11.0</generator>
|
||||
<link rel="alternate" href="index.html"/>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[One Way to Convert Code Indentation]]></title>
|
||||
<id>https://css-tricks.com/?p=350311</id>
|
||||
<link href="https://css-tricks.com/one-way-to-convert-code-indentation/"/>
|
||||
<updated>2021-08-25T22:34:04.000Z</updated>
|
||||
<summary type="html"><![CDATA[A question:
|
||||
If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?
|
||||
Matt Stauffer, Twitter
|
||||
|
||||
I wrote about doing this in Sublime Text a …
|
||||
The post One Way to Convert Code Indentation 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[Data Science Interview Questions for Beginners]]></title>
|
||||
<id>612114773bccf807612a5084</id>
|
||||
<link href="https://www.freecodecamp.org/news/23-common-data-science-interview-questions-for-beginners/"/>
|
||||
<updated>2021-08-25T21:39:37.000Z</updated>
|
||||
<summary type="html"><![CDATA[In 2012, Harvard Business Review named data science the sexiest job of the 21st century. But if you want to get a job as a data scientist, you'll need to go through a tough interview process. During data science job interviews, the interviewer will likely ask questions from different data]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[What is a JSON File? Example JavaScript Code]]></title>
|
||||
<id>612633433bccf807612a7bf4</id>
|
||||
<link href="https://www.freecodecamp.org/news/what-is-a-json-file-example-javascript-code/"/>
|
||||
<updated>2021-08-25T20:04:19.000Z</updated>
|
||||
<summary type="html"><![CDATA[JSON stands for JavaScript Object Notation. A JSON file has .json as its extension and the data inside are represented in a key:value pair, just like a traditional JavaScript object. JSON and objects aren't exactly the same, though. The core difference is that the key in JSON must be]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[What is Raspberry Pi? Specs and Models (2021 Guide)]]></title>
|
||||
<id>611e7d553bccf807612a33ec</id>
|
||||
<link href="https://www.freecodecamp.org/news/what-is-raspberry-pi-specs-and-models-2021-guide/"/>
|
||||
<updated>2021-08-25T16:17:20.000Z</updated>
|
||||
<summary type="html"><![CDATA[IntroductionAre you curious about the IoT (Internet of Things?) Have you always wanted to try to make your own robot, smart mirror, or bird feeder camera? What about building a computer for a fraction of the cost of a commercially available machine? If you said yes to any of these]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[What is JavaScript? JavaScript Code Explained in Plain English]]></title>
|
||||
<id>61064a8d3306a507d1bfbff9</id>
|
||||
<link href="https://www.freecodecamp.org/news/what-is-javascript-javascript-code-explained-in-plain-english/"/>
|
||||
<updated>2021-08-25T15:44:41.000Z</updated>
|
||||
<summary type="html"><![CDATA[JavaScript was created over 26 years ago and is currently one of the most popular programming languages. But what is JavaScript? JavaScript is used with HTML and CSS to create dynamic and interactive web pages and mobile applications. We often call it one of the building blocks of web development.]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨]]></title>
|
||||
<id>6063b8f89618b008528a9d7d</id>
|
||||
<link href="https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/"/>
|
||||
<updated>2021-08-25T15:34:28.000Z</updated>
|
||||
<summary type="html"><![CDATA[Today we're gonna learn how to use the CSS units EM, REM, VW and VH by working through some practical examples. We'll also see how to make responsive websites with these units. Let's start. 💖 Table of ContentsWhy learn relative units?What are REM Units?How to make responsive websites with]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Stealing Game Animation Techniques to Engage Users]]></title>
|
||||
<id>https://css-tricks.com/?p=346612</id>
|
||||
<link href="https://css-tricks.com/stealing-game-animation-techniques-to-engage-users/"/>
|
||||
<updated>2021-08-25T14:55:17.000Z</updated>
|
||||
<summary type="html"><![CDATA[Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and …
|
||||
The post Stealing Game Animation Techniques to Engage Users appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Eli Penner</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Creating A Public/Private Multi-Monorepo For PHP Projects]]></title>
|
||||
<id>https://smashingmagazine.com/2021/08/public-private-multi-monorepo-php-projects/</id>
|
||||
<link href="https://smashingmagazine.com/2021/08/public-private-multi-monorepo-php-projects/"/>
|
||||
<updated>2021-08-25T07:10:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[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.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Leonardo Losoviz)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[What is an Outlier? Definition and How to Find Outliers in Statistics]]></title>
|
||||
<id>611f54d33bccf807612a38c4</id>
|
||||
|
|
@ -80,56 +166,6 @@ The post Architecting With Next.js appeared first on CSS-Tricks. You can support
|
|||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Dictionary Comprehension in Python – Explained with Examples]]></title>
|
||||
<id>61225b3f3bccf807612a5aae</id>
|
||||
<link href="https://www.freecodecamp.org/news/dictionary-comprehension-in-python-explained-with-examples/"/>
|
||||
<updated>2021-08-24T17:34:03.000Z</updated>
|
||||
<summary type="html"><![CDATA[Dictionaries are powerful built-in data structures in Python that store data as key-value pairs. Dictionary Comprehension can be super helpful in creating new dictionaries from existing dictionaries and iterables. In this tutorial, we'll learn how dictionary comprehensions work in Python by coding some simple examples. What is a Dictionary in]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[JavaScript Array.forEach() Tutorial – How to Iterate Through Elements in an Array]]></title>
|
||||
<id>612116513bccf807612a50db</id>
|
||||
<link href="https://www.freecodecamp.org/news/javascript-array-foreach-tutorial-how-to-iterate-through-elements-in-an-array-with-map/"/>
|
||||
<updated>2021-08-24T17:16:41.000Z</updated>
|
||||
<summary type="html"><![CDATA[In JavaScript, you'll often need to iterate through an array collection and execute a callback method for each iteration. And there's a helpful method JS devs typically use to do this: the forEach() method. The forEach() method calls a specified callback function once for every element it iterates over inside]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[What is HTML – Definition and Meaning of Hypertext Markup Language]]></title>
|
||||
<id>6124d7c33bccf807612a70b0</id>
|
||||
<link href="https://www.freecodecamp.org/news/what-is-html-definition-and-meaning/"/>
|
||||
<updated>2021-08-24T16:38:12.000Z</updated>
|
||||
<summary type="html"><![CDATA[HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages. It is one of the most basic building blocks of every website, so it's crucial to learn if you want to have a career in web development. In this article, I]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[External CSS Stylesheets – How to Link CSS to HTML and Import into Head]]></title>
|
||||
<id>611d6726e884de07521811e2</id>
|
||||
<link href="https://www.freecodecamp.org/news/external-css-stylesheets-how-to-link-css-to-html-and-import-into-head/"/>
|
||||
<updated>2021-08-24T15:44:49.000Z</updated>
|
||||
<summary type="html"><![CDATA[It is considered a best practice to have your CSS stylesheets in an external file. So how can you link that CSS to your HTML file? Linking to an external CSS file is an important part of any HTML page boilerplate. And in this article, we'll learn how to do]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Create an Android App With Kotlin and Jetpack Compose]]></title>
|
||||
<id>611813bf72231b077cdb01fe</id>
|
||||
<link href="https://www.freecodecamp.org/news/create-an-android-app/"/>
|
||||
<updated>2021-08-24T15:43:51.000Z</updated>
|
||||
<summary type="html"><![CDATA[Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android. We just released a course on the freeCodeCamp.org YouTube channel that will teach you how to create a Sudoku Android app with Kotlin and Jetpack Compose. Along the way you will]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Introduction to the Solid JavaScript Library]]></title>
|
||||
<id>https://css-tricks.com/?p=346597</id>
|
||||
|
|
@ -326,17 +362,6 @@ The post DX, to Whom? appeared first on CSS-Tricks. You can support CSS-Tricks b
|
|||
<name>Chris Coyier</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo]]></title>
|
||||
<id>https://css-tricks.com/?p=346449</id>
|
||||
<link href="https://css-tricks.com/from-a-single-repo-to-multi-repos-to-monorepo-to-multi-monorepo/"/>
|
||||
<updated>2021-08-17T14:53:41.000Z</updated>
|
||||
<summary type="html"><![CDATA[I’ve been working on the same project for several years. Its initial version was a huge monolithic app containing thousands of files. It was poorly architected and non-reusable, but was hosted in a single repo making it easy to work …
|
||||
The post From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Leonardo Losoviz</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Free Open-Source Icons]]></title>
|
||||
<id>https://smashingmagazine.com/2021/08/open-source-icons/</id>
|
||||
|
|
@ -347,17 +372,6 @@ The post From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo appe
|
|||
<name>hello@smashingmagazine.com (Cosima Mielke)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Tabs in HTML?]]></title>
|
||||
<id>https://css-tricks.com/?p=346418</id>
|
||||
<link href="https://bkardell.com/blog/SpicySections.html"/>
|
||||
<updated>2021-08-16T23:31:01.000Z</updated>
|
||||
<summary type="html"><![CDATA[Brian Kardell shares a bit about the progress of bringing "Tabs" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.
|
||||
The post Tabs in HTML? 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 Develop Your Business’ Technology Roadmap]]></title>
|
||||
<id>https://smashingmagazine.com/2021/08/develop-business-technology-roadmap/</id>
|
||||
|
|
@ -518,14 +532,4 @@ The post Tabs in HTML? appeared first on CSS-Tricks. You can support CSS-Tricks
|
|||
<name>hello@smashingmagazine.com (Kitty Giraudel)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Global vs. Local Styling In Next.js]]></title>
|
||||
<id>https://smashingmagazine.com/2021/07/global-local-styling-nextjs/</id>
|
||||
<link href="https://smashingmagazine.com/2021/07/global-local-styling-nextjs/"/>
|
||||
<updated>2021-07-27T11:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[Next.js has strong opinions about how to organize JavaScript but not CSS. How can we develop patterns that encourage best CSS practices while also following the framework’s logic? The answer is surprisingly simple — to write well-structured CSS that balances global and local styling concerns.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Alexander Dubovoy)</name>
|
||||
</author>
|
||||
</entry>
|
||||
</feed>
|
||||
228
index.html
228
index.html
|
|
@ -15,6 +15,123 @@
|
|||
|
||||
<body>
|
||||
<!-- %after-body-begin.html% -->
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-08-25">2021-08-25</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">One Way to Convert Code Indentation</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/one-way-to-convert-code-indentation/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>A question:
|
||||
If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?
|
||||
Matt Stauffer, Twitter
|
||||
|
||||
I wrote about doing this in Sublime Text a …
|
||||
The post One Way to Convert Code Indentation 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">Stealing Game Animation Techniques to Engage Users</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/stealing-game-animation-techniques-to-engage-users/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(10 min)</span>
|
||||
<span>Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and …
|
||||
The post Stealing Game Animation Techniques to Engage Users 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">Data Science Interview Questions for Beginners</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/23-common-data-science-interview-questions-for-beginners/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(7 min)</span>
|
||||
<span>In 2012, Harvard Business Review named data science the sexiest job of the 21st century. But if you want to get a job as a data scientist, you'll need to go through a tough interview process. During data science job interviews, the interviewer will likely ask questions from different data</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">What is a JSON File? Example JavaScript Code</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-a-json-file-example-javascript-code/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>JSON stands for JavaScript Object Notation. A JSON file has .json as its extension and the data inside are represented in a key:value pair, just like a traditional JavaScript object. JSON and objects aren't exactly the same, though. The core difference is that the key in JSON must be</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">What is Raspberry Pi? Specs and Models (2021 Guide)</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-raspberry-pi-specs-and-models-2021-guide/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>IntroductionAre you curious about the IoT (Internet of Things?) Have you always wanted to try to make your own robot, smart mirror, or bird feeder camera? What about building a computer for a fraction of the cost of a commercially available machine? If you said yes to any of these</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">What is JavaScript? JavaScript Code Explained in Plain English</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-javascript-javascript-code-explained-in-plain-english/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(5 min)</span>
|
||||
<span>JavaScript was created over 26 years ago and is currently one of the most popular programming languages. But what is JavaScript? JavaScript is used with HTML and CSS to create dynamic and interactive web pages and mobile applications. We often call it one of the building blocks of web development.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(5 min)</span>
|
||||
<span>Today we're gonna learn how to use the CSS units EM, REM, VW and VH by working through some practical examples. We'll also see how to make responsive websites with these units. Let's start. 💖 Table of ContentsWhy learn relative units?What are REM Units?How to make responsive websites with</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">Creating A Public/Private Multi-Monorepo For PHP Projects</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/08/public-private-multi-monorepo-php-projects/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(12 min)</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-08-24">2021-08-24</time></h2>
|
||||
<ul class="sources card">
|
||||
|
|
@ -27,7 +144,7 @@
|
|||
<summary class="article-expander__title">Scrollbar Reflowing</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/scrollbar-reflowing/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>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 …
|
||||
The post Scrollbar Reflowing appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
|
|
@ -123,61 +240,6 @@ The post Introduction to the Solid JavaScript Library appeared first on CSS-Tric
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Dictionary Comprehension in Python – Explained with Examples</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/dictionary-comprehension-in-python-explained-with-examples/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(5 min)</span>
|
||||
<span>Dictionaries are powerful built-in data structures in Python that store data as key-value pairs. Dictionary Comprehension can be super helpful in creating new dictionaries from existing dictionaries and iterables. In this tutorial, we'll learn how dictionary comprehensions work in Python by coding some simple examples. What is a Dictionary in</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">JavaScript Array.forEach() Tutorial – How to Iterate Through Elements in an Array</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/javascript-array-foreach-tutorial-how-to-iterate-through-elements-in-an-array-with-map/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(6 min)</span>
|
||||
<span>In JavaScript, you'll often need to iterate through an array collection and execute a callback method for each iteration. And there's a helpful method JS devs typically use to do this: the forEach() method. The forEach() method calls a specified callback function once for every element it iterates over inside</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">What is HTML – Definition and Meaning of Hypertext Markup Language</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-html-definition-and-meaning/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(6 min)</span>
|
||||
<span>HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages. It is one of the most basic building blocks of every website, so it's crucial to learn if you want to have a career in web development. In this article, I</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">External CSS Stylesheets – How to Link CSS to HTML and Import into Head</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/external-css-stylesheets-how-to-link-css-to-html-and-import-into-head/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>It is considered a best practice to have your CSS stylesheets in an external file. So how can you link that CSS to your HTML file? Linking to an external CSS file is an important part of any HTML page boilerplate. And in this article, we'll learn how to do</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Create an Android App With Kotlin and Jetpack Compose</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/create-an-android-app/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(62 min)</span>
|
||||
<span>Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android. We just released a course on the freeCodeCamp.org YouTube channel that will teach you how to create a Sudoku Android app with Kotlin and Jetpack Compose. Along the way you will</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
|
|
@ -462,18 +524,6 @@ The post DX, to Whom? appeared first on CSS-Tricks. You can support CSS-Tricks b
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/from-a-single-repo-to-multi-repos-to-monorepo-to-multi-monorepo/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(14 min)</span>
|
||||
<span>I’ve been working on the same project for several years. Its initial version was a huge monolithic app containing thousands of files. It was poorly architected and non-reusable, but was hosted in a single repo making it easy to work …
|
||||
The post From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo 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">
|
||||
|
|
@ -498,24 +548,6 @@ The post From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo appe
|
|||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-08-16">2021-08-16</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">Tabs in HTML?</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://bkardell.com/blog/SpicySections.html">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(6 min)</span>
|
||||
<span>Brian Kardell shares a bit about the progress of bringing "Tabs" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.
|
||||
The post Tabs in HTML? 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>
|
||||
|
|
@ -843,31 +875,9 @@ The post Tabs in HTML? appeared first on CSS-Tricks. You can support CSS-Tricks
|
|||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-07-27">2021-07-27</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">Global vs. Local Styling In Next.js</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/07/global-local-styling-nextjs/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(12 min)</span>
|
||||
<span>Next.js has strong opinions about how to organize JavaScript but not CSS. How can we develop patterns that encourage best CSS practices while also following the framework’s logic? The answer is surprisingly simple — to write well-structured CSS that balances global and local styling concerns.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<time id="build-timestamp" datetime="2021-08-25T00:39:27.358Z">2021-08-25T00:39:27.358Z</time>
|
||||
<time id="build-timestamp" datetime="2021-08-26T00:36:54.776Z">2021-08-26T00:36:54.776Z</time>
|
||||
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.0</a></span>
|
||||
</footer>
|
||||
<script src="index.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue