Theme rewrite

README.md

@@ -1,2 +1,14 @@
 # 508.dev
-Homepage of 508.dev, an accessible web development engineering firm. 
+Homepage of 508.dev, an accessible web development engineering firm.
+
+# Styling
+
+Using wing: https://kbrsh.github.io/wing/#guide
+
+Use gradients: https://cssgradient.io/
+
+Use clip paths: https://bennettfeely.com/clippy/
+
+Dope patterns: https://projects.verou.me/css3patterns/#seigaiha
+https://isotropic.co/website-background-patterns/
+https://css-tricks.com/a-few-background-patterns-sites/

content/_index.md

@@ -1,71 +1,96 @@
 ---
-title: 508.dev
+title: why is this hard
 date: 2022-09-27T15:26:23-06:00
 categories: []
 tags: []
 subtitle: Software Engineering Services
 ---
 
-# What is 508.dev?
-We are a US-registered LLC that provides general software engineering services, consultation, and project-based development. In particular, our team has a lot of experience in developing accessible web applications. We're based in Taiwan, and have a greater goal of exposing the highly skilled talent here in Taiwan to the global market.
+## What's hard?
 
-# How can I contact you?
+The internet.
 
-Email [email protected]
+## What's so hard about the internet?
 
-# Portfolio?
 
-Click company names for further project details.
+{{<cardlist>}}
+    {{<card title="Designing"  icon="geometry">}}
+    Designing is hard. A design has to be attractive, implementable, accessible, and understandable.
+    {{</card>}}
+    {{<card title="Building"  icon="hammer">}}
+    Building is hard. You have to choose a tool, balance speed against good code practice, and consider rapidly changing web technologies.
+    {{</card>}}
+    {{<card title="Hosting"  icon="server">}}
+    Hosting is hard. Depending on your build strategy, you could have hundreds of possible hosting strategies, let alone thousands of hosting providers. How do you know which are good? How do you know you're getting your money's worth?
+    {{</card>}}
+    {{<card title="Securing"  icon="shield-lock">}}
+    Security is hard. Very, very hard, and the consequences of getting it wrong are dire.
+    {{</card>}}
+    {{<card title="Maintaining"  icon="bandage">}}
+    Maintenance is hard, and annoying. How do you balance maintaining old features while building new ones? How do you decide when to upgrade?
+    {{</card>}}
+    {{<card title="Billing"  icon="receipt">}}
+    Billing can be hard to nightmarish depending on your service model and payment methods. Billing can also cut into your bottom line for every transactiona.
+    {{</card>}}
+{{</cardlist>}}
 
-* [Cofactr](https://www.cofactr.com/), building from scratch a hardware parts search and management app with a bill of materials builder and ecommerce features. Typescript, React, Redux, Python
-* [Jovono](https://www.jovono.com/), straightforward porftolio site for a startup investment firm. Typescript, React, Airtable
-* [Curative](https://www.curative.com/), massive appointment booking software that handles thousands of appointments per day. Typescript, React, Redux, Python.
-* [Google Careers](https://careers.google.com/), Google's job platform. Typescript, Vue, Vuex, Python.
+## Designing
 
+You've started a company, you're releasing a product line, you're organizing a conference, you're doing something that you need to have an internet resource for, that's fantastic news! But... how should it look? What features should it have, and what's the best way to present those features? Are you going to design it yourself? Using what tools? Are you going to outsource the design? To an agency? Who? Are you going to hire a designer? How do you find a good one?
 
-# Capabilities?
+These are all questions we've answered many ways here at 508.dev. We figured we might as well write what we learned down:
 
+* Designing Websites in 2022
+* Hiring Design Agency Best Practices
 
-* Build fullstack applications in the healthcare, finance, supply chain, and game industries
-  * In React, Vue, Next.JS, or whatever hot new framework was invented yesterday
-* Upgrade existing web applications
-  * To bring them up to [WCAG-AA](https://www.w3.org/WAI/standards-guidelines/wcag/) standards
-  * Transform a no-code platform app into a fully featured SPA
-* Consult on, and / or manage, your project
-  * Software Architecture
-  * Project Management, across as many timezones as you can throw at us
-* Perform [VPATs](https://www.section508.gov/sell/vpat/)
+Need more information? Send us an email at [email protected], we'll let you know what we know, who we've worked with that we trust, or if you'd like, we can work with you directly for a design solution, like we've done with other clients.
 
-# Team?
+## Building
 
-[Caleb](https://calebjay.com/resume.html) is a software engineer out of San Francisco with 6 years of experience developing applications for companies like Google, Curative, Humcapital, Potato, and Twilio. See the resume link for more info.
+Either you have a design or you're going to jump feet-first into a website or app without one (brave!), whatever path you take, you need to build something. The internet can be so desceptively simple: in the end, everything you're looking at is just HTML, right? (kind of!) Unfortunately, or perhaps fortunately, there are thousands of ways to generate that HTML, depending on your needs, what you're trying to build, what your hosting strategy will be, how you'll generate content, and how you plan on maintaining your website or application.
 
-Other teammembers resumes are pending, we have been fortunate in our search for project work and so none of us have had much time to update our personal sites!
+At 508.dev we think it's all gotten a bit too complicated, so it's been our goal to make building apps and websites as simple as possible for our clients. We've written some of what we learned below, but if you have any questions, or even just need some advice, feel free to email us at [email protected] .
 
-# Technologies?
+* So You Wanna Build a Website
+* Do We Need a Web App or a Web Site?
+* Three Hundred Ways to Build Stuff for the Internet
 
-* Javascript / Node / Typescript, Python, HTML, CSS
-* All major web frameworks, including React, Vue, Svelte, Angular, and even Backbone
-* Most major backend frameworks, including Django, Express, FastAPI, Sails.js, and Flask
-* Testing software such as Jest, pytest, Selenium, Cypress, Mocha, Chai, and Jasmine
-* Bundling software such as Webpack, Rollup, Grunt, Gulp, and Make
-* Cloud platforms such as AWS, Google Cloud (GCP), and Azure
-* Github, Gitlab, Trello, Linear, Asana, Podio, Jira
-* Docker
+If you just neeed something built, that's also something we can handle. Send us an email and we can help figure out if we're a good fit for your needs: [email protected] .
 
-# Incapabilities?
 
-None of us have ever touched Laravel, Ember, or ASP .NET. If you have a project like this, we can still recommend accessible web engineering strategies, perform a VPAT, or offer general consultation, but we would probably recommend another team if you need actual development work done.
+## Hosting
 
-# Billing?
+You've designed something, you built it, now you have some files and you need to have them served (or a program you need to have run) in a way that other people can see them in their browsers or phones. So, who's going to rent you a computer and configure everything in a way that makes the forces that run the internet happy to serve your content? The good news is, there's probably not an industry on earth with more rich competition than the world of web hosting. The bad news is, well, the same news, because all that competition means you have your work cut out for you choosing. Luckily for you, here at 508.dev, we've made this choice a many times, and we don't lock ourselves into one vendor out of convenience: we're always seeking the best value proposition for our clients, and written about our experiences doing so:
 
-We've done, and are comfortable with any of the following:
+* How Do I Put Stuff on the Internet?
+* Static Websites vs App Servers
+* How to Ensure You're Getting Your Money's Worth from Your Hosting Provider
 
-* Project based
-* Hourly / Consultation
-* Maintenance
+## Security
 
+One of the most fraught, and in our experience, misunderstood subjects in the world of internet business applications. On the one hand you have literally millions of unsecured app leaking customer and employee data to anybody with an internet connection, and on the other you have fear mongering companies charging clients for security services that at best are something their clients could easily manage on their own with a little helpful information (read below!), at middling are services that don't actually do anything, and at worse implement back doors that they can turn around sell to black market clients.
 
-# Values?
+Security doesn't have to be scary. Good security is getting easier every day to implement, and depending on your needs, you probably don't need to pay somebody else to handle this for you. If you're worried and want to know whether you should look into getting a security audit or seeking a network security certification of some kind, feel free to email us at [email protected] and we can have a quick convo about whether you need to go out of your way like that. In the meantime, see if what we've learned over the years while serving our clients can help you, help yourself:
 
-Caleb moved to Taiwan from San Francisco and found the engineers he was meeting in his new home to be ridiculously skilled considering the somewhat stale job market in Taiwan. Other than improving web accessibility wherever possible, we're interested in internationalizing the Taiwan engineering talent pool. For our clients, it means they get Bay Area-level engineering at a discount, for 508, it means we get to build out Silicon Valley engineering mindsets here in Taiwan, with the goal of eventually converting to a product company. To that end, even if you aren't interested in hiring a full engineering team, send Caleb an email anyway, he may be able to put you in touch with an excellent engineer in Taiwan.
+* Three Small, Easy Ways to Dramatically Increase Your Web Security
+* It Isn't Hard to Get HTTPS
+
+
+## Maintenance
+
+Too many wonderful websites rot slowly, unusable within even a few months of being built, and for no good reason! Updating plugins, renewing HTTPS certificates, patching security vulnerabilities, fixing broken links and APIs, the house cleaning for a website or webapp never really ends, but if your web stuff is built right, hopefully you won't have to spend too much time over the years on maintenance. 508.dev has been around for a while, and we've learned a few things about keeping maintenance costs down:
+
+* Website Biannual Maintenance Checklist
+* When to Upgrade an Old Site
+
+Of course, if you just want some experts on retainer to keep an eye on things for you, we can help find you someone, or take care of that ourselves. Send us an email at [email protected] to start a conversation about whether this is something you need to be outsourcing.
+
+
+## Billing
+
+Websites are fun, but making money is even more fun. Whether you're charging for your ecommerce site, access to your online classes or articles, or charging for tickets, somehow, you need to get money from your customer's pockets, and into yours, in a way that makes everyone involved feel safe.
+
+Billing is an interesting space in the internet world. Billing related features are the most obvious targets for hacking, and for the same reason off-the-shelf tools are often some of the most secure products you plug into your website. On the other hand, good competition is slim, because between regulation and integration with various payment methods (credit card, bank transfer, etc), there's only really a few companies that have reasonable products on the market for collecting money. They're not *too* hard to get running on your own, take a read of what we've learned setting up billing for our clients and see if you can manage it, if not, setting up online billing is something we can help you with. Email us at [email protected]
+
+* How Can I Charge Money on the Internet?
+* Stripe or Square, or Something Else?

layouts/_default/baseof.html

@@ -9,9 +9,13 @@
     <title>{{ block "title" . }}
       {{ .Site.Title }}
       {{ end }}</title>
-    <link rel="stylesheet" href="css/pure.css">
-    <link rel="stylesheet" href="css/puregrid.css">
+    <link rel="stylesheet" href="css/wing.css">
+    <link rel="stylesheet" href="css/blueprint.css">
     <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Josefin+Sans">
+
   </head>
   <body>
     <!-- Code that all your templates share, like a header -->
@@ -21,5 +25,6 @@
     {{ block "footer" . }}
     <!-- More shared code, perhaps a footer but that can be overridden if need be in  -->
     {{ end }}
+
   </body>
 </html>

layouts/index.html

@@ -1,9 +1,8 @@
 {{ define "main" }}
 <main aria-role="main">
-  <header class="flex flex-column flex-align-center">
-    <h1 class="title">{{.Title}}</h1>
+  <header class="row">
+    <h1 class="title col-12">{{.Title}}</h1>
     {{ with .Params.subtitle }}
-    <h1 class="subtitle">{{.}}</h1>
     {{ end }}
     {{ with .Params.description }}
     <h2 class="description">{{.}}</h2>

layouts/shortcodes/card.html

@@ -0,0 +1,25 @@
+<div class="card" id="card-{{.Get "title"}}">
+
+  <i class="ti ti-{{.Get "icon"}}"></i>
+
+  <h2>{{.Get "title"}}</h2>
+  <p>{{.Inner }}</p>
+</div>
+
+<script type="text/javascript">
+ (function() {
+   const card = document.getElementById('card-{{.Get "title"}}');
+   card.addEventListener('click', (event) => {
+     const targetClassList = card.classList;
+     if (targetClassList.contains('active')) {
+       if (event.target.nodeName !== 'P') {
+         targetClassList.remove('active');
+       }
+     } else {
+       targetClassList.add('active');
+     }
+   });
+
+   console.log(card)
+ })();
+</script>

layouts/shortcodes/cardlist.html

@@ -0,0 +1,3 @@
+<div class="cards" bp="grid 12@sm 6@md 4@lg 4@xl">
+  {{ .Inner }}
+</div>

layouts/shortcodes/question.html

@@ -0,0 +1,8 @@
+<div class="row">
+  <h2 class="col-12 wicked">
+    {{.Get "question"}}
+  </h2>
+  <p class="col-12">
+    {{.Get "answer"}}
+  </p>
+</div>