diff --git a/cache.json b/cache.json index c843165..811fe70 100644 --- a/cache.json +++ b/cache.json @@ -81,7 +81,7 @@ "description": "Blog posts that get into the whole “how to think like a front-end developer” vibe are my favorite. Michelle Barker nails that in this post, and does it without sharing a line of code!\nWe simply can no longer \n…\nThe post Developer Decisions For Building Flexible Components appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.", "link": "https://www.smashingmagazine.com/2021/09/developer-decisions-building-flexible-components/", "publishedOn": "2021-10-07T21:33:58.000Z", - "wordCount": 2861, + "wordCount": 2859, "title": "Developer Decisions For Building Flexible Components" }, { @@ -172,13 +172,27 @@ "feedUrl": "https://www.smashingmagazine.com/feed/", "siteUrl": "https://www.smashingmagazine.com/", "articles": [ + { + "id": "https://smashingmagazine.com/2021/10/composable-css-animation-vue-animxyz/", + "author": "hello@smashingmagazine.com (Ejiro Asiuwhu)", + "description": "Most animation libraries like GSAP and Framer Motion are built purely with JavaScript or TypeScript, unlike AnimXYZ, which is labelled “the first composable CSS animation toolkit”, built mainly with SCSS While a simple library, it can be used to achieve a lot of awesome animation on the web in a short amount of time and little code.", + "link": "https://smashingmagazine.com/2021/10/composable-css-animation-vue-animxyz/", + "publishedOn": "2021-10-09T10:00:00.000Z", + "wordCount": 2819, + "title": "Composable CSS Animation In Vue With AnimXYZ", + "enclosure": { + "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0b5365f4-e57d-4fa8-96ed-1742adb243ec/composable-css-animation-vue-animxyz.jpg", + "length": "0", + "type": "image/jpg" + } + }, { "id": "https://smashingmagazine.com/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/", "author": "hello@smashingmagazine.com (Bryan Robinson)", "description": "In this article, we’ll be building an interactive fiction experience in which a user can insert words that match parts of speech given by the content creator. Let’s go!", "link": "https://smashingmagazine.com/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/", "publishedOn": "2021-10-08T10:00:00.000Z", - "wordCount": 7097, + "wordCount": 7093, "title": "Building A Static-First MadLib Generator With Portable Text And Netlify On-Demand Builder Functions", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d9de142e-09f1-4257-99f5-606cc09b8c00/static-first-madlib-generator-portable-text-netlify-builder-functions.jpg", @@ -192,7 +206,7 @@ "description": "Every once in a while, we publish [freebies](https://www.smashingmagazine.com/category/freebies/) related to different occasions and themes. We hope that with this icon set, every designer will be able to find their own use case and contribute to saving lives. Free for personal and commercial use.", "link": "https://smashingmagazine.com/2021/10/freebie-coronavirus-icon-set/", "publishedOn": "2021-10-07T09:00:00.000Z", - "wordCount": 999, + "wordCount": 1002, "title": "Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ef22f452-44d9-49ae-94f9-c7f1c57a8378/coronavirus.png", @@ -206,7 +220,7 @@ "description": "Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.", "link": "https://smashingmagazine.com/2021/10/guide-debugging-css/", "publishedOn": "2021-10-06T10:00:00.000Z", - "wordCount": 5481, + "wordCount": 5477, "title": "A Guide To CSS Debugging", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/334beb39-13a4-4159-ab77-86c7dac406d8/guide-debugging-css.jpg", @@ -220,7 +234,7 @@ "description": "Have you ever struggled with testing cloud services locally? Specifically, have you ever struggled with locally testing an API that uses API Gateway and Lambda, with the Serverless framework, on AWS? In this article, Tom Hudson shares a quick overview of how easy it is to quickly set up your project to test locally before deploying to AWS.", "link": "https://smashingmagazine.com/2021/10/local-testing-serverless-api-gateway-lambda/", "publishedOn": "2021-10-05T10:00:00.000Z", - "wordCount": 1802, + "wordCount": 1791, "title": "Local Testing A Serverless API (API Gateway And Lambda)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d43ff4a2-4767-4595-9f46-f1ca18f64060/local-testing-serverless-api-gateway-lambda.jpg", @@ -234,7 +248,7 @@ "description": "In this article, we’ll be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!", "link": "https://smashingmagazine.com/2021/10/build-expandable-accessible-gallery/", "publishedOn": "2021-10-04T10:00:00.000Z", - "wordCount": 2613, + "wordCount": 2612, "title": "How To Build An Expandable Accessible Gallery", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8271f985-0b13-4db2-afd6-3f6026272fc2/build-expandable-accessible-gallery.jpg", @@ -248,7 +262,7 @@ "description": "Many websites have some sort of search feature because it helps users navigate through their content easily. Implementing it the right way can be tricky and might not give a good user experience. In this tutorial, we will be integrating Algolia, a popular and powerful search service for the best experience on our Nuxt site.", "link": "https://smashingmagazine.com/2021/10/search-functionality-nuxt-app-algolia-instantsearch/", "publishedOn": "2021-10-01T10:00:00.000Z", - "wordCount": 4902, + "wordCount": 4899, "title": "How To Implement Search Functionality In Your Nuxt App Using Algolia InstantSearch", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/584ac63f-f493-4e93-8d6a-5e6bc640d7ea/search-functionality-nuxt-app-algolia-instantsearch.jpg", @@ -276,7 +290,7 @@ "description": "In this article, we’ll highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing. We’ll compare what’s possible at high-quality, low-quality and file-size targets.", "link": "https://smashingmagazine.com/2021/09/modern-image-formats-avif-webp/", "publishedOn": "2021-09-29T08:25:00.000Z", - "wordCount": 5052, + "wordCount": 5051, "title": "Using Modern Image Formats: AVIF And WebP", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/67b6e428-ea96-41b4-baf2-6be51577910d/modern-image-formats-avif-webp.jpg", @@ -290,7 +304,7 @@ "description": "You can find Markdown in many places on the Internet. This article covers different aspects of Markdown and how it interacts with other technology.", "link": "https://smashingmagazine.com/2021/09/improving-accessibility-of-markdown/", "publishedOn": "2021-09-28T09:00:00.000Z", - "wordCount": 3873, + "wordCount": 3867, "title": "Improving The Accessibility Of Your Markdown", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fa95c8d2-8322-4766-ac8d-891dabff0dd6/improving-accessibility-of-markdown.jpg", @@ -304,7 +318,7 @@ "description": "Is end-to-end testing a painful topic for you? In this article, Ramona Schwering explains how to handle end-to-end testing with Cypress and make it make it not so tedious and expensive for yourself, but fun instead.", "link": "https://smashingmagazine.com/2021/09/cypress-end-to-end-testing/", "publishedOn": "2021-09-27T11:30:00.000Z", - "wordCount": 4955, + "wordCount": 4967, "title": "Let’s Dive Into Cypress For End-to-End Testing", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c42e65f-5a60-4844-a252-00169b21ab0c/cypress-end-to-end-testing.jpg", @@ -318,7 +332,7 @@ "description": "We made the switch from a more traditional integrated e-commerce platform to a headless platform with Next.js. Here are the most important lessons learned while rebuilding a large e-commerce site with Next.js.", "link": "https://smashingmagazine.com/2021/09/lessons-learned-ecommerce-nextjs-case-study/", "publishedOn": "2021-09-24T10:00:00.000Z", - "wordCount": 3805, + "wordCount": 3793, "title": "Rebuilding A Large E-Commerce Website With Next.js (Case Study)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f1d9e62-ec85-435a-8899-56ac48b4190b/lessons-learned-ecommerce-nextjs.jpg", @@ -346,7 +360,7 @@ "description": "The new CSS `accent-color` property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this article we’ll take a look at what it does and how to use it alongside `color-scheme` for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.", "link": "https://smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/", "publishedOn": "2021-09-23T11:00:00.000Z", - "wordCount": 2156, + "wordCount": 2154, "title": "Simplifying Form Styles With `accent-color`", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/195a9e83-5686-47fd-80d9-3c1d6dc4655a/simplifying-form-styles-accent-color.jpg", @@ -374,7 +388,7 @@ "description": "Building a development environment with the shell as a keystone offers multiple benefits. You can customize everything depending on your own needs, and the biggest of all, you can control your entire development environment with your keyboard.", "link": "https://smashingmagazine.com/2021/09/mouseless-development-environment/", "publishedOn": "2021-09-21T11:30:00.000Z", - "wordCount": 4151, + "wordCount": 4149, "title": "How To Build Your Own Mouseless Development Environment", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5c58e67b-deff-4745-b162-f60f468469ac/mouseless-development-environment.jpg", @@ -416,7 +430,7 @@ "description": "Gatsby Functions provide front-end developers a way to write and use server-side code without the hassle of maintaining a server. If making money from open-source is of interest to you and your site isn’t built using Gatsby, this approach may well be the answer you were looking for.", "link": "https://smashingmagazine.com/2021/09/monetize-open-source-software-gatsby-functions-stripe/", "publishedOn": "2021-09-17T09:00:00.000Z", - "wordCount": 2579, + "wordCount": 2581, "title": "Monetize Open-Source Software With Gatsby Functions And Stripe", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/73f6525b-6678-4db1-a875-16150bc822cd/monetize-open-source-software-gatsby-functions-stripe.jpg", @@ -430,7 +444,7 @@ "description": "Twenty years ago, Elie Sloïm chose to dedicate his professional life to web quality assurance. He started asking, ”What does quality mean for a web user?” Well, this article explains everything he has learned along the way.", "link": "https://smashingmagazine.com/2021/09/journey-into-web-quality-assurance/", "publishedOn": "2021-09-16T12:00:00.000Z", - "wordCount": 4511, + "wordCount": 4513, "title": "Web Quality Assurance: From User Requirements To Web Risk Management", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/da816ee2-199c-49e8-8f63-f50d1fb5adb7/journey-into-web-quality-assurance.jpg", @@ -458,7 +472,7 @@ "description": "For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties.", "link": "https://smashingmagazine.com/2021/09/reducing-need-pseudo-elements/", "publishedOn": "2021-09-15T10:00:00.000Z", - "wordCount": 1940, + "wordCount": 1941, "title": "Reducing The Need For Pseudo-Elements", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c994e024-5695-4cf7-b9b6-dc589e547f19/reducing-need-pseudo-elements.jpg", @@ -472,7 +486,7 @@ "description": "When designing for digital spaces, it’s natural to default to digital mockup tools, but doing so cuts out a world of possibilities. Analog drawing can unleash your imagination and allow you to focus on what’s most important at the start: the ideas.", "link": "https://smashingmagazine.com/2021/09/power-pen-paper-sketching/", "publishedOn": "2021-09-14T09:30:00.000Z", - "wordCount": 2095, + "wordCount": 2084, "title": "The Power Of Pen And Paper Sketching", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e4a5bd0b-53db-40c2-90d9-9d0a19b8d377/power-pen-paper-sketching.jpg", @@ -486,27 +500,13 @@ "description": "There are way too many options in Web Animations API to pick them up that easily. Learning how timing works and how to control the playback of several animations at once makes for a solid foundation on which to base your projects on.", "link": "https://smashingmagazine.com/2021/09/orchestrating-complexity-web-animations-api/", "publishedOn": "2021-09-13T09:00:00.000Z", - "wordCount": 3005, + "wordCount": 3004, "title": "Orchestrating Complexity With Web Animations API", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cc4a9b5f-fd83-4fc0-9966-6f98707d1466/orchestrating-complexity-web-animations-api.jpg", "length": "0", "type": "image/jpg" } - }, - { - "id": "https://smashingmagazine.com/2021/09/web-design-done-well-excellent-editorial/", - "author": "hello@smashingmagazine.com (Frederick O’Brien)", - "description": "They say content is king, and they’re right. The web has unlocked untold possibilities for storytellers — provided the story is right, of course. Here are some of our favorite examples of editorial content thriving in the digital realm.", - "link": "https://smashingmagazine.com/2021/09/web-design-done-well-excellent-editorial/", - "publishedOn": "2021-09-10T10:00:00.000Z", - "wordCount": 2045, - "title": "Web Design Done Well: Excellent Editorial", - "enclosure": { - "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7af3bbbe-821b-4e3c-870a-f8290ed52212/web-design-done-well-excellent-editorial.jpg", - "length": "0", - "type": "image/jpg" - } } ] }, diff --git a/feed.atom b/feed.atom index a165da3..7dd3825 100644 --- a/feed.atom +++ b/feed.atom @@ -1,10 +1,20 @@ - urn:2021-10-09T00:40:50.466Z + urn:2021-10-10T00:43:53.870Z osmos::feed - 2021-10-09T00:40:50.466Z + 2021-10-10T00:43:53.870Z osmosfeed 1.11.2 + + <![CDATA[Composable CSS Animation In Vue With AnimXYZ]]> + https://smashingmagazine.com/2021/10/composable-css-animation-vue-animxyz/ + + 2021-10-09T10:00:00.000Z + + + hello@smashingmagazine.com (Ejiro Asiuwhu) + + <![CDATA[The Case for ‘Developer Experience’]]> https://css-tricks.com/?p=353429 @@ -540,14 +550,4 @@ Thank you @ad-m]]> hello@smashingmagazine.com (Kirill Myshkin) - - <![CDATA[Web Design Done Well: Excellent Editorial]]> - https://smashingmagazine.com/2021/09/web-design-done-well-excellent-editorial/ - - 2021-09-10T10:00:00.000Z - - - hello@smashingmagazine.com (Frederick O’Brien) - - \ No newline at end of file diff --git a/index.html b/index.html index b99c620..13a872e 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,28 @@ +
+

+ +

-
-

- -