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
ac91104056
commit
a7d066d5eb
3 changed files with 264 additions and 245 deletions
168
cache.json
168
cache.json
|
|
@ -75,6 +75,33 @@
|
|||
"feedUrl": "https://css-tricks.com/feed/",
|
||||
"siteUrl": "https://css-tricks.com",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=342050",
|
||||
"author": "Chris Coyier",
|
||||
"description": "One thing that can be just a smidge funky about the <details> element is that, when open, it’s not always 100% clear what is inside that element and what isn’t. I’m not saying that always matters or that it’s a …\nThe post Put a Background on Open Details Elements appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/put-a-background-on-open-details-elements/",
|
||||
"publishedOn": "2021-06-11T00:16:28.000Z",
|
||||
"wordCount": 535,
|
||||
"title": "Put a Background on Open Details Elements"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341894",
|
||||
"author": "Kevin Powell",
|
||||
"description": "As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed.\nLet’s break those two down and see how they work together.\nThe post Equal Columns With Flexbox: It’s More Complicated Than You Might Think appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/",
|
||||
"publishedOn": "2021-06-10T14:34:22.000Z",
|
||||
"wordCount": 4303,
|
||||
"title": "Equal Columns With Flexbox: It’s More Complicated Than You Might Think"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=342182",
|
||||
"author": "Ikeh Akinyemi",
|
||||
"description": "In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.\nThe post Building a Headless CMS with Fauna and Vercel Functions appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/building-a-headless-cms-with-fauna-and-vercel-functions/",
|
||||
"publishedOn": "2021-06-10T14:26:47.000Z",
|
||||
"wordCount": 2892,
|
||||
"title": "Building a Headless CMS with Fauna and Vercel Functions"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=340967",
|
||||
"author": "Geoff Graham",
|
||||
|
|
@ -90,7 +117,7 @@
|
|||
"description": "Does that make your eye twitch a little bit? Like… it’s a typo. It should be target=\"_blank\" with an underscore to start the value. As in…\n<a target=\"_blank\" href=\"https://codepen.io\"Open CodePen in a New Tab\n</a\nWelp, that’s correct syntax!…\nThe post target=blank appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/targetblank/",
|
||||
"publishedOn": "2021-06-09T14:37:31.000Z",
|
||||
"wordCount": 802,
|
||||
"wordCount": 1186,
|
||||
"title": "target=blank"
|
||||
},
|
||||
{
|
||||
|
|
@ -126,7 +153,7 @@
|
|||
"description": "Let’s look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not like all of them. Maybe some of them don’t appeal to you, solve …\nThe post VS Code Extensions for HTML appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/vs-code-extensions-for-html/",
|
||||
"publishedOn": "2021-06-07T14:13:50.000Z",
|
||||
"wordCount": 1743,
|
||||
"wordCount": 1764,
|
||||
"title": "VS Code Extensions for HTML"
|
||||
},
|
||||
{
|
||||
|
|
@ -135,7 +162,7 @@
|
|||
"description": "Colin Oakley:\n• Accessible — Use semantic HTML, and make sure we meet the WCAG 2.1 AA standard as a minimum and it works with assisted technologies (this sits alongside the DWP Accessibility Manual)\n• Agnostic — Build \n…\nThe post Principles for user-centered front-end development appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://colinoakley.medium.com/the-web-we-choose-to-build-e921510e3f1b",
|
||||
"publishedOn": "2021-06-04T20:36:46.000Z",
|
||||
"wordCount": 1109,
|
||||
"wordCount": 1111,
|
||||
"title": "Principles for user-centered front-end development"
|
||||
},
|
||||
{
|
||||
|
|
@ -153,7 +180,7 @@
|
|||
"description": "A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick! Combining grid columns, grid gaps, and creative clipping …\nThe post Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/",
|
||||
"publishedOn": "2021-06-03T14:25:57.000Z",
|
||||
"wordCount": 5114,
|
||||
"wordCount": 5226,
|
||||
"title": "Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries"
|
||||
},
|
||||
{
|
||||
|
|
@ -182,33 +209,6 @@
|
|||
"publishedOn": "2021-06-02T13:35:53.000Z",
|
||||
"wordCount": 4168,
|
||||
"title": "A Crash Course in WordPress Block Filters"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341572",
|
||||
"author": "Chris Coyier",
|
||||
"description": "PPK laid out an interesting situation in “Two options for using custom properties” where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a …\nThe post Are Custom Properties a “Menu of What Will Change”? appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/are-custom-properties-a-menu-of-what-will-change/",
|
||||
"publishedOn": "2021-06-02T13:35:40.000Z",
|
||||
"wordCount": 1057,
|
||||
"title": "Are Custom Properties a “Menu of What Will Change”?"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341720",
|
||||
"author": "Chris Coyier",
|
||||
"description": "Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The …\nThe post Code blocks, but better appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://ped.ro/blog/code-blocks-but-better",
|
||||
"publishedOn": "2021-06-01T22:08:48.000Z",
|
||||
"wordCount": 3202,
|
||||
"title": "Code blocks, but better"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341342",
|
||||
"author": "Evgeny Klimenchenko",
|
||||
"description": "Testing is one of those things that you either get super excited about or kinda close your eyes and walk away. Whichever camp you fall into, I’m here to tell you that front-end testing is for everyone. In fact, …\nThe post Front-End Testing is For Everyone appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/front-end-testing-is-for-everyone/",
|
||||
"publishedOn": "2021-06-01T14:17:43.000Z",
|
||||
"wordCount": 4104,
|
||||
"title": "Front-End Testing is For Everyone"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -217,13 +217,41 @@
|
|||
"feedUrl": "https://www.smashingmagazine.com/feed/",
|
||||
"siteUrl": "https://www.smashingmagazine.com/",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/",
|
||||
"author": "hello@smashingmagazine.com (Cosima Mielke)",
|
||||
"description": "We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately.",
|
||||
"link": "https://smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/",
|
||||
"publishedOn": "2021-06-10T15:00:00.000Z",
|
||||
"wordCount": 4869,
|
||||
"title": "Useful Front-End Boilerplates And Starter Kits",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/598e7f3e-9dca-4922-b17d-76089efab46f/25-frontend-boilerplates-starter-kits.png",
|
||||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/three-frontend-auditing-tools/",
|
||||
"author": "hello@smashingmagazine.com (Stefan Judis)",
|
||||
"description": "Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are some less-known tools that might help you get there.",
|
||||
"link": "https://smashingmagazine.com/2021/06/three-frontend-auditing-tools/",
|
||||
"publishedOn": "2021-06-10T11:15:00.000Z",
|
||||
"wordCount": 747,
|
||||
"title": "Three Front-End Auditing Tools I Discovered Recently",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e21066b1-baa0-4a85-90ee-8074029d0a32/three-frontend-auditing-tools.jpg",
|
||||
"length": "0",
|
||||
"type": "image/jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/has-native-css-parent-selector/",
|
||||
"author": "hello@smashingmagazine.com (Adrian Bece)",
|
||||
"description": "What makes relational selector one of the most requested features and how are we, as developers, working around not having it? In this article, we’re going to check the early spec of the :has selector, and see how it should improve the CSS workflow once it’s released.",
|
||||
"link": "https://smashingmagazine.com/2021/06/has-native-css-parent-selector/",
|
||||
"publishedOn": "2021-06-09T10:30:00.000Z",
|
||||
"wordCount": 2600,
|
||||
"wordCount": 2601,
|
||||
"title": "Meet <code>:has</code>, A Native CSS Parent Selector (And More)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/89aef48d-9be9-45df-a7f4-775168deb8dd/has-native-css-parent-selector.jpg",
|
||||
|
|
@ -251,7 +279,7 @@
|
|||
"description": "In this guide, we’ll be taking a general look at the concepts of forward geocoding and reverse geocoding, and will build a mini-app that applies these concepts to display specific locations, using Mapbox and Vue.js 2.6.11 to achieve this.",
|
||||
"link": "https://smashingmagazine.com/2021/06/building-geocoding-app-vue-mapbox/",
|
||||
"publishedOn": "2021-06-07T11:00:00.000Z",
|
||||
"wordCount": 2240,
|
||||
"wordCount": 2247,
|
||||
"title": "How To Build A Geocoding App In Vue.js Using Mapbox",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20dc2361-e5a5-4a78-b380-2f5942ecfba8/building-geocoding-app-vue-mapbox.jpg",
|
||||
|
|
@ -265,7 +293,7 @@
|
|||
"description": "Modern browsers provide good support for JavaScript modules, but module bundlers such as webpack stay a critical part of the JavaScript toolchain. Let’s take a deep dive into what webpack is and how to use it in your development workflow.",
|
||||
"link": "https://smashingmagazine.com/2021/06/getting-started-webpack/",
|
||||
"publishedOn": "2021-06-04T10:00:00.000Z",
|
||||
"wordCount": 4126,
|
||||
"wordCount": 4167,
|
||||
"title": "Getting Started With Webpack",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/66ba7a41-2a37-471b-9c60-66a3162d8f05/webpack-dependency-graph-opt.png",
|
||||
|
|
@ -279,7 +307,7 @@
|
|||
"description": "Writing large-scale Vue applications can be a challenge. In this article, Shawn Wildermuth dives into the pros and cons of approaches like factories, shared objects, and using Vuex. He also explains what is coming in Vuex 5.0 that might change how we all use shared state in Vue 3.",
|
||||
"link": "https://smashingmagazine.com/2021/06/managing-shared-state-vue3/",
|
||||
"publishedOn": "2021-06-03T10:30:00.000Z",
|
||||
"wordCount": 3544,
|
||||
"wordCount": 3538,
|
||||
"title": "Managing Shared State In Vue 3",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a70815d-28e5-44af-8306-0e992e99593a/managing-shared-state-vue3.jpg",
|
||||
|
|
@ -349,7 +377,7 @@
|
|||
"description": "What could be a better way to welcome June than with some colorful inspiration? Well, we might have something for you: wallpapers created with love by artists and designers from across the globe.",
|
||||
"link": "https://smashingmagazine.com/2021/05/desktop-wallpaper-calendars-june-2021/",
|
||||
"publishedOn": "2021-05-31T11:30:00.000Z",
|
||||
"wordCount": 2478,
|
||||
"wordCount": 2518,
|
||||
"title": "Happy June Vibes For Your Screen (2021 Desktop Wallpapers Edition)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png",
|
||||
|
|
@ -363,7 +391,7 @@
|
|||
"description": "In this article, we’ll be re-using the foundational WYSIWYG Editor built in the first article to build a commenting system for a WYSIWYG Editor that enables users to select text inside a document and share their comments on it. Let’s dig in!",
|
||||
"link": "https://smashingmagazine.com/2021/05/commenting-system-wysiwyg-editor/",
|
||||
"publishedOn": "2021-05-28T11:00:00.000Z",
|
||||
"wordCount": 10246,
|
||||
"wordCount": 10208,
|
||||
"title": "Adding A Commenting System To A WYSIWYG Editor",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec39e154-d3d3-4a12-91fd-f0c068cd5247/commenting-system-wysiwyg-editor.jpg",
|
||||
|
|
@ -377,7 +405,7 @@
|
|||
"description": "Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developer’s workflow along the way. With auto log messages, auto code formatting, file utils, file labels, code snippets, highlight brackets, tags, indents and workspaces, onboarding and remote SSH.",
|
||||
"link": "https://smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/",
|
||||
"publishedOn": "2021-05-27T13:30:00.000Z",
|
||||
"wordCount": 3781,
|
||||
"wordCount": 3773,
|
||||
"title": "Useful VS Code Extensions For Front-End Developers",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c5dbb73-94e1-486f-9daa-351699faaa2d/peacock-extension.png",
|
||||
|
|
@ -405,7 +433,7 @@
|
|||
"description": "Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers.",
|
||||
"link": "https://smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/",
|
||||
"publishedOn": "2021-05-26T13:20:00.000Z",
|
||||
"wordCount": 1582,
|
||||
"wordCount": 1579,
|
||||
"title": "Accessible SVGs: Perfect Patterns For Screen Reader Users",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35bf2e3a-ae5b-49a3-843a-318b4c81f5af/accessible-svg-patterns.jpg",
|
||||
|
|
@ -419,7 +447,7 @@
|
|||
"description": "Mistakes. These cruel villains do not even stop at the beautiful world of software development. But although we cannot avoid making mistakes, we can learn to undo them! This post will show the right tools for your daily work with Git.",
|
||||
"link": "https://smashingmagazine.com/2021/05/undoing-mistakes-git-part2/",
|
||||
"publishedOn": "2021-05-25T14:00:00.000Z",
|
||||
"wordCount": 2150,
|
||||
"wordCount": 2111,
|
||||
"title": "A Guide To Undoing Mistakes With Git (Part 2)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/211042ae-7a72-42ba-804e-9f8132815200/undoing-mistakes-git-part1.jpg",
|
||||
|
|
@ -447,7 +475,7 @@
|
|||
"description": "CSS Container queries bring media queries closer to the target elements themselves and enables them to adapt to virtually any given container or layout. In this article, we’re going to cover CSS container query basics and how to use them today with progressive enhancement or polyfills.",
|
||||
"link": "https://smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/",
|
||||
"publishedOn": "2021-05-24T11:30:00.000Z",
|
||||
"wordCount": 2736,
|
||||
"wordCount": 2738,
|
||||
"title": "CSS Container Queries: Use-Cases And Migration Strategies",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d6d809b-0c1a-4074-9eeb-8509dc4d383f/css-container-queries-use-cases-migration-strategies.jpg",
|
||||
|
|
@ -461,7 +489,7 @@
|
|||
"description": "Let’s build a rich text, WYSIWYG-editor that supports rich text, images, links and some nuanced features from word processing apps. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations.",
|
||||
"link": "https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/",
|
||||
"publishedOn": "2021-05-21T11:30:00.000Z",
|
||||
"wordCount": 9463,
|
||||
"wordCount": 9467,
|
||||
"title": "Building A Rich Text Editor (WYSIWYG)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bafdd817-038e-4e70-a830-de0f5da659c4/building-wysiwyg-editor-javascript-slatejs.jpg",
|
||||
|
|
@ -489,7 +517,7 @@
|
|||
"description": "A step-by-step tutorial on adding authentication and authorization to your Next.js apps, with Auth0. We’ll be using a Next.js SDK to connect our application to the Auth0 API and will create the dynamic API route for React.",
|
||||
"link": "https://smashingmagazine.com/2021/05/implement-authentication-nextjs-auth0/",
|
||||
"publishedOn": "2021-05-20T11:00:00.000Z",
|
||||
"wordCount": 1997,
|
||||
"wordCount": 1990,
|
||||
"title": "How To Implement Authentication In Next.js With Auth0",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3e905cbf-b17b-47da-aec4-15c9701bf4bf/implement-authentication-nextjs-auth0.jpg",
|
||||
|
|
@ -503,7 +531,7 @@
|
|||
"description": "Everything to keep in mind when designing and building a mega-dropdown, common pitfalls, hover entry/exit delays, trajectory triangle technique and SVG path exit areas.",
|
||||
"link": "https://smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/",
|
||||
"publishedOn": "2021-05-19T11:40:00.000Z",
|
||||
"wordCount": 5060,
|
||||
"wordCount": 5059,
|
||||
"title": "Frustrating Design Patterns: Mega-Dropdown Hover Menus",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7c233470-63c3-4557-93c0-a8cc6709b6dd/13-mega-dropdown-hover-menus.png",
|
||||
|
|
@ -559,7 +587,7 @@
|
|||
"description": "“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects.",
|
||||
"link": "https://smashingmagazine.com/2021/05/tree-shaking-reference-guide/",
|
||||
"publishedOn": "2021-05-14T10:30:00.000Z",
|
||||
"wordCount": 2472,
|
||||
"wordCount": 2466,
|
||||
"title": "Tree-Shaking: A Reference Guide",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e27a101-d2e0-4661-9e12-b53b68051dbf/tree-shaking-reference-guide.jpg",
|
||||
|
|
@ -580,34 +608,6 @@
|
|||
"length": "0",
|
||||
"type": "image/jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/05/little-smashing-stories/",
|
||||
"author": "hello@smashingmagazine.com (Vitaly Friedman)",
|
||||
"description": "Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.",
|
||||
"link": "https://smashingmagazine.com/2021/05/little-smashing-stories/",
|
||||
"publishedOn": "2021-05-12T08:00:00.000Z",
|
||||
"wordCount": 1993,
|
||||
"title": "Little Smashing Stories",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b820c735-621c-4e60-8a3f-accb3f66d312/smashing-newsletter-banner.png",
|
||||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/",
|
||||
"author": "hello@smashingmagazine.com (Stephanie Eckles)",
|
||||
"description": "A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.",
|
||||
"link": "https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/",
|
||||
"publishedOn": "2021-05-11T13:30:00.000Z",
|
||||
"wordCount": 4908,
|
||||
"title": "A Primer On CSS Container Queries",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2c88b2c-ef73-44e3-885c-2c5c322fb781/smashing-articles-original.png",
|
||||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -616,6 +616,15 @@
|
|||
"feedUrl": "https://www.freecodecamp.org/news/rss/",
|
||||
"siteUrl": "https://www.freecodecamp.org/news",
|
||||
"articles": [
|
||||
{
|
||||
"id": "60b93afaacb62507dd1d8915",
|
||||
"author": null,
|
||||
"description": "You can learn everything you need to know to earn the Azure Data Fundamentals certification by completing this free 4.5 hour course. What is the Azure Data Fundamentals Certification?The Azure Data Fundamentals Certification is for those seeking a data-related role such as Data Analyst, Data Engineer, or Data",
|
||||
"link": "https://www.freecodecamp.org/news/azure-data-fundamentals-certification-dp-900-pass-the-exam-with-this-free-4-5-hour-course/",
|
||||
"publishedOn": "2021-06-10T11:35:00.000Z",
|
||||
"wordCount": 583,
|
||||
"title": "Azure Data Fundamentals Certification (DP-900) – Pass the Exam With This Free 4.5-Hour Course"
|
||||
},
|
||||
{
|
||||
"id": "60b357ad11ffb70827ef9a90",
|
||||
"author": null,
|
||||
|
|
@ -637,10 +646,10 @@
|
|||
{
|
||||
"id": "60c10a1dd3126007592d5988",
|
||||
"author": null,
|
||||
"description": "Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just released a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.",
|
||||
"description": "Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just published a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.",
|
||||
"link": "https://www.freecodecamp.org/news/learn-bootstrap-5-and-sass-by-building-a-portfolio-website/",
|
||||
"publishedOn": "2021-06-09T18:43:07.000Z",
|
||||
"wordCount": 336,
|
||||
"wordCount": 339,
|
||||
"title": "Learn Bootstrap 5 and SASS by Building a Portfolio Website"
|
||||
},
|
||||
{
|
||||
|
|
@ -696,15 +705,6 @@
|
|||
"publishedOn": "2021-06-07T20:54:41.000Z",
|
||||
"wordCount": 439,
|
||||
"title": "How to Use OpenCV and Python for Computer Vision and AI"
|
||||
},
|
||||
{
|
||||
"id": "5ff625967af2371468bb8645",
|
||||
"author": null,
|
||||
"description": "Closures are a confusing JavaScript concept to learn, because it's hard to see how they're actually used. Unlike other concepts such as functions, variables, and objects, you don't always use closures conscientiously and directly. You don't say: Oh! Here I will use a closure as a solution. But at the",
|
||||
"link": "https://www.freecodecamp.org/news/closures-in-javascript/",
|
||||
"publishedOn": "2021-06-07T18:18:01.000Z",
|
||||
"wordCount": 1597,
|
||||
"title": "How to Use Closures in JavaScript – A Beginner's Guide"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
139
feed.atom
139
feed.atom
|
|
@ -1,10 +1,77 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<id>urn:2021-06-10T00:41:28.854Z</id>
|
||||
<id>urn:2021-06-11T00:38:40.688Z</id>
|
||||
<title>osmos::feed</title>
|
||||
<updated>2021-06-10T00:41:28.854Z</updated>
|
||||
<updated>2021-06-11T00:38:40.688Z</updated>
|
||||
<generator>osmosfeed 1.10.2</generator>
|
||||
<link rel="alternate" href="index.html"/>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Put a Background on Open Details Elements]]></title>
|
||||
<id>https://css-tricks.com/?p=342050</id>
|
||||
<link href="https://css-tricks.com/put-a-background-on-open-details-elements/"/>
|
||||
<updated>2021-06-11T00:16:28.000Z</updated>
|
||||
<summary type="html"><![CDATA[One thing that can be just a smidge funky about the <details> element is that, when open, it’s not always 100% clear what is inside that element and what isn’t. I’m not saying that always matters or that it’s a …
|
||||
The post Put a Background on Open Details Elements 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[Useful Front-End Boilerplates And Starter Kits]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/</id>
|
||||
<link href="https://smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/"/>
|
||||
<updated>2021-06-10T15:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Cosima Mielke)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Equal Columns With Flexbox: It’s More Complicated Than You Might Think]]></title>
|
||||
<id>https://css-tricks.com/?p=341894</id>
|
||||
<link href="https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/"/>
|
||||
<updated>2021-06-10T14:34:22.000Z</updated>
|
||||
<summary type="html"><![CDATA[As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed.
|
||||
Let’s break those two down and see how they work together.
|
||||
The post Equal Columns With Flexbox: It’s More Complicated Than You Might Think appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Kevin Powell</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Building a Headless CMS with Fauna and Vercel Functions]]></title>
|
||||
<id>https://css-tricks.com/?p=342182</id>
|
||||
<link href="https://css-tricks.com/building-a-headless-cms-with-fauna-and-vercel-functions/"/>
|
||||
<updated>2021-06-10T14:26:47.000Z</updated>
|
||||
<summary type="html"><![CDATA[In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.
|
||||
The post Building a Headless CMS with Fauna and Vercel Functions appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Ikeh Akinyemi</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Azure Data Fundamentals Certification (DP-900) – Pass the Exam With This Free 4.5-Hour Course]]></title>
|
||||
<id>60b93afaacb62507dd1d8915</id>
|
||||
<link href="https://www.freecodecamp.org/news/azure-data-fundamentals-certification-dp-900-pass-the-exam-with-this-free-4-5-hour-course/"/>
|
||||
<updated>2021-06-10T11:35:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[You can learn everything you need to know to earn the Azure Data Fundamentals certification by completing this free 4.5 hour course. What is the Azure Data Fundamentals Certification?The Azure Data Fundamentals Certification is for those seeking a data-related role such as Data Analyst, Data Engineer, or Data]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Three Front-End Auditing Tools I Discovered Recently]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/three-frontend-auditing-tools/</id>
|
||||
<link href="https://smashingmagazine.com/2021/06/three-frontend-auditing-tools/"/>
|
||||
<updated>2021-06-10T11:15:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are some less-known tools that might help you get there.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Stefan Judis)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[From the Slums of Mumbai to a Rented Apartment – My 30-Year Developer Journey]]></title>
|
||||
<id>60b357ad11ffb70827ef9a90</id>
|
||||
|
|
@ -42,7 +109,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<id>60c10a1dd3126007592d5988</id>
|
||||
<link href="https://www.freecodecamp.org/news/learn-bootstrap-5-and-sass-by-building-a-portfolio-website/"/>
|
||||
<updated>2021-06-09T18:43:07.000Z</updated>
|
||||
<summary type="html"><![CDATA[Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just released a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.]]></summary>
|
||||
<summary type="html"><![CDATA[Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just published a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
|
|
@ -180,16 +247,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>Chris Coyier</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[How to Use Closures in JavaScript – A Beginner's Guide]]></title>
|
||||
<id>5ff625967af2371468bb8645</id>
|
||||
<link href="https://www.freecodecamp.org/news/closures-in-javascript/"/>
|
||||
<updated>2021-06-07T18:18:01.000Z</updated>
|
||||
<summary type="html"><![CDATA[Closures are a confusing JavaScript concept to learn, because it's hard to see how they're actually used. Unlike other concepts such as functions, variables, and objects, you don't always use closures conscientiously and directly. You don't say: Oh! Here I will use a closure as a solution. But at the]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[VS Code Extensions for HTML]]></title>
|
||||
<id>https://css-tricks.com/?p=340390</id>
|
||||
|
|
@ -312,18 +369,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>Dmitry Mayorov</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Are Custom Properties a “Menu of What Will Change”?]]></title>
|
||||
<id>https://css-tricks.com/?p=341572</id>
|
||||
<link href="https://css-tricks.com/are-custom-properties-a-menu-of-what-will-change/"/>
|
||||
<updated>2021-06-02T13:35:40.000Z</updated>
|
||||
<summary type="html"><![CDATA[PPK laid out an interesting situation in “Two options for using custom properties” where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a …
|
||||
The post Are Custom Properties a “Menu of What Will Change”? 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 Fix Cumulative Layout Shift (CLS) Issues]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/</id>
|
||||
|
|
@ -344,30 +389,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>hello@smashingmagazine.com (Jennifer Brehm)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Code blocks, but better]]></title>
|
||||
<id>https://css-tricks.com/?p=341720</id>
|
||||
<link href="https://ped.ro/blog/code-blocks-but-better"/>
|
||||
<updated>2021-06-01T22:08:48.000Z</updated>
|
||||
<summary type="html"><![CDATA[Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The …
|
||||
The post Code blocks, but better 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[Front-End Testing is For Everyone]]></title>
|
||||
<id>https://css-tricks.com/?p=341342</id>
|
||||
<link href="https://css-tricks.com/front-end-testing-is-for-everyone/"/>
|
||||
<updated>2021-06-01T14:17:43.000Z</updated>
|
||||
<summary type="html"><![CDATA[Testing is one of those things that you either get super excited about or kinda close your eyes and walk away. Whichever camp you fall into, I’m here to tell you that front-end testing is for everyone. In fact, …
|
||||
The post Front-End Testing is For Everyone appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Evgeny Klimenchenko</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Smashing Podcast Episode 38 With Ivan Akulov: Why Is My React App Slow?]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/smashing-podcast-episode-38/</id>
|
||||
|
|
@ -639,24 +660,4 @@ Thank you @tianheg, @onnyyonn]]></summary>
|
|||
<name>hello@smashingmagazine.com (Vitaly Friedman)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Little Smashing Stories]]></title>
|
||||
<id>https://smashingmagazine.com/2021/05/little-smashing-stories/</id>
|
||||
<link href="https://smashingmagazine.com/2021/05/little-smashing-stories/"/>
|
||||
<updated>2021-05-12T08:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Vitaly Friedman)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[A Primer On CSS Container Queries]]></title>
|
||||
<id>https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/</id>
|
||||
<link href="https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/"/>
|
||||
<updated>2021-05-11T13:30:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Stephanie Eckles)</name>
|
||||
</author>
|
||||
</entry>
|
||||
</feed>
|
||||
202
index.html
202
index.html
|
|
@ -15,6 +15,113 @@
|
|||
|
||||
<body>
|
||||
<!-- %after-body-begin.html% -->
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-11">2021-06-11</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">Put a Background on Open Details Elements</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/put-a-background-on-open-details-elements/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>One thing that can be just a smidge funky about the element is that, when open, it’s not always 100% clear what is inside that element and what isn’t. I’m not saying that always matters or that it’s a …
|
||||
The post Put a Background on Open Details Elements appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-10">2021-06-10</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">Equal Columns With Flexbox: It’s More Complicated Than You Might Think</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(14 min)</span>
|
||||
<span>As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed.
|
||||
Let’s break those two down and see how they work together.
|
||||
The post Equal Columns With Flexbox: It’s More Complicated Than You Might Think 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">Building a Headless CMS with Fauna and Vercel Functions</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/building-a-headless-cms-with-fauna-and-vercel-functions/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(10 min)</span>
|
||||
<span>In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.
|
||||
The post Building a Headless CMS with Fauna and Vercel Functions 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">Azure Data Fundamentals Certification (DP-900) – Pass the Exam With This Free 4.5-Hour Course</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/azure-data-fundamentals-certification-dp-900-pass-the-exam-with-this-free-4-5-hour-course/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>You can learn everything you need to know to earn the Azure Data Fundamentals certification by completing this free 4.5 hour course. What is the Azure Data Fundamentals Certification?The Azure Data Fundamentals Certification is for those seeking a data-related role such as Data Analyst, Data Engineer, or Data</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">Useful Front-End Boilerplates And Starter Kits</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(16 min)</span>
|
||||
<span>We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Three Front-End Auditing Tools I Discovered Recently</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/three-frontend-auditing-tools/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are some less-known tools that might help you get there.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-09">2021-06-09</time></h2>
|
||||
<ul class="sources card">
|
||||
|
|
@ -40,7 +147,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<summary class="article-expander__title">target=blank</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/targetblank/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>Does that make your eye twitch a little bit? Like… it’s a typo. It should be target="_blank" with an underscore to start the value. As in…
|
||||
<a target="_blank" href="https://codepen.io"Open CodePen in a New Tab
|
||||
</a
|
||||
|
|
@ -85,7 +192,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/learn-bootstrap-5-and-sass-by-building-a-portfolio-website/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(1 min)</span>
|
||||
<span>Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just released a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.</span>
|
||||
<span>Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just published a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
|
|
@ -278,17 +385,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">How to Use Closures in JavaScript – A Beginner's Guide</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/closures-in-javascript/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(5 min)</span>
|
||||
<span>Closures are a confusing JavaScript concept to learn, because it's hard to see how they're actually used. Unlike other concepts such as functions, variables, and objects, you don't always use closures conscientiously and directly. You don't say: Oh! Here I will use a closure as a solution. But at the</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
|
|
@ -454,19 +550,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<span class="article-reading-time">(14 min)</span>
|
||||
<span>Blocks in WordPress are great. Drop some into the page, arrange them how you like, and you’ve got a pretty sweet landing page with little effort. But what if the default blocks in WordPress need a little tweaking? Like, what …
|
||||
The post A Crash Course in WordPress Block Filters 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">Are Custom Properties a “Menu of What Will Change”?</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/are-custom-properties-a-menu-of-what-will-change/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>PPK laid out an interesting situation in “Two options for using custom properties” where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a …
|
||||
The post Are Custom Properties a “Menu of What Will Change”? appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -507,38 +590,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-01">2021-06-01</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">Code blocks, but better</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://ped.ro/blog/code-blocks-but-better">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(11 min)</span>
|
||||
<span>Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The …
|
||||
The post Code blocks, but better 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">Front-End Testing is For Everyone</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/front-end-testing-is-for-everyone/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(14 min)</span>
|
||||
<span>Testing is one of those things that you either get super excited about or kinda close your eyes and walk away. Whichever camp you fall into, I’m here to tell you that front-end testing is for everyone. In fact, …
|
||||
The post Front-End Testing is For Everyone 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://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
|
||||
|
|
@ -1023,46 +1074,13 @@ Thank you @tianheg, @onnyyonn</span>
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Little Smashing Stories</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/little-smashing-stories/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(7 min)</span>
|
||||
<span>Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-05-11">2021-05-11</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 Primer On CSS Container Queries</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(16 min)</span>
|
||||
<span>A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<time id="build-timestamp" datetime="2021-06-10T00:41:28.835Z">2021-06-10T00:41:28.835Z</time>
|
||||
<time id="build-timestamp" datetime="2021-06-11T00:38:40.666Z">2021-06-11T00:38:40.666Z</time>
|
||||
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.10.2</a></span>
|
||||
</footer>
|
||||
<script src="index.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue