Skip to content

Commit e9eab7a

Browse files
codercatdevcodercatdev
committed
add podcasts (#473)
1 parent b2476f8 commit e9eab7a

File tree

3 files changed

+230
-11
lines changed
  • apps/codingcatdev/src/routes/(content-single)/(non-course)
    • podcast
      • 3-13-radix-svelte
      • 3-14-adam-argyle-presents-css-features-for-2023-and-beyond
    • post/content-modeling-in-a-headless-cms-vs-a-traditional-webcms

3 files changed

+230
-11
lines changed

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/3-13-radix-svelte/+page.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
type: podcast
3+
authors:
4+
- alex-patterson
5+
- brittney-postma
6+
episode: 13
7+
recording_date: April 26, 2023 2:15 PM
8+
season: 3
9+
published: published
10+
podcast: CodingCat.dev
11+
chapters_done: true
12+
cloudinary_convert: false
13+
cover: https://media.codingcat.dev/image/upload/v1682536815/main-codingcatdev-photo/radix-svelte-with-Thomas-G.-Lopes.jpg
14+
devto: 'https://dev.to/codingcatdev/313-radix-svelte-with-thomas-g-lopes-1fgh'
15+
excerpt: 'Thomas speaks about his component project of radix-svelte and digs into the code and stack he used to make it.'
16+
guests:
17+
- thomas-g-lopes
18+
hashnode: 'https://hashnode.codingcat.dev/podcast-radix-svelte-with-Thomas-G.-Lopes'
19+
picks:
20+
[
21+
{
22+
author: 'thomas-g-lopes',
23+
name: 'Zag - UI components powered by Finite State Machines',
24+
site: 'https://zagjs.com/'
25+
},
26+
{
27+
author: 'alex-patterson',
28+
name: 'Warm Desk Pad, Desk Heating Pad Office',
29+
site: 'https://www.amazon.com/Heating-Office-Levels-Shut-Off-Winter/dp/B0BFWC9NMJ/'
30+
},
31+
{
32+
author: 'alex-patterson',
33+
name: 'Flexsearch',
34+
site: 'https://github.com/nextapps-de/flexsearch/'
35+
},
36+
{
37+
author: 'brittney-postma',
38+
name: 'The Diplomat',
39+
site: 'https://www.netflix.com/title/81288983'
40+
}
41+
]
42+
slug: 3-13-radix-svelte
43+
sponsors:
44+
- storyblok
45+
spotify: https://open.spotify.com/episode/4SAsokvKggpNLQ7FRVedin?si=f7iGczACQLS6prWsNr7pfg
46+
start: May 24, 2023
47+
title: 'radix-svelte with Thomas G. Lopes'
48+
youtube: https://youtu.be/h8DLp6CdRcQ
49+
---
50+
51+
## Questions
52+
53+
1. Can you tell us more about yourself?
54+
2. Do you take inspiration from Pink, Appwrite’s design system?
55+
3. Is Radix a design system or just a component library?
56+
4. How do you decide which components to build?
57+
5. What tools do you use?
58+
1. Stack
59+
2. Component Creation
60+
3. Testing
61+
6. Svelte Package command
62+
7. What are some of your struggles?
63+
64+
## Links
65+
66+
- [radix-svelte](https://www.radix-svelte.com/)
67+
- [radix-svelte Docs](https://www.radix-svelte.com/docs/accordion)
68+
- [Appwrite Pink](https://pink.appwrite.io/)

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond/+page.md

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
---
2+
type: podcast
3+
authors:
4+
- alex-patterson
5+
- brittney-postma
6+
episode: 14
7+
recording_date: April 26, 2023 2:15 PM
8+
season: 3
9+
published: published
10+
podcast: CodingCat.dev
11+
chapters_done: true
12+
cloudinary_convert: false
13+
cover: https://media.codingcat.dev/image/upload/v1682536815/main-codingcatdev-photo/Adam-Argyle-Presents-CSS-Features-for-2023-and-beyond%21.jpg
14+
devto: 'https://dev.to/codingcatdev/314-adam-argyle-presents-css-features-for-2023-and-beyond-1pal'
15+
excerpt: 'Adam helps reveal some CSS features that will elevate your code and help you push forward.'
16+
guests:
17+
- adam-argyle
18+
hashnode: 'https://hashnode.codingcat.dev/podcast-Adam-Argyle-Presents-CSS-Features-for-2023-and-beyond!'
19+
picks:
20+
[
21+
{ author: 'adam-argyle', name: 'gradient.style', site: 'https://gradient.style/' },
22+
{ author: 'alex-patterson', name: 'SST', site: 'https://sst.dev/' },
23+
{ author: 'brittney-postma', name: 'Svelte Lab', site: 'https://www.sveltelab.dev/' },
24+
{ author: 'brittney-postma', name: 'Elk Zone', site: 'https://elk.zone/home' },
25+
{
26+
author: 'brittney-postma',
27+
name: 'Intrinsic CSS with Container Queries and Units with Miriam Suzanne',
28+
site: 'https://www.youtube.com/watch?v=uumZV98zHt8'
29+
}
30+
]
31+
slug: 3-14-adam-argyle-presents-css-features-for-2023-and-beyond
32+
sponsors:
33+
- storyblok
34+
spotify: https://open.spotify.com/episode/2bhJfSymEtb9KHpSVVPOVf?si=fTlzCVMiRumuns93u-0lGQ
35+
start: May 31, 2023
36+
title: 'Adam Argyle Presents CSS Features for 2023 and beyond!'
37+
youtube: https://youtu.be/RxVJ2Oj1IWk
38+
---
39+
40+
## Questions
41+
42+
1. Can you tell us more about yourself?
43+
2. Last time we talked was December 2021, how is [Open Props](https://open-props.style/) doing?
44+
3. What will you be doing for Google I/O this year?
45+
4. Next Gen Color?
46+
5. Tell us about [gradient.style](http://gradient.style)
47+
48+
## Links
49+
50+
- [Card Stacks](https://gui-challenges.web.app/card-stack/dist/)
51+
- [Nerdy.dev](https://nerdy.dev/)
52+
- [6 CSS snippets every front-end developer should know in 2023](https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/)
53+
54+
### At Container Query
55+
56+
`@container` is a new css selector
57+
58+
```css
59+
.panel {
60+
container: layers-panel / inline-size;
61+
}
62+
63+
.card {
64+
padding: 1rem;
65+
}
66+
67+
@container layers-panel (min-width: 20rem) {
68+
.card {
69+
padding: 2rem;
70+
}
71+
}
72+
```
73+
74+
## Scroll Snap
75+
76+
Well orchestrated scroll experiences set your experience apart from the rest, and [scroll snap](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type)
77+
 is the perfect way to match system scroll UX while providing meaningful stopping points.
78+
79+
```css
80+
.snaps {
81+
overflow-x: scroll;
82+
scroll-snap-type: x mandatory;
83+
overscroll-behavior-x: contain;
84+
}
85+
86+
.snap-target {
87+
scroll-snap-align: center;
88+
}
89+
90+
.snap-force-stop {
91+
scroll-snap-stop: always;
92+
}
93+
```
94+
95+
## Grid Pile
96+
97+
[Grid Pile](https://web.dev/shows/gui-challenges/m4DKhRJeYx4/)
98+
99+
```css
100+
.pile {
101+
display: grid;
102+
place-content: center;
103+
}
104+
105+
.pile > * {
106+
grid-area: 1/1;
107+
}
108+
```
109+
110+
## Easy Circle
111+
112+
```css
113+
.circle {
114+
inline-size: 25ch;
115+
aspect-ratio: 1;
116+
border-radius: 50%;
117+
}
118+
```
119+
120+
## Control variants with @layer
121+
122+
You probably have seen this if you are using TailwindCSS
123+
124+
```css
125+
/* file buttons.css */
126+
@layer components.buttons {
127+
.btn.primary {
128+
…
129+
}
130+
}
131+
```
132+
133+
## Memorize less and reach more with logical properties
134+
135+
Memorize this [one new box model](notion://www.notion.so/learn/css/logical-properties/) and [never have to worry](https://css-tricks.com/late-to-logical/) about changing left and right padding or margin for international [writing modes](https://developer.mozilla.org/docs/Web/CSS/writing-mode) and [document directions](https://developer.mozilla.org/docs/Web/CSS/direction) again. Adjust your styles from physical properties to logical ones like [padding-inline](https://developer.mozilla.org/docs/Web/CSS/padding-inline), [margin-inline](https://developer.mozilla.org/docs/Web/CSS/margin-inline), [inset-inline](https://developer.mozilla.org/docs/Web/CSS/inset-inline), and now the browser will do the adjusting work.
136+
137+
```css
138+
button {
139+
padding-inline: 2ch;
140+
padding-block: 1ch;
141+
}
142+
143+
article > p {
144+
text-align: start;
145+
margin-block: 2ch;
146+
}
147+
148+
.something::before {
149+
inset-inline: auto 0;
150+
}
151+
```

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/post/content-modeling-in-a-headless-cms-vs-a-traditional-webcms/+page.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ authors:
55
cloudinary_convert: false
66
cover: 'https://media.codingcat.dev/image/upload/v1684343153/main-codingcatdev-photo/content-modeling-in-a-headless-cms-vs-a-traditional-webcms.png'
77
devto:
8-
excerpt:
8+
excerpt: 'Learn how to model content for Headless CMS'
99
hashnode:
1010
published: published
1111
slug: content-modeling-in-a-headless-cms-vs-a-traditional-webcms
@@ -29,7 +29,7 @@ Like many of you, my first experience with a content management system (CMS) was
2929

3030
In a traditional CMS, the front and back ends are like two cats in a trench coat trying to pass as one human. They're both working towards the same goal, but they're constantly tripping over each other and getting in each other's way. The marketers and content editors are in the front end, trying to create a beautiful and engaging website for the users. The developers are in the back end, trying to keep the website running smoothly and securely. But because they're all sharing the same space, it's a constant battle of who can get their work done first. It's a mess, but somehow it worked in the past.
3131

32-
<aside class="bcu-alert variant-ghost flex flex-col items-start gap-2">
32+
<aside class="flex flex-col items-start gap-2 bcu-alert variant-ghost">
3333
<div class="text-2xl">Traditional CMS Architecture</div>
3434
<ul>
3535
<li>A database for storing data and content
@@ -54,7 +54,7 @@ A headless CMS is a content management system that does not have a built-in fron
5454

5555
As a frontend developer you know the landscape moves very fast and with meta-frameworks like [Astro](https://astro.build/), [Next.js](https://nextjs.org/), [Nuxt](https://nuxtjs.org/), and [SvelteKit](https://kit.svelte.dev/) adding features at a lightning pace, it is hard to keep a Traditional CMS updated with these changes.
5656

57-
<aside class="bcu-alert variant-ghost flex flex-col items-start gap-2">
57+
<aside class="flex flex-col items-start gap-2 bcu-alert variant-ghost">
5858
<div class="text-2xl">Headless CMS Architecture</div>
5959
<ul>
6060
<li>A content management backend (often including text and media)
@@ -125,7 +125,7 @@ When you start to think about this type of modeling start to think of these as b
125125
## Popular Headless CMS Platforms
126126

127127
<section class="flex flex-col gap-2 md:gap-8">
128-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
128+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
129129
<a
130130
target="_blank"
131131
rel="noopener noreferrer"
@@ -141,7 +141,7 @@ When you start to think about this type of modeling start to think of these as b
141141
Amplience provides a very strong set of <a href="https://amplience.com/developers/docs/apis/" target="_blank" rel="noopener noreferrer">API's</a>, that make delivering Media a breeze!
142142
</p>
143143
</div>
144-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
144+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
145145
<a
146146
target="_blank"
147147
rel="noopener noreferrer"
@@ -154,7 +154,7 @@ When you start to think about this type of modeling start to think of these as b
154154
Contentful is API-first, which means that it can be integrated with other systems and applications. It is also designed to be scalable, so it can be used by businesses of all sizes. Contentful is a popular choice for businesses that want to create and deliver content quickly and easily. It is also a good choice for businesses that need to integrate content with other systems and applications.
155155
</p>
156156
</div>
157-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
157+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
158158
<a
159159
target="_blank"
160160
rel="noopener noreferrer"
@@ -167,7 +167,7 @@ When you start to think about this type of modeling start to think of these as b
167167
Contentstack is a composable digital experience platform (DXP) that empowers marketers and developers to deliver digital experiences at the speed of their imagination. It is a cloud-based, API-first platform that offers a wide range of features and capabilities, including content management, delivery, and personalization.
168168
</p>
169169
</div>
170-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
170+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
171171
<a
172172
target="_blank"
173173
rel="noopener noreferrer"
@@ -180,7 +180,7 @@ When you start to think about this type of modeling start to think of these as b
180180
Hygraph is a federated content platform that allows you to build digital experiences the way you envisioned them. Hygraph gives you instant <a href="https://hygraph.com/graphql-headless-cms" target="_blank" rel="noopener noreferrer">GraphQL Content APIs</a> to create, enrich, unify, and deliver your content across platforms. It is a GraphQL-based federated content management system for digital creators and digital products.
181181
</p>
182182
</div>
183-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
183+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
184184
<a
185185
target="_blank"
186186
rel="noopener noreferrer"
@@ -193,7 +193,7 @@ When you start to think about this type of modeling start to think of these as b
193193
Its authoring experience supports content production, modular content reuse, and real-time collaboration and approvals to drive content that's consistent, optimized, and engaging.
194194
</p>
195195
</div>
196-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
196+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
197197
<a
198198
target="_blank"
199199
rel="noopener noreferrer"
@@ -207,7 +207,7 @@ When you start to think about this type of modeling start to think of these as b
207207
You can see hear more on two of our podcast episode's <a href="/podcast/0-4-sanity-io">Sanity.io</a> and <a href="/podcast/1-42-using-content-as-data-with-sanity-io">Using Content as Data with Sanity.io</a>.
208208
</p>
209209
</div>
210-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
210+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
211211
<a
212212
target="_blank"
213213
rel="noopener noreferrer"
@@ -220,7 +220,7 @@ When you start to think about this type of modeling start to think of these as b
220220
Storyblok is a cloud-native, enterprise-grade content management system that is built to scale. Storyblok also has a visual editing experience that makes it easy for anyone to create content, regardless of their technical expertise. Huge thanks goes to Storyblok for being such an amazing <a href="/sponsor/storyblok">sponsor</a>!
221221
</p>
222222
</div>
223-
<div class="bcu-card variant-soft p-2 flex flex-col gap-2">
223+
<div class="flex flex-col gap-2 p-2 bcu-card variant-soft">
224224
<a
225225
target="_blank"
226226
rel="noopener noreferrer"

0 commit comments

Comments
 (0)