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
93477568d0
commit
4fb1bd220a
3 changed files with 309 additions and 298 deletions
212
cache.json
212
cache.json
|
|
@ -13,15 +13,6 @@
|
|||
"publishedOn": "2021-06-23T05:57:59.000Z",
|
||||
"wordCount": 370,
|
||||
"title": "v1.11.0"
|
||||
},
|
||||
{
|
||||
"id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.10.2",
|
||||
"author": null,
|
||||
"description": "Added: testing and CI/CD workflows",
|
||||
"link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.10.2",
|
||||
"publishedOn": "2021-06-01T04:39:30.000Z",
|
||||
"wordCount": 263,
|
||||
"title": "v1.10.2"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -30,6 +21,33 @@
|
|||
"feedUrl": "https://css-tricks.com/feed/",
|
||||
"siteUrl": "https://css-tricks.com",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=343224",
|
||||
"author": "Chris Coyier",
|
||||
"description": "I got this exact question in an email the other day, and I thought it would make a nice blog post because of how wonderfully satisfying this is to do in CSS these days. Plus we can sprinkle in polish …\nThe post How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/",
|
||||
"publishedOn": "2021-06-30T20:36:52.000Z",
|
||||
"wordCount": 645,
|
||||
"title": "How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=343064",
|
||||
"author": "Travis Almand",
|
||||
"description": "The click event is quite simple and easy to use; you listen for the event and run code when the event is fired. It works on just about every HTML element there is, a core feature of the DOM API.…\nThe post When a Click is Not Just a Click appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/when-a-click-is-not-just-a-click/",
|
||||
"publishedOn": "2021-06-30T14:45:42.000Z",
|
||||
"wordCount": 4397,
|
||||
"title": "When a Click is Not Just a Click"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=343182",
|
||||
"author": "Chris Coyier",
|
||||
"description": "I was working on a bug ticket the other day where it was reported that an icon was sitting low in a button. Just not aligned like it should be. I had to go on a little journey to figure …\nThe post Fixing a Bug in Low-Resolution Mode appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/fixing-a-bug-in-low-resolution-mode/",
|
||||
"publishedOn": "2021-06-30T14:44:54.000Z",
|
||||
"wordCount": 675,
|
||||
"title": "Fixing a Bug in Low-Resolution Mode"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=343470",
|
||||
"author": "Chris Coyier",
|
||||
|
|
@ -54,7 +72,7 @@
|
|||
"description": "I needed to select some elements between two fixed indexes the other day — like literally the second through fifth elements. Ironically, I have a whole post on “Useful :nth-child Recipes” but this wasn’t one of them. \nThe answer, it …\nThe post :nth-child Between Two Fixed Indexes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/nth-child-between-two-fixed-indexes/",
|
||||
"publishedOn": "2021-06-29T14:37:21.000Z",
|
||||
"wordCount": 747,
|
||||
"wordCount": 773,
|
||||
"title": ":nth-child Between Two Fixed Indexes"
|
||||
},
|
||||
{
|
||||
|
|
@ -131,7 +149,7 @@
|
|||
"description": "When I blogged “Making Tables With Sticky Header and Footers Got a Bit Easier” recently, I mentioned that the “stickiness” improvement was just one of the features that got better for <table>s in Chrome as part of the TablesNG upgrade…\nThe post TablesNG — Improvements to table rendering in Chromium appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/",
|
||||
"publishedOn": "2021-06-23T21:37:14.000Z",
|
||||
"wordCount": 1540,
|
||||
"wordCount": 1632,
|
||||
"title": "TablesNG — Improvements to table rendering in Chromium"
|
||||
},
|
||||
{
|
||||
|
|
@ -142,38 +160,6 @@
|
|||
"publishedOn": "2021-06-23T19:10:54.000Z",
|
||||
"wordCount": 1275,
|
||||
"title": "Using Performant Next-Gen Images in CSS with image-set"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=342669",
|
||||
"author": "Chris Coyier",
|
||||
"description": "PPK looks at aspect-ratio, a CSS property for layout that, for the most part, does exactly what you would think it does. It’s getting more interesting as it’s behind a flag in Firefox and Safari now, so we’ll have …\nThe post “Weak declaration” appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/weak-declaration/",
|
||||
"publishedOn": "2021-06-23T14:27:14.000Z",
|
||||
"wordCount": 760,
|
||||
"title": "“Weak declaration”",
|
||||
"enclosure": {
|
||||
"url": "https://css-tricks.com/wp-content/uploads/2021/06/CleanShot-2021-06-16-at-07.31.32.mp4",
|
||||
"length": "4189357",
|
||||
"type": "video/mp4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=342930",
|
||||
"author": "Chris Coyier",
|
||||
"description": "There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I’d say I see the inherit used the most. Perhaps because it’s been around the longest (I think?) but also …\nThe post inherit, initial, unset, revert appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/inherit-initial-unset-revert/",
|
||||
"publishedOn": "2021-06-22T21:20:20.000Z",
|
||||
"wordCount": 799,
|
||||
"title": "inherit, initial, unset, revert"
|
||||
},
|
||||
{
|
||||
"id": "https://css-tricks.com/?p=342634",
|
||||
"author": "Geoff Rich",
|
||||
"description": "Svelte fully supports custom elements (e.g. <my-component>) without any custom configuration or wrapper components and has a perfect score on Custom Elements Everywhere. However, there are still a few quirks you need to watch out for, especially around …\nThe post Using Custom Elements in Svelte appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
|
||||
"link": "https://css-tricks.com/using-custom-elements-in-svelte/",
|
||||
"publishedOn": "2021-06-22T14:37:50.000Z",
|
||||
"wordCount": 3090,
|
||||
"title": "Using Custom Elements in Svelte"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -182,13 +168,41 @@
|
|||
"feedUrl": "https://www.smashingmagazine.com/feed/",
|
||||
"siteUrl": "https://www.smashingmagazine.com/",
|
||||
"articles": [
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/web-workers-2021/",
|
||||
"author": "hello@smashingmagazine.com (Surma)",
|
||||
"description": "The web is single-threaded. This makes it increasingly hard to write smooth and responsive apps. Workers have a bad rep, but can be an important and useful tool in any web developer's toolbelt for these kinds of problems. Let’s get up to speed on Workers on the Web!",
|
||||
"link": "https://smashingmagazine.com/2021/06/web-workers-2021/",
|
||||
"publishedOn": "2021-06-30T12:00:00.000Z",
|
||||
"wordCount": 4736,
|
||||
"title": "The State Of Web Workers In 2021",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/379e4510-b4ab-4fde-9a5d-122738be19b2/web-workers-2021.jpg",
|
||||
"length": "0",
|
||||
"type": "image/jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/desktop-wallpaper-calendars-july-2021/",
|
||||
"author": "hello@smashingmagazine.com (Cosima Mielke)",
|
||||
"description": "Let’s welcome July with some fresh desktop wallpapers. Designed by artists and designers from around the world, they are available with and without a calendar. Enjoy!",
|
||||
"link": "https://smashingmagazine.com/2021/06/desktop-wallpaper-calendars-july-2021/",
|
||||
"publishedOn": "2021-06-30T09:30:00.000Z",
|
||||
"wordCount": 3594,
|
||||
"title": "The Many Shades Of July (2021 Desktop Wallpapers Edition)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/814b3b6e-1510-4c12-8504-433157173355/july-21-against-the-current-preview-opt.png",
|
||||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/breaking-down-bulky-builds-netlify-nextjs/",
|
||||
"author": "hello@smashingmagazine.com (Átila Fassina)",
|
||||
"description": "Static Generation is great for performance, but not until the app gets too big and build-times go through the roof. Today, we’ll have a look at how Netlify’s fresh On-Demand Builders can fix that.",
|
||||
"description": "Static Generation is great for performance — until the app gets too big and build-times go through the roof. Today, we’ll have a look at how Netlify’s fresh On-Demand Builders can fix that.",
|
||||
"link": "https://smashingmagazine.com/2021/06/breaking-down-bulky-builds-netlify-nextjs/",
|
||||
"publishedOn": "2021-06-29T11:00:00.000Z",
|
||||
"wordCount": 2454,
|
||||
"wordCount": 2453,
|
||||
"title": "Breaking Down Bulky Builds With Netlify And Next.js",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a11af025-97a1-4506-8cbe-a7786e5574c9/breaking-down-bulky-builds-netlify-nextjs.jpg",
|
||||
|
|
@ -216,7 +230,7 @@
|
|||
"description": "In this article, Manuel explains why Emmet is one of his favorite productivity tools for writing HTML and CSS, and how you can create custom Emmet snippets in Visual Studio Code to help you improve your front-end workflows even more.",
|
||||
"link": "https://smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/",
|
||||
"publishedOn": "2021-06-28T10:30:00.000Z",
|
||||
"wordCount": 2514,
|
||||
"wordCount": 2513,
|
||||
"title": "Creating Custom Emmet Snippets In VS Code",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b7ff6227-3a15-4237-8e58-aa783fc9c485/custom-emmet-snippets-vscode.jpg",
|
||||
|
|
@ -230,7 +244,7 @@
|
|||
"description": "This article explains how we can connect different types of content in a Next.js application. With this technique, we can add any kind of one-to-one, one-to-many, or even many-to-many relationship to our projects.",
|
||||
"link": "https://smashingmagazine.com/2021/06/creating-multi-author-blog-nextjs/",
|
||||
"publishedOn": "2021-06-25T11:30:00.000Z",
|
||||
"wordCount": 5440,
|
||||
"wordCount": 5438,
|
||||
"title": "Creating A Multi-Author Blog With Next.js",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/28d0f286-9b01-4f8d-aede-01248ba3491d/creating-multi-author-blog-nextjs.jpg",
|
||||
|
|
@ -244,7 +258,7 @@
|
|||
"description": "This article is a case study of how a UX audit affects a UI. It explains how a famous educational platform can be analyzed edX against Jakob Nielsen’s usability guidelines. To get started, Mark Lankmiller shares all of the criteria and metrics he used for his UX audit.",
|
||||
"link": "https://smashingmagazine.com/2021/06/ux-audit-edtech-platform-case-study/",
|
||||
"publishedOn": "2021-06-25T10:00:00.000Z",
|
||||
"wordCount": 3481,
|
||||
"wordCount": 3522,
|
||||
"title": "How To Run A UX Audit For A Major EdTech Platform (Case Study)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d5116c31-3d66-47b0-aa81-1a6759c68b92/ux-audit-edtech-platform-case-study.jpg",
|
||||
|
|
@ -258,7 +272,7 @@
|
|||
"description": "In the dynamic and unpredictable environments in which we work, even the most carefully crafted solutions can have a short shelf life. When we accept that our work is impermanent and our problem-solving abilities are limited, our goal can shift from delivering full solutions to developing tools that empower our users to adaptively design for themselves.",
|
||||
"link": "https://smashingmagazine.com/2021/06/design-thinking-problem-solving-strategy/",
|
||||
"publishedOn": "2021-06-24T14:00:00.000Z",
|
||||
"wordCount": 4172,
|
||||
"wordCount": 4173,
|
||||
"title": "The Rise Of Design Thinking As A Problem Solving Strategy",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e5ea9274-2ff4-49d8-b259-a5f0904cec77/design-thinking-problem-solving-strategy.jpg",
|
||||
|
|
@ -286,7 +300,7 @@
|
|||
"description": "Automated testing is an important part of any software project, including testing for accessibility. There are already tools for linting and integration testing accessibility, but what about end-to-end testing with real assistive technology? Since I hadn’t seen this before, I set out to build Auto VO, a driver for the VoiceOver screen reader.",
|
||||
"link": "https://smashingmagazine.com/2021/06/automating-screen-reader-testing-macos-autovo/",
|
||||
"publishedOn": "2021-06-23T09:30:00.000Z",
|
||||
"wordCount": 1388,
|
||||
"wordCount": 1391,
|
||||
"title": "Automating Screen Reader Testing On macOS Using Auto VO",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c81018b9-c45e-4c21-9762-dff84dd2682c/automating-screen-reader-testing-macos-autovo.jpg",
|
||||
|
|
@ -314,7 +328,7 @@
|
|||
"description": "Do you have to process data manually because it is served through images or scanned documents? An image-to-text conversion makes it possible to extract text from images to automate the processing of texts on images, videos, and scanned documents. In this article, we look at how to convert an image to text with React and Tesseract.js(OCR), preprocess images, and deal with the limitations of Tesseract (OCR).",
|
||||
"link": "https://smashingmagazine.com/2021/06/image-text-conversion-react-tesseract-js-ocr/",
|
||||
"publishedOn": "2021-06-21T14:30:00.000Z",
|
||||
"wordCount": 5314,
|
||||
"wordCount": 5364,
|
||||
"title": "Image To Text Conversion With React And Tesseract.js (OCR)",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/012f3fbe-980a-44fc-b973-a459f6d9bf1a/image-text-conversion-react-tesseract-js-ocr.jpg",
|
||||
|
|
@ -328,7 +342,7 @@
|
|||
"description": "Voice assistants are currently the most popular use case for voice user interfaces. However, due to the bad feedback loop resulting from voice assistants can only solve simple user tasks such as setting an alarm or playing music. In order for voice user interfaces to really break through, feedback to the user must be visual, not auditive.",
|
||||
"link": "https://smashingmagazine.com/2021/06/alternative-voice-ui-voice-assistants/",
|
||||
"publishedOn": "2021-06-18T15:00:00.000Z",
|
||||
"wordCount": 3414,
|
||||
"wordCount": 3425,
|
||||
"title": "An Alternative Voice UI To Voice Assistants",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ebd2c76-ebe5-4885-be3e-f9acc3608072/alternative-voice-ui-voice-assistants.jpg",
|
||||
|
|
@ -342,7 +356,7 @@
|
|||
"description": "Next.js has a file-based routing system in which each page automatically becomes a route based on its file name. This article will guide you through almost everything you need to know about Routing in Next.js and point you in the direction of related topics and concepts.",
|
||||
"link": "https://smashingmagazine.com/2021/06/client-side-routing-next-js/",
|
||||
"publishedOn": "2021-06-18T13:00:00.000Z",
|
||||
"wordCount": 3952,
|
||||
"wordCount": 3955,
|
||||
"title": "Client-Side Routing In Next.js",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a51f6c83-5e1a-4535-b28a-2018310ffc3b/client-side-routing-next-js.jpg",
|
||||
|
|
@ -356,7 +370,7 @@
|
|||
"description": "Image placement on the modern web is highly intentional, helping to communicate the overall purpose of a page or view. This means that nearly every image you declare needs to have an alternate description.",
|
||||
"link": "https://smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/",
|
||||
"publishedOn": "2021-06-17T10:30:00.000Z",
|
||||
"wordCount": 1638,
|
||||
"wordCount": 1637,
|
||||
"title": "Your Image Is Probably Not Decorative",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/95585fe9-52b8-4bd4-adac-a3580ef87b98/img-alt-attribute-alternate-description-decorative.jpg",
|
||||
|
|
@ -370,7 +384,7 @@
|
|||
"description": "In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don’t miss the next one.",
|
||||
"link": "https://smashingmagazine.com/2021/06/complete-guide-accessibility-tooling/",
|
||||
"publishedOn": "2021-06-16T10:30:00.000Z",
|
||||
"wordCount": 4059,
|
||||
"wordCount": 4097,
|
||||
"title": "A Complete Guide To Accessibility Tooling",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e0ea8e6-a4ad-489c-b062-749a22d5e38e/complete-guide-accessibility-tooling.jpg",
|
||||
|
|
@ -412,7 +426,7 @@
|
|||
"description": "Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.",
|
||||
"link": "https://smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/",
|
||||
"publishedOn": "2021-06-14T10:30:00.000Z",
|
||||
"wordCount": 3672,
|
||||
"wordCount": 3670,
|
||||
"title": "When CSS Isn’t Enough: JavaScript Requirements For Accessible Components",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9982fa1e-806c-4343-9de1-eb804a48451e/css-javascript-requirements-accessible-components.jpg",
|
||||
|
|
@ -426,7 +440,7 @@
|
|||
"description": "Design often revolves around visuals, but the other senses deserve love too. In this article, we tune in to audio features that are making sites sing.",
|
||||
"link": "https://smashingmagazine.com/2021/06/web-design-done-well-audio/",
|
||||
"publishedOn": "2021-06-11T15:00:00.000Z",
|
||||
"wordCount": 1752,
|
||||
"wordCount": 1737,
|
||||
"title": "Web Design Done Well: Making Use Of Audio",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf0cbb26-546e-43b7-9b9a-9077259ea84b/making-use-of-audio.jpg",
|
||||
|
|
@ -440,7 +454,7 @@
|
|||
"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": 5163,
|
||||
"wordCount": 5152,
|
||||
"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",
|
||||
|
|
@ -454,7 +468,7 @@
|
|||
"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": 878,
|
||||
"wordCount": 867,
|
||||
"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",
|
||||
|
|
@ -468,7 +482,7 @@
|
|||
"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": 2779,
|
||||
"wordCount": 2781,
|
||||
"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",
|
||||
|
|
@ -496,7 +510,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": 2434,
|
||||
"wordCount": 2393,
|
||||
"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",
|
||||
|
|
@ -510,7 +524,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": 4423,
|
||||
"wordCount": 4422,
|
||||
"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",
|
||||
|
|
@ -524,7 +538,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": 3719,
|
||||
"wordCount": 3717,
|
||||
"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",
|
||||
|
|
@ -538,7 +552,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": 4587,
|
||||
"wordCount": 4584,
|
||||
"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",
|
||||
|
|
@ -552,7 +566,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": 5651,
|
||||
"wordCount": 5611,
|
||||
"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",
|
||||
|
|
@ -573,20 +587,6 @@
|
|||
"length": "0",
|
||||
"type": "image/jpg"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "https://smashingmagazine.com/2021/06/currency-convertor-exchangeratesapi/",
|
||||
"author": "hello@smashingmagazine.com (Leonardo Losoviz)",
|
||||
"description": "Amazon allows visitors to display prices in their own currency. Thanks to *ExchangeRatesApi.io*, we can do the same for our online shops, providing a better experience to our customers. Let’s find out how.",
|
||||
"link": "https://smashingmagazine.com/2021/06/currency-convertor-exchangeratesapi/",
|
||||
"publishedOn": "2021-06-01T09:00:00.000Z",
|
||||
"wordCount": 1513,
|
||||
"title": "Setting Up A Currency Convertor With ExchangeRatesApi.io",
|
||||
"enclosure": {
|
||||
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ce4b3b1-3ae6-4371-8aaf-d72da3b69fc5/4-exchange-rate-api-bsa.png",
|
||||
"length": "0",
|
||||
"type": "image/png"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -595,6 +595,33 @@
|
|||
"feedUrl": "https://www.freecodecamp.org/news/rss/",
|
||||
"siteUrl": "https://www.freecodecamp.org/news",
|
||||
"articles": [
|
||||
{
|
||||
"id": "6063b8d69618b008528a9d79",
|
||||
"author": null,
|
||||
"description": "Today we're gonna learn how to use CSS's box-shadow property to make beautiful website components. Along the way, we'll create a button and get hands-on experience using this property. Let's get started. 🎖️ Table of Contents Why you should use the CSS box-shadow propertyThe syntax of the box-shadow propertyHow to make",
|
||||
"link": "https://www.freecodecamp.org/news/css-box-shadow-property-with-examples/",
|
||||
"publishedOn": "2021-06-30T18:49:49.000Z",
|
||||
"wordCount": 956,
|
||||
"title": "Learn the CSS Box-Shadow Property by Coding a Beautiful Button ✨"
|
||||
},
|
||||
{
|
||||
"id": "6055c55b687d62084bf68804",
|
||||
"author": null,
|
||||
"description": "This tutorial is an overview of basic concepts of the C programming language. It goes over the history of the language, why and where it is used, the compilation process, and some very basic programming concepts that are common in most popular programming languages. It is not a complete guide",
|
||||
"link": "https://www.freecodecamp.org/news/what-is-the-c-programming-language-beginner-tutorial/",
|
||||
"publishedOn": "2021-06-30T14:25:53.000Z",
|
||||
"wordCount": 12270,
|
||||
"title": "What is The C Programming Language? A Tutorial for Beginners"
|
||||
},
|
||||
{
|
||||
"id": "60d5ea736e1a1407b6b0bc8d",
|
||||
"author": null,
|
||||
"description": "React Router is commonly used to make different routes for pages in React Applications. We just released a crash course on the freeCodeCamp.org YouTube channel that will teach you how to create routes in your React applications. Piyush Agarwal developed this course. Piyush is a prolific course creator on",
|
||||
"link": "https://www.freecodecamp.org/news/learn-react-router/",
|
||||
"publishedOn": "2021-06-30T14:01:01.000Z",
|
||||
"wordCount": 5542,
|
||||
"title": "Learn React Router"
|
||||
},
|
||||
{
|
||||
"id": "60db519527f80207bcdbb6fa",
|
||||
"author": null,
|
||||
|
|
@ -657,33 +684,6 @@
|
|||
"publishedOn": "2021-06-28T20:04:28.000Z",
|
||||
"wordCount": 2258,
|
||||
"title": "What is an IDE in Programming? An IDE Definition for Developers"
|
||||
},
|
||||
{
|
||||
"id": "60d675ac6e1a1407b6b0bea1",
|
||||
"author": null,
|
||||
"description": "In JavaScript, people often confuse closures with lexical scope. Lexical scope is an important part of closures, but it is not a closure by itself. Closures are an advanced concept that is also a frequent topic of technical interviews. You should have a foundational understanding of functions before attempting to",
|
||||
"link": "https://www.freecodecamp.org/news/javascript-closure-lexical-scope/",
|
||||
"publishedOn": "2021-06-28T18:45:21.000Z",
|
||||
"wordCount": 740,
|
||||
"title": "JavaScript Closure Tutorial – How Closures and Lexical Scope Work in JS"
|
||||
},
|
||||
{
|
||||
"id": "60d4d3d86e1a1407b6b0bb25",
|
||||
"author": null,
|
||||
"description": "A design system is a set of standards, reusable components, and patterns used to create visual consistency throughout different projects and pages. Figma is a vector graphics editor and prototyping tool. We just released a course on the freeCodeCamp.org channel that will teach you how to build a design",
|
||||
"link": "https://www.freecodecamp.org/news/learn-how-to-create-a-design-system-in-figma/",
|
||||
"publishedOn": "2021-06-28T13:50:35.000Z",
|
||||
"wordCount": 67249,
|
||||
"title": "Learn How to Create a Design System in Figma"
|
||||
},
|
||||
{
|
||||
"id": "60d4ea756e1a1407b6b0bb71",
|
||||
"author": null,
|
||||
"description": "Ok. I'm not suggesting that everyone needs to become a fully-credentialed data scientist. But these days, learning core data skills may provide as much value as basic financial literacy or knowledge of a simple coding language. This isn't just about your career: data has grown far beyond the world of",
|
||||
"link": "https://www.freecodecamp.org/news/why-you-should-learn-data-analytics/",
|
||||
"publishedOn": "2021-06-28T13:44:39.000Z",
|
||||
"wordCount": 806,
|
||||
"title": "Why You Should Learn Data Analytics"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
172
feed.atom
172
feed.atom
|
|
@ -1,10 +1,93 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<id>urn:2021-06-30T00:42:33.935Z</id>
|
||||
<id>urn:2021-07-01T00:41:21.708Z</id>
|
||||
<title>osmos::feed</title>
|
||||
<updated>2021-06-30T00:42:33.935Z</updated>
|
||||
<updated>2021-07-01T00:41:21.708Z</updated>
|
||||
<generator>osmosfeed 1.11.0</generator>
|
||||
<link rel="alternate" href="index.html"/>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?]]></title>
|
||||
<id>https://css-tricks.com/?p=343224</id>
|
||||
<link href="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/"/>
|
||||
<updated>2021-06-30T20:36:52.000Z</updated>
|
||||
<summary type="html"><![CDATA[I got this exact question in an email the other day, and I thought it would make a nice blog post because of how wonderfully satisfying this is to do in CSS these days. Plus we can sprinkle in polish …
|
||||
The post How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side? 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[Learn the CSS Box-Shadow Property by Coding a Beautiful Button ✨]]></title>
|
||||
<id>6063b8d69618b008528a9d79</id>
|
||||
<link href="https://www.freecodecamp.org/news/css-box-shadow-property-with-examples/"/>
|
||||
<updated>2021-06-30T18:49:49.000Z</updated>
|
||||
<summary type="html"><![CDATA[Today we're gonna learn how to use CSS's box-shadow property to make beautiful website components. Along the way, we'll create a button and get hands-on experience using this property. Let's get started. 🎖️ Table of Contents Why you should use the CSS box-shadow propertyThe syntax of the box-shadow propertyHow to make]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[When a Click is Not Just a Click]]></title>
|
||||
<id>https://css-tricks.com/?p=343064</id>
|
||||
<link href="https://css-tricks.com/when-a-click-is-not-just-a-click/"/>
|
||||
<updated>2021-06-30T14:45:42.000Z</updated>
|
||||
<summary type="html"><![CDATA[The click event is quite simple and easy to use; you listen for the event and run code when the event is fired. It works on just about every HTML element there is, a core feature of the DOM API.…
|
||||
The post When a Click is Not Just a Click appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Travis Almand</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Fixing a Bug in Low-Resolution Mode]]></title>
|
||||
<id>https://css-tricks.com/?p=343182</id>
|
||||
<link href="https://css-tricks.com/fixing-a-bug-in-low-resolution-mode/"/>
|
||||
<updated>2021-06-30T14:44:54.000Z</updated>
|
||||
<summary type="html"><![CDATA[I was working on a bug ticket the other day where it was reported that an icon was sitting low in a button. Just not aligned like it should be. I had to go on a little journey to figure …
|
||||
The post Fixing a Bug in Low-Resolution Mode 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[What is The C Programming Language? A Tutorial for Beginners]]></title>
|
||||
<id>6055c55b687d62084bf68804</id>
|
||||
<link href="https://www.freecodecamp.org/news/what-is-the-c-programming-language-beginner-tutorial/"/>
|
||||
<updated>2021-06-30T14:25:53.000Z</updated>
|
||||
<summary type="html"><![CDATA[This tutorial is an overview of basic concepts of the C programming language. It goes over the history of the language, why and where it is used, the compilation process, and some very basic programming concepts that are common in most popular programming languages. It is not a complete guide]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Learn React Router]]></title>
|
||||
<id>60d5ea736e1a1407b6b0bc8d</id>
|
||||
<link href="https://www.freecodecamp.org/news/learn-react-router/"/>
|
||||
<updated>2021-06-30T14:01:01.000Z</updated>
|
||||
<summary type="html"><![CDATA[React Router is commonly used to make different routes for pages in React Applications. We just released a crash course on the freeCodeCamp.org YouTube channel that will teach you how to create routes in your React applications. Piyush Agarwal developed this course. Piyush is a prolific course creator on]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[The State Of Web Workers In 2021]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/web-workers-2021/</id>
|
||||
<link href="https://smashingmagazine.com/2021/06/web-workers-2021/"/>
|
||||
<updated>2021-06-30T12:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[The web is single-threaded. This makes it increasingly hard to write smooth and responsive apps. Workers have a bad rep, but can be an important and useful tool in any web developer's toolbelt for these kinds of problems. Let’s get up to speed on Workers on the Web!]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Surma)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[The Many Shades Of July (2021 Desktop Wallpapers Edition)]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/desktop-wallpaper-calendars-july-2021/</id>
|
||||
<link href="https://smashingmagazine.com/2021/06/desktop-wallpaper-calendars-july-2021/"/>
|
||||
<updated>2021-06-30T09:30:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[Let’s welcome July with some fresh desktop wallpapers. Designed by artists and designers from around the world, they are available with and without a calendar. Enjoy!]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Cosima Mielke)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[What does `font: 110%/1.4 system-ui` mean?]]></title>
|
||||
<id>https://css-tricks.com/?p=343470</id>
|
||||
|
|
@ -90,7 +173,7 @@ The post :nth-child Between Two Fixed Indexes appeared first on CSS-Tricks. You
|
|||
<id>https://smashingmagazine.com/2021/06/breaking-down-bulky-builds-netlify-nextjs/</id>
|
||||
<link href="https://smashingmagazine.com/2021/06/breaking-down-bulky-builds-netlify-nextjs/"/>
|
||||
<updated>2021-06-29T11:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[Static Generation is great for performance, but not until the app gets too big and build-times go through the roof. Today, we’ll have a look at how Netlify’s fresh On-Demand Builders can fix that.]]></summary>
|
||||
<summary type="html"><![CDATA[Static Generation is great for performance — until the app gets too big and build-times go through the roof. Today, we’ll have a look at how Netlify’s fresh On-Demand Builders can fix that.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Átila Fassina)</name>
|
||||
</author>
|
||||
|
|
@ -161,16 +244,6 @@ The post Working around the viewport-based fluid typography bug in Safari appear
|
|||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[JavaScript Closure Tutorial – How Closures and Lexical Scope Work in JS]]></title>
|
||||
<id>60d675ac6e1a1407b6b0bea1</id>
|
||||
<link href="https://www.freecodecamp.org/news/javascript-closure-lexical-scope/"/>
|
||||
<updated>2021-06-28T18:45:21.000Z</updated>
|
||||
<summary type="html"><![CDATA[In JavaScript, people often confuse closures with lexical scope. Lexical scope is an important part of closures, but it is not a closure by itself. Closures are an advanced concept that is also a frequent topic of technical interviews. You should have a foundational understanding of functions before attempting to]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Positioning Overlay Content with CSS Grid]]></title>
|
||||
<id>https://css-tricks.com/?p=342971</id>
|
||||
|
|
@ -183,26 +256,6 @@ The post Positioning Overlay Content with CSS Grid appeared first on CSS-Tricks.
|
|||
<name>Ryan Mulligan</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Learn How to Create a Design System in Figma]]></title>
|
||||
<id>60d4d3d86e1a1407b6b0bb25</id>
|
||||
<link href="https://www.freecodecamp.org/news/learn-how-to-create-a-design-system-in-figma/"/>
|
||||
<updated>2021-06-28T13:50:35.000Z</updated>
|
||||
<summary type="html"><![CDATA[A design system is a set of standards, reusable components, and patterns used to create visual consistency throughout different projects and pages. Figma is a vector graphics editor and prototyping tool. We just released a course on the freeCodeCamp.org channel that will teach you how to build a design]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Why You Should Learn Data Analytics]]></title>
|
||||
<id>60d4ea756e1a1407b6b0bb71</id>
|
||||
<link href="https://www.freecodecamp.org/news/why-you-should-learn-data-analytics/"/>
|
||||
<updated>2021-06-28T13:44:39.000Z</updated>
|
||||
<summary type="html"><![CDATA[Ok. I'm not suggesting that everyone needs to become a fully-credentialed data scientist. But these days, learning core data skills may provide as much value as basic financial literacy or knowledge of a simple coding language. This isn't just about your career: data has grown far beyond the world of]]></summary>
|
||||
<author>
|
||||
<name>freeCodeCamp.org</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Scaling Organizations Should Consider Building a Website Backed by a CRM Platform]]></title>
|
||||
<id>https://css-tricks.com/?p=343072</id>
|
||||
|
|
@ -315,17 +368,6 @@ The post Using Performant Next-Gen Images in CSS with image-set appeared first o
|
|||
<name>Ollie Williams</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[“Weak declaration”]]></title>
|
||||
<id>https://css-tricks.com/?p=342669</id>
|
||||
<link href="https://css-tricks.com/weak-declaration/"/>
|
||||
<updated>2021-06-23T14:27:14.000Z</updated>
|
||||
<summary type="html"><![CDATA[PPK looks at aspect-ratio, a CSS property for layout that, for the most part, does exactly what you would think it does. It’s getting more interesting as it’s behind a flag in Firefox and Safari now, so we’ll have …
|
||||
The post “Weak declaration” 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[Smashing Online Workshops (July-October 2021)]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/new-smashing-online-workshops-frontend-ux-design/</id>
|
||||
|
|
@ -365,28 +407,6 @@ Thank you @PiyushLosalka]]></summary>
|
|||
<name>Release notes from osmosfeed</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[inherit, initial, unset, revert]]></title>
|
||||
<id>https://css-tricks.com/?p=342930</id>
|
||||
<link href="https://css-tricks.com/inherit-initial-unset-revert/"/>
|
||||
<updated>2021-06-22T21:20:20.000Z</updated>
|
||||
<summary type="html"><![CDATA[There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I’d say I see the inherit used the most. Perhaps because it’s been around the longest (I think?) but also …
|
||||
The post inherit, initial, unset, revert 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[Using Custom Elements in Svelte]]></title>
|
||||
<id>https://css-tricks.com/?p=342634</id>
|
||||
<link href="https://css-tricks.com/using-custom-elements-in-svelte/"/>
|
||||
<updated>2021-06-22T14:37:50.000Z</updated>
|
||||
<summary type="html"><![CDATA[Svelte fully supports custom elements (e.g. <my-component>) without any custom configuration or wrapper components and has a perfect score on Custom Elements Everywhere. However, there are still a few quirks you need to watch out for, especially around …
|
||||
The post Using Custom Elements in Svelte appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Geoff Rich</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Designing With Code: A Modern Approach To Design (Development Challenges)]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/design-code-modern-approach-development-challenges/</id>
|
||||
|
|
@ -587,24 +607,4 @@ The post Using Custom Elements in Svelte appeared first on CSS-Tricks. You can s
|
|||
<name>hello@smashingmagazine.com (Drew McLellan)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Setting Up A Currency Convertor With ExchangeRatesApi.io]]></title>
|
||||
<id>https://smashingmagazine.com/2021/06/currency-convertor-exchangeratesapi/</id>
|
||||
<link href="https://smashingmagazine.com/2021/06/currency-convertor-exchangeratesapi/"/>
|
||||
<updated>2021-06-01T09:00:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[Amazon allows visitors to display prices in their own currency. Thanks to *ExchangeRatesApi.io*, we can do the same for our online shops, providing a better experience to our customers. Let’s find out how.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Leonardo Losoviz)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[v1.10.2]]></title>
|
||||
<id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.10.2</id>
|
||||
<link href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.10.2"/>
|
||||
<updated>2021-06-01T04:39:30.000Z</updated>
|
||||
<summary type="html"><![CDATA[Added: testing and CI/CD workflows]]></summary>
|
||||
<author>
|
||||
<name>Release notes from osmosfeed</name>
|
||||
</author>
|
||||
</entry>
|
||||
</feed>
|
||||
223
index.html
223
index.html
|
|
@ -15,6 +15,120 @@
|
|||
|
||||
<body>
|
||||
<!-- %after-body-begin.html% -->
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-30">2021-06-30</time></h2>
|
||||
<ul class="sources card">
|
||||
<li class="source">
|
||||
<section>
|
||||
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>I got this exact question in an email the other day, and I thought it would make a nice blog post because of how wonderfully satisfying this is to do in CSS these days. Plus we can sprinkle in polish …
|
||||
The post How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side? 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">When a Click is Not Just a Click</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/when-a-click-is-not-just-a-click/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(15 min)</span>
|
||||
<span>The click event is quite simple and easy to use; you listen for the event and run code when the event is fired. It works on just about every HTML element there is, a core feature of the DOM API.…
|
||||
The post When a Click is Not Just a Click 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">Fixing a Bug in Low-Resolution Mode</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/fixing-a-bug-in-low-resolution-mode/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>I was working on a bug ticket the other day where it was reported that an icon was sitting low in a button. Just not aligned like it should be. I had to go on a little journey to figure …
|
||||
The post Fixing a Bug in Low-Resolution Mode 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">Learn the CSS Box-Shadow Property by Coding a Beautiful Button ✨</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/css-box-shadow-property-with-examples/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>Today we're gonna learn how to use CSS's box-shadow property to make beautiful website components. Along the way, we'll create a button and get hands-on experience using this property. Let's get started. 🎖️ Table of Contents Why you should use the CSS box-shadow propertyThe syntax of the box-shadow propertyHow to make</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">What is The C Programming Language? A Tutorial for Beginners</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-the-c-programming-language-beginner-tutorial/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(41 min)</span>
|
||||
<span>This tutorial is an overview of basic concepts of the C programming language. It goes over the history of the language, why and where it is used, the compilation process, and some very basic programming concepts that are common in most popular programming languages. It is not a complete guide</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Learn React Router</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/learn-react-router/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(18 min)</span>
|
||||
<span>React Router is commonly used to make different routes for pages in React Applications. We just released a crash course on the freeCodeCamp.org YouTube channel that will teach you how to create routes in your React applications. Piyush Agarwal developed this course. Piyush is a prolific course creator on</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">The State Of Web Workers In 2021</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/web-workers-2021/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(16 min)</span>
|
||||
<span>The web is single-threaded. This makes it increasingly hard to write smooth and responsive apps. Workers have a bad rep, but can be an important and useful tool in any web developer's toolbelt for these kinds of problems. Let’s get up to speed on Workers on the Web!</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">The Many Shades Of July (2021 Desktop Wallpapers Edition)</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/desktop-wallpaper-calendars-july-2021/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(12 min)</span>
|
||||
<span>Let’s welcome July with some fresh desktop wallpapers. Designed by artists and designers from around the world, they are available with and without a calendar. Enjoy!</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-29">2021-06-29</time></h2>
|
||||
<ul class="sources card">
|
||||
|
|
@ -57,7 +171,7 @@ The post Chromium spelling and grammar features appeared first on CSS-Tricks. Yo
|
|||
<summary class="article-expander__title">:nth-child Between Two Fixed Indexes</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/nth-child-between-two-fixed-indexes/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>I needed to select some elements between two fixed indexes the other day — like literally the second through fifth elements. Ironically, I have a whole post on “Useful :nth-child Recipes” but this wasn’t one of them.
|
||||
The answer, it …
|
||||
The post :nth-child Between Two Fixed Indexes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
|
|
@ -127,7 +241,7 @@ The post :nth-child Between Two Fixed Indexes appeared first on CSS-Tricks. You
|
|||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/breaking-down-bulky-builds-netlify-nextjs/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(8 min)</span>
|
||||
<span>Static Generation is great for performance, but not until the app gets too big and build-times go through the roof. Today, we’ll have a look at how Netlify’s fresh On-Demand Builders can fix that.</span>
|
||||
<span>Static Generation is great for performance — until the app gets too big and build-times go through the roof. Today, we’ll have a look at how Netlify’s fresh On-Demand Builders can fix that.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
|
|
@ -249,39 +363,6 @@ The post Scaling Organizations Should Consider Building a Website Backed by a CR
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">JavaScript Closure Tutorial – How Closures and Lexical Scope Work in JS</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/javascript-closure-lexical-scope/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span>In JavaScript, people often confuse closures with lexical scope. Lexical scope is an important part of closures, but it is not a closure by itself. Closures are an advanced concept that is also a frequent topic of technical interviews. You should have a foundational understanding of functions before attempting to</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Learn How to Create a Design System in Figma</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/learn-how-to-create-a-design-system-in-figma/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(224 min)</span>
|
||||
<span>A design system is a set of standards, reusable components, and patterns used to create visual consistency throughout different projects and pages. Figma is a vector graphics editor and prototyping tool. We just released a course on the freeCodeCamp.org channel that will teach you how to build a design</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Why You Should Learn Data Analytics</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/why-you-should-learn-data-analytics/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>Ok. I'm not suggesting that everyone needs to become a fully-credentialed data scientist. But these days, learning core data skills may provide as much value as basic financial literacy or knowledge of a simple coding language. This isn't just about your career: data has grown far beyond the world of</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
|
|
@ -441,18 +522,6 @@ The post Using Performant Next-Gen Images in CSS with image-set appeared first o
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">“Weak declaration”</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/weak-declaration/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>PPK looks at aspect-ratio, a CSS property for layout that, for the most part, does exactly what you would think it does. It’s getting more interesting as it’s behind a flag in Firefox and Safari now, so we’ll have …
|
||||
The post “Weak declaration” 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">
|
||||
|
|
@ -514,36 +583,6 @@ Thank you @PiyushLosalka</span>
|
|||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-06-22">2021-06-22</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">inherit, initial, unset, revert</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/inherit-initial-unset-revert/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I’d say I see the inherit used the most. Perhaps because it’s been around the longest (I think?) but also …
|
||||
The post inherit, initial, unset, revert 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">Using Custom Elements in Svelte</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/using-custom-elements-in-svelte/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(10 min)</span>
|
||||
<span>Svelte fully supports custom elements (e.g. ) without any custom configuration or wrapper components and has a perfect score on Custom Elements Everywhere. However, there are still a few quirks you need to watch out for, especially around …
|
||||
The post Using Custom Elements in Svelte 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>
|
||||
|
|
@ -918,23 +957,6 @@ The post Using Custom Elements in Svelte appeared first on CSS-Tricks. You can s
|
|||
<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://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.10.2</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.10.2">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(1 min)</span>
|
||||
<span>Added: testing and CI/CD workflows</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>
|
||||
|
|
@ -950,24 +972,13 @@ The post Using Custom Elements in Svelte appeared first on CSS-Tricks. You can s
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Setting Up A Currency Convertor With ExchangeRatesApi.io</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/06/currency-convertor-exchangeratesapi/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(5 min)</span>
|
||||
<span>Amazon allows visitors to display prices in their own currency. Thanks to *ExchangeRatesApi.io*, we can do the same for our online shops, providing a better experience to our customers. Let’s find out how.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<time id="build-timestamp" datetime="2021-06-30T00:42:33.920Z">2021-06-30T00:42:33.920Z</time>
|
||||
<time id="build-timestamp" datetime="2021-07-01T00:41:21.681Z">2021-07-01T00:41:21.681Z</time>
|
||||
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.0</a></span>
|
||||
</footer>
|
||||
<script src="index.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue