Skip to content

Commit 11f944e

Browse files
author
Ted Patrick
committed
css
1 parent d3dc05e commit 11f944e

File tree

2 files changed

+82
-119
lines changed

2 files changed

+82
-119
lines changed

tech-preview/micropython/about.html

+66-68
Original file line numberDiff line numberDiff line change
@@ -60,74 +60,72 @@ <h1>PyScript Runtimes - MicroPython Technical Preview</h1>
6060
print(hello())
6161
</py-script>
6262

63-
<p>Why not "view-source" and see for yourself?</p>
64-
65-
<h3>What?</h3>
66-
<p>The initial version of PyScript, demoed
67-
<a href="https://www.youtube.com/watch?v=qKfkCY7cmBQ">in a keynote address
68-
by Peter Wang</a> at PyCon 2022, built on the amazing
69-
work of the <a href="https://pyodide.org/en/stable/">Pyodide</a>
70-
project. But Pyodide isn't the only Python runtime, compiled to WASM, that
71-
could be used for this purpose.</p>
72-
73-
<p>These pages are a technical demonstration, proof of concept and
74-
playful exploration of how PyScript may work with other scripting language
75-
runtimes. This initial work focused on the amazing work of the
76-
<a href="https://micropython.org">MicroPython</a> project (a full
77-
re-implementation of Python 3 targeting constrained computing
78-
environments).</p>
79-
80-
<p>Here's what
81-
<a href="http://dpgeorge.net/">Damien George</a>
82-
(creator of MicroPython) says about such efforts:</p>
83-
84-
<blockquote>
85-
<p>MicroPython was written from day one to be easy to embed, and tries to support a wide variety of targets. For example, in a minimal configuration, the only connection to the external world that it needs is a place to output characters.</p>
86-
<p>Although I never had the idea that MicroPython would be embedded in the browser, it actually fits quite naturally because MicroPython is very self contained. MicroPython's small size and efficient use of resources (RAM and CPU) means that it's well suited to being embedded in a webpage, because the download size and start-up time is minimised. It's pretty exciting to think that MicroPython could gain traction as a way to build websites.</p>
87-
</blockquote>
88-
89-
<h3>Why?</h3>
90-
91-
<p>Different runtimes exhibit different strengths and weaknesses. As
92-
always, there are tradeoffs.</p>
93-
94-
<p>Whereas Pyodide is a relatively mature version of standard CPython,
95-
including powerful native modules such as
96-
<a href="https://numpy.org/">numpy</a> and
97-
<a href="https://scipy.org/">scipy</a>, it's also rather large (circa 11Mb)
98-
and slow to start up.</p>
99-
100-
<p>Alternatively, MicroPython is a highly regarded, mature and
101-
battle tested reimplementation of Python 3 but with "micro"
102-
reimplementations of popular libraries. It is small (base 303Kb) and
103-
startup time is only a few thousandths of a second (from a warm cache),
104-
even on mobile devices.</p>
105-
106-
<p>Given such tradeoffs, we want folks to be able to choose the runtime
107-
to use with PyScript that best suits their unique requirements.</p>
108-
109-
<h3>How?</h3>
110-
111-
<p>The code on these pages is experimental.</p>
112-
113-
<p>A small, fast and simple implementation of PyScript, created for
114-
testing purposes, allows us to quickly explore the
115-
characteristics of different potential runtimes.</p>
116-
<p>This version of PyScript, simply does four things:</p>
117-
<ol>
118-
<li>Read custom configuration (more on this later), otherwise fall back
119-
to sensible defaults.</li>
120-
<li>Download and start the language runtime. Currently, this is
121-
configured to be MicroPython.</li>
122-
<li>Register and manage plugins that contain the PyScript platform's
123-
logic. Currently, there are two: one for the
124-
<code>&lt;py-script&gt;</code> tag,
125-
and one for the <code>&lt;py-repl&gt;</code> tag.</li>
126-
<li>Load user defined files onto the runtime's virtual file system (data,
127-
code, modules etc).</li>
128-
</ol>
129-
<p>Drop into the browser console to see what PyScript is doing, under the
130-
hood.</p>
63+
<p>Why not "view-source" and see for yourself?</p>
64+
65+
<h3>What?</h3>
66+
<p>The initial version of PyScript, demoed
67+
<a href="https://www.youtube.com/watch?v=qKfkCY7cmBQ">in a keynote address
68+
by Peter Wang</a> at PyCon 2022, built on the amazing
69+
work of the <a href="https://pyodide.org/en/stable/">Pyodide</a>
70+
project. But Pyodide isn't the only Python runtime, compiled to WASM, that
71+
could be used for this purpose.</p>
72+
73+
<p>These pages are a technical demonstration, proof of concept and
74+
playful exploration of how PyScript may work with other scripting language
75+
runtimes. This initial work focused on the amazing work of the
76+
<a href="https://micropython.org">MicroPython</a> project (a full
77+
re-implementation of Python 3 targeting constrained computing
78+
environments).</p>
79+
80+
<p>Here's what
81+
<a href="http://dpgeorge.net/">Damien George</a>
82+
(creator of MicroPython) says about such efforts:</p>
83+
84+
<blockquote>
85+
<p>MicroPython was written from day one to be easy to embed, and tries to support a wide variety of targets. For example, in a minimal configuration, the only connection to the external world that it needs is a place to output characters.</p>
86+
<p>Although I never had the idea that MicroPython would be embedded in the browser, it actually fits quite naturally because MicroPython is very self contained. MicroPython's small size and efficient use of resources (RAM and CPU) means that it's well suited to being embedded in a webpage, because the download size and start-up time is minimised. It's pretty exciting to think that MicroPython could gain traction as a way to build websites.</p>
87+
</blockquote>
88+
89+
<h3>Why?</h3>
90+
91+
<p>Different runtimes exhibit different strengths and weaknesses. As
92+
always, there are tradeoffs.</p>
93+
94+
<p>Whereas Pyodide is a relatively mature version of standard CPython,
95+
including powerful native modules such as
96+
<a href="https://numpy.org/">numpy</a> and
97+
<a href="https://scipy.org/">scipy</a>, it's also rather large (circa 11Mb)
98+
and slow to start up.</p>
99+
100+
<p>Alternatively, MicroPython is a highly regarded, mature and
101+
battle tested reimplementation of Python 3 but with "micro"
102+
reimplementations of popular libraries. It is small (base 303Kb) and
103+
startup time is only a few thousandths of a second (from a warm cache),
104+
even on mobile devices.</p>
105+
106+
<p>Given such tradeoffs, we want folks to be able to choose the runtime
107+
to use with PyScript that best suits their unique requirements.</p>
108+
109+
<h3>How?</h3>
110+
111+
<p>The code on these pages is experimental.</p>
112+
113+
<p>A small, fast and simple implementation of PyScript, created for
114+
testing purposes, allows us to quickly explore the
115+
characteristics of different potential runtimes.</p>
116+
<p>This version of PyScript, simply does four things:</p>
117+
<ol>
118+
<li>Read custom configuration, otherwise fall back
119+
to sensible defaults.</li>
120+
<li>Download and start the language runtime. Currently, this is
121+
configured to be MicroPython.</li>
122+
<li>Register and manage plugins that contain the PyScript platform's
123+
logic. Currently, there are two: one for the
124+
<code>&lt;py-script&gt;</code> tag,
125+
and one for the <code>&lt;py-repl&gt;</code> tag.</li>
126+
<li>Load user defined files onto the runtime's virtual file system (data,
127+
code, modules etc).</li>
128+
</ol>
131129
</div>
132130
</div>
133131
</body>

tech-preview/micropython/output.css

+16-51
Original file line numberDiff line numberDiff line change
@@ -788,6 +788,11 @@ a {
788788
color: rgb(255 255 255 / var(--tw-text-opacity));
789789
}
790790

791+
.text-black {
792+
--tw-text-opacity: 1;
793+
color: rgb(0 0 0 / var(--tw-text-opacity));
794+
}
795+
791796
.text-gray-800 {
792797
--tw-text-opacity: 1;
793798
color: rgb(31 41 55 / var(--tw-text-opacity));
@@ -798,11 +803,6 @@ a {
798803
color: rgb(37 99 235 / var(--tw-text-opacity));
799804
}
800805

801-
.text-black {
802-
--tw-text-opacity: 1;
803-
color: rgb(0 0 0 / var(--tw-text-opacity));
804-
}
805-
806806
.underline {
807807
text-decoration-line: underline;
808808
}
@@ -882,64 +882,34 @@ a {
882882
border-color: rgb(107 114 128 / var(--tw-border-opacity));
883883
}
884884

885-
.dark\:bg-gray-800 {
886-
--tw-bg-opacity: 1;
887-
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
888-
}
889-
890-
.dark\:bg-slate-800 {
891-
--tw-bg-opacity: 1;
892-
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
893-
}
894-
895-
.dark\:bg-gray-600 {
896-
--tw-bg-opacity: 1;
897-
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
898-
}
899-
900885
.dark\:bg-gray-700 {
901886
--tw-bg-opacity: 1;
902887
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
903888
}
904889

905-
.dark\:bg-slate-200 {
906-
--tw-bg-opacity: 1;
907-
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
908-
}
909-
910-
.dark\:bg-slate-900 {
911-
--tw-bg-opacity: 1;
912-
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
913-
}
914-
915-
.dark\:bg-gray-400 {
916-
--tw-bg-opacity: 1;
917-
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
918-
}
919-
920-
.dark\:bg-gray-200 {
890+
.dark\:bg-gray-800 {
921891
--tw-bg-opacity: 1;
922-
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
892+
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
923893
}
924894

925-
.dark\:bg-gray-100 {
895+
.dark\:bg-\[\#0A0E14\] {
926896
--tw-bg-opacity: 1;
927-
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
897+
background-color: rgb(10 14 20 / var(--tw-bg-opacity));
928898
}
929899

930-
.dark\:bg-gray-300 {
900+
.dark\:bg-slate-800 {
931901
--tw-bg-opacity: 1;
932-
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
902+
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
933903
}
934904

935-
.dark\:bg-black {
905+
.dark\:bg-gray-600 {
936906
--tw-bg-opacity: 1;
937-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
907+
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
938908
}
939909

940-
.dark\:bg-\[\#0A0E14\] {
941-
--tw-bg-opacity: 1;
942-
background-color: rgb(10 14 20 / var(--tw-bg-opacity));
910+
.dark\:text-white {
911+
--tw-text-opacity: 1;
912+
color: rgb(255 255 255 / var(--tw-text-opacity));
943913
}
944914

945915
.dark\:text-gray-200 {
@@ -952,11 +922,6 @@ a {
952922
color: rgb(59 130 246 / var(--tw-text-opacity));
953923
}
954924

955-
.dark\:text-white {
956-
--tw-text-opacity: 1;
957-
color: rgb(255 255 255 / var(--tw-text-opacity));
958-
}
959-
960925
.dark\:ring-offset-gray-700 {
961926
--tw-ring-offset-color: #374151;
962927
}

0 commit comments

Comments
 (0)