The future of many jobs may seem uncertain, even in the Coeur d'Alene and Spokane area. 

Upon encountering ChatGPT, it's natural to feel apprehensive, but let's not forget the rooms full of human "computers" in the 1950s. Rather than succumbing to fear, let's predict where this technology is heading and develop skills and tools to harness the power of AI.



<div style="max-width: 420px; margin: 0 auto;">
     <img src="/assets/images/articles/midjourney_1.jpg" class="img-bordered">
     <br>
     <small><i>Some fun attempts to generate an avatar, using [Midjourney](https://midjourney.com/)</i></small>
</div>

The release of ChatGPT revolutionizes AI's role in business, offering our boutique 
software studio the opportunity to provide clients with innovative solutions. By 
harnessing ChatGPT, we can develop intelligent chatbots, enhance content generation, 
and create tailored AI agents to streamline clients' operations and elevate their 
digital presence.

# How we're using AI

### Chrome Upwork extension
Respond to job offers quickly by having an AI agent knowledgeable about your business generate proposals for you. Can answer questions like "what frameworks do you know?" or "talk about a recent project like this." Uses [OpenAI](https://openai.com/)

### Game development
We're leveraging AI to create artwork and large playable maps for our game. We doodle what the map should loosely look like and let AI fill in the rest.

### Website redesign
Building a fresh new design around [Midjourney](https://midjourney.com/).. the one you're browsing right now!

### Prompt Wars
A fun website using [InvokeAI](https://github.com/invoke-ai/InvokeAI) where users generate images that compete with others based on challenge topics.


## AI Agents

### FishingTravelAgent-GPT
   * For fun I made a quick fishing trip travel agent that helps you find the most interesting fishing spots on your journey

### JuniorEngineer-GPT
   * We're working on training an agent that can do basic coding tasks for us, like a junior engineer that's maybe Sophomore level in college
   * We can provide example tasks, ask for changes, and the agent will do its best to complete the task
   * This can be automated so the agent could look at new tasks, figure out how to do them, and push the code up


# How we can help you

Let's say you have a business that needs to do a lot of repetitive tasks, like
replying to customer support tickets, or maybe you need to generate a lot of
content for your website. We can help you create an agent that can do these
tasks for you.

We can also help you create an agent that can be your AI assistant. For
example, maybe you are annoyed by scheduling your employees every 2 weeks.. "Sally
doesn't get along with Bob, so we need to make sure they don't work together". We
can teach an agent about this, provide scheduling needs and requisite information, and
the agent will behave like a human scheduler!

Another application is in advertising. Compose a long list of straightforward ads, and let ChatGPT transform them into engaging, high-impact copy, optimizing your marketing efforts with ease.

Fun aside: in the past we helped architect the [Codalab](https://competitions.codalab.org/)
platform, which is a platform for hosting AI competitions. Our special piece
for that project was the ability to use "docker in docker" for student submissions.
This allowed AI research in C#, Julia, R, Python, etc.!




# Computers can see!?

Facebook (Meta) created the Segment Anything Model (SAM) using a dataset of 1 billion 
masks on 11 million images. This is an insane tool that can be leveraged quickly
to facilitate a strong AI agent.

<div style="text-align: center;">
     <img src="/assets/images/articles/SAM-model-Metas-new-Segment-Anything-Model-explained-4.webp" class="img-bordered">
     <small><i>Example SAM mask</i></small>
</div>

Maybe you have an assembly line where items are packaged, shipment labels are applied,
and then the packages are sent out. What if you could add cameras along the way
that help catch any potential problems?

Say you sometimes mix up some shipments, like shipping 1 BOX of items instead of 1 UNIT.
An AI agent could be trained to see the difference between a box and a unit.

Maybe sometimes a wheel gets stuck in the assembly line and the boxes start piling up,
an AI agent could see this problem and notify the appropriate people.

These ideas are not revolutionary on their own! The novel piece is how simple and quickly this can be done. 
Instead of needing a research team that can make all of the complex math work, we just
teach the AI agents like we teach a new hire. It's flexible and generic.


# Autonomous agents

A new thing coming out are Artificial General Intelligence (AGI) agents, like:
 - [BabyAGI](https://github.com/yoheinakajima/babyagi) - A baby AI that has limited memory and functionality
 - [ToddlerAGI](https://twitter.com/gogoliansnake/status/1643225698801164288/) - Modified baby agi, slightly more advanced
 - [TeenageAGI](https://github.com/seanpixel/Teenage-AGI) - Has a deep memory, more advanced than toddler
 - [AutoGPT](https://github.com/Torantulino/Auto-GPT) - attempt to make GPT-4 fully autonomous

# Let's bring your business into the AI future!

We're using AI right now with multiple clients. One client is developing a new
way to manage his pecan farm, leveraging [Github Copilot](https://github.com/features/copilot) 
along the way to speed up development.

ChatGPT and OpenAI: Unlocking the Potential of AI for Your Business

I certainly love most of my work, but my favorite part is pair programming, 
which is when a couple developers share a screen and work together solving 
problems, which facilitates spreading knowledge in a big way. 

It is extremely important for scaling Ckc that we teach new folks how to 
think -- a bit strange, but I'll explain!




<div style="text-align: center;">
     <img src="/assets/images/articles/decision-tree.png" class="img-bordered">
     <small><i>Why go up the tree until you're sure about the bottom!?</i></small>
</div>


# An example

1. You are tasked with setting up a new staging server in the Paris Headquarters
1. You set up the server and everything works, but, wait.. for some reason, connections are being denied to [Minio](https://min.io/) on port `9000`?!
1. You're a junior, so you're not sure how this is even happening. Everything
    is working on your machine? Everything else seems fine, just this one service is borked
1. The week of debugging begins:
   * The connection error, maybe it has to do with SSL at some level?
   * Maybe there's something wrong with my Minio configuration?
   * Is Minio booting up OK?
   * Is the port open in Security Groups? Yes..
   * Why can I talk to minio from the local machine, but the outside Internet can't talk to it?
   * I've tried 1,000 times and everything seems fine!
   * This goes on for days
   * Finally, I try a random new port and.. wallah! It works!


It turns out the organization hosting our server disallows port 9000! I had no
idea. I never even thought to ask.

Basically changing one number, a port, from 9000 to _anything else_ fixed the problem. Why
didn't I just focus on the initial connection error? Why did I go down so many useless
paths? I knew what the problem was at the outset, but refused to focus on it. 

I never expected a port to be closed by an outside admin, this had never happened 
before. I could see the list of open ports in my configuration, but I refused to acknowledge it clearly
wasn't open.

I couldn't connect: that's it! Focus on that! It _has_ to be a network problem, nothing
to do with Minio configuration.


# Let your mind go, but with limits

Confronted with so many unknowns you may feel hopeless. You have no idea what 
to try next. You, maybe literally, start to panic. Do you even belong here? Do you
even understand this stuff? You think it should be working, but it's not, and 
reality is crumbling around you. Trouble focusing, wanting to pull your hair 
out... all of that fun stuff.

Let this wash over you, maybe take a second to enjoy this feeling of not knowing
how to do something -- eventually this challenge will devolve into another way to
do a CRUD form stored away in your brain.

You'll forget what a rush it was to finally figure out you needed `levioSah()` not
`levioSo()`. This _will_ be boring someday, I promise, and you'll miss these days.


# Start at the base of the decision tree

After the initial panic has washed over you, re-examine the problem in the simplest
way you can. In the above example it was clear from the very beginning it was a 
connection issue.

Why did I go any further up the decision tree? I had a bad connection, that's it, 
maybe try to change ports or something?

It took a week to diagnose this port problem, which should have been diagnosed
in 5 minutes given a stoic "senior engineer" behind the wheel.


# Furthest branch away

Very rarely you will encounter a problem where all initial assumptions/clues are actually
futile and there's something fundamental wrong with your computer architecture
or the library you're using. Usually you did something silly like a typo, forgot to
pull, forgot to rebuild docker, etc.

Be very cautious going so far up the tree, re-check your initial assumptions. Re-read the 
error. Restart your computer.

Very likely you just need to open a port or something simple!


# It's not always easy

And, actually, sometimes you do have to sit there and take it for 2 weeks. Fully
absorbing an idea and figuring out a problem may legitimately be very difficult
and all-consuming.

Even though this port 9000 problem was silly and took way too much time to understand,
I learned a boatload. This always happens. Every time I am super stuck and find
the solution: I come out stronger, more apt to take on bigger tasks.

Over time, you get better and better at knowing when to climb up the tree and try 
to explore deeply.


# As a process

Here's a repeatable way to try to avoid going too far up the decision tree:

1. _Calmly_ read all errors, code, commands, etc. in front of you.
1. If something is obviously broken, focus on that. Do not assume a third party
system/module is at fault. It's probably you, and it's probably a very small simple problem!
1. Build a small example replicating exactly your situation with as few moving parts as possible _(i.e., from our example, open any kind of server process and serve it on port `9000`)_
1. Rubber duck your situation to a peer.
1. Reach out to someone smarter than you. If you're the top dog: God help you.
1. Now start posting on forums, discord, IRC, etc. and try to find any more info




# Past related articles
   - [How to get a web dev gig?](https://ckcollab.com/2019/03/30/how-do-i-get-a-web-dev-gig.html)

The Decision Tree

We've been constantly improving [Skeletor](https://github.com/ckc-org/skeletor/), our base template for new projects, over the years.

Most recently we added big chunks of functionality for mobile apps via React Native and
a standalone installation script that doesn't require django-admin on your command line.



<div style="text-align: center;">
    <img src="https://github.com/ckc-org/skeletor/raw/master/docs/skeletor_creation.gif" style="margin: 0 auto;">
</div>


### Fast install, standalone script

All you need is this command, typing in your project name, and selecting an option or two .. that's it!

```bash
$ bash <(curl -fsSL https://skeletor.ckcollab.com)
```

Now you have a Django + Vue + React Native project you can deploy to Heroku and get on the
app stores very quickly. You could add realtime chat in a few steps with [django-chit-chat](https://github.com/ckc-org/django-chit-chat).


### Mobile!

One of the biggest changes for Skeletor, and for Ckc in 2022, was adding mobile app support. We've steered
away from that ecosystem until recently, where we've found [React Native](https://reactnative.dev/) to be a pretty great tool.. 
mostly thanks to the folks at [Expo](https://expo.dev/) and their nicely packaged modules.

We played with [Native Base](https://nativebase.io/) this year and were actually burned pretty
badly by it. We started out with this framework, and it seemed fine, but pretty soon
we were experiencing horrible latency loading some components. Then we hit a final straw
where things were just too slow and had to rip it out.

Funnily we used ChatGPT to help replace a lot of these components! We would present 
the chatbot with our component code and ask it to be replaced with default React components. 
It was shockingly close most of the time, and did a perfect job often!


### Many small improvements

 * Built in login/logout/password reset request utilities you need on almost every project
 * Better handling of Heroku by default (Redis SSL anyone?!)
 * Various changes in `backend/settings/test.py` to make tests faster (cheap password hashing, etc.)
 * Better handling for emails/email templates
 * Django Migration checker before git pushes
 * Prevent use of `v-html` dangerously
 * Better Vue linting in general
 * Better S3 and Cloudcube support
 * Remove many django auth third party dependencies

### Does this shit even work!?

Has been used successfully to completion on over a dozen projects!

It is not unusual for us to get a new project in the afternoon and have a proof of concept or 
simple solution going by that night or the next day. We can move extremely quickly with
our toolset.


<div style="text-align: center;">
    <img src="/assets/blog/skeletor-upgrade/react-state.png" style="max-width: 420px; margin: 0 auto;">
</div>

### Upcoming changes

 * Add opinionated react support, once we have some good opinions!
 * More modules in the mobile base app, like password reset
 * And more broadly, semi-out of scope for this article, is more Ckc maintained packages, we currently have:
   * [django-ckc](https://github.com/ckc-org/django-ckc) - nice helpers for django in general
   * [django-chit-chat](https://github.com/ckc-org/django-chit-chat) - chat via websockets (channels!)
   * [dotfiles](https://github.com/ckc-org/dotfiles) - boot up a dev machine with neat presets

Skeletor gets some upgrades!

Heroku.. almost a bad word in many circles. It's expensive, polished, and
restrictive. To me: it's like the Apple of hosting providers. I can rely on it to
_"just work"_ the vast, vast majority of the time.



<div style="text-align: center;">
    <img src="/assets/images/articles/heroku-logotype-horizontal-white.png" class="img-bordered">
</div>

## Why Heroku?

**Managed hosting.**

As a developer first, I want to get right to the meat of the business logic and start
solving problems. Getting around configuring an EC2 instance for the
umpteenth time is an incredible productivity boost.

It's like having your own dev ops team. Right out of the box we can leverage many
managed services like automated deployments, backups, security updates,
quick recovery from outages, etc.

For example, instead of spinning up an instance of Postgres, making our own backup
solution, verifying it works, writing tools to make it easier to make backups before
deploys, etc… we can use Heroku Postgres which comes with WAL (Write Ahead Logging) aka
realtime live backups with a 4hour rollback window.

### Pros:

- Extremely friendly to developers, can onboard or transfer to new people very easily
- Familiar to many developers
- Mostly painless deployments
- Integrates with many services easy, ie CircleCI
- Load balancing for free

### Cons:

- Hard to customize if we have unique needs
- Relying on third parties that can go down (but, is based in the same facilities as
  Netflix)

<div style="text-align: center;">
    <img src="/assets/images/articles/aws-logo.png" class="img-bordered" style="background-color: rgba(255, 255, 255, 0.8);">
</div>

# Why AWS?

**Control.**

If you need some complicated configuration of Postgis, nginx caching, non-emphemeral
local storage, yadda yadda.. it's probably easier to go straight to EC2 instances
than it is plumbing some gross configuration on Heroku together.

Also, if you are running a VVIP top secret app then you will want to sandbox your code
away from any prying eyes. But, in my opinion, this is rarely needed and often times
for small-to-medium sized enterprises: security theater. Certainly it is another
point of failure to rely on a separate service storing your code, but I'd bet
on a managed host with hundreds of millions behind it.

### Pros:

- Complete control -- if we want to do some funky settings on the Postgres database and
  use it more like a graph database, add map projections, etc. then we can do that
- No third party outages to worry about
- No third party, beyond AWS itself, has access to your code

### Cons:

- More prone to human error, compared to Heroku with dozens of Dev Ops working full
  time to keep the pipes unclogged
- Requires a more experienced Dev Ops person to maintain
- Each setup is different, everyone has their own opinions and that means new devs
  take a bit longer to get spun up

# Conclusion

At CKC we love simplicity and speed. Heroku brings us the capability to develop
complex applications as quickly as possible, and to run those applications
at scale.

Have an app you're having trouble deploying? Let us [setup something for you!](mailto:hello@ckcollab.com)

Heroku vs AWS

Like many companies, CKC has been infested with at least one of "those guys" who are way into Bitcoin. _(looking at you Eric)_

In this post: what Bitcoin is and how CKC hopes to make innovative, disruptive, and buzz-wordy applications
based on this newfangled digital platform. Eric's appreciation for Bitcoin was magnified by impactful experiences while doing work
for the United Nations.




## What is Bitcoin?

Bitcoin is a global consensus network, using tokens called Bitcoins distributed by an expensive mining process that proves some significant
effort was exerted. More simply: someone took a lot of electricity and hardware to calculate some random number and won a small lottery,
giving them Bitcoin.

This lottery ensures the state of the Bitcoin network. As the network grows, the mining power behind it makes it more secure. As of 
right now, it costs about $4k in electricity to make a single Bitcoin. It is impossible to generate a Bitcoin "for free."

This process continues without the permission of any organization, a true free market approach to currency. As the article continues, we'll discuss
some of the upsides and downsides of Bitcoin in its current state.


## How CKC hopes to make innovative applications


One of the main applications of Bitcoin _used_ to be microtransactions. In comparison to Paypal, which takes 2% + $0.30 in most cases, Bitcoin
_used_ to only cost pennies. Then, during the huge swing up in transaction fees back in 2017, it cost as much as $100 to publish a Bitcoin
transaction. Although I firmly believe the network suffered a spam attack, it showed a weakness in a _broadcast_ system as opposed to a _unicast_
system.

Why is a "broadcast system" weak? A broadcast system means every message is sent to everyone in that network. This system is great for a network
consensus (agreement between nodes in a network), but as people (nodes) in the network increase, the process of sending messages to everyone becomes
extremely expensive. It just doesn't scale well. Space in the blockchain is precious.

A unicast system is superior for small transactions because the message is only directed between 2 peers. This means that you lose out consensus
but can scale to infinity.

So, since Bitcoin writes _every single transaction_ to the blockchain, how can we get it to scale and defeat a future network spam attack?! Hold
onto your seats, because the next section explains...!


## What is ready for disruption?

The answer: microtransactions, via the "Lightning Network." Lightning Network combines the best properties of broadcast (strong network consensus) and unicast.

This is done by timelocking Bitcoin into the Lightning Network and then spending them peer-to-peer in a unicast way. Boom! We can have transactions
not just for fractions of a penny, but for _free!_ Imagine how much this would benefit Amazon when every transaction it makes has 0 fees.

The possibilities for disruption, by using Lightning Network, are immense. It's very possible in the future you are streamed your salary
day and night, instead of having to wait every 2 weeks.


## Banking the unbanked?

One of the most amazing opportunities in Bitcoin is in the developing world. So many people are left underserved. There are millions of opportunities
being lost in terms of small business ideas, gaining home ownership, acquiring some secondary education, etc.

The world would love to give liquidity to these places, often times it is one of the best ways to inject life into communities. Sadly, when donations
are made to an area, they can sometimes have adverse effects on local markets. For example, if you are a goat farmer and someone donates a thousand
goats, the value of your farm and investments may go down. It may even put some small business owners out of business.

As soon as the foreign donations are gone, the local businesses aren't there to keep supporting the community.


One of the things that I believe could help the unbanked is a "charitable
credit system." Why can't I put $50 in some pool with 10,000 other people and
let people in some unbanked place request a small loan? If they default on the
"loan", oh well, it was a donation in the first place. But if they pay it back,
they are injecting even more money into the loan "pool" for other people in the 
community to use.

Paying back the loan is difficult in Bitcoin because of volatility, but thanks to
some new technologies we can move towards applications like this:

* **Submarine Swaps** are a feature of the Lightning Network allowing parties
to exchange different types of tokens instantly.
* **Atomic Multi-path Payments (AMP)** allows low liquidity channels to still make payments,
by splitting payments into tiny amounts that can be carried more easily by the lightning network.
* **Sphinx** enables new use cases by allowing payments without a pregenerated
invoice -- this means you could do something like Patreon by sending someone
money directly, instantly, over the Lightning Network.
* **Neutrino** allows light wallets to validate activity on the Lightning Network
without having to hold the entire blockchain. Currently, you need to download hundreds of gigabytes
of data. It could take weeks to download and process this data normally, but is not necessary
thanks to this technology.
* **So much more!** Lightning Network is the most exciting thing since... Bitcoin!


## What is holding Bitcoin back?

However great the Lightning Network is right now, Bitcoin still has many weaknesses.

### Hard to develop on

Using Bitcoin is hard enough, developing with it can be quite scary at first. Not only can you have an off-by-one error or a simple typo screw you
over, you often have to download huge blockchains and reprocess/refactor as processing methods and interfaces change.

### Very little adoption

Since so few people are using Bitcoin now, all of this great Lightning Network potential is rather limited. This may be a blessing in disguise, though,
because during the last wave of adoption Bitcoin was not quite ready to scale yet.

With all of that said, every time Bitcoin gains adoption and plummets, it grows in power -- really. Bitcoin has
[antifragile](https://en.wikipedia.org/wiki/Antifragile) properties. Every time it is attacked, a fix is implemented that makes it stronger, faster,
and smarter.

### Not a unit of account, yet

Bitcoin is horribly volatile. Until this is, uh, fixed(?) it will be hard to make loans in Bitcoin. However, things like
[Coinbase's Stablecoin USDC](https://www.coinbase.com/usdc) may make this easier in the future. _Especially_ combined with Lightning Network
technology that allows instantly swapping Bitcoin for other tokens, like USDC.


# We're excited!

However weird Eric is for liking Bitcoin so much, we're excited about all of the possibilities. And, if it's not Bitcoin, surely some
cryptocurrency will reduce friction in markets and provide services to the unbanked.

Have a Bitcoin app that needs building? [Contact us!](mailto:hello@ckcollab.com)

Bitcoin and disruption

They say the world is now in our hands and the information is at our fingertips. In just one click or touch, information
is being presented quickly. That’s why the world of the internet is fantastic as it continues to transform the way we
connect with people, share information, and live a quality life.



Located in Coeur d’Alene, Idaho, CKC is a software web development agency with an experienced and dedicated team. Our team has
been using new advanced technologies such as Django + Python, ReactJs, VueJs, and React Native to
provide tailored solutions that fit our client’s needs. We strive to help startups and growing businesses create,
improve, or fix their app.

<div style="text-align: center;">
    <img src="/assets/blog/2021-08-06-clutch/Developers_Idaho_2021.png" style="max-width: 420px; margin: 0 auto; border: 0;">
</div>

It has come to our attention that CKC made it on the top software web development
[agency list on Clutch](https://clutch.co/web-developers/idaho) in Idaho 2021!. Here’s
what our CEO had to say about this huge success:

<div style="width: 85%; margin: 0 auto; font-style: italic;">
    <blockquote>
        “It feels amazing to have this recognition after a decade of dedicated service to our wonderful clients.”
    </blockquote>
    <p style="font-size: 14px; text-align: center;">
      &mdash; CEO Eric Carmichael
    </p>
</div>

Clutch is a B2B ratings and reviews firm based in Washington, DC. Their seasoned analysts conduct interviews with the
former clients of companies listed on their site. They also helped various B2B firms from different industries and
locations connect clients with business needs.

Thanks to Clutch for providing this awesome service that gives us credibility to our future clients. We assure each of
our clients that our team continues to provide top-notch service and wonderful collaboration. Most importantly, we
express our heartfelt thanks to our supportive client for the trust they accorded us.

Take a look at what our clients had to say:

<div style="text-align: center;">
    <img src="/assets/blog/2021-08-06-clutch/medcurio_review.png" style="max-width: 420px; margin: 0 auto;">
    <hr style="width: 70%; margin: 40px auto;">
    <img src="/assets/blog/2021-08-06-clutch/trailhead_review.png" style="max-width: 420px; margin: 0 auto;">
    <hr style="width: 70%; margin: 40px auto;">
    <img src="/assets/blog/2021-08-06-clutch/whoat_review.png" style="max-width: 420px; margin: 0 auto;">
</div>

To learn more about CKC and our previous software projects, you may visit our
[Clutch](https://clutch.co/profile/ckc#reviews) profile.

Ckc Lands a Spot on Clutch’s 2021 Top Web Development Company in Idaho

As a small company, recognition is few and far between. So when it does happen, it’s gratifying. Through marketing online, we have grown our clientele and provide opportunities to developers in Couer d’Alene.

 It is nice to see that recognized in the newspapers. We enjoyed talking to Kimber London, of the Coeur d’Alene Press, about if AI is talking over the world. While we are currently working on artificial intelligence, we don’t think it will take over the world. 

It was fun to talk to Kimber about the idea, tell them about how the company started, and highlight some of our employees. Getting our pictures taken and waiting for the paper to print the story was a fun process and a little peek into how information was spread before the internet helped connect us all. The excitement of our friends and family telling us about how they read the paper and saw us is an experience that seems to slowly be fading away.

There is just something different about holding your article on a piece of paper than just seeing your blog on a screen. Maybe it is the wait for the paper to print the article instead of the instant blog posting that makes it more exciting. We hope to get more articles published in the paper and talk about more exciting and weird subjects such as “is AI taking over the world?”

From Code to Paper

<img src="/assets/blog/2021-05-skeletor/skeletor_full.png" class="inline-image" style="border: 0;">

[Skeletor](https://github.com/ckc-org/skeletor) is CKC's foundation for new web projects. It
leverages everything we've learned over our collective decades of experience solving _"super fun"_
problems. 

Continuous deployments, great test coverage, hot reloading for frontend development.. this
base project has it all!



<div style="clear: both">
</div>


# Why is this important?

### Keeps your house in order from day 1

It may not seem all that impressive from an outside perspective, but maybe to help illustrate:

Imagine that your entire day is put together and ran _perfectly._ Tools and best practices are meticulously 
put into place to solve the same problems you've encountered dozens of times. When you go to pick out a shirt
in the morning: already laid out for you. On your way to work, but the car won't start? No worries, 
there's a battery booster behind the seat. Forgot your office key? Hide-a-key rock ready to go.

All of those little gotchas that set development back, like:
1. New requirements from client/stakeholders, how do we implement these quickly without breaking everything?! (great tests)
1. Basic features not working right, like password reset or emails
1. Setting up staging/development environments for the umpteenth time
1. Get an image of all the schema/models in the database and show how they're connected 
1. If we have to onboard another developer, how do we teach them all this stuff?!
1. Are all of our licenses open source/free to use?
1. It's so "annoying" to do Test Driven Development (not with Skeletor setting up everything for you!)

### Onboarding new devs

Skeletor projects benefit from consistent architecture and implementation of development best practices across the board. 
Anyone who has a bit of experience with Python or Docker can spin up our repo in seconds. All a new developer
needs to do (assuming they have Docker) is:

```bash
$ make
```

.. and you're done! This spins up the database, makes a dummy user for testing and any requisite test data
for your project.

With Skeletor, you get consistency, speed, and efficiency when onboarding new folks. Also, as we bring on new
developers, they may have great new pieces of knowledge/experience which get compounded back into Skeletor! It
is always improving.


# What _is_ Skeletor made of?

### Backend

Skeletor leverages Django + Python on the backend with a suite of libraries for testing.

 * We use Celery + RabbitMQ (or Redis) for asynchronous tasks like mass emails or resizing large images.
 * Pytest for testing (xdist, sugar, etc. ooo ya!)
 * Base classes for functional testing (selenium, cypress, detox)
 * And more helpers to make Test Driven Development easy to implement, something that saves many headaches for developers and money for clients.

### Frontend

And we use VueJS behind NuxtJS on the frontend.

 * Vuetify for styling and amazing base components
 * NuxtJS packs things up nicely for you by default
 * Awesome hot reloading, yay! 

<div class="img-bordered">
    <img src="/assets/blog/2021-05-skeletor/skeletor_install.png">
</div>

# Why these specific choices?

## Heroku over AWS or Digital Ocean Apps

Heroku works well for small-to-medium-sized apps without much need for custom backend setups.

Sometimes we move projects to AWS setups for production or the entire lifecycle. This
depends on the project. However, we've used Heroku to put apps in production and support them
for over 5 years. We love the simplicity!

With Heroku, you have to follow their requirements, like putting files in specific directories or only supporting certain packages.

These requirements are usually done for a good reason, so it's not a huge deal. It becomes a problem when 
a client _requires_ an old version of a package or a nonstandard way of running things.

[Read more about what CKC thinks of Heroku vs AWS!](https://ckcollab.com/2019/03/15/heroku-vs-aws.html)

## VueJS over React

We prefer VueJS over React for the ease of use, integration with old libraries (jQuery), 
and the mass amount of support the VueJS project has. It is quite a bit easier to spin
new folks up on Vue, React has many more specific paradigms. Like, you can't just add a
class in React but you can in Vue.

# How to use it?

You'll clone the repo using `django-admin` and the `startproject` command, like so:

```bash
$ django-admin.py startproject new_project \
    --template=https://github.com/ckc-org/skeletor/archive/master.zip \
    --name index.md,setup,app.json,README.md
```

Then you'll want to edit the README, remove the base project installation instructions, and
run:

```bash
$ make
```

..that's it! You have a nice base project spun up and ready to start developing on.

# Let us setup a project for you!

We love crafting beautiful solutions to our client's problems. Send us an email at [hello@ckcollab.com](mailto:hello@ckcollab.com)

Skeletor: Django + Vue base project

Trying to choose a library to handle the styling of a website? A few top contenders in 2021 are Bootstrap, Semantic UI, and
the new kid on the block, Tailwind CSS. What are the differences, and which one will be right for you?



---
# First Look
Web Development is an ever-evolving field. Every year brings new changes, designs, libraries, and more. Raising the bar
for what makes a good website design. 2021 is no different. So what can we use to give us the edge on creating our website?
Let's look at some CSS libraries I like that have much popularity going into 2021.


## Bootstrap
Bootstrap is currently the most popular CSS framework out there. 
It makes sense that Bootstrap is the most popular CSS framework, given it has been around for a decade.
Initially, Twitter developers used it as an internal tool to keep design intuitive and consistent, since then it
has been released as it's own fully fledged open-source project.
Bootstrap's straight forward component design system is popular among beginners. Most components can be used simply by
added a class or two to HTML tags. While simple, this also means there isn't a whole lot of customization and has lead
to websites using the framework to have a "Bootstrap look."

## Semantic UI
Semantic UI is another web framework but doesn't shy away from the Javascript side of things. Semantic UI is similar to
Bootstrap in that it uses a component design system but gives you more granular control of the components. You
tend to have more modifying classes in Semantic Ui to switch up the styles and looks, and on top of that, Semantic
has good support for theming. This feature allows you to set global CSS style changes, making it easy to style an site.
Using themes, you can customize things like default colors, font, shadows, and padding.

The feature the stands out most for Semantic is the included Javascript API. The API contains plugins for jQuery to
handle components like Search Bars, Modals, and Forms. These plugins work well with the REST API making it easy to
communicate with a backend, making it especially useful when making a Web App.


## Tailwind CSS
If you have ever encountered Tailwind before you have read this line,

> Tailwind CSS is a utility-first CSS framework.

If you never really understood what this fancy piece of tech-talk means, but never asked, don't worry, I'll explain it.
What makes Bootstrap and Semantic UI component frameworks is that they do the heavy lifting by doing most of the design
work for you. If you want a button, you need to add the button class and an optional modifier classes. You don't have
to think in terms of CSS, just in terms of the library you are using.

Tailwind works differently by not providing components but by offering classes that let you build your components.
Instead of replacing CSS, it is a *utility* to make working with CSS easier, hence the name. The biggest pro and con of
this library is that you have complete control over the web page's design. Things won't be as simple as the component
frameworks, but you will have a better time customizing your page. On top of that, Tailwind comes with some nifty features
that like pseudo-classes, dark mode support, hover states, and more!

Unlike the other two frameworks, Tailwind does not include any Javascript for the front-end, but don't be alarmed! If
you are making a page with any functionality, Tailwind pairs well with many other front-end frameworks like Vue,
React, or Blade. I'll come back to this later.

---
# Features

## Community
A good heuristic for knowing how useful a framework is it's community's size and having a thriving community
means it will be more likely to receive support and updates.

### Bootstrap
Bootstrap has one of the largest and longest-standing communities of any framework out there. With over 2.2 million
individual users on Github, there is plenty of support. The official documentation is well written, and there is
no shortage of blogs and tutorials on using Bootstrap out there.

### Semantic UI
I would describe Semantic UI as more of a niche community. While the docs are very well written, total users only come
up to 12,500. That being said, I haven't had any problem finding Stack Overflow solutions to complex problems using Semantic, but you
won't be seeing a lot of beginner material out there. Updates have also come out less frequently, so there are some
concerns on if Semantic UI will continue to be relevant.

### Tailwind
Tailwind has some momentum as an up and coming library. Even though it's less than two years old, it has already has
over 100,000 users and counting. With its growing popularity, you will find no shortage of examples and inspiration
online. They even have their own <a href="https://www.youtube.com/tailwindlabs">Youtube channel</a> they post regularly too.


## TLDR

### Community Size

| Ranking | Framework   |
| ------- | ----------- |
| #1      | Bootstrap   |
| #2      | Tailwindcss |
| #3      | Semantic UI |


## Responsive Design (Mobile Friendly)

### Bootstrap
Making a responsive web site in Bootstrap revolves around its column and breakpoint system.

If you wanted to make three columns of text collapsed into one column for screens smaller than the medium(md) breakpoint,
it would look similar to this.
```html
<div class="container">
  <div class="row">
    <div class="col-md">
      One of three columns
    </div>
    <div class="col-md">
      One of three columns
    </div>
    <div class="col-md">
      One of three columns
    </div>
  </div>
</div>
```
While it works well in most cases, you don't have many options for creating unique experiences for mobile and desktop.
You can use some classes to show and hide elements based on screen size. This way, you can create different elements for
mobile and desktop, but it ends up being a lot of work coding for desktop and mobile separately.


### Semantic UI
Semantic UI uses a similar grid system to Bootstrap, but with a couple of extras for things like padding, margins, and float
build into the grid system. The example below achieves a similar result as the Bootstrap example.
```html
<div class="ui centered grid">
  <div class="six wide tablet eight wide computer column">1</div>
  <div class="six wide tablet eight wide computer column">2</div>
  <div class="six wide tablet eight wide computer column">3</div>
  <div class="six wide tablet eight wide computer column">4</div>
  <div class="six wide tablet eight wide computer column">5</div>
  <div class="six wide tablet eight wide computer column">6</div>
</div>

<div class="ui four column grid">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
</div>
```
You will immediately notice there is a lot more when it comes to using this grid. Though the goal is to make
reading HTML more human-friendly, you end writing a lot more, which can become a bit messy.

### Tailwind
Responsive design is where Tailwind starts to show how it has been able to stand out. Instead of having a predefined grid system,
Tailwind uses conditional classes. Meaning you can customize every CSS property depending on the screen size, not just
the layout.

Here is an example of setting the width of a `div` based on screen size.
```html

<img class="w-16 md:w-32 lg:w-48" src="...">
```

And a fully-fledged card container would look something like this.
```html
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>
```
You can see this in action in the <a href="https://tailwindcss.com/docs/responsive-design#overview">Tailwindcss docs</a>

This system does give you much more control, but you run into the same problem of having some messy code.


### TLDR

Bootstrap has a simple and concise grid system. Easy to understand, but you can't vary your designs much.

Semantic UI has a similar grid system with more features, but your code will look much more messy.

Tailwind using conditional classes to let you change any applied classes based on screen size. Giving you complete
control over style, but can be very messy unless you use custom components.


---
## Functionality
Looks are good and all, but what if you make a web app and need some more advanced functionality for your site.

### Bootstrap
Bootstrap does not come with much functionality. You can use it with jQuery, but integration with a back-end needs to be
written manually, done through a 3rd party library, or needs to be accomplished with server-side rendering. 

### Semantic UI
Semantic is much more friendly for adding functionality to the website. Components like search bars, modals, forms have
built-in callbacks, and REST API integration. As a full-stack developer, I enjoyed launching both front and back-ends
for features quickly using Semantic.

### Tailwind
One of Tailwind's hidden strengths is that it has no functionality. It's only adds styling. Meaning you can easily combine
Tailwind with popular frameworks like Vue or React. The level of detail plus the component system from a frameworks like those
make it one of the most robust web-stacks you can work on.

---
## Network Performance
Studies show if your website takes more than 3 seconds to load, you will lose about 50% of your viewers. So file sizes
are critical, especially in a world where a significant portion of people are using mobile data.


File Sizes

|Library|Uncompressed| Minified |
|-------|------------|----------|
|Bootstrap|187 KB| 147 KB   |
|Semantic UI|730 KB| 550 KB   |
|Tailwindcss|3739.4kB| 3020.7kB |

Wow! Tailwind is not looking good here, but not to worry. There's an ace up the sleeve of Tailwind, and that is PurgeCSS.
This tool automatically goes through cleans up unused classes from Tailwind. Using this, you can get expect to get somewhere
around 150kb to 250kb. Updating the list with these numbers, it would look like this. (Keep in mind Semantic also includes
a sizeable Javascript library.)

|Library|Minified + PurgeCSS|
|-------|-------------------|
|Bootstrap|147 KB|
|Tailwindcss|~150-250kB|
|Semantic UI|550 KB|

---
## Additional Details
Anything that makes a library stand out on it's own.

### Bootstrap
There isn't much in the way of features that Bootstrap has, and others don't, but what it does have is an extensive library of
examples and templates to choose from. If you are looking for some guidance, there plenty of open-source 
<a href="https://getbootstrap.com/docs/5.0/examples/">example projects</a> to look through. If you are in a hurry and
willing to drop $50 to have most of the set-up done for you, then you could look through the pre-made
<a href="https://themes.getbootstrap.com">themes.</a>

### Semantic UI
Semantic UI does well with AJAX webpages. It has classes and components for loaders and placeholders while requests
await data. Forms have a built-in validator that supports connecting with a back-end validator. Included callback
functions make adding logic to a webpage pretty straightforward. There is also a Semantic-Vue project to combine them
into one framework to take things a step further.

### Tailwind
Tailwind comes packed with some pretty cool built-in features to make your page pop. Built-in dark mode support lets
you appease anyone who uses an IDE, people browsing at 2 am and gives a touch of quality to your site. Hover States,
animation, and transform classes streamline the process of adding interactivity. And you even have gradient support to
make those colors pop.


---
## Conclusion
Tailwind has the advantage of having a large amount of control over the details of the webpage. While it might be harder
for beginner developers, anyone with experience in front-end development should be able to pick it up very quickly.
For something more streamlined, Semantic-UI would be the next best thing. With a combination of CSS and JS in one package,
you can quickly get web apps up and running. While you lose some control of the finer details of the page's look,
a lot less time is required to get the page functional. In 2021, I would never use Bootstrap for a production website,
but if you a student or just trying to get an MVP up and running as quickly as possible, you find a library as straight
forward as Bootstrap.


# TLDR
Tailwind is one of the best options for creating modern looking production websites and plays well with other libraries
like Vue and React. If you want to get a functional website up and running quickly and don't mind looking a little
cookie-cutter, Semantic-UI is a good choice.

Tailwind CSS vs. Bootstrap vs. Semantic UI

WebGL gives the freedom to create unique projects in the web-browser. Utilizing the GPU's power through GLSL lets you
achieve a performance you can't typically achieve with Javascript.



<iframe height="454" style="width: 100%;" scrolling="no" title="Stripe Website Gradient Animation" src="https://codepen.io/kevinhufnagl/embed/YzwBemd?height=454&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/kevinhufnagl/pen/YzwBemd'>Stripe Website Gradient Animation</a> by Kevin Hufnagl
  (<a href='https://codepen.io/kevinhufnagl'>@kevinhufnagl</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

In other words, WebGL is a rasterization engine, which means you can use it to make 2D or 3D graphics. Its versatile
nature means you can use it to run video games in the web browser, create animations like the one above, edit images,
display data, and more! There are many libraries built on top of WebGL that can make the learning curve a little more
manageable. A couple of useful libraries are Three.js and p5.js. Shaders are pretty much universal. No matter what
library you use, it will work the same.

## What is WebGL

According to the <a href="https://www.khronos.org/webgl/wiki/Getting_Started">wiki</a>
> WebGL is a cross-platform, royalty-free API used to create 3D graphics in a Web browser.

Basically WebGL is a rasterization engine. Which means you can use it to make 2D or 3D graphics, and it's very versatile.
It can be used to run video games in the web, create animations like the one above, edit images, display data, and more!
And there are a lot of libraries built on top of WebGL that can make the learning curve a little easier like
<a href="https://threejs.org/">Three.js</a> and <a href="p5js.org">p5.js</a>. We are going to be focusing on making
shaders in GLSL so we won't need any of these libraries, but this info can be used in conjunction with any of them.

## What is GLSL
OpenGL Shading Language (GLSL) is a C based shading language. This language allows the web browser access to resources
of the GPU when rendering to a canvas. There are two main kinds of shaders, fragment shaders, and vertex shaders.

### Vertex Shader
The vertex shader handles the process of compute the position of individual vertices. You can use this step to transform,
scale, and morph an object.

### Fragment Shader
When it is time to render the objects, the fragment shader is called for every pixel that needs to be rendered. This
shader is responsible for setting the color and depth for every pixel. This step is essential in animations like the one above.


It might be surprising, but that's all you need to make a WebGL program! There will be a lot of syntax and variables you
will need to learn in completing your program. If you think you got what it takes, I recommend checking out this
excellent tutorial series on getting started with WebGL.
<a href="https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html">WebGL Fundamentals</a>