diff --git a/cache.json b/cache.json index 3817764..9648fb6 100644 --- a/cache.json +++ b/cache.json @@ -3,11 +3,38 @@ { "href": "https://css-tricks.com/feed/", "articles": [ + { + "description": "In June of 2006, web developers and designers from around the world came to London for the second annual @media conference. The first had been a huge success, and @media 2006 had even more promise. Its speaker lineup was pulled …\nThe post Chapter 8: CSS appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/chapter-8-css/", + "publishedOn": "2021-05-03T21:52:08.000Z", + "wordCount": 6272, + "sourceHref": "https://css-tricks.com/feed/", + "sourceTitle": "CSS-Tricks", + "title": "Chapter 8: CSS" + }, + { + "description": "I hope people think of SVG as a vector format that is good for drawing things. There is plenty more to know, but here’s one more: SVG is good for composition. You draw things at very specific coordinates …\nThe post Swipey Image Grids appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://www.cassie.codes/posts/swipey-image-grids/", + "publishedOn": "2021-05-03T14:35:07.000Z", + "wordCount": 908, + "sourceHref": "https://css-tricks.com/feed/", + "sourceTitle": "CSS-Tricks", + "title": "Swipey Image Grids" + }, + { + "description": "I’m willing to bet you know WebPageTest. It is the premier tool in the toolbox of web performance people. Maybe you didn’t know that WebPageTest was a side project of one fella, Patrick Meenan, for most of its lifetime, …\nThe post WebPageTest API appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/webpagetest-api/", + "publishedOn": "2021-05-03T14:34:53.000Z", + "wordCount": 8905, + "sourceHref": "https://css-tricks.com/feed/", + "sourceTitle": "CSS-Tricks", + "title": "WebPageTest API" + }, { "description": "Yay, it’s here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We’ve had grid-gap support for some time, but true to its name, it’s limited to grid layouts. Now we can use gap in either type …\nThe post Safari 14.1 Adds Support for Flexbox Gaps appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/safari-14-1-adds-support-for-flexbox-gaps/", "publishedOn": "2021-04-30T21:51:08.000Z", - "wordCount": 677, + "wordCount": 749, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "Safari 14.1 Adds Support for Flexbox Gaps" @@ -34,7 +61,7 @@ "description": "Labels are a feature that have existed since the creation of JavaScript. They aren’t new! I don’t think all that many people know about them and I’d even argue they are a bit confusing. But, as we’ll see, labels can …\nThe post You Can Label a JavaScript `if` Statement appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/you-can-label-a-javascript-if-statement/", "publishedOn": "2021-04-30T14:29:32.000Z", - "wordCount": 1856, + "wordCount": 1992, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "You Can Label a JavaScript `if` Statement" @@ -43,7 +70,7 @@ "description": "I’ve got a podcast that will be 10 years old this coming January! Most of those episodes have one or more guests (plus me and Dave). Despite fancy modern options for recording podcasts with guests, like Riverside.fm or Zencastr…\nThe post Sending Large Files appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/sending-large-files/", "publishedOn": "2021-04-29T17:52:55.000Z", - "wordCount": 1649, + "wordCount": 1669, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "Sending Large Files" @@ -52,7 +79,7 @@ "description": "Raygun is an error and performance monitoring software for websites and mobile apps. In the case of websites, you install their JavaScript snippet onto your site, which takes 2 seconds, and now you’ve got monitoring in place. Why? Well now …\nThe post How to Monitor Core Web Vitals and Take Action with Raygun appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/how-to-monitor-core-web-vitals-and-take-action-with-raygun/", "publishedOn": "2021-04-29T17:50:39.000Z", - "wordCount": 764, + "wordCount": 798, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "How to Monitor Core Web Vitals and Take Action with Raygun" @@ -61,7 +88,7 @@ "description": "Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling control, we turn off the list’s markers completely with list-style-type: none, and start …\nThe post List Markers and String Styles appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/list-markers-and-string-styles/", "publishedOn": "2021-04-29T14:32:41.000Z", - "wordCount": 1012, + "wordCount": 1091, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "List Markers and String Styles" @@ -70,7 +97,7 @@ "description": "This post was written for engineering managers, but anyone is welcome to read it.\nLet’s talk for a moment about how we talk about our teams. This might not seem like something that needs a whole article dedicated to it, …\nThe post Your Team is Not “Them” appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/your-team-is-not-them/", "publishedOn": "2021-04-28T19:35:32.000Z", - "wordCount": 1883, + "wordCount": 1922, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "Your Team is Not “Them”" @@ -79,7 +106,7 @@ "description": "Click, drag, release: you’ve just selected some text on a webpage — probably to copy and paste it somewhere or to share it. Wouldn’t it be cool if selecting that text revealed some options that make those tasks easier? That’s …\nThe post How to Create Actions for Selected Text With the Selection API appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/how-to-create-actions-for-selected-text-with-the-selection-api/", "publishedOn": "2021-04-28T14:19:54.000Z", - "wordCount": 1514, + "wordCount": 1560, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "How to Create Actions for Selected Text With the Selection API" @@ -88,7 +115,7 @@ "description": "I was just Hoping for Better Native Page Transitions, and Bramus commented that Chrome is working on something. Looks like it has some fresh enthusiasm for it, as there is a brand new repo, and you can literally test …\nThe post Shared Element Transitions appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/shared-element-transitions/", "publishedOn": "2021-04-27T20:12:04.000Z", - "wordCount": 1092, + "wordCount": 1121, "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "Shared Element Transitions" @@ -110,39 +137,21 @@ "sourceHref": "https://css-tricks.com/feed/", "sourceTitle": "CSS-Tricks", "title": "Exploring color-contrast() for the First Time" - }, - { - "description": "I love to make CSS do stuff it shouldn’t. It’s the type of problem-solving brain training you’d get building a calculator in Minecraft, except you probably won’t get a job working with Minecraft Redstone no matter how good you …\nThe post Generating (and Solving!) Sudokus in CSS appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/generating-and-solving-sudokus-in-css/", - "publishedOn": "2021-04-26T14:05:00.000Z", - "wordCount": 5071, - "sourceHref": "https://css-tricks.com/feed/", - "sourceTitle": "CSS-Tricks", - "title": "Generating (and Solving!) Sudokus in CSS" - }, - { - "description": "Robert Nyman and Philip Jägenstedt:\nGoogle is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid, position: sticky, \n…\nThe post Eliminating five top compatibility pain points on the web appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://web.dev/compat2021/", - "publishedOn": "2021-04-23T20:55:19.000Z", - "wordCount": 1181, - "sourceHref": "https://css-tricks.com/feed/", - "sourceTitle": "CSS-Tricks", - "title": "Eliminating five top compatibility pain points on the web" - }, - { - "description": "In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The project was done following the ongoing developmental version of WPGraphQL and an excellent tutorial by Henrik …\nThe post Using New Gatsby Source WordPress Plugin appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/using-new-gatsby-source-wordpress-plugin/", - "publishedOn": "2021-04-23T14:03:18.000Z", - "wordCount": 6095, - "sourceHref": "https://css-tricks.com/feed/", - "sourceTitle": "CSS-Tricks", - "title": "Using New Gatsby Source WordPress Plugin" } ] }, { "href": "https://www.smashingmagazine.com/feed/", "articles": [ + { + "description": "Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever.", + "link": "https://smashingmagazine.com/2021/05/evolution-jamstack/", + "publishedOn": "2021-05-03T07:00:00.000Z", + "wordCount": 2141, + "sourceHref": "https://www.smashingmagazine.com/feed/", + "sourceTitle": "Articles on Smashing Magazine — For Web Designers And Developers", + "title": "The Evolution Of Jamstack" + }, { "description": "Do you need a little inspiration boost? Well, then our new collection of wallpapers is for you. Designed with love by the community for the community, the wallpapers are available with and without a calendar for May 2021.", "link": "https://smashingmagazine.com/2021/04/desktop-wallpaper-calendars-may-2021/", @@ -346,6 +355,42 @@ { "href": "https://www.freecodecamp.org/news/rss/", "articles": [ + { + "description": "Let's go through the five best ways that you can fetch data with React from a GraphQL API. While there are a couple of popular libraries which are made to interact with GraphQL APIs from a React application, there are many different ways to fetch data with GraphQL. I've included", + "link": "https://www.freecodecamp.org/news/5-ways-to-fetch-data-react-graphql/", + "publishedOn": "2021-05-03T17:20:56.000Z", + "wordCount": 2495, + "sourceHref": "https://www.freecodecamp.org/news/rss/", + "sourceTitle": "freeCodeCamp.org", + "title": "How to Fetch Data in React from a GraphQL API" + }, + { + "description": "In this article, we'll see some of the common mistakes that React developers make, and how you can avoid them. So let's get started. Don't Forget that Every Route Change Mounts and Unmounts a ComponentWhenever you're using routing in a React application, you declare routes inside the Switch component. This", + "link": "https://www.freecodecamp.org/news/common-mistakes-react-developers-make-and-how-to-fix-them/", + "publishedOn": "2021-05-03T16:40:08.000Z", + "wordCount": 1158, + "sourceHref": "https://www.freecodecamp.org/news/rss/", + "sourceTitle": "freeCodeCamp.org", + "title": "Common Mistakes React Developers Make – And How to Fix Them" + }, + { + "description": "Cross Site Request Forgery, or CSRF occurs when a malicious site or program causes a user's browser to perform an unwanted action on a trusted site when the user is authenticated. Any malicious action is limited to the capability of the website to which the user is authenticated. For example,", + "link": "https://www.freecodecamp.org/news/what-is-cross-site-request-forgery/", + "publishedOn": "2021-05-03T16:13:55.000Z", + "wordCount": 1398, + "sourceHref": "https://www.freecodecamp.org/news/rss/", + "sourceTitle": "freeCodeCamp.org", + "title": "Cross Site Request Forgery – What is a CSRF Attack and How to Prevent It" + }, + { + "description": "You can learn everything you need to know to earn the Azure Administrator Certification by completing this free 11-hour course. What is Microsoft Azure Administrator?The Azure Administrator is the most popular Azure certification because it provides the broadest amount of practical knowledge to manage Azure infrastructure. It also allows", + "link": "https://www.freecodecamp.org/news/azure-administrator-certification-az-104-pass-the-exam-with-this-free-11-hour-course/", + "publishedOn": "2021-05-03T15:31:42.000Z", + "wordCount": 890, + "sourceHref": "https://www.freecodecamp.org/news/rss/", + "sourceTitle": "freeCodeCamp.org", + "title": "Azure Administrator Certification (AZ-104) – Pass the Exam With This Free 11-Hour Course" + }, { "description": "These days, computers can pretty much do anything. Now if you are a frequent computer user like I am, I'm sure you interact with the keyboard all the time. And in this article, I'm going to show you some helpful keyboard shortcuts that will make your work easier", "link": "https://www.freecodecamp.org/news/keyboard-shortcuts-improve-productivity/", @@ -399,42 +444,6 @@ "sourceHref": "https://www.freecodecamp.org/news/rss/", "sourceTitle": "freeCodeCamp.org", "title": "JavaScript Execution Context and Hoisting Explained with Code Examples" - }, - { - "description": "Hi! Welcome. If you are learning Python, then this article is for you. You will find a thorough description of Python syntax and lots of code examples to guide you during your coding journey. What we will cover:Variable Definitions in PythonHello, World! Program in PythonData Types and Built-in Data", - "link": "https://www.freecodecamp.org/news/python-code-examples-sample-script-coding-tutorial-for-beginners/", - "publishedOn": "2021-04-27T19:55:23.000Z", - "wordCount": 12960, - "sourceHref": "https://www.freecodecamp.org/news/rss/", - "sourceTitle": "freeCodeCamp.org", - "title": "Python Code Examples – Sample Script Coding Tutorial for Beginners" - }, - { - "description": "Hello, everyone! In this article we are going to learn how to add the Realm database to an iOS app. We'll create a simple ToDo app so you can learn how to perform CRUD (Create, Read, Update, Delete) operations in the Realm database. What is Realm?Realm is an open-source", - "link": "https://www.freecodecamp.org/news/add-realm-database-to-ios-crud-app-with-with-swift/", - "publishedOn": "2021-04-27T18:21:00.000Z", - "wordCount": 1815, - "sourceHref": "https://www.freecodecamp.org/news/rss/", - "sourceTitle": "freeCodeCamp.org", - "title": "How to Add the Realm Database to an iOS CRUD App using Swift" - }, - { - "description": "What is Lazy Loading?Lazy loading is the process of loading components, modules, or other assets of a website as they're required. Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be", - "link": "https://www.freecodecamp.org/news/lazy-loading-in-angular-intro-to-ngmodules/", - "publishedOn": "2021-04-27T18:17:43.000Z", - "wordCount": 1178, - "sourceHref": "https://www.freecodecamp.org/news/rss/", - "sourceTitle": "freeCodeCamp.org", - "title": "Lazy Loading in Angular – A Beginner's Guide to NgModules" - }, - { - "description": "In this article, we will build a React application using class components. Then we'll convert it to functional components using React Hooks in a step-by-step way. By building this app, you will learn: How to make API callsHow to implement load more functionalityHow to debug application issuesHow to use async/", - "link": "https://www.freecodecamp.org/news/build-a-react-application-with-load-more-functionality-react-hooks/", - "publishedOn": "2021-04-27T18:12:22.000Z", - "wordCount": 3778, - "sourceHref": "https://www.freecodecamp.org/news/rss/", - "sourceTitle": "freeCodeCamp.org", - "title": "How to Build a React Application with Load More Functionality using React Hooks" } ] } diff --git a/index.html b/index.html index 7aaa9f3..c6aae26 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,112 @@ +
+

2021-05-03

+ +

CSS-Tricks

+
+ +
+
+ Chapter 8: CSS +
+

In June of 2006, web developers and designers from around the world came to London for the second annual @media conference. The first had been a huge success, and @media 2006 had even more promise. Its speaker lineup was pulled … +The post Chapter 8: CSS appeared first on CSS-Tricks. +You can support CSS-Tricks by being an MVP Supporter.

+ Read · 21 min +
+
+
+ +
+
+ Swipey Image Grids +
+

I hope people think of SVG as a vector format that is good for drawing things. There is plenty more to know, but here’s one more: SVG is good for composition. You draw things at very specific coordinates … +The post Swipey Image Grids appeared first on CSS-Tricks. +You can support CSS-Tricks by being an MVP Supporter.

+ Read · 3 min +
+
+
+ +
+
+ WebPageTest API +
+

I’m willing to bet you know WebPageTest. It is the premier tool in the toolbox of web performance people. Maybe you didn’t know that WebPageTest was a side project of one fella, Patrick Meenan, for most of its lifetime, … +The post WebPageTest API appeared first on CSS-Tricks. +You can support CSS-Tricks by being an MVP Supporter.

+ Read · 30 min +
+
+
+
+ + +

freeCodeCamp.org

+
+ +
+
+ How to Fetch Data in React from a GraphQL API +
+

Let's go through the five best ways that you can fetch data with React from a GraphQL API. While there are a couple of popular libraries which are made to interact with GraphQL APIs from a React application, there are many different ways to fetch data with GraphQL. I've included

+ Read · 8 min +
+
+
+ +
+
+ Common Mistakes React Developers Make – And How to Fix Them +
+

In this article, we'll see some of the common mistakes that React developers make, and how you can avoid them. So let's get started. Don't Forget that Every Route Change Mounts and Unmounts a ComponentWhenever you're using routing in a React application, you declare routes inside the Switch component. This

+ Read · 4 min +
+
+
+ +
+
+ Cross Site Request Forgery – What is a CSRF Attack and How to Prevent It +
+

Cross Site Request Forgery, or CSRF occurs when a malicious site or program causes a user's browser to perform an unwanted action on a trusted site when the user is authenticated. Any malicious action is limited to the capability of the website to which the user is authenticated. For example,

+ Read · 5 min +
+
+
+ +
+
+ Azure Administrator Certification (AZ-104) – Pass the Exam With This Free 11-Hour Course +
+

You can learn everything you need to know to earn the Azure Administrator Certification by completing this free 11-hour course. What is Microsoft Azure Administrator?The Azure Administrator is the most popular Azure certification because it provides the broadest amount of practical knowledge to manage Azure infrastructure. It also allows

+ Read · 3 min +
+
+
+
+ + +

Articles on Smashing Magazine — For Web Designers And Developers

+
+ +
+
+ The Evolution Of Jamstack +
+

Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever.

+ Read · 7 min +
+
+
+
+ +
+ +

2021-04-30

@@ -62,7 +168,7 @@ You can support CSS-Tricks by being an MVP Supporter.

Labels are a feature that have existed since the creation of JavaScript. They aren’t new! I don’t think all that many people know about them and I’d even argue they are a bit confusing. But, as we’ll see, labels can … The post You Can Label a JavaScript `if` Statement appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

- Read · 6 min + Read · 7 min @@ -139,7 +245,7 @@ You can support CSS-Tricks by being an MVP Supporter.

I’ve got a podcast that will be 10 years old this coming January! Most of those episodes have one or more guests (plus me and Dave). Despite fancy modern options for recording podcasts with guests, like Riverside.fm or Zencastr… The post Sending Large Files appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

- Read · 5 min + Read · 6 min @@ -163,7 +269,7 @@ You can support CSS-Tricks by being an MVP Supporter.

Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling control, we turn off the list’s markers completely with list-style-type: none, and start … The post List Markers and String Styles appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

- Read · 3 min + Read · 4 min @@ -277,46 +383,6 @@ You can support CSS-Tricks by being an MVP Supporter.

- -
-
- Python Code Examples – Sample Script Coding Tutorial for Beginners -
-

Hi! Welcome. If you are learning Python, then this article is for you. You will find a thorough description of Python syntax and lots of code examples to guide you during your coding journey. What we will cover:Variable Definitions in PythonHello, World! Program in PythonData Types and Built-in Data

- Read · 43 min -
-
-
- -
-
- How to Add the Realm Database to an iOS CRUD App using Swift -
-

Hello, everyone! In this article we are going to learn how to add the Realm database to an iOS app. We'll create a simple ToDo app so you can learn how to perform CRUD (Create, Read, Update, Delete) operations in the Realm database. What is Realm?Realm is an open-source

- Read · 6 min -
-
-
- -
-
- Lazy Loading in Angular – A Beginner's Guide to NgModules -
-

What is Lazy Loading?Lazy loading is the process of loading components, modules, or other assets of a website as they're required. Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be

- Read · 4 min -
-
-
- -
-
- How to Build a React Application with Load More Functionality using React Hooks -
-

In this article, we will build a React application using class components. Then we'll convert it to functional components using React Hooks in a step-by-step way. By building this app, you will learn: How to make API callsHow to implement load more functionalityHow to debug application issuesHow to use async/

- Read · 13 min -
-
-
@@ -383,18 +449,6 @@ You can support CSS-Tricks by being an MVP Supporter.

- -
-
- Generating (and Solving!) Sudokus in CSS -
-

I love to make CSS do stuff it shouldn’t. It’s the type of problem-solving brain training you’d get building a calculator in Minecraft, except you probably won’t get a job working with Minecraft Redstone no matter how good you … -The post Generating (and Solving!) Sudokus in CSS appeared first on CSS-Tricks. -You can support CSS-Tricks by being an MVP Supporter.

- Read · 17 min -
-
-
@@ -418,37 +472,6 @@ You can support CSS-Tricks by being an MVP Supporter.

2021-04-23

-

CSS-Tricks

-
- -
-
- Eliminating five top compatibility pain points on the web -
-

Robert Nyman and Philip Jägenstedt: -Google is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid, position: sticky,  -… -The post Eliminating five top compatibility pain points on the web appeared first on CSS-Tricks. -You can support CSS-Tricks by being an MVP Supporter.

- Read · 4 min -
-
-
- -
-
- Using New Gatsby Source WordPress Plugin -
-

In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The project was done following the ongoing developmental version of WPGraphQL and an excellent tutorial by Henrik … -The post Using New Gatsby Source WordPress Plugin appeared first on CSS-Tricks. -You can support CSS-Tricks by being an MVP Supporter.

- Read · 20 min -
-
-
-
- -

Articles on Smashing Magazine — For Web Designers And Developers

@@ -766,7 +789,7 @@ You can support CSS-Tricks by being an MVP Supporter.