Skip to content

Commit 6d72bdc

Browse files
author
Nikos Katsikanis
committed
importing
1 parent 8963482 commit 6d72bdc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+3843
-0
lines changed

‎AGENTS.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Importing patterns from /importing which come from battle tested usage of vanillajs patterns. Its not to be used as a library but as a reference when adding to the core patterns.
2+

‎importing/blog/1-exploring-vanilla-js/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!--File: index.html-->
2+
3+
<!doctype html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>Exploring Vanilla JS Patterns - Nikos Katsikanis Blog</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<meta property="og:title" content="Exploring Vanilla JS Patterns">
10+
<meta property="og:description" content="Vanilla JavaScript offers complete control over your codebase. When you understand every line you ship, you can craft the user experience exactly the way you want. Using simple, consistent patterns…">
11+
<meta property="og:image" content="https://nikoskatsikanis.com/img/v.png">
12+
<meta property="og:url" content="https://nikoskatsikanis.com/blog/1-exploring-vanilla-js">
13+
<meta property="twitter:title" content="Exploring Vanilla JS Patterns">
14+
<meta property="twitter:description" content="Vanilla JavaScript offers complete control over your codebase. When you understand every line you ship, you can craft the user experience exactly the way you want. Using simple, consistent patterns…">
15+
<meta property="twitter:image" content="https://nikoskatsikanis.com/img/v.png">
16+
<meta property="twitter:url" content="https://nikoskatsikanis.com/blog/1-exploring-vanilla-js">
17+
<meta name="twitter:card" content="summary_large_image">
18+
<link rel="icon" href="data:,">
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
20+
<link rel="stylesheet" href="/css/reset.css">
21+
<link rel="stylesheet" href="/css/utility.css">
22+
<link rel="stylesheet" href="/css/common.css">
23+
<link rel="stylesheet" href="/css/form.css">
24+
<link rel="stylesheet" href="/css/button-badge.css">
25+
<link rel="stylesheet" href="/css/typography.css">
26+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
27+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
28+
29+
<script src="/js/store.js" defer="" type="module"></script>
30+
<script src="/js/componentLoader.js" defer="" type="module"></script>
31+
<meta property="twitter:card" content="summary_large_image"></head>
32+
33+
<body class="flex flex-col">
34+
<!-- wrapper that takes remaining space -->
35+
<div class="site-container flex flex-col" style="flex: 1">
36+
<!--
37+
<nav data-component="nav"></nav>
38+
-->
39+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
40+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
41+
<!--components in /pages that will be fetched by router when user clicks on a -->
42+
</main>
43+
<div class="flex justify-center">
44+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
45+
Like this site? I wrote the framework -&gt; Fork me on GitHub
46+
</a>
47+
</div>
48+
</div>
49+
<footer>
50+
<span>Copyright Nikos Katsikanis LTD</span>
51+
<div data-component="theme-switcher"></div>
52+
</footer>
53+
<!--File: index.html-->
54+
55+
56+
57+
</body>
58+
</html>

‎importing/blog/2-kodex-and-gpt/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!--File: index.html-->
2+
3+
<!doctype html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>Using Codex and GPT Together - Nikos Katsikanis Blog</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<meta property="og:title" content="Using Codex and GPT Together">
10+
<meta property="og:description" content="OpenAI Codex excels at tackling big-picture features or repetitive tasks. It can refactor an entire project in a targeted way or apply metadata consistently across all files with a single…">
11+
<meta property="og:image" content="https://nikoskatsikanis.com/img/nikos.jpg">
12+
<meta property="og:url" content="https://nikoskatsikanis.com/blog/2-kodex-and-gpt">
13+
<meta property="twitter:title" content="Using Codex and GPT Together">
14+
<meta property="twitter:description" content="OpenAI Codex excels at tackling big-picture features or repetitive tasks. It can refactor an entire project in a targeted way or apply metadata consistently across all files with a single…">
15+
<meta property="twitter:image" content="https://nikoskatsikanis.com/img/nikos.jpg">
16+
<meta property="twitter:url" content="https://nikoskatsikanis.com/blog/2-kodex-and-gpt">
17+
<meta name="twitter:card" content="summary_large_image">
18+
<link rel="icon" href="data:,">
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
20+
<link rel="stylesheet" href="/css/reset.css">
21+
<link rel="stylesheet" href="/css/utility.css">
22+
<link rel="stylesheet" href="/css/common.css">
23+
<link rel="stylesheet" href="/css/form.css">
24+
<link rel="stylesheet" href="/css/button-badge.css">
25+
<link rel="stylesheet" href="/css/typography.css">
26+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
27+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
28+
29+
<script src="/js/store.js" defer="" type="module"></script>
30+
<script src="/js/componentLoader.js" defer="" type="module"></script>
31+
<meta property="twitter:card" content="summary_large_image"></head>
32+
33+
<body class="flex flex-col">
34+
<!-- wrapper that takes remaining space -->
35+
<div class="site-container flex flex-col" style="flex: 1">
36+
<!--
37+
<nav data-component="nav"></nav>
38+
-->
39+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
40+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
41+
<!--components in /pages that will be fetched by router when user clicks on a -->
42+
</main>
43+
<div class="flex justify-center">
44+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
45+
Like this site? I wrote the framework -&gt; Fork me on GitHub
46+
</a>
47+
</div>
48+
</div>
49+
<footer>
50+
<span>Copyright Nikos Katsikanis LTD</span>
51+
<div data-component="theme-switcher"></div>
52+
</footer>
53+
<!--File: index.html-->
54+
55+
56+
57+
</body>
58+
</html>

‎importing/blog/3-how-this-blog-works/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!--File: index.html-->
2+
3+
<!doctype html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>How This Blog Works - Nikos Katsikanis Blog</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<meta property="og:title" content="How This Blog Works">
10+
<meta property="og:description" content="This blog is built entirely with Vanilla JavaScript modules. There are no build tools, no frameworks, and no server-side rendering. Each route is a plain HTML page that loads a…">
11+
<meta property="og:image" content="https://nikoskatsikanis.com/img/no_wp.jpg">
12+
<meta property="og:url" content="https://nikoskatsikanis.com/blog/3-how-this-blog-works">
13+
<meta property="twitter:title" content="How This Blog Works">
14+
<meta property="twitter:description" content="This blog is built entirely with Vanilla JavaScript modules. There are no build tools, no frameworks, and no server-side rendering. Each route is a plain HTML page that loads a…">
15+
<meta property="twitter:image" content="https://nikoskatsikanis.com/img/no_wp.jpg">
16+
<meta property="twitter:url" content="https://nikoskatsikanis.com/blog/3-how-this-blog-works">
17+
<meta name="twitter:card" content="summary_large_image">
18+
<link rel="icon" href="data:,">
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
20+
<link rel="stylesheet" href="/css/reset.css">
21+
<link rel="stylesheet" href="/css/utility.css">
22+
<link rel="stylesheet" href="/css/common.css">
23+
<link rel="stylesheet" href="/css/form.css">
24+
<link rel="stylesheet" href="/css/button-badge.css">
25+
<link rel="stylesheet" href="/css/typography.css">
26+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
27+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
28+
29+
<script src="/js/store.js" defer="" type="module"></script>
30+
<script src="/js/componentLoader.js" defer="" type="module"></script>
31+
<meta property="twitter:card" content="summary_large_image"></head>
32+
33+
<body class="flex flex-col">
34+
<!-- wrapper that takes remaining space -->
35+
<div class="site-container flex flex-col" style="flex: 1">
36+
<!--
37+
<nav data-component="nav"></nav>
38+
-->
39+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
40+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
41+
<!--components in /pages that will be fetched by router when user clicks on a -->
42+
</main>
43+
<div class="flex justify-center">
44+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
45+
Like this site? I wrote the framework -&gt; Fork me on GitHub
46+
</a>
47+
</div>
48+
</div>
49+
<footer>
50+
<span>Copyright Nikos Katsikanis LTD</span>
51+
<div data-component="theme-switcher"></div>
52+
</footer>
53+
<!--File: index.html-->
54+
55+
56+
57+
</body>
58+
</html>

‎importing/blog/4-harnessing-rails-for-ai-friendly-testable-code/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!--File: index.html-->
2+
3+
<!doctype html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>Harnessing Rails for AI-Friendly, Testable Code - Nikos Katsikanis Blog</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<meta property="og:title" content="Harnessing Rails for AI-Friendly, Testable Code">
10+
<meta property="og:description" content="Rails 8 provides conventions that keep the structure predictable, perfect for tools like OpenAI Codex.">
11+
<meta property="og:image" content="https://nikoskatsikanis.com/img/Ruby_On_Rails_Logo.svg.png">
12+
<meta property="og:url" content="https://nikoskatsikanis.com/blog/4-harnessing-rails-for-ai-friendly-testable-code">
13+
<meta property="twitter:title" content="Harnessing Rails for AI-Friendly, Testable Code">
14+
<meta property="twitter:description" content="Rails 8 provides conventions that keep the structure predictable, perfect for tools like OpenAI Codex.">
15+
<meta property="twitter:image" content="https://nikoskatsikanis.com/img/Ruby_On_Rails_Logo.svg.png">
16+
<meta property="twitter:url" content="https://nikoskatsikanis.com/blog/4-harnessing-rails-for-ai-friendly-testable-code">
17+
<meta name="twitter:card" content="summary_large_image">
18+
<link rel="icon" href="data:,">
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
20+
<link rel="stylesheet" href="/css/reset.css">
21+
<link rel="stylesheet" href="/css/utility.css">
22+
<link rel="stylesheet" href="/css/common.css">
23+
<link rel="stylesheet" href="/css/form.css">
24+
<link rel="stylesheet" href="/css/button-badge.css">
25+
<link rel="stylesheet" href="/css/typography.css">
26+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
27+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
28+
29+
<script src="/js/store.js" defer="" type="module"></script>
30+
<script src="/js/componentLoader.js" defer="" type="module"></script>
31+
<meta property="twitter:card" content="summary_large_image"></head>
32+
33+
<body class="flex flex-col">
34+
<!-- wrapper that takes remaining space -->
35+
<div class="site-container flex flex-col" style="flex: 1">
36+
<!--
37+
<nav data-component="nav"></nav>
38+
-->
39+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
40+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
41+
<!--components in /pages that will be fetched by router when user clicks on a -->
42+
</main>
43+
<div class="flex justify-center">
44+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
45+
Like this site? I wrote the framework -&gt; Fork me on GitHub
46+
</a>
47+
</div>
48+
</div>
49+
<footer>
50+
<span>Copyright Nikos Katsikanis LTD</span>
51+
<div data-component="theme-switcher"></div>
52+
</footer>
53+
<!--File: index.html-->
54+
55+
56+
57+
</body>
58+
</html>

‎importing/blog/5-codex-tips/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!--File: index.html-->
2+
3+
<!doctype html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8" />
7+
<title>Codex Tips - Nikos Katsikanis Blog</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<meta property="og:title" content="Codex Tips" />
10+
<meta property="og:description" content="Tips for getting the most from Codex." />
11+
<meta property="og:image" content="https://nikoskatsikanis.com/img/nikos.jpg" />
12+
<meta property="og:url" content="https://nikoskatsikanis.com/blog/5-codex-tips" />
13+
<meta property="twitter:title" content="Codex Tips" />
14+
<meta property="twitter:description" content="Tips for getting the most from Codex." />
15+
<meta property="twitter:image" content="https://nikoskatsikanis.com/img/nikos.jpg" />
16+
<meta property="twitter:url" content="https://nikoskatsikanis.com/blog/5-codex-tips" />
17+
<meta name="twitter:card" content="summary_large_image" />
18+
<link rel="icon" href="data:," />
19+
<link
20+
rel="stylesheet"
21+
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
22+
<link rel="stylesheet" href="/css/reset.css" />
23+
<link rel="stylesheet" href="/css/utility.css" />
24+
<link rel="stylesheet" href="/css/common.css" />
25+
<link rel="stylesheet" href="/css/form.css" />
26+
<link rel="stylesheet" href="/css/button-badge.css" />
27+
<link rel="stylesheet" href="/css/typography.css" />
28+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
29+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
30+
31+
<script src="/js/store.js" defer="" type="module"></script>
32+
<script src="/js/componentLoader.js" defer="" type="module"></script>
33+
<meta property="twitter:card" content="summary_large_image" />
34+
</head>
35+
36+
<body class="flex flex-col">
37+
<!-- wrapper that takes remaining space -->
38+
<div class="site-container flex flex-col" style="flex: 1">
39+
<!--
40+
<nav data-component="nav"></nav>
41+
-->
42+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
43+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
44+
<!--components in /pages that will be fetched by router when user clicks on a -->
45+
</main>
46+
<div class="flex justify-center">
47+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
48+
Like this site? I wrote the framework -&gt; Fork me on GitHub
49+
</a>
50+
</div>
51+
</div>
52+
<footer>
53+
<span>Copyright Nikos Katsikanis LTD</span>
54+
<div data-component="theme-switcher"></div>
55+
</footer>
56+
<!--File: index.html-->
57+
</body>
58+
</html>

‎importing/blog/6-measuring-traffic-in-dynamodb/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!--File: index.html-->
2+
3+
<!doctype html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<title>Measuring Traffic in DynamoDB and Detecting Abuse - Nikos Katsikanis Blog</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<meta property="og:title" content="Measuring Traffic in DynamoDB and Detecting Abuse">
10+
<meta property="og:description" content="This post explains how a Remix app on AWS tracks every request using DynamoDB. Metrics are aggregated daily and weekly to keep costs low and spot bots or account sharing.…">
11+
<meta property="og:image" content="https://nikoskatsikanis.com/img/nikos.jpg">
12+
<meta property="og:url" content="https://nikoskatsikanis.com/blog/6-measuring-traffic-in-dynamodb">
13+
<meta property="twitter:title" content="Measuring Traffic in DynamoDB and Detecting Abuse">
14+
<meta property="twitter:description" content="This post explains how a Remix app on AWS tracks every request using DynamoDB. Metrics are aggregated daily and weekly to keep costs low and spot bots or account sharing.…">
15+
<meta property="twitter:image" content="https://nikoskatsikanis.com/img/nikos.jpg">
16+
<meta property="twitter:url" content="https://nikoskatsikanis.com/blog/6-measuring-traffic-in-dynamodb">
17+
<meta name="twitter:card" content="summary_large_image">
18+
<link rel="icon" href="data:,">
19+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
20+
<link rel="stylesheet" href="/css/reset.css">
21+
<link rel="stylesheet" href="/css/utility.css">
22+
<link rel="stylesheet" href="/css/common.css">
23+
<link rel="stylesheet" href="/css/form.css">
24+
<link rel="stylesheet" href="/css/button-badge.css">
25+
<link rel="stylesheet" href="/css/typography.css">
26+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
27+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
28+
29+
<script src="/js/store.js" defer="" type="module"></script>
30+
<script src="/js/componentLoader.js" defer="" type="module"></script>
31+
<meta property="twitter:card" content="summary_large_image"><meta name="author" content="Nikos Katsikanis"></head>
32+
33+
<body class="flex flex-col">
34+
<!-- wrapper that takes remaining space -->
35+
<div class="site-container flex flex-col" style="flex: 1">
36+
<!--
37+
<nav data-component="nav"></nav>
38+
-->
39+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
40+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
41+
<!--components in /pages that will be fetched by router when user clicks on a -->
42+
</main>
43+
<div class="flex justify-center">
44+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
45+
Like this site? I wrote the framework -&gt; Fork me on GitHub
46+
</a>
47+
</div>
48+
</div>
49+
<footer>
50+
<span>Copyright Nikos Katsikanis LTD</span>
51+
<div data-component="theme-switcher"></div>
52+
</footer>
53+
<!--File: index.html-->
54+
55+
56+
57+
</body>
58+
</html>

‎importing/img/Ruby_On_Rails_Logo.svg.png‎

20.6 KB
Loading

‎importing/img/nikos.jpg‎

27.4 KB
Loading

‎importing/img/no_wp.jpg‎

69.4 KB
Loading

0 commit comments

Comments
 (0)