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
f1b72ec852
commit
2d28daa3bb
3 changed files with 248 additions and 324 deletions
182
cache.json
182
cache.json
|
|
@ -67,24 +67,6 @@
|
|||
"publishedOn": "2021-05-16T01:42:24.000Z",
|
||||
"wordCount": 286,
|
||||
"title": "v1.7.0"
|
||||
},
|
||||
{
|
||||
"id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.4.0",
|
||||
"author": null,
|
||||
"description": "Added: Basic theme customization: Demo | Source | Docs.",
|
||||
"link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.4.0",
|
||||
"publishedOn": "2021-05-10T08:55:42.000Z",
|
||||
"wordCount": 276,
|
||||
"title": "v1.4.0"
|
||||
},
|
||||
{
|
||||
"id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0",
|
||||
"author": null,
|
||||
"description": "Added: Link from the title of a subscription to its website.\nAdded: Store feedUrl and siteUrl for each source in cache.\nAdded: Semantic element (<time>) for timestamp on the UI.\nAdded: Semantic API for theming the default template. Demo | Source | Docs\nChanged: Moved feed metadata from article level to feed level in cache.\nFixed: Any html-like text was stripped from title. Fixed with encoded text.\nRemoved: href for each source in cache. The value was never used so it's not a breaking change.",
|
||||
"link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0",
|
||||
"publishedOn": "2021-05-10T08:15:20.000Z",
|
||||
"wordCount": 352,
|
||||
"title": "v1.6.0"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -93,13 +75,31 @@
|
|||
"feedUrl": "https://css-tricks.com/feed/",
|
||||
"siteUrl": "https://css-tricks.com",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341982",
|
||||
"author": "Todd Libby",
|
||||
"description": "Have you ever experienced the frustration of trying to tap a button on a mobile device only to have it do nothing because the target size is just not large enough **and it’s not picking up on your press? Maybe …\nThe post Looking at WCAG 2.5.5 for Better Target Sizes appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/looking-at-wcag-2-5-5-for-better-target-sizes/",
|
||||
"publishedOn": "2021-06-08T18:31:08.000Z",
|
||||
"wordCount": 3036,
|
||||
"title": "Looking at WCAG 2.5.5 for Better Target Sizes"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341884",
|
||||
"author": "Chris Coyier",
|
||||
"description": "WordPress sites have an API by default. Wanna see this site’s most recent posts, with just a specific set of data… in JSON format? Here ya go. Alex Riviere made a joke site using that.\nAt first, the site …\nThe post CSS-Trickz: An Experiment with Netlify’s On-Demand Builders appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://alex.party/posts/2021-05-31-css-trickz-an-experiment-with-netlify-s-on-demand-builders/",
|
||||
"publishedOn": "2021-06-08T14:16:07.000Z",
|
||||
"wordCount": 708,
|
||||
"title": "CSS-Trickz: An Experiment with Netlify’s On-Demand Builders"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341805",
|
||||
"author": "Chris Coyier",
|
||||
"description": "Show/Hide password accessibility and password hints tutorial — Nicolas Steenhout goes deep on <input type=\"password\"> accessibility. For one thing, being able to toggle it to type=\"text\" should be possible, while announcing, politely, the change. But also, put the password hints \n…\nThe post Links on Accessibility appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/links-on-accessibility/",
|
||||
"publishedOn": "2021-06-07T19:52:26.000Z",
|
||||
"wordCount": 599,
|
||||
"wordCount": 621,
|
||||
"title": "Links on Accessibility"
|
||||
},
|
||||
{
|
||||
|
|
@ -108,7 +108,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": 1453,
|
||||
"wordCount": 1725,
|
||||
"title": "VS Code Extensions for HTML"
|
||||
},
|
||||
{
|
||||
|
|
@ -117,7 +117,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": 1082,
|
||||
"wordCount": 1099,
|
||||
"title": "Principles for user-centered front-end development"
|
||||
},
|
||||
{
|
||||
|
|
@ -135,7 +135,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": 5109,
|
||||
"wordCount": 5114,
|
||||
"title": "Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries"
|
||||
},
|
||||
{
|
||||
|
|
@ -209,24 +209,6 @@
|
|||
"publishedOn": "2021-05-31T17:16:22.000Z",
|
||||
"wordCount": 2068,
|
||||
"title": "Serverless Functions: The Secret to Ultra-Productive Front-End Teams"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341482",
|
||||
"author": "Chris Coyier",
|
||||
"description": "I’ve been using Local for ages. Four years ago, I wrote about how I got all my WordPress sites running locally on it. I just wanted to give it another high five because it’s still here and still great. In …\nThe post Local: Always Getting Better appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/local-always-getting-better/",
|
||||
"publishedOn": "2021-05-31T17:13:02.000Z",
|
||||
"wordCount": 1262,
|
||||
"title": "Local: Always Getting Better"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=341163",
|
||||
"author": "Thomas Park",
|
||||
"description": "Typically, a single favicon is used across a whole domain. But there are times you wanna step it up with different favicons depending on context. A website might change the favicon to match the content being viewed. Or a site …\nThe post Dynamic Favicons for WordPress appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/dynamic-favicons-for-wordpress/",
|
||||
"publishedOn": "2021-05-28T14:36:47.000Z",
|
||||
"wordCount": 1837,
|
||||
"title": "Dynamic Favicons for WordPress"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -235,13 +217,27 @@
|
|||
"feedUrl": "https://www.smashingmagazine.com/feed/",
|
||||
"siteUrl": "https://www.smashingmagazine.com/",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/image-optimization-book-release/",
|
||||
"author": "hello@smashingmagazine.com (Vitaly Friedman)",
|
||||
"description": "It’s here! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our deep-dive guide to understand how to deliver high-quality images on the web fast.",
|
||||
"link": "https://smashingmagazine.com/2021/06/image-optimization-book-release/",
|
||||
"publishedOn": "2021-06-08T12:00:00.000Z",
|
||||
"wordCount": 2102,
|
||||
"title": "From AVIF to WebP: A New Smashing Book By Addy Osmani",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b41ae541-7618-44f2-81cd-cc681c64d0d0/image-optimization-header.png",
|
||||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/building-geocoding-app-vue-mapbox/",
|
||||
"author": "hello@smashingmagazine.com (Prince Chukwudire)",
|
||||
"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": 2218,
|
||||
"wordCount": 2201,
|
||||
"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",
|
||||
|
|
@ -255,7 +251,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": 4142,
|
||||
"wordCount": 4125,
|
||||
"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",
|
||||
|
|
@ -269,7 +265,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": 3506,
|
||||
"wordCount": 3530,
|
||||
"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",
|
||||
|
|
@ -283,7 +279,7 @@
|
|||
"description": "Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.",
|
||||
"link": "https://smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/",
|
||||
"publishedOn": "2021-06-02T12:30:00.000Z",
|
||||
"wordCount": 4347,
|
||||
"wordCount": 4381,
|
||||
"title": "How To Fix Cumulative Layout Shift (CLS) Issues",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/87fbe5f9-d311-4542-a3f0-14e860415946/cumulative-layout-shift-issues.jpg",
|
||||
|
|
@ -297,7 +293,7 @@
|
|||
"description": "Getting a good performance score from Google is hard for any website — but doing so for an online store is even harder. We achieved green scores — even several for mobile. Here is how we did it.",
|
||||
"link": "https://smashingmagazine.com/2021/06/front-end-performance-online-store-jewellerybox/",
|
||||
"publishedOn": "2021-06-02T10:30:00.000Z",
|
||||
"wordCount": 5381,
|
||||
"wordCount": 5419,
|
||||
"title": "Improving The Performance Of An Online Store (Case Study)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a350bf5-9114-420c-b587-fee03ea4acb6/jewellerybox-uk-online-store-scipioerp.jpg",
|
||||
|
|
@ -339,7 +335,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": 2445,
|
||||
"wordCount": 2528,
|
||||
"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",
|
||||
|
|
@ -353,7 +349,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": 10217,
|
||||
"wordCount": 10244,
|
||||
"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",
|
||||
|
|
@ -367,7 +363,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": 3747,
|
||||
"wordCount": 3775,
|
||||
"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",
|
||||
|
|
@ -395,7 +391,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": 1547,
|
||||
"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",
|
||||
|
|
@ -409,7 +405,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": 2121,
|
||||
"wordCount": 2113,
|
||||
"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",
|
||||
|
|
@ -423,7 +419,7 @@
|
|||
"description": "Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts.",
|
||||
"link": "https://smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/",
|
||||
"publishedOn": "2021-05-25T09:30:00.000Z",
|
||||
"wordCount": 2077,
|
||||
"wordCount": 2109,
|
||||
"title": "A New Way To Reduce Font Loading Impact: CSS Font Descriptors",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f0c69413-365e-4c39-9ee8-ad1d2b44e56b/reduce-font-loading-impact-css-descriptors.jpg",
|
||||
|
|
@ -437,7 +433,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": 2707,
|
||||
"wordCount": 2741,
|
||||
"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",
|
||||
|
|
@ -451,7 +447,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": 9441,
|
||||
"wordCount": 9428,
|
||||
"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",
|
||||
|
|
@ -479,7 +475,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": 1919,
|
||||
"wordCount": 2004,
|
||||
"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",
|
||||
|
|
@ -493,7 +489,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": 5028,
|
||||
"wordCount": 5062,
|
||||
"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",
|
||||
|
|
@ -535,7 +531,7 @@
|
|||
"description": "Google’s “Page Experience Update” will start rolling out in June. At first, sites that meet Core Web Vitals thresholds will have a minor ranking advantage in mobile search for all browsers. Search is important to any business, and this is the story of how Beau Hartshorne and his team at Instant Domain Search improved their Core Web Vitals scores.",
|
||||
"link": "https://smashingmagazine.com/2021/05/core-web-vitals-case-study/",
|
||||
"publishedOn": "2021-05-17T11:30:00.000Z",
|
||||
"wordCount": 2945,
|
||||
"wordCount": 2985,
|
||||
"title": "How We Improved Our Core Web Vitals (Case Study)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b68aa1ba-94b7-4e70-83e5-5f58b37bf7cd/core-web-vitals-case-study.jpg",
|
||||
|
|
@ -549,7 +545,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": 2393,
|
||||
"wordCount": 2472,
|
||||
"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",
|
||||
|
|
@ -563,7 +559,7 @@
|
|||
"description": "In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one. Let’s start with an infamous birthday picker.",
|
||||
"link": "https://smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/",
|
||||
"publishedOn": "2021-05-12T12:42:00.000Z",
|
||||
"wordCount": 3485,
|
||||
"wordCount": 3517,
|
||||
"title": "Frustrating Design Patterns That Need Fixing: Birthday Picker",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f773d7bb-df56-409f-a3fb-aa1e6e0eea09/4-birthday-picker.jpg",
|
||||
|
|
@ -591,7 +587,7 @@
|
|||
"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": 4874,
|
||||
"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",
|
||||
|
|
@ -612,20 +608,6 @@
|
|||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/",
|
||||
"author": "hello@smashingmagazine.com (Jhey Tompkins)",
|
||||
"description": "Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!",
|
||||
"link": "https://smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/",
|
||||
"publishedOn": "2021-05-10T11:00:00.000Z",
|
||||
"wordCount": 6361,
|
||||
"title": "Get Started With React By Building A Whac-A-Mole Game",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a9db037-1a8d-42ad-b0c3-1c885e456693/get-started-whac-a-mole-react-game.jpg",
|
||||
"length": "0",
|
||||
"type": "image/jpg"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -634,6 +616,33 @@
|
|||
"feedUrl": "https://www.freecodecamp.org/news/rss/",
|
||||
"siteUrl": "https://www.freecodecamp.org/news",
|
||||
"articles": [
|
||||
{
|
||||
"id": "60bfd986d3126007592d53a1",
|
||||
"author": null,
|
||||
"description": "Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs - light on a sensor, a finger on a button, or a Twitter message - and turn it into an output - activating a motor, turning on an LED, publishing something",
|
||||
"link": "https://www.freecodecamp.org/news/create-your-own-electronics-with-arduino-full-course/",
|
||||
"publishedOn": "2021-06-08T21:05:13.000Z",
|
||||
"wordCount": 639,
|
||||
"title": "Create Your Own Electronics With Arduino - Full Course"
|
||||
},
|
||||
{
|
||||
"id": "60b23b8911ffb70827ef954e",
|
||||
"author": null,
|
||||
"description": "If you're trying to implement CRUD operations using API endpoints, you might find that it's hard to manage data across multiple components. Or maybe you have a modal, but you want to trigger it from a different component. Wrapping your head around how to tackle these scenarios can be difficult.",
|
||||
"link": "https://www.freecodecamp.org/news/pass-data-between-components-in-react/",
|
||||
"publishedOn": "2021-06-08T16:17:32.000Z",
|
||||
"wordCount": 1205,
|
||||
"title": "How to Pass Data and Events Between Components in React"
|
||||
},
|
||||
{
|
||||
"id": "60be6a3cd3126007592d4a03",
|
||||
"author": null,
|
||||
"description": "Today we're going to learn CSS Grid properties so that you can make your own responsive websites. I'll explain how each of Grid's properties work along with a CheatSheet that covers everything you can do with Grid. Let's go. 🎖️ Table of Contents: CSS Grid Architecture CSS Grid Chart Grid Parent",
|
||||
"link": "https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/",
|
||||
"publishedOn": "2021-06-08T16:02:45.000Z",
|
||||
"wordCount": 2548,
|
||||
"title": "Complete CSS Grid Tutorial with Cheat Sheet 🎖️"
|
||||
},
|
||||
{
|
||||
"id": "60bbd28eacb62507dd1d99fb",
|
||||
"author": null,
|
||||
|
|
@ -696,33 +705,6 @@
|
|||
"publishedOn": "2021-06-04T20:41:29.000Z",
|
||||
"wordCount": 2166,
|
||||
"title": "How to Recover from Deployment Hell – What I Learned After My Discord Bot Crashed on a 1000+ User Server"
|
||||
},
|
||||
{
|
||||
"id": "60b2a4c611ffb70827ef9842",
|
||||
"author": null,
|
||||
"description": "TypeScript has taken the development world by storm. No wonder it has over 15 million weekly downloads on npm. But what is TypeScript, and what do you need to know about it? In this article, I am going answer those questions. By the end you'll have a grasp of the",
|
||||
"link": "https://www.freecodecamp.org/news/learn-typescript-basics/",
|
||||
"publishedOn": "2021-06-04T18:01:00.000Z",
|
||||
"wordCount": 2225,
|
||||
"title": "Learn TypeScript Basics in this Beginner's Guide"
|
||||
},
|
||||
{
|
||||
"id": "60b98ebfacb62507dd1d8ec4",
|
||||
"author": null,
|
||||
"description": "Are you looking for a way to apply Python and machine learning to a real-world application? You should consider Bioinformatics. Bioinformatics is an interdisciplinary field that develops methods and software tools for understanding biological data, in particular when the data sets are large and complex. We just released a course",
|
||||
"link": "https://www.freecodecamp.org/news/python-for-bioinformatics-use-machine-learning-and-data-analysis-for-drug-discovery/",
|
||||
"publishedOn": "2021-06-04T02:32:22.000Z",
|
||||
"wordCount": 390,
|
||||
"title": "Python for Bioinformatics: Use Machine Learning and Data Analysis for Drug Discovery"
|
||||
},
|
||||
{
|
||||
"id": "60b11ff811ffb70827ef8f94",
|
||||
"author": null,
|
||||
"description": "Let’s say you plan to build a website. Before you start, you want to set up a few tools to make your life easier. But which tools should you have? The JavaScript ecosystem is changing so fast that it can be overwhelming to pick the best tools to use.",
|
||||
"link": "https://www.freecodecamp.org/news/how-to-set-up-a-front-end-development-project/",
|
||||
"publishedOn": "2021-06-03T21:44:03.000Z",
|
||||
"wordCount": 3978,
|
||||
"title": "JavaScript Tutorial – How to Set Up a Front End Development Project"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
159
feed.atom
159
feed.atom
|
|
@ -1,10 +1,75 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<id>urn:2021-06-08T01:02:29.905Z</id>
|
||||
<id>urn:2021-06-09T00:43:32.148Z</id>
|
||||
<title>osmos::feed</title>
|
||||
<updated>2021-06-08T01:02:29.905Z</updated>
|
||||
<updated>2021-06-09T00:43:32.148Z</updated>
|
||||
<generator>osmosfeed 1.10.2</generator>
|
||||
<link rel="alternate" href="index.html"/>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Create Your Own Electronics With Arduino - Full Course]]></title>
|
||||
<id>60bfd986d3126007592d53a1</id>
|
||||
<link href="https://www.freecodecamp.org/news/create-your-own-electronics-with-arduino-full-course/"/>
|
||||
<updated>2021-06-08T21:05:13.000Z</updated>
|
||||
<summary type="html"><![CDATA[Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs - light on a sensor, a finger on a button, or a Twitter message - and turn it into an output - activating a motor, turning on an LED, publishing something]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Looking at WCAG 2.5.5 for Better Target Sizes]]></title>
|
||||
<id>https://css-tricks.com/?p=341982</id>
|
||||
<link href="https://css-tricks.com/looking-at-wcag-2-5-5-for-better-target-sizes/"/>
|
||||
<updated>2021-06-08T18:31:08.000Z</updated>
|
||||
<summary type="html"><![CDATA[Have you ever experienced the frustration of trying to tap a button on a mobile device only to have it do nothing because the target size is just not large enough **and it’s not picking up on your press? Maybe …
|
||||
The post Looking at WCAG 2.5.5 for Better Target Sizes appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Todd Libby</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[How to Pass Data and Events Between Components in React]]></title>
|
||||
<id>60b23b8911ffb70827ef954e</id>
|
||||
<link href="https://www.freecodecamp.org/news/pass-data-between-components-in-react/"/>
|
||||
<updated>2021-06-08T16:17:32.000Z</updated>
|
||||
<summary type="html"><![CDATA[If you're trying to implement CRUD operations using API endpoints, you might find that it's hard to manage data across multiple components. Or maybe you have a modal, but you want to trigger it from a different component. Wrapping your head around how to tackle these scenarios can be difficult.]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Complete CSS Grid Tutorial with Cheat Sheet 🎖️]]></title>
|
||||
<id>60be6a3cd3126007592d4a03</id>
|
||||
<link href="https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/"/>
|
||||
<updated>2021-06-08T16:02:45.000Z</updated>
|
||||
<summary type="html"><![CDATA[Today we're going to learn CSS Grid properties so that you can make your own responsive websites. I'll explain how each of Grid's properties work along with a CheatSheet that covers everything you can do with Grid. Let's go. 🎖️ Table of Contents: CSS Grid Architecture CSS Grid Chart Grid Parent]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[CSS-Trickz: An Experiment with Netlify’s On-Demand Builders]]></title>
|
||||
<id>https://css-tricks.com/?p=341884</id>
|
||||
<link href="https://alex.party/posts/2021-05-31-css-trickz-an-experiment-with-netlify-s-on-demand-builders/"/>
|
||||
<updated>2021-06-08T14:16:07.000Z</updated>
|
||||
<summary type="html"><![CDATA[WordPress sites have an API by default. Wanna see this site’s most recent posts, with just a specific set of data… in JSON format? Here ya go. Alex Riviere made a joke site using that.
|
||||
At first, the site …
|
||||
The post CSS-Trickz: An Experiment with Netlify’s On-Demand Builders 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[From AVIF to WebP: A New Smashing Book By Addy Osmani]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/image-optimization-book-release/</id>
|
||||
<link href="https://smashingmagazine.com/2021/06/image-optimization-book-release/"/>
|
||||
<updated>2021-06-08T12:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[It’s here! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our deep-dive guide to understand how to deliver high-quality images on the web fast.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Vitaly Friedman)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[How to Build a Full Stack App with Supabase and Next.js]]></title>
|
||||
<id>60bbd28eacb62507dd1d99fb</id>
|
||||
|
|
@ -125,16 +190,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>Chris Coyier</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Learn TypeScript Basics in this Beginner's Guide]]></title>
|
||||
<id>60b2a4c611ffb70827ef9842</id>
|
||||
<link href="https://www.freecodecamp.org/news/learn-typescript-basics/"/>
|
||||
<updated>2021-06-04T18:01:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[TypeScript has taken the development world by storm. No wonder it has over 15 million weekly downloads on npm. But what is TypeScript, and what do you need to know about it? In this article, I am going answer those questions. By the end you'll have a grasp of the]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Can I :has()]]></title>
|
||||
<id>https://css-tricks.com/?p=341968</id>
|
||||
|
|
@ -157,26 +212,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>hello@smashingmagazine.com (Nwani Victory)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Python for Bioinformatics: Use Machine Learning and Data Analysis for Drug Discovery]]></title>
|
||||
<id>60b98ebfacb62507dd1d8ec4</id>
|
||||
<link href="https://www.freecodecamp.org/news/python-for-bioinformatics-use-machine-learning-and-data-analysis-for-drug-discovery/"/>
|
||||
<updated>2021-06-04T02:32:22.000Z</updated>
|
||||
<summary type="html"><![CDATA[Are you looking for a way to apply Python and machine learning to a real-world application? You should consider Bioinformatics. Bioinformatics is an interdisciplinary field that develops methods and software tools for understanding biological data, in particular when the data sets are large and complex. We just released a course]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[JavaScript Tutorial – How to Set Up a Front End Development Project]]></title>
|
||||
<id>60b11ff811ffb70827ef8f94</id>
|
||||
<link href="https://www.freecodecamp.org/news/how-to-set-up-a-front-end-development-project/"/>
|
||||
<updated>2021-06-03T21:44:03.000Z</updated>
|
||||
<summary type="html"><![CDATA[Let’s say you plan to build a website. Before you start, you want to set up a few tools to make your life easier. But which tools should you have? The JavaScript ecosystem is changing so fast that it can be overwhelming to pick the best tools to use.]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries]]></title>
|
||||
<id>https://css-tricks.com/?p=341584</id>
|
||||
|
|
@ -354,18 +389,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>Jason Lengstorf</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Local: Always Getting Better]]></title>
|
||||
<id>https://css-tricks.com/?p=341482</id>
|
||||
<link href="https://css-tricks.com/local-always-getting-better/"/>
|
||||
<updated>2021-05-31T17:13:02.000Z</updated>
|
||||
<summary type="html"><![CDATA[I’ve been using Local for ages. Four years ago, I wrote about how I got all my WordPress sites running locally on it. I just wanted to give it another high five because it’s still here and still great. In …
|
||||
The post Local: Always Getting 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[Happy June Vibes For Your Screen (2021 Desktop Wallpapers Edition)]]></title>
|
||||
<id>https://smashingmagazine.com/2021/05/desktop-wallpaper-calendars-june-2021/</id>
|
||||
|
|
@ -376,18 +399,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>hello@smashingmagazine.com (Cosima Mielke)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Dynamic Favicons for WordPress]]></title>
|
||||
<id>https://css-tricks.com/?p=341163</id>
|
||||
<link href="https://css-tricks.com/dynamic-favicons-for-wordpress/"/>
|
||||
<updated>2021-05-28T14:36:47.000Z</updated>
|
||||
<summary type="html"><![CDATA[Typically, a single favicon is used across a whole domain. But there are times you wanna step it up with different favicons depending on context. A website might change the favicon to match the content being viewed. Or a site …
|
||||
The post Dynamic Favicons for WordPress appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Thomas Park</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Adding A Commenting System To A WYSIWYG Editor]]></title>
|
||||
<id>https://smashingmagazine.com/2021/05/commenting-system-wysiwyg-editor/</id>
|
||||
|
|
@ -649,40 +660,4 @@ Thank you @tianheg, @onnyyonn]]></summary>
|
|||
<name>hello@smashingmagazine.com (Amanda Annandale)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Get Started With React By Building A Whac-A-Mole Game]]></title>
|
||||
<id>https://smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/</id>
|
||||
<link href="https://smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/"/>
|
||||
<updated>2021-05-10T11:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Jhey Tompkins)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[v1.4.0]]></title>
|
||||
<id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.4.0</id>
|
||||
<link href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.4.0"/>
|
||||
<updated>2021-05-10T08:55:42.000Z</updated>
|
||||
<summary type="html"><![CDATA[Added: Basic theme customization: Demo | Source | Docs.]]></summary>
|
||||
<author>
|
||||
<name>Release notes from osmosfeed</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[v1.6.0]]></title>
|
||||
<id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0</id>
|
||||
<link href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0"/>
|
||||
<updated>2021-05-10T08:15:20.000Z</updated>
|
||||
<summary type="html"><![CDATA[Added: Link from the title of a subscription to its website.
|
||||
Added: Store feedUrl and siteUrl for each source in cache.
|
||||
Added: Semantic element (<time>) for timestamp on the UI.
|
||||
Added: Semantic API for theming the default template. Demo | Source | Docs
|
||||
Changed: Moved feed metadata from article level to feed level in cache.
|
||||
Fixed: Any html-like text was stripped from title. Fixed with encoded text.
|
||||
Removed: href for each source in cache. The value was never used so it's not a breaking change.]]></summary>
|
||||
<author>
|
||||
<name>Release notes from osmosfeed</name>
|
||||
</author>
|
||||
</entry>
|
||||
</feed>
|
||||
231
index.html
231
index.html
|
|
@ -15,6 +15,100 @@
|
|||
|
||||
<body>
|
||||
<!-- %after-body-begin.html% -->
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-08">2021-06-08</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">Looking at WCAG 2.5.5 for Better Target Sizes</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/looking-at-wcag-2-5-5-for-better-target-sizes/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(10 min)</span>
|
||||
<span>Have you ever experienced the frustration of trying to tap a button on a mobile device only to have it do nothing because the target size is just not large enough **and it’s not picking up on your press? Maybe …
|
||||
The post Looking at WCAG 2.5.5 for Better Target Sizes 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">CSS-Trickz: An Experiment with Netlify’s On-Demand Builders</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://alex.party/posts/2021-05-31-css-trickz-an-experiment-with-netlify-s-on-demand-builders/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>WordPress sites have an API by default. Wanna see this site’s most recent posts, with just a specific set of data… in JSON format? Here ya go. Alex Riviere made a joke site using that.
|
||||
At first, the site …
|
||||
The post CSS-Trickz: An Experiment with Netlify’s On-Demand Builders 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">Create Your Own Electronics With Arduino - Full Course</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/create-your-own-electronics-with-arduino-full-course/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs - light on a sensor, a finger on a button, or a Twitter message - and turn it into an output - activating a motor, turning on an LED, publishing something</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">How to Pass Data and Events Between Components in React</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/pass-data-between-components-in-react/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>If you're trying to implement CRUD operations using API endpoints, you might find that it's hard to manage data across multiple components. Or maybe you have a modal, but you want to trigger it from a different component. Wrapping your head around how to tackle these scenarios can be difficult.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Complete CSS Grid Tutorial with Cheat Sheet 🎖️</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(8 min)</span>
|
||||
<span>Today we're going to learn CSS Grid properties so that you can make your own responsive websites. I'll explain how each of Grid's properties work along with a CheatSheet that covers everything you can do with Grid. Let's go. 🎖️ Table of Contents: CSS Grid Architecture CSS Grid Chart Grid Parent</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">From AVIF to WebP: A New Smashing Book By Addy Osmani</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/image-optimization-book-release/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(7 min)</span>
|
||||
<span>It’s here! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our deep-dive guide to understand how to deliver high-quality images on the web fast.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-07">2021-06-07</time></h2>
|
||||
<ul class="sources card">
|
||||
|
|
@ -41,7 +135,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<summary class="article-expander__title">VS Code Extensions for HTML</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/vs-code-extensions-for-html/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(5 min)</span>
|
||||
<span class="article-reading-time">(6 min)</span>
|
||||
<span>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 …
|
||||
The post VS Code Extensions for HTML appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
|
|
@ -195,28 +289,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">Learn TypeScript Basics in this Beginner's Guide</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/learn-typescript-basics/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(7 min)</span>
|
||||
<span>TypeScript has taken the development world by storm. No wonder it has over 15 million weekly downloads on npm. But what is TypeScript, and what do you need to know about it? In this article, I am going answer those questions. By the end you'll have a grasp of the</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Python for Bioinformatics: Use Machine Learning and Data Analysis for Drug Discovery</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/python-for-bioinformatics-use-machine-learning-and-data-analysis-for-drug-discovery/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(1 min)</span>
|
||||
<span>Are you looking for a way to apply Python and machine learning to a real-world application? You should consider Bioinformatics. Bioinformatics is an interdisciplinary field that develops methods and software tools for understanding biological data, in particular when the data sets are large and complex. We just released a course</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
|
|
@ -274,23 +346,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
<section>
|
||||
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">JavaScript Tutorial – How to Set Up a Front End Development Project</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-set-up-a-front-end-development-project/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(13 min)</span>
|
||||
<span>Let’s say you plan to build a website. Before you start, you want to set up a few tools to make your life easier. But which tools should you have? The JavaScript ecosystem is changing so fast that it can be overwhelming to pick the best tools to use.</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>
|
||||
|
|
@ -371,7 +426,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<summary class="article-expander__title">How To Fix Cumulative Layout Shift (CLS) Issues</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(14 min)</span>
|
||||
<span class="article-reading-time">(15 min)</span>
|
||||
<span>Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -506,19 +561,6 @@ creating interactive elements and complex animations
|
|||
managing complex application state
|
||||
…
|
||||
The post Serverless Functions: The Secret to Ultra-Productive Front-End Teams 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">Local: Always Getting Better</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/local-always-getting-better/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>I’ve been using Local for ages. Four years ago, I wrote about how I got all my WordPress sites running locally on it. I just wanted to give it another high five because it’s still here and still great. In …
|
||||
The post Local: Always Getting Better appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -548,25 +590,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-05-28">2021-05-28</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">Dynamic Favicons for WordPress</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/dynamic-favicons-for-wordpress/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(6 min)</span>
|
||||
<span>Typically, a single favicon is used across a whole domain. But there are times you wanna step it up with different favicons depending on context. A website might change the favicon to match the content being viewed. Or a site …
|
||||
The post Dynamic Favicons for WordPress 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>
|
||||
|
|
@ -598,7 +621,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<summary class="article-expander__title">Useful VS Code Extensions For Front-End Developers</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(12 min)</span>
|
||||
<span class="article-reading-time">(13 min)</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -799,7 +822,7 @@ Thank you: @LooperXX.</span>
|
|||
<summary class="article-expander__title">How To Implement Authentication In Next.js With Auth0</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/implement-authentication-nextjs-auth0/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(6 min)</span>
|
||||
<span class="article-reading-time">(7 min)</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -1027,65 +1050,9 @@ Thank you @tianheg, @onnyyonn</span>
|
|||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-05-10">2021-05-10</time></h2>
|
||||
<ul class="sources card">
|
||||
<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>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">v1.4.0</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.4.0">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(1 min)</span>
|
||||
<span>Added: Basic theme customization: Demo | Source | Docs.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">v1.6.0</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(1 min)</span>
|
||||
<span>Added: Link from the title of a subscription to its website.
|
||||
Added: Store feedUrl and siteUrl for each source in cache.
|
||||
Added: Semantic element () for timestamp on the UI.
|
||||
Added: Semantic API for theming the default template. Demo | Source | Docs
|
||||
Changed: Moved feed metadata from article level to feed level in cache.
|
||||
Fixed: Any html-like text was stripped from title. Fixed with encoded text.
|
||||
Removed: href for each source in cache. The value was never used so it's not a breaking change.</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">Get Started With React By Building A Whac-A-Mole Game</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(21 min)</span>
|
||||
<span>Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<time id="build-timestamp" datetime="2021-06-08T01:02:29.888Z">2021-06-08T01:02:29.888Z</time>
|
||||
<time id="build-timestamp" datetime="2021-06-09T00:43:32.131Z">2021-06-09T00:43:32.131Z</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