Replies: 15 comments 23 replies
-
|
Hi Adam:
Thanks so much for this. That workflow is a possibility. When I tested it
on an older mac school computer, it never finished syncing with the folder
I created. I noticed I had quite a bit of wordpress in that folder but not
all of it. The storage= query api thing and your enhancement issue that you
created made me think that I could use a web container fs like I tried with
wp-now and failed with that weird error I documented in issue #79.
The advantage of using wordpress-playground over wp-now in a stackblitz web
container is that I wouldn't need to run the server in the web container, I
could just use wordpress-playground and an iframe. The stackblitz web
container would be there to host the fs, but also to run git commands,
wp-cli commands .... Having the preview separate from the web container
would have helped me this term when I could have used wp-playground to
serve plain html projects.
The course that I am teaching is a 2nd year, 2nd term, UX course. This term
just past I introduced javascript to them in the context of custom
elements. I want to continue the custom element thread to make and consume
micro frontends in wordpress for dev and cloudflare pages for prod. The
goal is for the students to work with a customer to create a site that the
customer can maintain in their browser using git and wordpress playground.
I also have another 3rd year course next term in mobile design. In it, I
have students use react-native web to create a pwa and react-native to make
an app-store app. Last year I used stackblitz towards the end of the term
with some success, because the lab computers didn't have git on them
anymore and I realized that too late. My experience in the winter term last
year was what inspired me to use stackblitz this term just past.
I have 1 day of marking left for the term just finished, and then I have
some time to put my own strength into making this work. Your issue #562
gave me hope that you were also thinking along the same lines as me about
making the storage more flexible, or pluggable or something. Perhaps we
could speak on Discord or something about this? I usually get up at 5:00am
Toronto, Ontario, Canada time, or I could stay up late to match your
timezone.
Thanks
RIch
…On Fri, Dec 22, 2023 at 6:51 AM Adam Zielinski ***@***.***> wrote:
@rhildred <https://github.com/rhildred>, I noticed you want to use
Playground with your students. I'd like to find a way for you to make it
work!
Here's what's possible today without installing anything:
That is:
1. Import a repository from GitHub
2. Sync Playground with a local directory
3. Edit files in that directory using vscode.dev
4. Sync the changes back to Playground
5. Export them to a GitHub repo
Would that workflow work for you? One thing that is missing is building
the JavaScript files, which may be a problem when you're building React
components. Is a JavaScript bundler a must-have for you?
—
Reply to this email directly, view it on GitHub
<#899>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AACUSY6QWXAZJTLYJMMQJD3YKVX4RAVCNFSM6AAAAABA7XG7ESVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVHE4DQNRXGA>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io | skype/messenger:
rhildred
|
Beta Was this translation helpful? Give feedback.
-
|
Somewhat related – I'd love to have an "export as a PWA" and "export as a desktop app" buttons in Playground eventually! |
Beta Was this translation helpful? Give feedback.
-
|
I'd love to connect on Discord :) How about Wednesday 17.01 at around 8am your time? I'm in UTC+1 and that would be 2pm for me. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Adam and Pascal:
*Adam* thanks for your response on my idea for my User Experience Design
class next term at Wilfrid Laurier. I am really interested in the x post
that you linked to, Adam, in your blog post (
https://adamadam.blog/2023/04/12/interactive-intro-to-wordpress-playground-public-api/)
on wordpress playground client api. (
https://twitter.com/swissspidy/status/1637750725244485632). I am
particularly interested in how you made the command line interface for
wp-cli commands that is shown in the video, but all of it could be really
helpful to the lab environment that I am trying to create for my students.
Pascal, the X status is from your account so I am hoping that you would
weigh in with any advice for re-creating what I saw in the video for my
students ( (https://twitter.com/swissspidy/status/1637750725244485632).
thanks again so much
Rich
…On Fri, Dec 22, 2023 at 10:27 AM Richard Hildred ***@***.***> wrote:
Hi Adam:
Thanks so much for this. That workflow is a possibility. When I tested it
on an older mac school computer, it never finished syncing with the folder
I created. I noticed I had quite a bit of wordpress in that folder but not
all of it. The storage= query api thing and your enhancement issue that you
created made me think that I could use a web container fs like I tried with
wp-now and failed with that weird error I documented in issue #79.
The advantage of using wordpress-playground over wp-now in a stackblitz
web container is that I wouldn't need to run the server in the web
container, I could just use wordpress-playground and an iframe. The
stackblitz web container would be there to host the fs, but also to run git
commands, wp-cli commands .... Having the preview separate from the web
container would have helped me this term when I could have used
wp-playground to serve plain html projects.
The course that I am teaching is a 2nd year, 2nd term, UX course. This
term just past I introduced javascript to them in the context of custom
elements. I want to continue the custom element thread to make and consume
micro frontends in wordpress for dev and cloudflare pages for prod. The
goal is for the students to work with a customer to create a site that the
customer can maintain in their browser using git and wordpress playground.
I also have another 3rd year course next term in mobile design. In it, I
have students use react-native web to create a pwa and react-native to make
an app-store app. Last year I used stackblitz towards the end of the term
with some success, because the lab computers didn't have git on them
anymore and I realized that too late. My experience in the winter term last
year was what inspired me to use stackblitz this term just past.
I have 1 day of marking left for the term just finished, and then I have
some time to put my own strength into making this work. Your issue #562
gave me hope that you were also thinking along the same lines as me about
making the storage more flexible, or pluggable or something. Perhaps we
could speak on Discord or something about this? I usually get up at 5:00am
Toronto, Ontario, Canada time, or I could stay up late to match your
timezone.
Thanks
RIch
On Fri, Dec 22, 2023 at 6:51 AM Adam Zielinski ***@***.***>
wrote:
> @rhildred <https://github.com/rhildred>, I noticed you want to use
> Playground with your students. I'd like to find a way for you to make it
> work!
>
> Here's what's possible today without installing anything:
>
> That is:
>
> 1. Import a repository from GitHub
> 2. Sync Playground with a local directory
> 3. Edit files in that directory using vscode.dev
> 4. Sync the changes back to Playground
> 5. Export them to a GitHub repo
>
> Would that workflow work for you? One thing that is missing is building
> the JavaScript files, which may be a problem when you're building React
> components. Is a JavaScript bundler a must-have for you?
>
> —
> Reply to this email directly, view it on GitHub
> <#899>, or
> unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AACUSY6QWXAZJTLYJMMQJD3YKVX4RAVCNFSM6AAAAABA7XG7ESVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVHE4DQNRXGA>
> .
> You are receiving this because you were mentioned.Message ID:
> ***@***.***>
>
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io |
skype/messenger: rhildred
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io | skype/messenger:
rhildred
|
Beta Was this translation helpful? Give feedback.
-
|
Hi Again:
I hit send too soon. Right now my thinking is to use the fs that is exposed
through the client object in the "manage the virtual filesystem" part of
Adam's post
https://adamadam.blog/2023/04/12/interactive-intro-to-wordpress-playground-public-api/.
I want to also run wp-cli on that same virtual filesystem. I also want to
be able to run wp-cli in node doing a cloudflare pages build from a
repository that I want to populate from isomorphic git on github. I have
that working from "node" on stackblitz and wrote an adaptor that I am still
testing to make a fs.promises interface to a web container fs for
isomorphic git to work. My thinking is to target the adapter at the client
virtual file system from the wordpress playground public api. As I
mentioned any advice that either of you would pass on would be really
helpful.
Thanks again
Rich
…On Fri, Dec 29, 2023 at 11:13 AM Richard Hildred ***@***.***> wrote:
Hi Adam and Pascal:
*Adam* thanks for your response on my idea for my User Experience Design
class next term at Wilfrid Laurier. I am really interested in the x post
that you linked to, Adam, in your blog post (
https://adamadam.blog/2023/04/12/interactive-intro-to-wordpress-playground-public-api/)
on wordpress playground client api. (
https://twitter.com/swissspidy/status/1637750725244485632). I am
particularly interested in how you made the command line interface for
wp-cli commands that is shown in the video, but all of it could be really
helpful to the lab environment that I am trying to create for my students.
Pascal, the X status is from your account so I am hoping that you would
weigh in with any advice for re-creating what I saw in the video for my
students ( (https://twitter.com/swissspidy/status/1637750725244485632).
thanks again so much
Rich
On Fri, Dec 22, 2023 at 10:27 AM Richard Hildred ***@***.***>
wrote:
> Hi Adam:
>
> Thanks so much for this. That workflow is a possibility. When I tested it
> on an older mac school computer, it never finished syncing with the folder
> I created. I noticed I had quite a bit of wordpress in that folder but not
> all of it. The storage= query api thing and your enhancement issue that you
> created made me think that I could use a web container fs like I tried with
> wp-now and failed with that weird error I documented in issue #79.
>
> The advantage of using wordpress-playground over wp-now in a stackblitz
> web container is that I wouldn't need to run the server in the web
> container, I could just use wordpress-playground and an iframe. The
> stackblitz web container would be there to host the fs, but also to run git
> commands, wp-cli commands .... Having the preview separate from the web
> container would have helped me this term when I could have used
> wp-playground to serve plain html projects.
>
> The course that I am teaching is a 2nd year, 2nd term, UX course. This
> term just past I introduced javascript to them in the context of custom
> elements. I want to continue the custom element thread to make and consume
> micro frontends in wordpress for dev and cloudflare pages for prod. The
> goal is for the students to work with a customer to create a site that the
> customer can maintain in their browser using git and wordpress playground.
>
> I also have another 3rd year course next term in mobile design. In it, I
> have students use react-native web to create a pwa and react-native to make
> an app-store app. Last year I used stackblitz towards the end of the term
> with some success, because the lab computers didn't have git on them
> anymore and I realized that too late. My experience in the winter term last
> year was what inspired me to use stackblitz this term just past.
>
> I have 1 day of marking left for the term just finished, and then I have
> some time to put my own strength into making this work. Your issue #562
> gave me hope that you were also thinking along the same lines as me about
> making the storage more flexible, or pluggable or something. Perhaps we
> could speak on Discord or something about this? I usually get up at 5:00am
> Toronto, Ontario, Canada time, or I could stay up late to match your
> timezone.
>
> Thanks
>
> RIch
>
>
>
> On Fri, Dec 22, 2023 at 6:51 AM Adam Zielinski ***@***.***>
> wrote:
>
>> @rhildred <https://github.com/rhildred>, I noticed you want to use
>> Playground with your students. I'd like to find a way for you to make it
>> work!
>>
>> Here's what's possible today without installing anything:
>>
>> That is:
>>
>> 1. Import a repository from GitHub
>> 2. Sync Playground with a local directory
>> 3. Edit files in that directory using vscode.dev
>> 4. Sync the changes back to Playground
>> 5. Export them to a GitHub repo
>>
>> Would that workflow work for you? One thing that is missing is building
>> the JavaScript files, which may be a problem when you're building React
>> components. Is a JavaScript bundler a must-have for you?
>>
>> —
>> Reply to this email directly, view it on GitHub
>> <#899>, or
>> unsubscribe
>> <https://github.com/notifications/unsubscribe-auth/AACUSY6QWXAZJTLYJMMQJD3YKVX4RAVCNFSM6AAAAABA7XG7ESVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVHE4DQNRXGA>
>> .
>> You are receiving this because you were mentioned.Message ID:
>> ***@***.***>
>>
>
>
> --
> Richard Hildred
> signal/SMS/phone: +1.519.594.0900 | https://r
> <http://waterlooHildreds.blogspot.com>hildred.github.io |
> skype/messenger: rhildred
>
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io |
skype/messenger: rhildred
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io | skype/messenger:
rhildred
|
Beta Was this translation helpful? Give feedback.
-
|
Heads up Dominic from StackBlitz got wp-now to work so it seems like we just need to release a new version that will be compatible with Node.js 18. I hope that to happen soon. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Adam and Pascal:
I am hoping to know how you ran wp-cli in your tweet (
https://twitter.com/swissspidy/status/1637750725244485632).
I started this thread about making something like your tweet for my
students to use this term a couple of days ago. Since then I was able to
spend a bit of time trying things with wordpress playground. I spent some
time with the playground website (not remote.html) and made .zip downloads
as well as wp-content pull requests. I can use the .zip download for
students to hand in their labs and to keep them so that they can refer to
them.
The students also have 4 assignments. At least the 4th will be published in
their portfolio. I like your pull request workflow for this. When I saw the
video in the tweet I was thinking that I would write a wp-cli command that
could be run in a github pages action to publish to static pages using
output buffering (ob_start ....). I did something similar a while ago, but
there is also a gist here (
https://gist.github.com/rosswintle/c1f466250879e1281afe1bab72bed65d) that
has most of what I need.
I experimented with wp-now for running my wp-cli command on node at github
action time in wp-content mode. I had to make a couple of little changes to
get it to use the database folder that is created when wp-now starts. I am
eager to know the approach that you took for the video in the hackathon
tweet (https://twitter.com/swissspidy/status/1637750725244485632).
Thanks so much for wp-playground and the interactive blog article about the
javascript api and the video
Rich
…On Fri, Dec 29, 2023 at 11:42 AM Richard Hildred ***@***.***> wrote:
Hi Again:
I hit send too soon. Right now my thinking is to use the fs that is
exposed through the client object in the "manage the virtual filesystem"
part of Adam's post
https://adamadam.blog/2023/04/12/interactive-intro-to-wordpress-playground-public-api/.
I want to also run wp-cli on that same virtual filesystem. I also want to
be able to run wp-cli in node doing a cloudflare pages build from a
repository that I want to populate from isomorphic git on github. I have
that working from "node" on stackblitz and wrote an adaptor that I am still
testing to make a fs.promises interface to a web container fs for
isomorphic git to work. My thinking is to target the adapter at the client
virtual file system from the wordpress playground public api. As I
mentioned any advice that either of you would pass on would be really
helpful.
Thanks again
Rich
On Fri, Dec 29, 2023 at 11:13 AM Richard Hildred ***@***.***>
wrote:
> Hi Adam and Pascal:
>
> *Adam* thanks for your response on my idea for my User Experience Design
> class next term at Wilfrid Laurier. I am really interested in the x post
> that you linked to, Adam, in your blog post (
> https://adamadam.blog/2023/04/12/interactive-intro-to-wordpress-playground-public-api/)
> on wordpress playground client api. (
> https://twitter.com/swissspidy/status/1637750725244485632). I am
> particularly interested in how you made the command line interface for
> wp-cli commands that is shown in the video, but all of it could be really
> helpful to the lab environment that I am trying to create for my students.
>
> Pascal, the X status is from your account so I am hoping that you would
> weigh in with any advice for re-creating what I saw in the video for my
> students ( (https://twitter.com/swissspidy/status/1637750725244485632).
>
> thanks again so much
>
> Rich
>
> On Fri, Dec 22, 2023 at 10:27 AM Richard Hildred ***@***.***>
> wrote:
>
>> Hi Adam:
>>
>> Thanks so much for this. That workflow is a possibility. When I tested
>> it on an older mac school computer, it never finished syncing with the
>> folder I created. I noticed I had quite a bit of wordpress in that folder
>> but not all of it. The storage= query api thing and your enhancement issue
>> that you created made me think that I could use a web container fs like I
>> tried with wp-now and failed with that weird error I documented in issue
>> #79.
>>
>> The advantage of using wordpress-playground over wp-now in a stackblitz
>> web container is that I wouldn't need to run the server in the web
>> container, I could just use wordpress-playground and an iframe. The
>> stackblitz web container would be there to host the fs, but also to run git
>> commands, wp-cli commands .... Having the preview separate from the web
>> container would have helped me this term when I could have used
>> wp-playground to serve plain html projects.
>>
>> The course that I am teaching is a 2nd year, 2nd term, UX course. This
>> term just past I introduced javascript to them in the context of custom
>> elements. I want to continue the custom element thread to make and consume
>> micro frontends in wordpress for dev and cloudflare pages for prod. The
>> goal is for the students to work with a customer to create a site that the
>> customer can maintain in their browser using git and wordpress playground.
>>
>> I also have another 3rd year course next term in mobile design. In it, I
>> have students use react-native web to create a pwa and react-native to make
>> an app-store app. Last year I used stackblitz towards the end of the term
>> with some success, because the lab computers didn't have git on them
>> anymore and I realized that too late. My experience in the winter term last
>> year was what inspired me to use stackblitz this term just past.
>>
>> I have 1 day of marking left for the term just finished, and then I have
>> some time to put my own strength into making this work. Your issue #562
>> gave me hope that you were also thinking along the same lines as me about
>> making the storage more flexible, or pluggable or something. Perhaps we
>> could speak on Discord or something about this? I usually get up at 5:00am
>> Toronto, Ontario, Canada time, or I could stay up late to match your
>> timezone.
>>
>> Thanks
>>
>> RIch
>>
>>
>>
>> On Fri, Dec 22, 2023 at 6:51 AM Adam Zielinski ***@***.***>
>> wrote:
>>
>>> @rhildred <https://github.com/rhildred>, I noticed you want to use
>>> Playground with your students. I'd like to find a way for you to make it
>>> work!
>>>
>>> Here's what's possible today without installing anything:
>>>
>>> That is:
>>>
>>> 1. Import a repository from GitHub
>>> 2. Sync Playground with a local directory
>>> 3. Edit files in that directory using vscode.dev
>>> 4. Sync the changes back to Playground
>>> 5. Export them to a GitHub repo
>>>
>>> Would that workflow work for you? One thing that is missing is building
>>> the JavaScript files, which may be a problem when you're building React
>>> components. Is a JavaScript bundler a must-have for you?
>>>
>>> —
>>> Reply to this email directly, view it on GitHub
>>> <#899>,
>>> or unsubscribe
>>> <https://github.com/notifications/unsubscribe-auth/AACUSY6QWXAZJTLYJMMQJD3YKVX4RAVCNFSM6AAAAABA7XG7ESVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVHE4DQNRXGA>
>>> .
>>> You are receiving this because you were mentioned.Message ID:
>>> ***@***.***>
>>>
>>
>>
>> --
>> Richard Hildred
>> signal/SMS/phone: +1.519.594.0900 | https://r
>> <http://waterlooHildreds.blogspot.com>hildred.github.io |
>> skype/messenger: rhildred
>>
>
>
> --
> Richard Hildred
> signal/SMS/phone: +1.519.594.0900 | https://r
> <http://waterlooHildreds.blogspot.com>hildred.github.io |
> skype/messenger: rhildred
>
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io |
skype/messenger: rhildred
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io | skype/messenger:
rhildred
|
Beta Was this translation helpful? Give feedback.
-
|
My old PR for adding WP-CLI to WP Playground can be found here: #161 That was a long time ago and a lot has changed in the meantime, so not sore if it still provides any value. It runs in the browser and has to interact with the virtual FS there, which is a bit tricky. Using WP-CLI with wp-now is definitely much easier, but I am not familiar with how it works behind the scenes. So I can't really provide additional insights, sorry! |
Beta Was this translation helpful? Give feedback.
-
|
Hi Pascal and Adam:
It looks to me like your general approach was to client.run wp-cli and then
write the output back to the user. Right now at https://diy-pwa.dev I have
2 tabs. 1 that is an editor, hooked to a stackblitz container and one that
is a wordpress playground remote.html client. I think that I am going to
replace the webcontainer fs calls with client fs calls to get an editor and
replace the stackblitz jsh container with a "terminal" that just does
client.run wp-cli. If I have the editor, I don't strictly need to be able
to run wp-cli in the browser. I feel a lot better after getting the ide and
wp-playground up in tabs on https://diy-pwa.dev today and looking at
Pascal's pull request.
Thanks so much
Rich
…On Tue, Jan 2, 2024 at 10:49 AM Pascal Birchler ***@***.***> wrote:
My old PR for adding WP-CLI to WP Playground can be found here: #161
<#161>
That was a long time ago and a lot has changed in the meantime, so not
sore if it still provides any value. It runs in the browser and has to
interact with the virtual FS there, which is a bit tricky. Using WP-CLI
with wp-now is definitely much easier, but I am not familiar with how it
works behind the scenes. So I can't really provide additional insights,
sorry!
—
Reply to this email directly, view it on GitHub
<#899 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AACUSY56ETSSPAI4VRYRONLYMQUARAVCNFSM6AAAAABA7XG7ESVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TSOJUGY2DK>
.
You are receiving this because you were mentioned.Message ID:
<WordPress/wordpress-playground/repo-discussions/899/comments/7994645@
github.com>
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io | skype/messenger:
rhildred
|
Beta Was this translation helpful? Give feedback.
-
|
I love that idea! Did you manage to make it work? Heads up this editor now exists: WordPress/playground-tools#126. It still needs some UX improvements that I'm exploring in WordPress/playground-tools#136, and once they land you should be able to run Playground on a WordPress site 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Hi Again:
I wanted to let you gentlemen know how my first class went. 22 of the 36
students in the class were able to use https://playground.wordpress.net/ to
make a post with a featured image, download a .zip from it and hand it in
before the end of class. The lab isn't due till Friday night so I am
expecting that most of the rest will also be able to get it to work. There
was 1 student who faced an issue on chrome and Safari where the iframe only
filled the fist 600px or so of the browser. I looked in the chrome
debugger, quickly but couldn't see an obvious reason why. The student
downloaded firefox and it worked there so, unfortunately, I didn't figure
out how to reproduce his issue. My plan is to mark them, Saturday, in
wp-now, using the pull request I submitted the other day.
Thanks so much for your responsiveness and help
Rich
…On Tue, Jan 2, 2024 at 4:34 PM Richard Hildred ***@***.***> wrote:
Hi Pascal and Adam:
It looks to me like your general approach was to client.run wp-cli and
then write the output back to the user. Right now at https://diy-pwa.dev
I have 2 tabs. 1 that is an editor, hooked to a stackblitz container and
one that is a wordpress playground remote.html client. I think that I am
going to replace the webcontainer fs calls with client fs calls to get an
editor and replace the stackblitz jsh container with a "terminal" that just
does client.run wp-cli. If I have the editor, I don't strictly need to be
able to run wp-cli in the browser. I feel a lot better after getting the
ide and wp-playground up in tabs on https://diy-pwa.dev today and looking
at Pascal's pull request.
Thanks so much
Rich
On Tue, Jan 2, 2024 at 10:49 AM Pascal Birchler ***@***.***>
wrote:
> My old PR for adding WP-CLI to WP Playground can be found here: #161
> <#161>
>
> That was a long time ago and a lot has changed in the meantime, so not
> sore if it still provides any value. It runs in the browser and has to
> interact with the virtual FS there, which is a bit tricky. Using WP-CLI
> with wp-now is definitely much easier, but I am not familiar with how it
> works behind the scenes. So I can't really provide additional insights,
> sorry!
>
> —
> Reply to this email directly, view it on GitHub
> <#899 (reply in thread)>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AACUSY56ETSSPAI4VRYRONLYMQUARAVCNFSM6AAAAABA7XG7ESVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TSOJUGY2DK>
> .
> You are receiving this because you were mentioned.Message ID:
> <WordPress/wordpress-playground/repo-discussions/899/comments/7994645@
> github.com>
>
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io |
skype/messenger: rhildred
--
Richard Hildred
signal/SMS/phone: +1.519.594.0900 | https://r
<http://waterlooHildreds.blogspot.com>hildred.github.io | skype/messenger:
rhildred
|
Beta Was this translation helpful? Give feedback.
-
|
This sounds fantastic, thank you so much for sharing – it is super useful! Do you remember what was the issue for the 14 students who weren't able to use Playground? I'd love to fix that. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I didn't communicate clearly. There were 14 students who didn't do the lab in class. It was only due at midnight last night. When I look at them, I have submissions from all but 3 students. 1 of these students isn't back from their home country yet. I am pretty sure that the other 2 have similar problems. Not wordpress-playground problems at all. The only student with an issue was the height problem that resolved in firefox. |
Beta Was this translation helpful? Give feedback.
-
|
Yay thank you so much for sharing! I'll keep an eye on the firefox issue, and if you stumble upon it again then feel free to open a new issue. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @rhildred! I've been away for christmas and new year and only came back yesterday. I may not be able to read through this discussion today, but just wanted to let you know I'm back and will follow up shortly :) |
Beta Was this translation helpful? Give feedback.
-
|
I hope that you had a nice holiday @adamziel . The thread is evolving as I understand wordpress playground and wp-now better. With the code in my playground-tools pull request #137 so that I can mark, I am good until Jan 26. Ideally the following week, I would like for my students to be able to publish their assignments. To publish their assignments I need a wp-cli plugin to create static html in node that I am working on. When I was testing I discovered the pull request doesn't include the theme like the downloaded .zip does #928. I will need a fix for that before they can publish their assignments on their github accounts. Last year when I did this course I had the students publish only their last assignment on altervista so I could do the same this year if all else fails. There are a few other nice to haves in the git integration part that I would like to propose if you also think that they are good ideas. I like the clone and pull request github integration better than the clone, add, commit and push integration I had last term for my html class. One thing that I liked about my integration was creating a classic token and storing it in local storage. That grew out of problems that I experienced with the oauth approach. It is a small thing, but I felt that it reduced friction last term that my students experienced with the oauth approach and stackblitz. A 2nd nice to have would be doing an initial clone based on the url. https://playground.wordpress.net/~/gh/rhildred/cool-site for instance. This would provide an opportunity to link to the playground in a readme file and come up with the repository already loaded. I used this with lab starter repositories that the students forked to do a more complicated lab in my .html class. Another nice to have for group work, would be for the pull request to require that it be based on the latest commit. Kind of like optimistic locking on a commit hash. Finally on the week of Feb 26, I will start the students on child themes. I resurrected the one-click-child-theme plugin and added a javascript file to it with a custom element in it. When I was testing I successfully used tools/theme editor to edit the style.css and the customElements.js file. Then I could use the site editor to add the custom element to a footer pattern. Last term I had a file browser and editor that I was keen on re-using in the wp-content folder. I approached wp-now and wordpress-playground from the idea of building on what I had last term. Now I don't think that I need all of that, at least this term. My first class with https://playground.wordpress.net/ was a real success. A lot of friction was removed by not needing to install php, git and vscode on their macs. Particularly php. https://playground.wordpress.net/ worked on safari chrome and firefox. I found myself making more focus on my main idea which is to develop a user experience collaboratively with a customer. The customer can then continue to build that user experience after the user experience designer has moved on. Last term, for my .html class I started out using stackblitz and had to provide an alternative for the 3rd of the class that couldn't get stackblitz to work. A lot of the trouble that I had with stackblitz was related to their git integration, but I did experience web container troubles too. I like your approach with https://playground.wordpress.net/ and playground tools. Almost everything that I tested worked with wordpress playground with the exception of my bug report #928. I am pretty sure that I can make a pull request for that bug report and for the nice to haves that I listed above. Of course if there is some of it that you would do that would be great too. I feel that I will have a better user experience this term and am eager to put my strength in to building on your excellent work and making it so. |
Beta Was this translation helpful? Give feedback.
-
|
This was so nice to read @rhildred, thank you for using WordPress Playground and taking the time to build on top of it and share this feedback!
FYI wp-cli support is on the roadmap! It's coming together slowly, though, as it heavily uses
I think a support for that is an amazing idea! In fact, there is support for keeping tokens in local storage, but it's restricted to the development version at the moment as I couldn't figure out how to prevent WordPress plugins from accessing that token. I wouldn't mind opening that up, though, for folks who are okay with running
I like that! Would you please open an issue for that so that we can have a dedicated space to track that?
This sounds nice! I'm just trying to figure out what would happen if the trunk changed in the meantime? An automatic rebase would surely be nice, but what should happen when there are conflicts?
A-ha! Playground is removing core WordPress themes from these Pull Requests to reduce the noise. My assumption was that twentytwentyfour is shipped with the latest WordPress version so the developer should be able to apply the PR on top of a fresh WordPress release to get it to work. I can see how you may actually need the theme to be there, and the inconsistency between the exported |
Beta Was this translation helpful? Give feedback.
-
That would be incredibly helpful @rhildred, thank you for proposing! I'll support you however I can. |
Beta Was this translation helpful? Give feedback.
-
|
I updated pull playground-tools pull request #137 to make a dist folder that I can use with my wp-cli wp-bundler package. I need wp-cli on wp-now rather than wordpress-playground because I want to run my build in node on github and cloudflare pages. I noticed the proc open issue for the inbuilt wp-cli command I feel that this is likely because startWPNow is doing too much for me, but I get my dist/index.html and it looks right from https://github.com/rhildred/wp-bundler. I am hoping to finish this weekend. I don't need anything else in wp-now. |
Beta Was this translation helpful? Give feedback.
-
|
Just one other thing. I am marking them now with Better even yet when you merge my pull request ;) |
Beta Was this translation helpful? Give feedback.
-
|
I left a note in that PR: WordPress/playground-tools#137 – I would love to hear your thoughts on that! |
Beta Was this translation helpful? Give feedback.
-
|
I got my plugin producing static html that looks like the wordpress site when I run npx http-server in the dist folder. Unfortunately it only works once as wordpress does require_once. In hindsight that seems obvious ;). Right now I am thinking that I will use wp-now only for marking. My wp-cli change works, but will be too slow for static page generation. I am planning on making my wp-cli plugin a vite plugin that downloads a wordpress in a folder and copies the .zip/repo from my students over top in javascript. In javascript it goes over the posts and gets the post-name field for the slugs. Then it makes a php and generates 1 html page per slug using $_SERVER["PATH_INFO] and ob_start. |
Beta Was this translation helpful? Give feedback.
-
Do you mean the |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately https://playground.wordpress.net became unreachable in the middle of my class tonight. I am getting my students to save a .zip and I will figure out what to do in the morning. |
Beta Was this translation helpful? Give feedback.
-
|
I'm sorry to hear that @diy-pwa! Do you remember what was the error? Was related to Playground.wordpress.net side? Or was it an internet connection in the class? |
Beta Was this translation helpful? Give feedback.
-
|
I made enough progress for my students to do assignment 1. For the labs, my students have been handing in .zips downloaded from playground.wordpress.net. We are going in to week 4 so the 3 labs till now have been simple. I would like my students to publish their assignments on github pages so that they can include them in their portfolios. |
Beta Was this translation helpful? Give feedback.
-
|
This is lovely @diy-pwa, thank you so much for sharing! I wonder if that would work as a WordPress plugin – this way it could be ran directly from the site, whether it runs in in-browser Playground or inside wp-now. Also, cc @jonathanbossenger @youknowriad @michalczaplinski @sejas @danielbachhuber who might be interested in the static site generator. |
Beta Was this translation helpful? Give feedback.
-
|
When I tried to upload my zip from playground.wordpress.net to github I hit a limit of 100 files. Luckily I have code from last term that will upload a .zip to a checked out copy of the repository in a stackblitz container. I hacked that a little to separate the preview window from the editor windows and posted it at https://diy-pwa.dev. Try running |
Beta Was this translation helpful? Give feedback.
-
What limit are you referring to? Is it a GitHub limit? Or is it something in WordPress Playground?
❤️ this is amazing! |
Beta Was this translation helpful? Give feedback.
-
|
Wanted to give an update on this thread. I had class Monday night. It was a bit frustrating because of #977. My students had their assignment 1 due at midnight last night. I am looking at a few of them now using wp-pwa. I am pretty happy. I have wp-pwa working in a stackblitz web container. Unfortunately it takes around a minute to bring up the /wp-admin/ dashboard. I think that next week, I will get the students to install vscode on their macs and use wp-pwa for the lab. wp-pwa build makes a dist folder that can be published on github pages using this workflow: name: GitHub Pages
on:
push:
branches:
- main
pull_request:
jobs:
deploy:
runs-on: ubuntu-22.04
permissions:
contents: write
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Cache dependencies
uses: actions/cache@v3
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npx wp-pwa build <repository name here>
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/main'
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./distMy plan is to finish off the term using vscode and wp-pwa. I will enter an issue on wordpress playground and stackblitz web containers about the performance issue. Unless you already have an idea???? Anyone who figured out this: <?php
// Needed because gethostbyname( 'wordpress.org' ) returns
// a private network IP address for some reason.
add_filter( 'allowed_redirect_hosts', function( $deprecated = '' ) {
return array(
'wordpress.org',
'api.wordpress.org',
'downloads.wordpress.org',
);
} );can probably figure out a little performance problem. My hat is off to you sir!!!! |
Beta Was this translation helpful? Give feedback.
-
I'm sorry to hear that! I'm exploring a fix in #1001
StackBlitz support is a work in progress at the moment. Would you mind sharing the reproduction so me and @d3lm can investigate @diy-pwa?
This is amazing, thank you so much for sharing! |
Beta Was this translation helpful? Give feedback.
-
|
I have wordpress in a stackblitz web container at https://diy-pwa.dev. You can open a particular repo with https://diy-pwa.dev/~/gh/diy-pwa/coming-soon for instance. The code is all in the npm wp-pwa package. This is at https://github.com/diy-pwa/wp-pwa. My fork of vslite is at https://github.com/rhildred/vslite. The only wordpress related change that I made to vslite was this: if (serverPort >= 49152) {
return;
} |
Beta Was this translation helpful? Give feedback.
-
|
I forgot to mention that I also made a isomorphic git based cli that uses a developer token to access github. https://github.com/diy-pwa/git-pwa. |
Beta Was this translation helpful? Give feedback.
-
|
I had class last night and we were able to publish a number of wordpress sites on github pages. Check out https://lebleb03.github.io/Ux221take3/ and https://emilyychau.github.io/UX221-A01/. The workflow step seemed to go fine. They struggled with the developer token the most, but in another instance they struggled with oauth too. At least with the developer token, I can troubleshoot easier. |
Beta Was this translation helpful? Give feedback.
-
|
I wanted to give you an update as my term is pretty much done. I was able to get my entire class to publish websites made with serverless wordpress on github pages. I made a static site generator https://github.com/diy-pwa/diy-pwa that builds to the /dist folder in javascript for every commit. You can check out https://rhildred.github.io/March25 and https://github.com/rhildred/March25 if you are interested. I had students create their repositories with the README link in them. The also added the .github/workflows pages.yaml file. When they followed the README link they hacked on their site until they met the technical requirements. Marking this term was glorious. At first I had the students hand in a .zip from playground.wordpress.net. I used https://github.com/rhildred/ranalyze to put each student's .zip in it's own subfolder. In vscode I did In the fall term I have a systems design course in a post degree certificate program. My plan is to use https://diy-pwa.com as a low code platform to integrate micro-front ends, and to get my students to make a prototype this way. I also have a 2nd year user experience design course in html, css, and js. Last fall I used stackblitz containers for that. This year my plan is to use opfs and playground as a static web server for that. @adamziel 's point about checking for a static file first on issue #1186. makes a lot of sense in this scenario. Sorry that this is long. I want to finish by saying, "Thanks so much for your work on wordpress-playground. " It works so well with such amazing performance. I couldn't find better work with opfs on the internet. I did find https://github.com/streamich/memfs to be very helpful as well. Looking forward to speaking with @bgrgicak next week some time. Thanks again Rich |
Beta Was this translation helpful? Give feedback.
-
|
Rich - this is awesome!! |
Beta Was this translation helpful? Give feedback.
-
|
This is fantastic @rhildred., thank you so much for sharing! The PWA app sounds lovely and I would love to explore using it for https://github.com/adamziel/playground-docs-workflow/ – we already have a way of previewing and editing documentation pages stored on GitHub using Playground, and turning them into a static site would make them very lightweight to serve. Would it be okay to reuse your work from the https://github.com/rhildred/March25 repository? Also, I started hitting the same wp-now issues with modes you were describing. I'd love to get those fixed.
How are you using it at the moment? Are the students sites uploaded there somehow?
Don't be! This is gold, please keep sharing ❤️
Aww thank you so much! You might be interested to learn there's still a lot of OPFS optimizations we can do, just never gotten around to them. We use the asynchronous API, but there's also a synchronous version that seems much faster. Also, we could only synchronize wp-content to the disk instead of the entire WordPress directory. There's a lot of work ahead! |
Beta Was this translation helpful? Give feedback.
-
|
Also, how are you using https://github.com/streamich/memfs? |
Beta Was this translation helpful? Give feedback.
-
@rhildred, I noticed you want to use Playground with your students. I'd like to find a way for you to make it work!
Here's what's possible today without installing anything:
https://videos.files.wordpress.com/pWiRwvdt/plugin-dev-full.mp4
That is:
Would that workflow work for you? One thing that is missing is building the JavaScript files, which may be a problem when you're building React components. Is a JavaScript bundler a must-have for you?
Beta Was this translation helpful? Give feedback.
All reactions