Skip to content

Commit 4ea0c21

Browse files
michaelpbmichaelpb
committed
New devlog entry!
1 parent 4634c83 commit 4ea0c21

File tree

3 files changed

+215
-74
lines changed

3 files changed

+215
-74
lines changed

‎src/devlog/2024-07.html‎

Lines changed: 0 additions & 74 deletions
This file was deleted.

‎src/devlog/2024-12.html‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!DOCTYPE HTML><script Modulo src="/static/js/Modulo.js" -src="/static/"></script><cms-MarkdownPage><script type=md>---
2+
title: Release + Beta Info
3+
devlog: 2024-12
4+
---
5+
6+
7+
I'm happy to announce the release of Alpha 0.0.73, which brings quite a few new
8+
handy features, while still keeping it all under 2000 lines of code.
9+
10+
Finally, I'm happy to announce that after extensive "dog-fooding", Modulo is
11+
getting ready for prime time -- or at least "prime-ish" time!). To communicate
12+
it's feature stability, the project is ready to transition to a "beta" phase.
13+
More info on the release plans contained below.
14+
15+
16+
## Alpha 73
17+
18+
19+
### Alpha 73 New Feature
20+
21+
The big new feature is the _Include_ definition. This definition is very
22+
verstatile, and can be used for including virtually any type of head content,
23+
including `<script>` tags for raw inclusion of JS, and `<link>` for CSS.
24+
25+
Not only that, but it supports a "NPM-light" sort of usage as well, that allows
26+
you to quickly include JS and CSS, instantly accessing many NPM packages.
27+
28+
29+
### Alpha 73 Deprecations
30+
31+
This is one of the first releases with deprecations. The following features
32+
will be removed in future versions:
33+
34+
- `mode="vanish-into-document"` - Use `mode="vanish"` and _Include_ instead (see below)
35+
- `mountRender` Lifecycle - Use `mount` instead
36+
37+
Furthermore, take note about the following changes which will be gradually
38+
implemented in this and future versions:
39+
40+
- Directives: The `[` and `]` is becoming optional, e.g. `state.bind` and
41+
`on.click:=script.count` will now be preferred
42+
- Artifacts will be changing to _only_ bundle from _Include_ by default,
43+
leaving other JS and CSS untouched
44+
- Default dehydrate/hydrate behavior will no longer hydrate directives in DOM, but
45+
instead always attempt to rerender to re-attach directives
46+
47+
48+
### Alpha 73 Bug Fixes
49+
50+
Browser support got a big boost: Rewriting some incompatible regex has now
51+
enabled Safari 11 support, improving Modulo's shim-free support for unsupported
52+
legacy Apple devices from 2014-2018.
53+
54+
55+
56+
## Getting started with Alpha 73's include
57+
58+
### Example 1: For script and link dependencies
59+
60+
The simplest way to use `Include` is as a global definition. It will "include"
61+
it's contents in the head of the document as soon as Modulo loads. Note that
62+
it will NEVER include the same thing twice (it uses hashes to identify
63+
resources).
64+
65+
This mode is great for following tutorials for integrating JS projects. You can
66+
often simply copy and paste whatever you are given into the `Include`, as such:
67+
68+
```
69+
<Include></Include>
70+
```
71+
72+
73+
74+
### Example 2: Including meta content
75+
76+
_Include_ can be used for adding meta tags to your page as well:
77+
78+
```
79+
<Include>
80+
<meta name="charset" charset="utf8" />
81+
<meta name="content-type" http-equiv="Content-Type" content="text/html; charset=utf-8" />
82+
<meta name="viewport" content="width=device-width, initial-scale=1" />
83+
</Include>
84+
```
85+
86+
### Example 3: For NPM dependencies
87+
88+
One of the most powerful features of _Include_ is the ability to bring in
89+
packages from NPM (or equivalent), given their package name and a CDN server.
90+
See below:
91+
92+
```
93+
<Component>
94+
<Include
95+
-server="unpkg.com"
96+
cke="1.3.4"
97+
></Include>
98+
<Template>
99+
<textare></textarea>
100+
</Template>
101+
</Component>
102+
```
103+
104+
Also, note that you can use `-load-mode="lazy"` to make it skip
105+
106+
107+
### Alpha 73 Deprecation FAQ
108+
109+
110+
- Q: Why is `vanish-into-document` is being removed? A: We already have `vanish`, and
111+
now we also have `Include`, making `vanish-into-document` obsolute as a
112+
component render mode. Some of the changes may seem like steps backward.
113+
114+
- Q: Why the directive syntax change? A: While browsers technically allow those
115+
characters, this makes the directive attribute naming convention follow the
116+
W3C HTML spec more strictly, which, in practice, enables better
117+
compatibility. Otherwise, third-party JS libraries crash when using the
118+
stricter `setAttribute` interface on HTML generated from Modulo.
119+
120+
- Q: Why are directives no longer going to be dehydrated? A: Note that this
121+
change will result in slightly less efficient hydration steps in some cases.
122+
However, the trade-off is simpler and faster builds, more consistent behavior
123+
between development and production, and preventing easy "foot guns" that
124+
result in excess re-render during hydration loops. That said, the old
125+
behavior will still be available as a recipe for an alternative build
126+
command, as it might be a nice tweak to further optimize specific SSG
127+
projects.
128+
129+
130+
131+
132+
133+
## Beta Teaser: On the road to Modulo JS Beta release!
134+
135+
This release represents one of the last big feature additions until the Modulo
136+
beta, `Modulo.js v0.1.0`! Going forward, the focus will be fully documenting
137+
the _build_ and _Include_ architecture, for fine-tuning of large, multi-page
138+
websites that use Modulo.
139+
140+
I expect this release, and the next few releases, to be among the last alpha
141+
releases. The remaining alphas will continue to support the deprecated
142+
features, but as soon as the new replacements are finished and documented, the
143+
deprecated features will be removed in the first beta release.
144+
145+
This means I am trying my best to avoid having to add or remove any major
146+
features from "beta" to "1.0". The goal of the subseuqent beta releases (e.g.,
147+
`0.2.x`, `0.3.x`), in preparation for a highly-stable, semi-final 1.0 release, are
148+
to polish
149+
150+
In the mean time, check out the following early work in progress "teasers" of
151+
what's in store:
152+
153+
### Coming soon: Modulo Studio
154+
155+
The embedded, mini-editor is getting a major remix with the Modulo JS Beta
156+
release. This enables all Modulo users to take advantage of it's
157+
ultra-minimalist structure, as an easy-to-use "glue" to combine editors,
158+
previewers and in-browser emulators, and more. This creates an ultra-simple set
159+
of building-blocks for IDEs, embedded editors, and even graphical WYZIWIG
160+
editors.
161+
162+
For example, a simple website editor IDE might be assembled as such:
163+
164+
```
165+
<Component name="WebEditor">
166+
<!-- Include some core editor HTML and CSS -->
167+
<Template -src="./parts/EditorBase.html"></Template>
168+
<Style -src="./parts/EditorBase.css"></Style>
169+
170+
<!-- Include the Virtual Browser part, which enables a preview -->
171+
<VBrowser></VBrowser>
172+
173+
<!-- Load a sample website into the virtual browser -->
174+
<Template
175+
-file="index.html"
176+
-name="index_template"
177+
-default-view
178+
-default-edit>
179+
<h1>Hello web world!</h1>
180+
<p>Edit me...</p>
181+
</Template>
182+
183+
<!-- Define menus, buttons, etc -->
184+
<Template
185+
-button="run"
186+
-button-emoji="&#x27F3;"
187+
-button-click="vbrowser.refresh"
188+
-name="run_button_template"
189+
><!-- (a "re-run" button) --></Template>
190+
</Component>
191+
```
192+
193+
WIP teaser:
194+
<https://modulo.codeberg.page/studio.html>
195+
196+
197+
198+
### Coming soon: New, clean Modulo repo
199+
200+
The Modulo [beta branch](https://codeberg.org/modulo/modulo) is being developed
201+
on Codeberg. Once complete, this minimalist repo structure will become the
202+
main repo, and the GitHub repo will be deprecated.
203+
204+
205+
206+
### Coming soon: Modulo in the Wild
207+
208+
The Modulo JS framework, despite still being only "alpha", has now been used to
209+
power everything from tiny app projects to building out multi-media experiences
210+
with thousands of users a day. It's time we start showcasing what the (tiny)
211+
Modulo community has been up to! There are _dozens_ of us! _Dozens!_

‎src/static/data/links/devlog.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
22
articles: [
3+
{
4+
file: "devlog/2024-12.html",
5+
title: "release; beta"
6+
},
37
{
48
file: "devlog/2024-05.html",
59
title: "14 new tutorials"

0 commit comments

Comments
 (0)