Switch to tailwind #162

davidfischer · 2024-06-15T17:01:27Z

This PR will switch the static assets from Bootstrap 4 to TailwindCSS 3. The actual site will still look pretty similar.

JS dependencies are drastically reduced to just Tailwind, HTMX (used to async fetch videos and upcoming meetups)~~, and Hyperscript (used to expand/collapse the navigation menu on mobile). Hyperscript could be completely removed if we want to just have a few lines of custom JS to power the menu.~~
From a network transfer size, CSS difference (before zipping) is 143.7kb with Bootstrap vs. 7.9kb with Tailwind. JS bundle difference is 212.8kb with Bootstrap+HTMX vs. 148.5kb with HTMX+Hyperscript. Including gzipping, we're looking at 90.9kb with Bootstrap vs. 45.1kb with Tailwind for about half the total network transfer. As a result, the site should load faster especially on slower network connections with these changes. The total gzipped transfer will be 20.0kb with these changes vs. 90.9kb before.

Testing it out

Pull and checkout this branch: git pull && git checkout davidfischer/switch-to-tailwind
Install dependencies and build new static assets: npm run install && npm run build
Run the dev server: ./manage.py runserver
Open your browser to http://localhost:8000

Note: don't forget to rebuild the old static assets when you switch to another branch.

Screenshots

Fixes #153.

- Remove Webpack (woot!) - Add Hyperscript for the navigation menu

package.json

- Rev the minor version - Add a description - Update GitHub links

- Menu toggle is handled by custom JS

davidfischer · 2024-06-16T15:16:04Z

I also added a commit to remove Hyperscript. It seems like overkill and an unnecessary dependency for now. If it becomes useful, we'll add it back but seems odd to add a huge dependency instead of 3 lines of JS.

- Move under the pythonsd/ directory where the template that uses it lives - Remove copying static files in package.json. Not needed after moving the main.js - Remove logging when debug false (can't get errors otherwise)

package-lock.json

pythonsd/static/js/main.js

Co-authored-by: Jeremy <[email protected]>

Jer-Pha · 2024-06-16T20:48:02Z

This is more of a general conversation but it could be grouped into these changes:

Do we want target="_blank" for links that leave the site? It's currently on the MeetUp links on the organizer page (from my original PR), but no other external links use it. It comes down to Usability vs. Marketing. Even though I would personally add it to all external links, I think the target audience of this site doesn't need that choice made for them.

pythonsd/templates/pythonsd/index.html

Co-authored-by: Jeremy <[email protected]>

davidfischer · 2024-06-16T21:16:44Z

Do we want target="_blank" for links that leave the site?

I don't feel particularly strong but I generally don't open links in new windows unless there's a reason or an expectation that that should happen.

Jer-Pha

Only minor suggestions based on the external link conversation. The switch to Tailwind looks good. Good call removing Hyperscript for a single element.

pythonsd/templates/pythonsd/organizers.html

Co-authored-by: Jeremy <[email protected]>

Jer-Pha

Overall, this looks great! None of these suggestions are necessary. Just minor formatting stuff. This looks ready to merge as-is.

pythonsd/templates/pythonsd/organizers.html

Jer-Pha · 2024-06-22T02:38:07Z

pythonsd/templates/pythonsd/base.html

+        <div id="navigation-toggle" class="h-6 w-6 cursor-pointer md:hidden block text-slate-100">
+          <svg xmlns="http://www.w3.org/2000/svg" id="menu-button" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </div>
+
+        <div id="navigation-menu" class="hidden w-full mt-4 md:w-auto md:flex md:items-center md:mt-0">
+          <ul class="md:flex md:justify-between font-extrabold mb-0">
+            <li class="py-2 md:mr-5">
+              {% url 'code-of-conduct' as conduct_url %}
+              <a class="text-slate-100 hover:text-slate-300" href="{% if request.path != conduct_url %}{{ conduct_url }}{% else %}#{% endif %}">Code of Conduct</a>
+            </li>
+            <li class="py-2 md:mr-5">


Suggested change

<div id="navigation-toggle" class="h-6 w-6 cursor-pointer md:hidden block text-slate-100">

<svg xmlns="http://www.w3.org/2000/svg" id="menu-button" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>

</svg>

</div>

<div id="navigation-menu" class="hidden w-full mt-4 md:w-auto md:flex md:items-center md:mt-0">

<ul class="md:flex md:justify-between font-extrabold mb-0">

<li class="py-2 md:mr-5">

{% url 'code-of-conduct' as conduct_url %}

<a class="text-slate-100 hover:text-slate-300" href="{% if request.path != conduct_url %}{{ conduct_url }}{% else %}#{% endif %}">Code of Conduct</a>

</li>

<li class="py-2 md:mr-5">

<div id="navigation-toggle" class="h-6 w-6 cursor-pointer sm:hidden block text-slate-100">

<svg xmlns="http://www.w3.org/2000/svg" id="menu-button" fill="none" viewBox="0 0 24 24" stroke="currentColor">

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>

</svg>

</div>

<div id="navigation-menu" class="hidden w-full mt-4 sm:w-auto sm:flex sm:items-center sm:mt-0">

<ul class="sm:flex sm:justify-between font-extrabold mb-0">

<li class="py-2 sm:mr-5">

{% url 'code-of-conduct' as conduct_url %}

<a class="text-slate-100 hover:text-slate-300" href="{% if request.path != conduct_url %}{{ conduct_url }}{% else %}#{% endif %}">Code of Conduct</a>

</li>

<li class="py-2 sm:mr-5">

Ignore this if there are plans to add a third link.

I think I'm going to skip this change. There aren't plans to add a 3rd top navigation link but I also want to keep it simple if we do decide to change it. I'm also not particularly worried if users with screens narrower than 768px have to toggle the nav button.

Jer-Pha · 2024-06-22T02:51:19Z

pythonsd/templates/pythonsd/index.html

+      <div>
+        <h2>Latest video</h2>
+
+        <div id="youtube-widget" hx-get="{% url 'recent_videos' %}" hx-trigger="load">


The two hx-get requests could be combined into a single request using hx-swap-oob. This would require a third view that calls the other two. Probably not necessary unless there's concern over bandwidth.

I am not particularly concerned about bandwidth and the overhead of a 2nd request to the same domain in HTTP2 (used in prod) is pretty minimal. For now, I think the current setup is simpler, allows the views to fail/succeed independently, and easily allows them to be cached separately.

Jer-Pha · 2024-06-22T03:01:38Z

pythonsd/templates/pythonsd/base.html


    <main role="main">
      {% block main %}{% endblock main %}
    </main>

    {# FOOTER #}
-    <footer class="container">
+    <footer class="container mx-auto">


(Personal preference) I liked the old footer better on larger displays (more compact) but the new format looks better on mobile. (stacked lines and centered icons).

This is fair. I think I like the old footer as well on larger displays although I'm not particularly worried about how compact it is. I think I like the look of the new icon spacing a bit better in the new footer but I don't love the spacing of text in the new footer.

I wonder if we could switch it to 2 text sections instead of 3. In reality, "edit on github" and the version could be condensed into one as they are related. See screenshots. Thoughts?

I merged this PR without changing this but I'd be happy to do a separate PR with this if you think this is an improvement.

Co-authored-by: Jeremy <[email protected]>

willingc

Love this! Thanks @davidfischer for simplifying and getting rid of webpack 😉

davidfischer added 3 commits May 29, 2024 17:51

Switching to tailwind

8427ca1

Merge branch 'main' into davidfischer/switch-to-tailwind

c1a538f

Update remaining templates to TailwindCSS

5b9318a

- Remove Webpack (woot!) - Add Hyperscript for the navigation menu

davidfischer requested a review from a team June 15, 2024 17:01

Build static assets for production in Docker

eae841d

Jer-Pha reviewed Jun 16, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

davidfischer added 2 commits June 16, 2024 08:01

Update package.json

181416e

- Rev the minor version - Add a description - Update GitHub links

Remove Hyperscript from Tailwind migration

c6f9909

- Menu toggle is handled by custom JS

davidfischer added 2 commits June 16, 2024 08:32

Slight refactor of custom JS

1d0e4fd

- Move under the pythonsd/ directory where the template that uses it lives - Remove copying static files in package.json. Not needed after moving the main.js - Remove logging when debug false (can't get errors otherwise)

Put menu "first" but make it async

7d3e1b7

Jer-Pha reviewed Jun 16, 2024

View reviewed changes

package-lock.json Outdated Show resolved Hide resolved

Update package-lock

3bdf921

Jer-Pha reviewed Jun 16, 2024

View reviewed changes

pythonsd/static/js/main.js Outdated Show resolved Hide resolved

Update pythonsd/static/js/main.js

b74ceea

Co-authored-by: Jeremy <[email protected]>

Jer-Pha reviewed Jun 16, 2024

View reviewed changes

pythonsd/templates/pythonsd/index.html Outdated Show resolved Hide resolved

Jer-Pha reviewed Jun 16, 2024

View reviewed changes

pythonsd/templates/pythonsd/index.html Outdated Show resolved Hide resolved

davidfischer and others added 2 commits June 16, 2024 14:14

Update pythonsd/templates/pythonsd/index.html

35c3381

Co-authored-by: Jeremy <[email protected]>

Update pythonsd/templates/pythonsd/index.html

613a3fa

Co-authored-by: Jeremy <[email protected]>

Jer-Pha suggested changes Jun 16, 2024

View reviewed changes

pythonsd/templates/pythonsd/organizers.html Outdated Show resolved Hide resolved

pythonsd/templates/pythonsd/organizers.html Outdated Show resolved Hide resolved

davidfischer and others added 2 commits June 16, 2024 14:23

Update pythonsd/templates/pythonsd/organizers.html

d3ea80d

Co-authored-by: Jeremy <[email protected]>

Update pythonsd/templates/pythonsd/organizers.html

45cbefa

Co-authored-by: Jeremy <[email protected]>

Jer-Pha approved these changes Jun 22, 2024

View reviewed changes

davidfischer and others added 2 commits June 22, 2024 07:30

Update pythonsd/templates/pythonsd/organizers.html

d79f904

Co-authored-by: Jeremy <[email protected]>

Update pythonsd/templates/pythonsd/organizers.html

0e66a31

Co-authored-by: Jeremy <[email protected]>

davidfischer mentioned this pull request Jun 22, 2024

Bump braces from 3.0.2 to 3.0.3 #163

Closed

willingc approved these changes Jun 22, 2024

View reviewed changes

davidfischer merged commit e3effc0 into main Jun 22, 2024
1 check passed

davidfischer deleted the davidfischer/switch-to-tailwind branch June 22, 2024 18:55

Switch to tailwind #162

Switch to tailwind #162

Uh oh!

Conversation

davidfischer commented Jun 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing it out

Screenshots

Uh oh!

Uh oh!

davidfischer commented Jun 16, 2024

Uh oh!

Uh oh!

Uh oh!

Jer-Pha commented Jun 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

davidfischer commented Jun 16, 2024

Uh oh!

Jer-Pha left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Jer-Pha left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Jer-Pha Jun 22, 2024

Choose a reason for hiding this comment

Uh oh!

davidfischer Jun 22, 2024

Choose a reason for hiding this comment

Uh oh!

Jer-Pha Jun 22, 2024

Choose a reason for hiding this comment

Uh oh!

davidfischer Jun 22, 2024

Choose a reason for hiding this comment

Uh oh!

Jer-Pha Jun 22, 2024

Choose a reason for hiding this comment

Uh oh!

davidfischer Jun 22, 2024

Choose a reason for hiding this comment

Uh oh!

davidfischer Jun 22, 2024

Choose a reason for hiding this comment

Uh oh!

willingc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

davidfischer commented Jun 15, 2024 •

edited

Loading

Jer-Pha commented Jun 16, 2024 •

edited

Loading