Make blog generic template for anyone
This commit is contained in:
Cassidy Williams
10
README.md
10
README.md
@@ -1,12 +1,10 @@
|
||||
# My blaaaahg
|
||||
|
||||
[](https://app.netlify.com/sites/blahg/deploys)
|
||||
# Cassidy's blog template
|
||||
|
||||
Hello, welcome. This is a blog ("blahg" is the proper spelling for Chicagoans), or digital garden, or whatever. It's built with [Astro](https://astro.build), and uses [TinaCMS](https://tina.io) to edit the content!
|
||||
|
||||
## See the blahg
|
||||
|
||||
[blog.cassidoo.co](https://blog.cassidoo.co)
|
||||
[blahg.netlify.app](https://blahg.netlify.app/)
|
||||
|
||||
## Run it yourself
|
||||
|
||||
@@ -15,12 +13,12 @@ All commands are run from the root of the project, from a terminal:
|
||||
| Command | Action |
|
||||
| :------------------------------- | :------------------------------------------------------------ |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npx tinacms dev -c 'astro dev'` | Manually run local server if the regular command doesn't work |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
|
||||
You go to `localhost:3000/admin/index.html` to see the CMS and use it. If you want to clone this for yourself, you'll need a `.env.development` file that has the following in it:
|
||||
You go to `localhost:4321/admin/index.html` to see the CMS and use it. If you want to clone this for yourself, you'll need a `.env.development` file that has the following in it:
|
||||
|
||||
```
|
||||
TINACLIENTID=<from tina.io>
|
||||
|
||||
@@ -3,7 +3,7 @@ import sitemap from "@astrojs/sitemap";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://blog.cassidoo.co/",
|
||||
site: "yourblogurl",
|
||||
base: "/",
|
||||
integrations: [sitemap()],
|
||||
markdown: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Sitemap: https://blog.cassidoo.co/sitemap-index.xml
|
||||
Sitemap: https://blahg.netlify.app/sitemap-index.xml
|
||||
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import "../style/fonts.css";
|
||||
import "../style/global.css";
|
||||
|
||||
import { SITE_TITLE } from "../config";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
|
||||
|
||||
const { title, description, image = "/home-blog-card.png" } = Astro.props;
|
||||
---
|
||||
@@ -14,9 +14,6 @@ const { title, description, image = "/home-blog-card.png" } = Astro.props;
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<!-- Web Monetization -->
|
||||
<meta name="monetization" content="$ilp.uphold.com/rEgHHBQGDUDP" />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
@@ -37,13 +34,6 @@ const { title, description, image = "/home-blog-card.png" } = Astro.props;
|
||||
<meta name="twitter:creator" content="@cassidoo" />
|
||||
<meta name="twitter:image" content={new URL(image, Astro.url)} />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- RSS Link -->
|
||||
<link
|
||||
rel="alternate"
|
||||
@@ -54,11 +44,4 @@ const { title, description, image = "/home-blog-card.png" } = Astro.props;
|
||||
|
||||
<!-- Sitemap -->
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
|
||||
<!-- Google Search Console -->
|
||||
<meta name="google-site-verification" content="4G1fPeskmgxlQRWUoJxDlkDxL0VswExwh1MuRAwkQzg" />
|
||||
|
||||
<!-- Fathom -->
|
||||
<script src="https://cdn.usefathom.com/script.js" data-site="OHWKNQJQ" defer
|
||||
></script>
|
||||
</head>
|
||||
|
||||
@@ -3,7 +3,7 @@ const today = new Date();
|
||||
---
|
||||
|
||||
<footer>
|
||||
© {today.getFullYear()} Cassidy Williams. <a href="https://github.com/cassidoo/blahg">This blog is open source</a>! <3
|
||||
© {today.getFullYear()} cassidoo. <a href="https://github.com/cassidoo/blahg">This blog is open source</a>! <3
|
||||
</footer>
|
||||
<style>
|
||||
footer {
|
||||
|
||||
@@ -1,23 +1,20 @@
|
||||
---
|
||||
import HeaderLink from "./HeaderLink.astro";
|
||||
import { SITE_TITLE } from "../config";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
|
||||
---
|
||||
|
||||
<header>
|
||||
<div class="header-section">
|
||||
<div class="header-frame">
|
||||
<h1>{SITE_TITLE}</h1>
|
||||
<h2>a blog, or whatever</h2>
|
||||
<h2>{SITE_DESCRIPTION}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<HeaderLink href="/">home</HeaderLink>
|
||||
<HeaderLink href="/posts">posts</HeaderLink>
|
||||
<HeaderLink href="https://cassidoo.co">website</HeaderLink>
|
||||
<HeaderLink href="https://cassidoo.co/newsletter" target="_blank"
|
||||
>newsletter
|
||||
</HeaderLink>
|
||||
<HeaderLink href="https://cassidoo.co">other</HeaderLink>
|
||||
</nav>
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
---
|
||||
export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}
|
||||
|
||||
const { href, class: className, ...props } = Astro.props as Props;
|
||||
const { href, class: className, ...props } = Astro.props;
|
||||
let isActive = href === Astro.url.pathname;
|
||||
|
||||
if (Astro.url.pathname.startsWith("/post/")) {
|
||||
isActive = true;
|
||||
}
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// import Tag from './Tag.astro';
|
||||
const { slug, title, tags, description, date } = Astro.props;
|
||||
---
|
||||
|
||||
|
||||
@@ -1,3 +1,2 @@
|
||||
export const SITE_TITLE = "Cassidy's blog";
|
||||
export const SITE_DESCRIPTION =
|
||||
"I'm Cassidy Williams, a software engineer, mom, and overall nerd in Chicago. I write about tech, projects, and whatever else I'm thinking about!";
|
||||
export const SITE_TITLE = "Cassidy's blog template";
|
||||
export const SITE_DESCRIPTION = "A blog template for you!";
|
||||
|
||||
@@ -16,17 +16,9 @@ const tags = getTags(posts);
|
||||
<html lang="en-us">
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<body>
|
||||
<Header title={"Cassidy Williams"} />
|
||||
<Header title={SITE_TITLE} />
|
||||
<main>
|
||||
lol hi
|
||||
|
||||
<br />
|
||||
|
||||
you found me
|
||||
|
||||
<br />
|
||||
|
||||
I am trapped inside of this website
|
||||
404: Page not found
|
||||
|
||||
<Tags tags={tags} all />
|
||||
</main>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
I'm Cassidy, and I like to make memes and dreams and software!
|
||||
Welcome to this blog template by [cassidoo](https://cassidoo.co)!
|
||||
|
||||
If you want to see more from me outside of this _space_, [my website](https://cassidoo.co) has a bunch of links to follow! You should also check out my [newsletter](https://cassidoo.co/newsletter), or my word game [Jumblie](https://jumblie.com/?utm_campaign=blahg&utm_source=github), or my [GitHub profile](https://github.com/cassidoo). Or don't. Follow your dreams.
|
||||
It's using Astro and TinaCMS. You can [clone it on GitHub](https://github.com/cassidoo/blahg) to use it for yourself, and see how it works! I would _love_ if you told me when you do use it, I love seeing variations on it!
|
||||
|
||||
Anyway, welcome to my blog AKA digital garden AKA mind dump land!
|
||||
The tags at the bottom of the page are dynamically generated. The more tags you use, the more tags are added to the list! Posts are simple markdown files.
|
||||
|
||||
You should also check out [my newsletter](https://cassidoo.co/newsletter), or my word game [Jumblie](https://jumblie.com/?utm_campaign=blahgtmp&utm_source=github), or my [GitHub profile](https://github.com/cassidoo). Or don't. Follow your dreams.
|
||||
|
||||
Enjoy!
|
||||
|
||||
@@ -18,7 +18,7 @@ const tags = getTags(posts);
|
||||
<html lang="en-us">
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<body>
|
||||
<Header title={"Cassidy Williams"} />
|
||||
<Header title={SITE_TITLE} />
|
||||
<main>
|
||||
<About />
|
||||
|
||||
@@ -29,7 +29,7 @@ const tags = getTags(posts);
|
||||
<HomePosts allPosts={posts} />
|
||||
|
||||
<p class="center">
|
||||
You can also <a href="https://blog.cassidoo.co/rss.xml">
|
||||
You can also <a href="https://blahg.netlify.app/rss.xml">
|
||||
subscribe with RSS!
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -35,7 +35,7 @@ const posts = (await Astro.glob("../posts/*.md")).sort(
|
||||
</content>
|
||||
|
||||
<p class="center">
|
||||
You can also <a href="https://blog.cassidoo.co/rss.xml">
|
||||
You can also <a href="https://blahg.netlify.app/rss.xml">
|
||||
subscribe with RSS!
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "10 Tips for Successful Public Speaking"
|
||||
slug: public-speaking
|
||||
description: "Public speaking is the number 1 fear out there. Let's conquer it together. Lovingly."
|
||||
added: "Apr 16 2014"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
Hey friends!
|
||||
|
||||
So, not everyone likes speeches. Public speaking is the #1 most common fear out there. If you don't get time to practice it often, it's really just not fun.
|
||||
|
||||
So, here are my tips for you. I'm not just saying these. When I go out and talk to a bunch of people, I think about these all the time, and it helps. So do it.
|
||||
|
||||
## Don't read.
|
||||
|
||||
You are talking to people because you have something to say. You're talking to them because you know what the heck you're talking about. Speak from your head, not from your paper in front of you. In fact, try not to bring any paper at all, because they make shaky hands easy to spot. If you need notes, bring a clipboard or a notebook to help you out.
|
||||
|
||||
## Get your hair out of your face.
|
||||
|
||||
The strongest hairspray can fail with the right amount of sweat and nervous touching. Give the audience an unblocked view of your face and your eyes for the best engagement. Bring a hair clip or up-do it. Or shave it. Your choice.
|
||||
|
||||
## Take your hands out of your pockets.
|
||||
|
||||
It's distracting. You look nervous. If you're at a podium, put your hands at your sides or hold onto it. If you've not nothing in front of you, just keep your arms loosely at your sides unless you're making a purposeful gesture.
|
||||
|
||||
## Plant your feet in a comfy stance.
|
||||
|
||||
Nothing is more distracting than watching someone pace, rock, or fidget with their feet. Also, DO NOT cross your legs while standing. Even if you have incredible balance, you're just asking to fall over.
|
||||
|
||||
## Eye contact.
|
||||
|
||||
This is the easiest one on the list. Don't shift your eyes around, don't stare at the back wall. That advice is for high schoolers. Look at everyone in the eye. For every sentence you say, look at someone. Shift to someone nearby when you say your next sentence. If your transition from person to person is smooth and steady, everyone will feel like you've spoken to them, and spoken to them well.
|
||||
|
||||
## Don't touch your face.
|
||||
|
||||
When people make mistakes (or have their hair in their face), they touch their face a LOT. It's distracting. Some of the best speeches I've ever heard we ruined because I saw someone scratching their face and playing with their hair. No. Stop. Don't do it.
|
||||
|
||||
## Take some time to recover.
|
||||
|
||||
If you make a mistake, don't apologize profusely, don't stammer. Audiences are very tolerant of a moment of silence. So, if you fumble, just take pause and recollect your thoughts, and then resume. It's a much more graceful approach to saying, "oh um I forgot to mention that crap so I have to go back" etc. etc.
|
||||
|
||||
## Tell stories.
|
||||
|
||||
People remember them. If you want to talk about the importance of adopting puppies, tell them about your (or a friend's) experience in buying a puppy. If you're talking about best practices for putting together an event on campus, tell them about events you've hosted. Be funny, and smile with your stories. Chances are, the audience will smile back.
|
||||
|
||||
## Be CONFIDENT.
|
||||
|
||||
Public speaking isn't as much about what you say as it is how you say it. Whether the audience is 5 people or 5,000, you have a reason to be there, and to make them really listen to what you're saying. Sell yourself and your message to them. Deliver it like you're the best person in the world to do it. Speak loudly, and smile. It'll make the most boring speech more engaging.
|
||||
|
||||
## Have FUN!
|
||||
|
||||
You're going to be awesome at this. Go and tell people your message, and be proud doing it!
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "5 applications of linear regression that will drive him crazy"
|
||||
slug: linear-regression
|
||||
description: "Push these sexy applications in his mind to spice things up and drive him nuts."
|
||||
added: "Nov 16 2015"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
_Push these sexy applications in his mind to spice things up and drive him nuts_
|
||||
|
||||
Everyone knows that linear regression is an approach for modeling the relationship between a scalar dependent variable y and one or more explanatory variables denoted X. But as you more vigorously apply these concepts and analyses to your everyday life, how do you keep up your own relationship with your man?
|
||||
|
||||
Studies show that whispering specific different applications of linear regression models will keep him begging for more. So keep your man fired up with these sexy tidbits.
|
||||
|
||||
## Trend Lines
|
||||
|
||||
A trend line represents the long-term movement in time series data after other components have been accounted for. It tells whether a particular data set (say GDP, oil prices or stock prices) have increased or decreased over the period of time. A trend line could simply be drawn by eye through a set of data points, but more properly their position and slope is calculated using statistical techniques, like, you guessed it. linear regression. Just try to keep him off of you after telling him this.
|
||||
|
||||
## Epidemiology
|
||||
|
||||
Early evidence relating smoking to mortality and morbidity came from observational studies employing regression analysis. In order to reduce spurious correlations when analyzing observational data, researchers usually include several variables in their regression models in addition to the variable of primary interest. For example, suppose we have a regression model in which cigarette smoking is the independent variable of interest, and the dependent variable is lifespan measured in years. Researchers might include socio-economic status as an additional independent variable, to ensure that any observed effect of smoking on lifespan is not due to some effect of education or income. However, it is never possible to include all possible confounding variables in an empirical analysis.
|
||||
**Hint:** Really emphasize how impossible these confounding variables are. He'll never want to let you go!
|
||||
|
||||
## Finance
|
||||
|
||||
The capital asset pricing model:
|
||||
|
||||
...uses linear regression as well as the concept of beta for analyzing and quantifying the systematic risk of an investment. This comes directly from the beta coefficient of the linear regression model that relates the return on the investment to the return on all risky assets. The point is to be playful and work him into a desire-filled frenzy by not giving him exactly what he wants (a lower measure of the risk arising from exposure to general market movements as opposed to idiosyncratic factors)!
|
||||
|
||||
## Econometrics
|
||||
|
||||
Linear regression is the predominant empirical tool in economics. In modern econometrics, other statistical tools are frequently used, but linear regression is still the most frequently used starting point for an analysis. Estimating a linear regression on two variables can be visualized as fitting a line through data points representing paired values of the independent and dependent variables. Mention Okun's Law here and he'll be wondering, "wow, how'd she do that?"
|
||||
|
||||
## Environmental Science
|
||||
|
||||
Linear regression finds application in a wide range of environmental science applications. In Canada, the Environmental Effects Monitoring Program uses statistical analyses on fish and benthic surveys to measure the effects of pulp mill or metal mine effluent on the aquatic ecosystem. After you tell him this, he'll crave you so much that he won't know what he did to deserve you.
|
||||
|
||||
Driving your boyfriend crazy with linear regression application examples is a guaranteed way to make your relationship more fun, dynamic, and sexy. If you want to drive your man wild and to make him want you even more, you have to be bold, adventurous, and sexy, and to remember to keep things feeling exciting and fresh by telling him all the exotic ways that these applications can be applied.
|
||||
|
||||
Go get 'em, sister.
|
||||
@@ -1,90 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "A Weekend at BattleHack Boston"
|
||||
slug: battlehack-boston
|
||||
description: "I had my first hackathon experience as a Venmo employee this past weekend, and boy was it fun!"
|
||||
added: "Aug 10 2014"
|
||||
tags: [events]
|
||||
---
|
||||
|
||||
Hello!
|
||||
|
||||
So, this weekend was my first big event during my time at Venmo: BattleHack Boston.
|
||||
|
||||
Now, I've done a lot of hackathons, on the participating, planning, and sponsoring side.
|
||||
|
||||
This hackathon beat almost every single one. The PayPal/Braintree team that put it together (and lovingly allowed me to join them) was so organized and well-prepared, I can't say anything negative about the event!
|
||||
|
||||
It all started with the set up the night before.
|
||||
|
||||
There was TONS of swag.
|
||||
|
||||
|
||||
|
||||
It felt like the swag and props were never ending. Which is a good thing.
|
||||
|
||||
|
||||
|
||||
When I first heard the term, "BattleHack," I admit I was afraid it'd be a little cheesy.
|
||||
But this was far from it. This hackathon was epic. Even just from prep day, I could tell that it was going to be a really smooth, impactful event.
|
||||
|
||||
So, on the day of the event, we all got to our stations early. I was in charge of the swag table. For those of you who know me well, you know just how perfect that position was for me.
|
||||
Few people really appreciate good swag. I thrive on it.
|
||||
|
||||
|
||||
|
||||
From the beginning, we were loaded up with absolutely delicious food. It was actually shocking how well they fed us.
|
||||
We started with bagels (with a wide variety of toppings) on the first day, and throughout the event we had a waffle bar, a grilled cheese bar, lobster rolls, clam chowder, Italian food, Asian cuisine, candy, beer, pop, juices and teas, coffee... I could actually make a whole post about the food, but we have more important things to discuss. But seriously. Well done on the food, BattleHack team.
|
||||
|
||||
|
||||
|
||||
Before we kicked off the event, Matt Hamilton (also a Venmo rep) and I struck a pose. Because you simply couldn't resist those costumes.
|
||||
|
||||
|
||||
|
||||
The room got crowded fast. This hackathon was geared towards anyone 18 or older, so we had a really wide range of people. The intros to the event were pretty standard, but well done. They talked about the importance of hacking for social good, and the structure of BattleHack (it's a global competition, you can check out their website [here](https://2014.battlehack.org/)).
|
||||
|
||||
|
||||
|
||||
And of course, we had to talk about the prizes. Throughout the event there would be smaller prizes for Best Progress and for Best Tweet, but the big prizes for hacks consisted of PS4s, cameras, and a chance to win $100,000 after being flown out to California on PayPal/Braintree's dime.
|
||||
|
||||
|
||||
|
||||
Once people settled down about the awesomeness of the prizes, we got to demos and rules. In order to be eligible for the big prizes, one had to use a PayPal, Braintree, or Venmo API. One could still win partner prizes from the companies Twilio, Mashery, SendGrid, and Context.io if you used their technologies. I had the pleasure of demoing the Venmo iOS SDK.
|
||||
|
||||
|
||||
|
||||
Once demos were done, it was lunchtime. Everyone was eating and pitching ideas and putting together teams. Hackers had been able to pitch ideas on video before the event started, so some people knew what they were doing, and others were starting completely clean.
|
||||
|
||||
Finally, just before 1PM, we had a big countdown to start. We banged the gong, and we were off! Teams quickly started sketching out ideas and setting up their stations.
|
||||
|
||||
Over the next few hours, Matt and I were approached several times about using the Venmo API, which was great. The PayPal/Braintree dev evangelists kept thanking us on the side for coming. They said that Venmo has been one of the most popular APIs of the entire BattleHack competition so far, and they loved having us there to help.
|
||||
|
||||
Time went on, more food was served throughout the night. The BattleHack team brought in _professional masseuses_ (holy crap, am I right?) and soon Matt's and my shift was over. We were able to leave at about 9, as long as we got back by 4AM. That was one of the things I appreciated about the planning that went into BattleHack; designated shifts aren't always thought of for the staff of hackathons.
|
||||
|
||||
After a nearly sleepless night, I got back at 4 and started circling the room looking for the Best Progress award. Teams had been working hard. Some included hardware components, some were trying to use every API available. It was very impressive to see the work being done. Eventually, the team we decided had the Best Progress was FundRunner, an application that assisted those running and those donating to people running in various races for charity. It checked when certain milestones were hit using geolocation, it texted donors when their maximum donation amount was hit, it sent emails... their work so far was pretty darn solid.
|
||||
|
||||
|
||||
|
||||
Throughout the morning, Matt and I were hit up with Venmo questions. Some were pretty technical, some were simply, "why would I use Venmo over PayPal?" But overall, we were kept busy. Matt and I took notes of flaws on our end and desires on the developers' end for future reference.
|
||||
|
||||
Rehearsals were another big part of Sunday morning. Every team practiced their pitches (which were going to be 2 minutes long) and got feedback from the BattleHack team. This is another part of the hackathon that I appreciated and don't often see. People in general, without feedback, aren't successful without an outside perspective.
|
||||
|
||||
And finally, after a lip-smacking lunch of lobster rolls and a grilled cheese bar, it was time for presentations. There were some really cool ones, and quite a few using Venmo! A few cool ones where:
|
||||
|
||||
- AgriGate, an "Etsy for farmers" that allowed farmers to post their produce for people to buy, and included a hardware component of a packing slip being printed
|
||||
- Street Music is a platform that connects users to street performers to legitimize their profession and allows donation through Venmo and PayPal (they kicked off their presentation by singing, I was impressed)
|
||||
- HaveKnow proves your identity for emergency rescue payments when you've lost your ID and/or wallet, and lets you pay people with PayPal/Venmo after they give you cash
|
||||
- Honk is a license plate-based messaging app that allows users to send compliments and constructive criticism to drivers (sent in the form of a Venmo charge/payment)
|
||||
- FundMatch is a web-based platform dedicated to efficient giving for nonprofits and allows donations through PayPal (the cool part of this one was they took in organization emails and information and parsed them into an easy-to-read form for donors to understand)
|
||||
- Pothole Sonar app uses audio to enhance the awareness of mobile users to the dangerous potholes nearby and compiles pothole data
|
||||
- Nome (short for "metronome") is a "git for music" where people can collaborate on music projects and donate to other musicians with Venmo
|
||||
|
||||
There were a bunch more, and overall the event was so cool. The winners of the event made "Late Night Safety Kit," an app with tools that allows a user to stay safe by sending alerts for crime and to the police station in the area.
|
||||
|
||||
And so, as the BattleHack saying goes: _City Conquered!_
|
||||
I had to run off after the presentations for my train back to NYC. Overall, I genuinely enjoyed my time at BattleHack Boston. The planning team was a well-oiled machine, on top of every single nuance. I loved helping them and being a part of such an impressive event.
|
||||
|
||||
|
||||
|
||||
Until next time! :)
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Adding Keyboard Shortcuts to your React Apps"
|
||||
slug: keyboard-shortcuts-react
|
||||
description: "Using the Mousetrap library, you can add keyboard shortcuts to your React apps."
|
||||
added: "Aug 03 2015"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
I love working with [React](http://facebook.github.io/react/). And I love cool
|
||||
keyboard shortcuts. Luckily, the [Mousetrap](https://craig.is/killing/mice)
|
||||
keyboard shortcut library works really well with React. Hot.
|
||||
|
||||
So, first you obvi have to install the two. Just use handy npm to do that, and
|
||||
call:
|
||||
|
||||
```sh
|
||||
> npm install react
|
||||
> npm install mousetrap
|
||||
```
|
||||
|
||||
Dang. That was so easy. This is crazy.
|
||||
|
||||
Now that you've done that, go ahead and build your React app as usual. Now,
|
||||
let's say that you have a super awesome component (called `<SuperAwesomeComponent>`),
|
||||
and you want to call a function `letFishFly` in that component's class whenever
|
||||
someone hits "\* k", "ctrl+r", or the Konami Code. Because you feel like it.
|
||||
|
||||
It's so easy to add now! In your component, you just have to bind the Mousetrap
|
||||
command to `letFishFly` in the `componentWillMount` function, and unbind it in `componentWillUnmount`.
|
||||
|
||||
```js
|
||||
componentDidMount() {
|
||||
Mousetrap.bind(['* k', 'ctrl+r', `up up down down left right left right b a enter`], letFishFly);
|
||||
}
|
||||
componentWillUnmount() {
|
||||
Mousetrap.unbind(['* k', 'ctrl+r', `up up down down left right left right b a enter`], letFishFly);
|
||||
}
|
||||
```
|
||||
|
||||
Oh my word. That's it. You have keyboard commands set up in React. Congratulations.
|
||||
|
||||
Until next time! :)
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Writing Practice: The Agua Caliente Airport"
|
||||
slug: agua-caliente
|
||||
description: "I did a writing exercise using a random Wikipedia page. And puns."
|
||||
added: "Nov 02 2016"
|
||||
tags: [learning]
|
||||
---
|
||||
|
||||
As I go through my old notes on my computer I found this old writing exercise I
|
||||
did that I highly recommend. You go to Wikipedia, hit the "Random" button,
|
||||
and you just write. For this one I decided to go the dramatic first-person
|
||||
route, and my topic was the [Agua Caliente Airport](https://en.wikipedia.org/wiki/Agua_Caliente_Airport).
|
||||
I had a ton of fun with it, hope you enjoy!
|
||||
|
||||
---
|
||||
|
||||
I sat there, alone, waiting, at the Agua Caliente airport. I'd been there for a
|
||||
couple hours, and still nothing had happened. I was hoping he'd be here by now.
|
||||
|
||||
I thought back to the times where we would camp in the area, suns at our backs,
|
||||
on our way down to the hot springs, just enjoying the park. We'd check out the
|
||||
outdoor movie theater, even when it wasn't showing anything. We'd laugh and
|
||||
enjoy each other's company, having conversations that would last for hours. But
|
||||
that was a long time ago, back when planes were actually based in the area, and
|
||||
when we were actually happy.
|
||||
|
||||
I checked my watch. 3 hours. I was getting impatient. I started pacing around
|
||||
the empty terminal, looking at the old chairs and the antique documents on the
|
||||
walls.
|
||||
|
||||
Suddenly, I hear a voice behind me.
|
||||
|
||||
"I thought I'd find you here."
|
||||
|
||||
There he was. Exactly as I remembered. Older, perhaps, but just as
|
||||
confident-looking, with smile lines around his eyes.
|
||||
|
||||
"Of course I'm here," I replied, "I've been waiting for you."
|
||||
|
||||
"You have to stop waiting for me. You know why I left." He opened the door and
|
||||
ushered me toward it, but I refused.
|
||||
|
||||
"I don't know why. You never said. You had that cough and you left, and you
|
||||
never came back."
|
||||
|
||||
"There was more to it than that," he said, "you know there was."
|
||||
|
||||
I looked at him, hurt.
|
||||
|
||||
"I was joking, you had to know that."
|
||||
|
||||
"It wasn't about me," he murmured, looking out into the San Diego County sun,
|
||||
"when you said to my mother on the phone that I was terminally ill, you knew she
|
||||
wouldn't get the pun. You ruined her. You ruined us."
|
||||
|
||||
I sat down, realizing that I was stuck here. I'd always be in hot water with
|
||||
him. I'd always be in Agua Caliente.
|
||||
|
||||
---
|
||||
|
||||
Okay I know it's stupid. But I had fun with it. :)
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Experimenting with AI voice
|
||||
slug: ai-voice-test
|
||||
description: I tried out the ElevenLabs Beta!
|
||||
tags:
|
||||
- learning
|
||||
added: 2024-01-06T00:00:00.000Z
|
||||
---
|
||||
|
||||
I tried out the [ElevenLabs](https://elevenlabs.io/?from=partnersmith2011) beta in February last year, and I finally uploaded the audio of my little test!
|
||||
|
||||
In my experiment, I used [one of my older blog posts](https://blog.cassidoo.co/post/private-wins/). After passing in some voice samples to ElevenLabs, I had it read the blog post in "my" voice. Then, I recorded my own reading of the blog post, too.
|
||||
|
||||
So now, you can hear the synthesized version and the real version back-to-back!
|
||||
|
||||
**AI version:**
|
||||
|
||||
<iframe title="AI voice" width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1710542829&color=%23eb4888&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
|
||||
|
||||
**Real voice version:**
|
||||
|
||||
<iframe title="Real voice" width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1710542832&color=%23eb4888&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
|
||||
|
||||
The AI version is definitely pretty good. I think if someone didn't know my voice super well, they wouldn't really question it. I do think there's more... "life" to the real one, but maybe that's my own bias. In the AI one, you hear little blips where the AI "jumps" between sounds, and in my real voice, you can hear me stumble over my words a bit. What's particularly interesting to me is that the cadence is pretty spot on; both audios are exactly 1 minute and 19 seconds.
|
||||
|
||||
Anyway, cool test, and I'd be down to experiment with this more in the future!
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Kind of annoyed at React
|
||||
slug: annoyed-at-react
|
||||
description: 'Just a little ranty rant about my fave JS library, ya know.'
|
||||
tags:
|
||||
- technical
|
||||
- musings
|
||||
added: 2024-01-13T00:00:00.000Z
|
||||
---
|
||||
|
||||
I'm kind of annoyed at the state of React lately. I still use it regularly, and am somewhat friendly with the folks that work on it still, and it's the first library I reach for, but... it's just gotten too confusing and frustrating.
|
||||
|
||||
Not to boast but I like... really know React. I've used it for almost a decade. I've seen it morph and grow and used the frameworks that have popped up to work with it, I've written dozens of articles and tutorials for it, I was in the React 18 Working Group and other related groups before that, and before the pandemic, I taught React full time. So trust me when I say: **React's gotten really hard to understand.**
|
||||
|
||||
I feel like the lack of understanding comes from not communicating properly with the community (both educational content and also transparency about what/how/etc things are being built), and it frustrates me.
|
||||
|
||||
It's frustrating to see that there hasn't been a release [since June 2022](https://github.com/facebook/react/releases/tag/v18.2.0). It's frustrating that the core team all spouted "use a framework!" with React 18 and then most of the vocal ones left their jobs to join \[a company that owns a large React framework] and \[that framework] seems to use Canary releases rather than the one that's stable and out in the world (and it seems like a "cool kid" monopoly). It's frustrating that they took *so long* to write new documentation (and the folks writing them weren't properly supported) that if you look up "React documentation" the new docs aren't even the first result. It's frustrating that there's [two Reacts](https://overreacted.io/the-two-reacts/) now (not that there shouldn't be, but that it's not clear/an easily understandable mental model for most people). It's frustrating that diversity efforts [visibly took a backseat](https://twitter.com/rachelnabors/status/1586772024252583936) with React leadership and there's just not as many voices from a variety of different people anymore.
|
||||
|
||||
Bleh, anyway. I really didn't mean for this to be a negative nancy post. I've harped on the React team's communication before and I do think they've gotten a bit better. And again, I still reach for React when I want to build something somewhat complex, I just... wish I were happier about it when I do. I'm optimistic for the future. Kind of.
|
||||
@@ -1,35 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Base CSS for your text-based pages
|
||||
slug: base-css
|
||||
description: >-
|
||||
Sometimes the defaults your web browser gives you aren't very cute. Here's a
|
||||
lil snippet I use to fix that.
|
||||
tags:
|
||||
- technical
|
||||
added: 2024-01-19T07:56:14.460Z
|
||||
---
|
||||
|
||||
If you don't want to deal with styling a mostly text-based HTML document, plop these lines in and it'll look good:
|
||||
|
||||
```css
|
||||
html {
|
||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
font-size: 1.3em;
|
||||
max-width: 40rem;
|
||||
padding: 2rem;
|
||||
margin: auto;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
```
|
||||
|
||||
I use this for a bunch of projects where I just need some plain ol' styling that is better than the defaults (and that I can easily add to), like [AI Ipsum](https://ai-ipsum.app/) and [W-9 Crafter](https://github.com/cassidoo/w9-crafter).
|
||||
|
||||
You can save [cass.run/basecss](https://cass.run/basecss) if you want a quick link to the snippet, and here's a little demo of what it looks like:
|
||||
|
||||
<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="result" data-slug-hash="YzgVYWV" data-editable="true" data-user="cassidoo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
|
||||
<span>See the Pen <a href="https://codepen.io/cassidoo/pen/YzgVYWV">
|
||||
Cassidy's base CSS demo</a> by Cassidy (<a href="https://codepen.io/cassidoo">@cassidoo</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.</span>
|
||||
</p>
|
||||
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: I am better than you at everything
|
||||
slug: better-than-you
|
||||
description: "(I'm not, actually)"
|
||||
tags:
|
||||
- advice
|
||||
added: 2013-12-09T06:00:00.000Z
|
||||
---
|
||||
|
||||
Hey.
|
||||
|
||||
I think you're great.
|
||||
|
||||
Really.
|
||||
|
||||
I've noticed that a lot of times when you're in a tough class like calculus or physics or Russian Literature or something, something happens: It breaks you. You were a great student until you hit that class. Suddenly, you're struggling. You're not just "getting" it. You have to study harder than you're used to, and things still don't seem to make sense.
|
||||
|
||||
What the heck, school.
|
||||
|
||||
And then, here comes in that one person. The one person that ruins the class curve. The person who does just "get" it.
|
||||
|
||||
They're the worst.
|
||||
|
||||
The worst part about them is that you don't always hate them. Sometimes they're even your friend. But when you happen to glance at their last test score with yours in the back of your mind, it's all loathing. Not just for them, but for yourself.
|
||||
|
||||
"Why the heck don't I understand this?"
|
||||
"I thought I was smart…"
|
||||
"Where did I go wrong?"
|
||||
"I'm just going to drop this class."
|
||||
|
||||
Don't drop the class.
|
||||
|
||||
The sad part about those people is that they often are the loudest about their grades. You notice them the most. And even worse is that because everyone is trying to hide the fact that they are also suffering as much as you are, they also murmur things like, "oh yeah it wasn't so bad," or, "yeah I did better than expected." What those people don't say is, "Well… I was expecting a low F so the D+ actually is better than I expected…" etc.
|
||||
|
||||
You are not alone.
|
||||
|
||||
Those people who act like they're better than you at everything?
|
||||
|
||||
They're not.
|
||||
|
||||
Don't let that one test, that one project, that one class, and yes, that one person get you down.
|
||||
|
||||
Every single person hits something that gets them to this point. You're going to be fine.
|
||||
|
||||
So sit down, close Facebook and Reddit and Tumblr and Imgur and BuzzFeed and Instagram and Pinterest and Twitter and Klout and YouTube and Vine.
|
||||
|
||||
Get to work.
|
||||
|
||||
You can do it.
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: I love reading fantasy again
|
||||
slug: brando-sando
|
||||
description: Brandon Sanderson books have brought me back to loving a good adventure story!
|
||||
tags:
|
||||
- musings
|
||||
added: 2024-03-31T04:52:00.817Z
|
||||
---
|
||||
|
||||
I first discovered the author [Brandon Sanderson](https://www.brandonsanderson.com/) when he launched a Kickstarter in the pandemic, where he announced that he wrote 4 books. It felt like everyone on Reddit and Discord and TikTok were raving about how he's the most productive author ever, and he's so fun, blah blah.
|
||||
|
||||
So, I backed the Kickstarter, thinking I might try this author, not knowing anything about his other books and his whole "Cosmere" universe where multiple stories exist. A few friends on Discord told me which books I should try reading before getting the Kickstarter books, and I picked up the [Mistborn Trilogy](https://www.brandonsanderson.com/the-mistborn-saga-the-original-trilogy/).
|
||||
|
||||
As a side note... I'd been reading a whole lot of non-fiction. Tons of productivity books and books about the world as we know it, management books, science books, those sorts of things.
|
||||
|
||||
But y'all, I haven't loved reading fantasy this much since I read Harry Potter or the Hunger Games! I used to **love** fantasy adventure books when I was younger, and I somehow lost that, but these books have brought me back. The Mistborn Trilogy had me hooked from the start, and I'm more than halfway through those 4 Kickstarter books as well (I've read The Frugal Wizard's Handbook For Surviving Medieval England and Tress of the Emerald Sea so far, and I'm reading The Sunlit Man now). I'm truly having a blast. The stories are such genuinely wonderful, wholesome, exciting adventures that I haven't experienced in so long!
|
||||
|
||||
I am very happy to put aside the non-fiction for a while. I've enjoyed reading so much more these days, and getting immersed in the stories of Brando Sando is absolutely the reason why.
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: How my big bod broke a bus
|
||||
slug: broke-a-bus
|
||||
description: I am a real Spaniard now!
|
||||
tags:
|
||||
- personal
|
||||
added: 2012-03-08T06:00:00.000Z
|
||||
---
|
||||
|
||||
So, every morning the buses to school (in Spain) are pretty crowded. There aren't many regulations (actually there are none) on how many people can fit on a bus. Also, in general, it has been noted that the Spaniards are not afraid to push or cut in line to get on the bus. Normally, I usually just let them go and I get on the next bus.
|
||||
|
||||
On Thursday, this was not the case. When I approached the bus, there were just so many people that I was instantly separated from my friends Tasia and Madison at the stop. The bus was clearly full, and the bus driver yelled that he was going to close the door. It was at this moment my inner Spaniard came out, and pushed onto the bus anyway. I pushed about 3 people on so that I could get on too, and then a couple people saw what I did and followed. The bus was so packed that We didn't have to hold on to anything, we were just sardines waiting to be eaten by the classroom and monotony of everyday movement.
|
||||
|
||||
However when the bus pulled away, I instantly noticed that we were a little heavy in front. When the bus stopped at a red light, there was air flowing out of somewhere. The bus driver looked worried. He had a student climb out to check the tires (he couldn't get out himself because there were too many people). The student saw nothing, but there was clearly a lot of air and the bus was lower than usual. We pulled over and the bus driver called in, asking if he could keep going. His manager said no, and all of the students started yelling. Eventually the driver was convinced to keep going. The bus moved very slowly and tilted more than usual on the turns. When we finally got to the university and everyone piled off, the bus driver called in and the bus was out of commission. Supposedly there were only just a few too many students on the bus. Whoops.
|
||||
|
||||
Today I decided that I wasn't going to push and I ended up missing two buses. If breaking the bus is what it takes, SO BE IT.
|
||||
@@ -1,171 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Building My S60-X Keyboard"
|
||||
slug: s60x-keyboard
|
||||
description: "After a bunch of trial and error, I built and programmed my first mechanical keyboard!"
|
||||
added: "Jan 01 2017"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
HELLO. I'm so excited to share my build log of my first custom mechanical keyboard!
|
||||
|
||||
So, way back in August 2016, I joined a group buy of a new keyboard from
|
||||
[Sentraq](https://sentraq.com/), called the S60-X. It's a 60% keyboard, which
|
||||
means it has about 60% of the keys of a fullsize 104-key keyboard. It doesn't
|
||||
have the normal function row nor the arrow keys. Which will be made up for via
|
||||
keyboard _layers_. I'll get more into that later.
|
||||
|
||||
So, first I'll talk about building the board!
|
||||
|
||||
First, the unboxing! Inside the box was Gateron Green switches (I wanted some
|
||||
that were both clicky and tactile), switch stabilizers, a PCB, a back plate,
|
||||
a front plate, LEDs, and feet. There were also some blank keycaps (that I
|
||||
didn't end up using, but were nice to have).
|
||||
|
||||
|
||||
|
||||
The first step was to add the switches to the front plate.
|
||||
|
||||
|
||||
|
||||
Once the switches were mostly added, I had to put together and add the
|
||||
stabilizers. That part was SO frustrating.
|
||||
[This build guide](http://imgur.com/a/hzd7r) completely saved my sanity in
|
||||
figuring out how to put them together. The stabilizers are for the wider keys,
|
||||
so that they are, you guessed it, stable when used.
|
||||
|
||||
|
||||
|
||||
After adding all of the switches and stabilizers, it was soldering time. I had
|
||||
never actually soldered anything before, but luckily my boothang Joe did.
|
||||
Conveniently, the PCB lined up with the front plate switches perfectly, so it
|
||||
was just a matter of lining up the holes with the pins in the switches. The
|
||||
LEDs also fit well too:
|
||||
|
||||
|
||||
|
||||
After soldering, we tested the PCB by just plugging it in to make sure it
|
||||
detected everything. It didn't get the Backspace button which resulted in us
|
||||
re-soldering it, which we later found out was a firmware issue. Whoops.
|
||||
|
||||
But hey look, the backlights worked!
|
||||
|
||||
|
||||
|
||||
Anyway, once the soldering was done, it was time to put the case on!
|
||||
|
||||
|
||||
|
||||
And now, my favorite part, it was keycap time. I bought a
|
||||
[DSA Overcast keycap set](https://www.massdrop.com/buy/mito-dsa-sci-fi) from
|
||||
a Redditor. DSA refers to the profile of the keycap, but I'll save you the
|
||||
explanation of the different types.
|
||||
|
||||
|
||||
|
||||
But, as I added the keycaps, I realized that the Redditor didn't send me a
|
||||
whole set! I was missing the letter I key. Conveniently though, I did also buy
|
||||
some fun lime green keys, so I added a bomb key on the letter I. Because I am
|
||||
the bomb.
|
||||
|
||||
|
||||
|
||||
And DONE. At least with the hardware part. Now I had to program the board.
|
||||
This part came with pretty much zero instruction, so it was a combination of a
|
||||
LOT of sources that it came together. Because there wasn't a central source,
|
||||
let this blog serve you as the central source of all of the information I
|
||||
found!
|
||||
|
||||
So first, I tried Windows with
|
||||
[Atmel FLIP](http://www.atmel.com/tools/flip.aspx), and just flashing
|
||||
some default firmware to start. My computer was NOT working with that method.
|
||||
It worked on Joe's computer, though, which is weird.
|
||||
|
||||
As a result I got frustrated and tried OS X instead, and that worked!
|
||||
The software I needed was [dfu-programmer](https://dfu-programmer.github.io/),
|
||||
and [QMK Firmware](https://github.com/jbyoung/qmk_firmware). Here's what I did
|
||||
to install things step-by-step:
|
||||
|
||||
```
|
||||
$ brew install dfu-programmer
|
||||
$ brew tap osx-cross/avr
|
||||
$ brew install avr-libc
|
||||
$ git clone
|
||||
```
|
||||
|
||||
Easy peasy. Now I went into the `qmk_firmware` folder, then into `keyboards`,
|
||||
and there you can use one of two folders, either `/S60RGB`, or `/s60-x`. I
|
||||
honestly can't tell you the difference between them. LOL. Anyway. In _that_
|
||||
folder, copy the keymap.c file into another folder in the `/keymaps` directory.
|
||||
I just called it `custom`.
|
||||
|
||||
Now it's editing time! All the keycodes you might want are on
|
||||
[this page](https://github.com/jbyoung/qmk_firmware/blob/master/doc/keycode.txt).
|
||||
All the keycodes EXCEPT the LEDs. I'll get to that in a second.
|
||||
|
||||
You can go to `/keymaps/custom` (or whatever you named your folder) and edit
|
||||
keymap.c. My changes were minor, in the second layer (which is toggled via
|
||||
my Function key with which I replaced Caps Lock) I made HJKL the arrow keys
|
||||
(because I use vim and vim is great), M for Mute, and < and > for volumes down and
|
||||
up.
|
||||
|
||||
Now not listed in the keycode link I listed above are the keycodes for the LEDs
|
||||
and the backlight. They are RGB_TOG, RGB_MOD, RGB_HUI, RGB_HUD, RGB_SAI,
|
||||
RGB_SAD, RGB_VAI, and RGB_VAD. I ended up making my numbers on the second
|
||||
layer all of these. In case you want to see what I did, here you go:
|
||||
|
||||
```c
|
||||
[_BL] = KEYMAP(
|
||||
F(0), KC_1, KC_2, KC_3, KC_4, KC_5, KC_6, KC_7, KC_8, KC_9, KC_0, KC_MINS, KC_EQL, KC_DEL, KC_BSPC, \
|
||||
KC_TAB, KC_Q, KC_W, KC_E, KC_R, KC_T, KC_Y, KC_U, KC_I, KC_O, KC_P, KC_LBRC, KC_RBRC, KC_BSLS, \
|
||||
MO(_FL), KC_A, KC_S, KC_D, KC_F, KC_G, KC_H, KC_J, KC_K, KC_L, KC_SCLN,KC_QUOT, KC_ENT, \
|
||||
KC_LSFT, KC_Z, KC_X, KC_C, KC_V, KC_B, KC_N, KC_M, KC_COMM,KC_DOT, KC_SLSH, KC_RSFT, \
|
||||
KC_LCTL, KC_LGUI,KC_LALT, KC_SPC, KC_RALT, KC_RGUI, MO(_FL), KC_RCTL),
|
||||
|
||||
[_FL] = KEYMAP(
|
||||
KC_GRV, RGB_TOG, RGB_MOD, RGB_HUI, RGB_SAI, RGB_SAD, RGB_VAI, RGB_VAD, BL_TOGG, BL_DEC, BL_INC, BL_STEP, KC_TRNS, RESET, KC_TRNS, \
|
||||
KC_TRNS,KC_TRNS,KC_TRNS, KC_TRNS,KC_TRNS,KC_TRNS, KC_TRNS,KC_TRNS,KC_TRNS, KC_TRNS, KC_TRNS, BL_DEC, BL_INC, BL_TOGG, \
|
||||
KC_TRNS,KC_TRNS,KC_TRNS,KC_TRNS,KC_TRNS,KC_TRNS,KC_LEFT,KC_DOWN,KC_UP, KC_RIGHT, KC_TRNS, KC_TRNS, KC_TRNS, \
|
||||
KC_TRNS, KC_TRNS, KC_TRNS, KC_TRNS, KC_TRNS, KC_TRNS, BL_TOGG, KC_MUTE, KC_VOLD, KC_VOLU, KC_TRNS, KC_TRNS, \
|
||||
KC_TRNS,KC_TRNS,KC_TRNS, KC_TRNS, KC_TRNS, KC_TRNS, KC_TRNS, KC_TRNS),
|
||||
};
|
||||
```
|
||||
|
||||
Thanks so much [/u/MaltMilchek](https://www.reddit.com/user/MaltMilchek) for the help here!
|
||||
|
||||
Now, once all of the keycodes were put in, I saved keymaps.c and went to the
|
||||
enclosing folder with the Makefile in it, and ran:
|
||||
|
||||
```
|
||||
$ make custom
|
||||
```
|
||||
|
||||
If you named your folder something besides `custom`, do that instead.
|
||||
|
||||
Now, to actually flash the firmware, go to the parent `/qmk_firmware` folder,
|
||||
and go to the `/.build` folder there. Press the reset button on the back of the
|
||||
keyboard for about 3 seconds, and then in the terminal run:
|
||||
|
||||
```
|
||||
$ dfu-programmer atmega32u4 erase
|
||||
$ dfu-programmer atmega32u4 flash S60RGBcustom.hex
|
||||
```
|
||||
|
||||
Your file might be named something else other than S60RGBcustom.hex, but just
|
||||
make sure that it's a .hex file.
|
||||
|
||||
Now unplug and replug the keyboard, and you're all set!
|
||||
|
||||
This process took me SO LONG, so hopefully this might be helpful for you.
|
||||
|
||||
Here's the final shot of my board!
|
||||
|
||||
|
||||
|
||||
It was a BLAST putting this together. Definitely frustrating at times, but I'm
|
||||
super happy with the final product. Plus with the configuration above, I'm able
|
||||
to toggle through different colors and change up the keycaps to match. RIP wallet.
|
||||
|
||||
Thanks to everyone at
|
||||
[/r/MechanicalKeyboards](https://www.reddit.com/r/MechanicalKeyboards/) for
|
||||
being so helpful! Hopefully this will be useful to someone, too. :)
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Buh bye, 2023"
|
||||
slug: bye-bye-2023
|
||||
description: "2023 is over, let's recap."
|
||||
added: "Dec 31 2023"
|
||||
tags: [learning, work, personal, musings]
|
||||
---
|
||||
|
||||
As the great philosophers of Smash Mouth once said, "well, the years start comin and they don't stop comin," and 2023 was one of those years. Similarly to [how I recapped 2022](https://blog.cassidoo.co/post/see-ya-2022/), I'll do my best to break down one of my most life-changing years yet!
|
||||
|
||||
## Work things!
|
||||
|
||||
I'm still having a blast as CTO at [Contenda](https://www.contenda.co/), where we've done a pivot and are working full time on our app [Brainstory](https://www.brainstory.ai/) now!
|
||||
|
||||
Pivoting was a hard transition, I'll admit. We had originally built a product that quickly turned your videos, podcasts, etc. into blog posts (and other forms of written content), and let you compose a bunch of those things together. I really loved it, but with the release of GPT-4, tons of our work was suddenly not a competitive advantage anymore. Competitors were launching faster than ever, and sales were simply not closing. We had _so many_ enterprise sales calls and we kept getting riiiight up to the finish line without ever crossing it, and it was really, really discouraging.
|
||||
|
||||
So, while we were trying to figure out how to salvage our work, we started building "mini-apps" on top of our API. I thought it would be cool for folks who didn't have existing content be able to record it in the browser, and we would transform it from there. That spawned a bunch of products like an app that helped high school students talk through their college application essays, a productivity app that helped you take notes as you studied, a Dungeons & Dragons character sheet creator... it was really fun, but we had to figure out our direction. [Brainstory](https://www.brainstory.ai/) is what bubbled to the top from all of our learnings, and our users... **loved** it.
|
||||
|
||||
We realized that Brainstory wasn't just a "mini app" on top of our API, but a really valuable product for brainstorming ideas and getting feedback. We started dogfooding it by using it for prepping for our All Hands meetings, I used it to write some conference talks and blog posts, and we've even used it for meal prep and planning for hard conversations. The more our team used it and shared it and enjoyed it, the more we realized that we had to make it our flagship product, and that's what we're working on today!
|
||||
|
||||
Outside of that work, I'm still loving advising companies! I'm still advising [Netlify](https://www.netlify.com/), [Plasmic](https://www.plasmic.app/), and [The Sukha Company](https://www.thesukha.co/) (formerly Centered), and I did a stint for [Wix](https://www.wix.com/), and I recently started advising [Chainlink](https://chain.link/) as well. It's been really interesting doing this for such different companies, especially in a weird economy where everyone's trying different things to get through it and succeed.
|
||||
|
||||
## Personal things!
|
||||
|
||||
I think the big, giant, massive, huge thing that really took over my whole year was having my adorable baby Nadia this April! Words really can't describe how intense birth and recovery and parenthood has been. I did try though by writing about [my c-section experience](https://blog.cassidoo.co/post/c-section/) and [my mindset changes](https://blog.cassidoo.co/post/todo-tada/) and [postpartum depression](https://blog.cassidoo.co/post/dear-early-may-cassidy/) and [schedule changes](https://blog.cassidoo.co/post/mama-says-no/) this year.
|
||||
|
||||
Nadia is 8 months old now, she started crawling this week and pulling herself up to stand (!), she says "mama" (but only when she's hungry, ugh), laughs all the time, and truly the cutest thing I've ever seen. Our rhythm is constantly changing as we figure out childcare (so expensive!!! Like, for good reason, but ahh!!!), navigate sleep regressions, and watch her little personality grow. It's hard, it's so hard, but she's worth it (and I cannot emphasize enough how good it is to feel like she's worth it. Postpartum hit me **so hard** this year, and if you or someone you care about is struggling, please feel free to contact me if you need someone to talk to).
|
||||
|
||||
Even with late pregnancy and a baby, we did get to travel this year, where we saw family and friends both around the country and abroad! I don't know if I'll ever travel as much as I did pre-pandemic, but it's nice to be able to see places again outside of our little corner of the world.
|
||||
|
||||
Something else that's been genuinely lovely is just how many close friends we've made this year. So many kind, generous people came to us when I was struggling with the baby, and our community in Chicago is truly wonderful. I love living close to family here, and the fact that I'm within walking distance to both family and friends is the icing on this year's cake!
|
||||
|
||||
And even outside of Chicago, the internet friendships are going strong, and y'all are probably the ones who are actually reading this blog, heh. I'm so grateful to all of you being there when I would be typing out my woes and live-streaming my rants. And sharing memes, of course.
|
||||
|
||||
## Side project things!
|
||||
|
||||
This year was a **super** fun one for projects. I blogged both at the beginning and end of the year about [just how much I was committing to GitHub](https://blog.cassidoo.co/post/the-streak/). I really had a great time shipping things!
|
||||
|
||||
First and foremost, as always, [my weekly newsletter](https://cassidoo.co/newsletter/) is going strong! We crossed the 6th year anniversary this year, and it's still my biggest labor of love for the tech community. I love seeing people jump into the coding questions and liking the articles, and it makes my day every time when people say they like reading it! I actually let go of the reins a little bit this year: I got [a sales team](https://www.buysellads.com/publishers) for sponsorships. It was harder than it should have been to decide I needed help, but now that I don't have to do sales calls and booking and invoicing and copy edits etc etc, I have _so_ much more time for actually writing the newsletter!
|
||||
|
||||
In other newsletter news, we crossed the 200 issue mark with the [Stack Overflow newsletter](https://stackoverflow.blog/newsletter)! I've been helping them write it ever since it started back in 2019, and we're going strong. I was a regular host of their [podcast](https://stackoverflow.blog/podcast) for most of the year as well, but with restructuring things I'm now more of an occasional guest, heh.
|
||||
|
||||
And speaking of podcasts, we finished season 1 of [The Dev Morning Show (at night)](https://www.youtube.com/@DevMorningShow)! I absolutely loved recording the show with my friend [Zach](https://twitter.com/zachplata) as my co-host, and talking with incredible guests. We're on the hunt for a sponsor for season 2 so we can record again, so if you or someone you know might be interested, let me know!
|
||||
|
||||
In terms of writing, I tried to blog a bunch here, and also on [dev.to](https://dev.to/cassidoo/) (where I was one of their [Top 7 authors of the year](https://dev.to/devteam/top-7s-top-authors-of-the-year-120m)!), but I admit I am working on being more consistent. Most of my writing time these days is during nap times and mostly on my newsletter, unless I can squeeze out a post here and there. I'm hoping to write a lot more in 2024!
|
||||
|
||||
I'm also hoping [to livestream more](https://twitch.tv/cassidoo) in 2024, as well. I had a good weekly cadence going pre-baby, but as one can imagine... it's not that easy to stream when you've got one of those. I have a feeling I might struggle with being regular on stream, but I'm going to try!
|
||||
|
||||
This year, my coding side projects were really, really fun. I made [AI Ipsum](https://ai-ipsum.app/), a dummy filler text generator with a dash of AI. I also updated my Obsidian theme, [Cardstock](https://github.com/cassidoo/cardstock), to the latest versions of the app! I did a bunch of random scripts and demos and maintenance in between these projects, but the two that I'm particularly proud of are [Thirteen Potions](https://cassidoo.itch.io/thirteen-potions) (which is a game I made for my first ever game jam, [build log here](https://blog.cassidoo.co/post/thirteen-potions/)), and a jumbled word search game, [Jumblie](https://jumblie.com/)! Jumblie started as a project for a video series ([more info here](https://blog.cassidoo.co/post/jumblie-build-log/)) and got popular enough quickly that I've been actively maintaining it for a few months now! I'm not sure what will come of it, but I love word puzzles, and it's really exciting for me that others like the one I made.
|
||||
|
||||
And finally, not really a side project but I'm including it anyway, I've been actively [playing go](https://online-go.com/user/view/340298) almost daily! I participated in [my first in-person tournament](https://blog.cassidoo.co/post/first-go-tourney/), and I hit my goal ranking this year (6k, for those familiar)! I would _love_ to make it to 4k in 2024, but... we'll see about that!
|
||||
|
||||
There's more side project things that I'm sure I'm forgetting, but I've kept my [GitHub Stars profile](https://stars.github.com/profiles/cassidoo/) fairly up-to-date if you wanna look there at various podcast episodes and things I've made for now.
|
||||
|
||||
## Phew!
|
||||
|
||||
Gosh, 2023 has been quite the year. I'm so grateful to have made it through some really intense lows, and to have seen some spectacular highs. I have a feeling 2024 will be a funky transitional year, but I'm all for it.
|
||||
|
||||
Thank you for reading all of this! Here's a joke for you as a reward: What do you call a bee that lives in America? A USB!
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "My c-section experience"
|
||||
slug: c-section
|
||||
description: "I had a c-section recently and delivered my first baby! It was a lot."
|
||||
added: "May 06 2023"
|
||||
tags: [personal]
|
||||
---
|
||||
|
||||
I had a baby a couple weeks ago! Ahh! She's an absolute delight and we love her deeply, but also... this has been the hardest two weeks of my life by far. It's so mind-shattering how much life has changed. Everyone says that it's the most intense thing you'll ever experience, but those words don't really explain it enough. It's extreme moments of joy and extreme moments of sadness back and forth, all the time.
|
||||
|
||||
But anyway, I am writing down what happened with my c-section and hospital experience for anyone who doesn't know how these things go, who might benefit from the knowledge, and who might be going through it themselves.
|
||||
|
||||
**Content warning: I'm gonna be talking about surgery, babies, bodies, fluids, shots, the works. If you get queasy reading such things, you should probably stop reading now.**
|
||||
|
||||
## Prepping for the day of
|
||||
|
||||
In the days before your c-section, you'll have to do some kind of bloodwork to make sure everything looks good. The results for that last 72 hours, and I recommend doing that as early as you can so that the needle prick can heal a bit. You're going to have a lot more of those in the next fews days. You'll also wanna... groom the downstairs area. If you don't, they'll shave you. You don't want that.
|
||||
|
||||
On the day of, you can't eat for 8 hours beforehand. If you're going to have a planned c-section, plan it for the morning so that you can eat the night before and go straight to the hospital in the morning.
|
||||
|
||||
My c-section was scheduled for 7:30am, and we had to get there by 5:30am to be monitored and prepped. That involved getting in a gown, having things strapped to me, some light blood work, an IV added to the arm, and answering lots of questions about home life and health.
|
||||
|
||||
### Side note: why did I get a c-section?
|
||||
|
||||
My baby was breech, aka upside down. I had actually tried to do the external cephalic version (ECV) procedure to flip her around, and that was probably the most painful thing I've ever experienced.
|
||||
|
||||
If I were to give advice to anyone experiencing a breech baby: don't do the ECV. It's only successful about 50-60% of the time in flipping the baby, and it was more painful than the actual birth itself. I'm very happy to share my experience with you in more detail if you want, but just know that it's multiple adult doctors physically pushing your baby while you feel your organs being crushed. Just get the c-section.
|
||||
|
||||
## The build-up to the actual procedure
|
||||
|
||||
After the initial prep, a bunch of nurses and doctors come in to tell you all what to expect. They'll say which rooms you'll be wheeled into, they'll give you some initial meds, they'll tell you what key words to listen for, and they give your designated support person a [bunny suit](https://en.wikipedia.org/wiki/Cleanroom_suit) (my lovely husband Joe was my support person, and he did not know that a bunny suit was an actual surgical outfit, and thought he was going to actually be dressed as a rabbit for the birth of our child).
|
||||
|
||||
They gave me a super bitter, sour drink called bicitra before going in for the epidural. It was nasty. But, it's supposed to help you not throw up when you're strapped to the table. Throw it back like a shot and try not to taste it if you can.
|
||||
|
||||
When it was time for the epidural, they rolled me into the operating room. That room is COLD. I was so shaky from both the cold and the nerves that a nurse had to hold my arms and legs still while I curled up like a shrimp. The needle they put in your back is _not comfortable_. On the plus side, it's the last time you'll feel pain until after the baby's born.
|
||||
|
||||
## The c-section
|
||||
|
||||
Okay, it's c-section time, and it's like you're a race car and all of the doctors and nurses are the pit crew. A lot happens really, really fast.
|
||||
|
||||
You are positioned to lay out on the table like a cross, and you're strapped down. At any point if you're feeling nauseous, you have to say it loudly because otherwise they will miss it. They pull up a curtain so you can't see anything below your chest, and they start poking you with something spiky in your arm, and then in your leg, to see how fast the epidural is taking effect.
|
||||
|
||||
I was getting particularly nervous at this point, because as you're losing the feeling of pain, you can still feel them prodding you and positioning you for a while. It was really uncomfortable.
|
||||
|
||||
They brought my husband Joe in at this point, and he was on my side of the curtain holding my hand. I had him find a bunch of animal facts earlier to tell me to try and distract me, which was incredibly helpful and I highly recommend you do.
|
||||
|
||||
I was nervously crying as he was telling me the facts and I was trying to focus on that, and the anesthesiologist leaned in to say, "hey, I know you're nervous, but if it helps, they actually cut you open already, they already started, and you felt nothing." Which did help! But then the PRESSURE began.
|
||||
|
||||
You don't feel pain, but whew, you feel a WEIGHT on your chest like no other. It felt like someone was sitting on me and shaking me, and I was struggling to breathe. The doctors said it was because the muscles around my lungs were numb, so I had to do extra work there. All I could really see were blood splatters (wee) on the curtain, and I was just focusing on breathing as much as I could while Joe talked to me.
|
||||
|
||||
The procedure's total time was pretty fast, I think it was less than a half hour from epidural to baby exit, but it felt way longer. There was a point where I heard the baby cry behind the curtain, but I was still feeling pressure, and the doctors then gave me valium which knocked me out. Joe at that point was able to take pictures of the baby and hold her (he said he accidentally took a quick glance and saw way too many of my organs out as they were about to stitch me back up, be careful of that), and the next thing I knew I was being wheeled into the post-op room seeing him give the baby to me. I admit I was fairly loopy from the drugs for a couple hours after that, so I don't fully remember what happened besides skin-to-skin time and being hooked up to some machines for monitoring.
|
||||
|
||||
## The aftermath
|
||||
|
||||
And then... our baby was here. We were wheeled into the recovery room, and were there until Tuesday morning (the baby was born on Friday).
|
||||
|
||||
In that time we were in the room, the baby and I were checked every two hours for blood pressure and temperature (which does not make for very restful sleep). The nurses and technicians were all very kind though. They have lactation consultants who help with breastfeeding (and by the way, if you don't want to breastfeed, be firm on that, because they are going to very heavily encourage otherwise), and the doctors come in twice a day to check the scar and bleeding.
|
||||
|
||||
Things I didn't expect that you should be ready for:
|
||||
|
||||
- You're going to have a catheter for at least the first day and that is how you're going to pee.
|
||||
- You won't be able to move your legs for a while, but it's important to try and wiggle your toes and move them around on the hospital bed until you can.
|
||||
- When they remove the catheter, it's gonna hurt, and suddenly you're going to have to get up to go to the bathroom whenever you need to.
|
||||
- It hurts a whole lot to get up and go to the bathroom.
|
||||
- The nurses will show you how to get out of the bed to get up, and you will probably need help from them and/or your support person to get up for a while. I think I was able to get out of the bed on my own on day 3 or so, but it took a whole lot of effort and you gotta use the bars on the side of the bed to pull yourself a lot. Build up your arm muscles now.
|
||||
- Walking is very, very hard. Your abs will not work, and the ligaments around your crotch are gonna hurt. You almost need a cane or a walker. Hold onto everything you can to help you move.
|
||||
- You're going to have a mega pad in the high-waisted underwear they give you because you're gonna bleed a ton. It's like a really heavy period. I'm a little over two weeks post-op and I'm still bleeding (less, but still). You should try to keep as many of the pads and underwear they have as you can. It's not cute, but it's effective.
|
||||
- Your uterus is going to start to contract back into place and it hurts a TON. Imagine period cramps, but worse. Luckily the cramps don't last long (maybe like a minute), but whew, hold onto something. You will also cramp every time you pee.
|
||||
- You will take a long while to be able to poop again, but you're gonna want to as soon as you can to ease the cramping. Ask for stool softeners. Also you should probably take stool softeners the week leading up to the procedure just to prep your butt. A lot of the pain meds they give you cause constipation so you gotta fight back.
|
||||
- Your baby has sharp fingernails. Bring a baby nail file because those things are way sharper than they should be.
|
||||
- If you don't bring a pacifier, you can use the surgical gloves in the room and have your baby suck on your pinky finger or something if they're fussy but not hungry. Amusingly, babies suck on anything they can because of their little reflexes. There was a point where the nurses said that a lot of dads come out of the hospital with little hickeys because they'll do skin to skin time and the baby will suck on their clavicle or something (and about 20 minutes later, that happened to Joe).
|
||||
- This could be a whole other blog post, but breastfeeding freaking hurts. It gets better over time, but dang, those first latches are like little razors on your nipples. Holy crap it hurts. Ask the lactation consultants for gel pads, nipple cream, shells for your bra, anything that can relieve you.
|
||||
- We looked up all sorts of things to include in our go bag, and honestly... we hardly used any of the stuff we brought. I was never really "bored" because I was so tired so I just slept whenever I had down time between drug checks, so I didn't use my book or my iPad that I brought along. I switched between hot and cold so often, I didn't use the blanket I brought. I bled and leaked milk so often that I just kept using new hospital gowns instead of any of the clothes I brought. I think the main things I'm glad we brought along were extra little snacks for between meals, and our own toothbrushes.
|
||||
- You can ask the nurses to help change and swaddle the baby, as well as have them help you put the baby to sleep. **Take advantage of this.** You and your support person are going to be so, so tired. You can also ask them to assess your diapering and swaddling techniques, which is a good learning experience.
|
||||
- The hormone swings started to really hit me on day 3 or so (and I'm still dealing with them today). The way the doctor put it: "when you're on your period, you have 2 major hormone changes that cause your mood swings, and after birth, you have 20. You're going to be hit hard." And boy howdy, they were not joking. This could also be a whole separate blog post, because I still haven't kicked out all of my baby blues, but long story short: talk to other parents, talk to your doctor, go on walks, and... good luck. The mood swings are probably the hardest thing for me now (she says, still bleeding and slowly using stairs again).
|
||||
- You don't have to be sneaky about taking stuff from the hospital. On our last day, several nurses came by and would say, "oh wait, you should take more diapers" or "ooh, actually, take more of these ice packs" etc, and it was awesome of them. We're still using a lot of supplies they gave us. If anything, just bring an extra large go bag that's mostly empty so you can stuff it full!
|
||||
|
||||
Okay. Whew. I think that's all I've got for now. Overall, obviously, we got a healthy baby out of it, so the c-section experience was positive. I think a lot of this is not talked about enough and I hope this can be a useful resource for anyone who wants/needs to know more about the procedures and what it's actually like!
|
||||
@@ -1,35 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Cassidy Williams... who is she"
|
||||
slug: cassidy-williams
|
||||
description: "Cassidy Williams, this one, here, is the real one, don't listen to the others!"
|
||||
added: "Jan 1 2024"
|
||||
tags: [meta, musings]
|
||||
---
|
||||
|
||||
Y'all, why is there a Scooby Doo character named Cassidy Williams?
|
||||
|
||||
Why is there a reporter in Connecticut named Cassidy Williams?
|
||||
|
||||
Because they want to ruin my SEO. That's why. It's **personal**.
|
||||
|
||||
But for real, you should probably Google your name, and maybe some keywords too. Your prospective employers are doing it. Your dates are doing it. The friends of your dates are doing it. Your old classmates are doing it. What comes up?
|
||||
|
||||
You can always fix your SEO by putting some content out there in the world, especially if it has some keywords that'll stick out and make it obvious that it's really you.
|
||||
|
||||
So excuse me while I do a lil bit of that:
|
||||
|
||||
- Cassidy Williams mechanical keyboards
|
||||
- Cassidy Williams definitely not a Scooby Doo character
|
||||
- Cassidy Williams writes JavaScript
|
||||
- Cassidy Williams writes React
|
||||
- Cassidy Williams is seriously not a cartoon
|
||||
- Cassidy Williams makes memes
|
||||
- Cassidy Williams is 6ft 3in
|
||||
- Cassidy Williams made Jumblie
|
||||
- Cassidy Williams is 3D, not flat
|
||||
- Cassidy Williams lives in Chicago
|
||||
- Cassidy Williams conference talks
|
||||
- Cassidy Williams cassidoo
|
||||
- Cassidy Williams podcast
|
||||
- Cassidy Williams is alive and a real human
|
||||
@@ -1,85 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Closures in JavaScript"
|
||||
slug: closures-in-js
|
||||
description: "Closures in JavaScript are an important concept that all JS devs should know. So here's a summary for you."
|
||||
added: "Feb 25 2016"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
JavaScript closures are a pretty essential concept to know if you're a JS dev.
|
||||
But, sadly, if you were to ask the average junior developer what they are, more
|
||||
often than not you won't get a solid answer. I'm writing this so that YOU can
|
||||
be the knowledge bomb-dropper in the room. Let's do this.
|
||||
|
||||
Okay so the quick summary of a closure is that from an inner function, it gives
|
||||
you access to an outer function's scope. So essentially, you can create
|
||||
_private variables_. In JavaScript. Whoa.
|
||||
|
||||
Moving backwards a bit, JS has both local and global variables. A local variable
|
||||
looks something like this (see `magic`):
|
||||
|
||||
```js
|
||||
function yolo() {
|
||||
var magic = 3.14;
|
||||
return magic;
|
||||
}
|
||||
```
|
||||
|
||||
And a global variable looks something like this (again, see `magic`):
|
||||
|
||||
```js
|
||||
var magic = 3.14;
|
||||
function yolo() {
|
||||
return magic;
|
||||
}
|
||||
```
|
||||
|
||||
So global variables live forever (or as long as your window/website is open),
|
||||
and local variables are created when the function is invoked and deleted when
|
||||
the function has finished up. But if you have a variable that you want
|
||||
available to all of your functions, you might run into some security issues.
|
||||
Because if you use a global variable, it's not only accessible to all of your
|
||||
functions in your JS, but it's also available to any scripts that might be
|
||||
executed on your site.
|
||||
|
||||
There has to be a better way.
|
||||
|
||||
Oh wait, that's the whole point of this blog post.
|
||||
|
||||
_Closures!_
|
||||
|
||||
Closures are the primary way to have data privacy in your JavaScript. A super
|
||||
duper basic example of this is a simple iterator, where every time you call
|
||||
`iterate()`, a counter is increased by 1.
|
||||
|
||||
```js
|
||||
function iterate() {
|
||||
var count = 0;
|
||||
return function () {
|
||||
return (count += 1);
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
So to run that function, you'd run the following lines and get the shown output:
|
||||
|
||||
```js
|
||||
> var x = iterate();
|
||||
> x();
|
||||
1
|
||||
> x();
|
||||
2
|
||||
> x();
|
||||
3
|
||||
```
|
||||
|
||||
...and so forth. It looks a little funny, but it's because `iterate()` has
|
||||
become a closure. It consists of the local variable `count`, and the returned
|
||||
function.
|
||||
|
||||
You'll see a lot of closures if you do functional programming in JavaScript (and
|
||||
along the same lines, currying), and also a lot in event handlers, in callbacks,
|
||||
and also just when you're coding or reading code in JS that involve data
|
||||
privacy. Definitely try messing with them if you haven't yet. It'll be super
|
||||
helpful for you in the long run.
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: What is Computer Science ACTUALLY like?
|
||||
slug: computer-science-actually-like
|
||||
description: "You might question CS as a major, but I'm here to tell you not to!"
|
||||
tags: [advice]
|
||||
added: 2014-02-25T06:00:00.000Z
|
||||
---
|
||||
|
||||
Hi there cutie pie!
|
||||
|
||||
So, as you might already know, I'm a computer science major, and I LOOOVE it! A lot of people, though, typically give me a cringe reaction when I say that it's my major.
|
||||
|
||||
And yes, I know not everyone likes the idea of coding. They picture someone sitting at a computer all day long in a crappy cubicle staring at a screen with green text and a black background.
|
||||
|
||||
Well, I'm here to tell you that you need to erase that image from your mind, because being a computer science major is SO much more than that!
|
||||
|
||||
So here's some stereotypes that CS majors face, and then some counterexamples to show that they are not true. 😉
|
||||
|
||||
## You're in a cube all day staring at a screen.
|
||||
|
||||
False. In all of my internships that I've had, only one of them included a cubicle. Even then, I was only in it for a couple hours a day because I was in meetings and conference rooms and other places throughout the office. The company I'm going to work for, Venmo, has no offices at all!
|
||||
|
||||
Now sure, if you want an office with cubicles or offices or couches or anything, there are definitely companies out there with those, and that's not necessarily a bad thing. But you should know that because of the flexibility of the degree and the job, you can honestly work in any type of environment you want.
|
||||
|
||||
## It's full of a bunch of boys.
|
||||
|
||||
I am not a boy. Next.
|
||||
|
||||
Heh okay, I admit there are a lot of guys in computer science. Overall in the US, only 18% of all undergraduate computer and information sciences degrees are received by women ([stat from NCWIT](https://ncwit.org/resource/thefactsgirls/)). But ladies (and guys), don't let that deter you! There are so many great opportunities in computer science career-wise, project-wise, and networking-wise that something like gender shouldn't be a decision-making factor when deciding to go into the field or not.
|
||||
|
||||
## It's basically math with a computer involved. No fun.
|
||||
|
||||
No.
|
||||
|
||||
Okay, yes, math is a good thing to know. But it's not the end of the world if you didn't rock your trig class in high school.
|
||||
|
||||
Computer science is about problem solving. You're given a set of skills with the major. Each language you learn is a tool, each idea you learn is a method of solving something. You get to be as creative as you want at that point!
|
||||
|
||||
Let's say you wish there were an easier way to keep track of your calorie intake. That's your problem. You can solve it in all kinds of different ways. Sure, you can write it in a notebook or something, but what if you don't have a pen nearby? Let's turn to tech. You could make a phone application that does it for you. You could even have it look up how many calories an avocado has for you so that you don't have to do that yourself. What if you wanted to get REALLY creative with it? Let's add some image recognition to your application. You could have your phone take a picture of an avocado, recognize what you're eating, and then do the looking up of calories for you and list it on your calendar. You could make a website for it! A smartwatch application! A Google Glass tracker that publishes to Twitter! There's so many options!
|
||||
|
||||
Computer science is great because of it's flexibility. Do you like art? You can work with code that only works with art ([there's a whole website dedicated to that kind of coding here](https://experiments.withgoogle.com/)). You like chemistry? You can make programs that test strengths of covalent bonds between atoms (I asked my computer science/chemistry double major buddy for that example, so it's super legit). You like math? You can work with Turing machines and algorithms exclusively. You like marketing? You can be a developer evangelist and work with events, writing, code, and competitions ([here's a blog post of someone who did just that](https://www.rdegges.com/2014/my-experience-as-a-new-developer-evangelist/)). You like foreign languages? You can make products to bridge the gap between nations.
|
||||
|
||||
Also, what if you don't want to code? You can have jobs like being a technical writer, a project manager, a technical recruiter, a patent lawyer… there's so many opportunities for you even if you just know a little technical knowledge!
|
||||
|
||||
I could go on and give an example for pretty much every single other subject you throw at me. Technology is constantly growing, which only means there will be more and more ways to relate computer science to pretty much anything. Not just math.
|
||||
|
||||
## I don't have coding experience, so there's no point. It is too late.
|
||||
|
||||
\*Touches your shoulder tenderly\* It is never too late for now.
|
||||
|
||||
Not everyone goes into CS knowing things about coding. A majority of people I knew in my freshmen classes had little to no experience at all!
|
||||
|
||||
Don't let those people intimidate you. You can totally learn at your own pace, in the way that you want. Having previous experience, sure, that's a nice bonus. But you could say that about literally every other field (I tried thinking of exceptions to this rule, and there are none). Don't worry about getting your feet wet, or even moving a little slowly. It's a subject that takes patience. It's so vast that some things are pieces of cake to some people, and pure torture for others. As you go through your classes, you figure out what you like, and you can gear your electives towards your preferences.
|
||||
|
||||
Plus, there's so many jobs in computer science out there that you don't have to even think about being worried.
|
||||
|
||||
WHAT A CLEVER SEGUE:
|
||||
|
||||
## Computer Science is being outsourced all over the place, there's no jobs here.
|
||||
|
||||
No no no no no.
|
||||
|
||||
There are so many jobs here, it's ridiculous.
|
||||
|
||||
Quick history lesson: Baby boomers started taking on a lot of jobs, computer-related ones too, many years ago. Now, they're starting to retire a lot. Millions have retired over the past 6 years.
|
||||
|
||||
So, what does that mean for you, for us? JOBS! Not Steve Jobs. I mean careers. For you and me.
|
||||
|
||||
The U.S. Department of Labor estimates that by 2020 there will be more than 1.4 million computing-related job openings. At current rates, however, we can only fill about 30% of those jobs with U.S. computing bachelor's grads ([Source](https://ncwit.org/resource/thefacts/)).
|
||||
|
||||
That's a LOT of jobs. Get on it.
|
||||
|
||||
## Computer scientists are socially awkward.
|
||||
|
||||
No we're not.
|
||||
|
||||
Well, some are.
|
||||
|
||||
But honestly, you could say the same about every single other major out there. Why we were targeted with that one, I couldn't tell you.
|
||||
|
||||
We're normal. I'm normal. NORMAL.
|
||||
|
||||
## You are probably tired of reading this.
|
||||
|
||||
I hope I've deterred some of your malicious thoughts about CS majors (okay I'm sure they weren't malicious, more like "curious," but whatever) and answered some of your questions!
|
||||
|
||||
You should totally give computer science a try. You don't have to major in it if you don't want to, but you could just try a class. You'd be surprised at how fun it is.
|
||||
|
||||
Get jiggy with it. Peace out, girl scout.
|
||||
(Crap, I just reread that… maybe I AM one of the weird ones…)
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Crushing Procrastination in 3 Steps
|
||||
slug: crush-procrastinating
|
||||
description: You should be doing that thing. You know that.
|
||||
tags:
|
||||
- advice
|
||||
added: 2013-11-04T06:00:00.000Z
|
||||
---
|
||||
|
||||
Hey. I get you. You're attractive, and you're reading this.
|
||||
|
||||
You're also probably not working on something you should be.
|
||||
|
||||
That's okay.
|
||||
|
||||
BUT, procrastination is still a pain. There's all kinds of ways to combat it so that you don't end up suffering until the minute before something's due. The phrase, "Due Tomorrow? Do Tomorrow." is not something to live by. Instead think, "I will obey Cassidy."
|
||||
|
||||
1. Prioritize! When you tell yourself, "Psh this is nothing, I'll do it tomorrow," you should actually block off some time the next day to work on it. Scheduling things gives you the structure and the dedicated time you need to actually make some progress.
|
||||
2. Focus! Pick a task or assignment you've been putting off, and work on it for 20 minutes without looking up or stopping. Take a 5 minute break, and then do it again. This will help you form habits that will eventually allow you to be more productive, and feel like it too!
|
||||
3. Get friends! If you're tempted to procrastinate, ask a friend (or enemy, I guess…) to hold you accountable. Tell them what you want to accomplish, and your deadline. Ask them to check in with you for updates on your progress. You'll be much more motivated when you know someone's keeping tabs on your work, especially someone that you respect.
|
||||
|
||||
I bet you're gonna rock this whole "not procrastinating" thing. I believe in you.
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Crushing the Impostor Syndrome
|
||||
slug: impostor-syndrome
|
||||
description: Sometimes you don't feel like you're good enough, and that you're fooling everyone. You're not alone.
|
||||
tags:
|
||||
- advice
|
||||
- musings
|
||||
added: 2013-07-23T05:00:00.000Z
|
||||
---
|
||||
|
||||
I originally wrote this post on CycloneLife.com for Iowa State, and it went completely viral on the front page of Reddit, featured on 99u.com, and several other blogs and websites.
|
||||
|
||||
So, I hope you enjoy!
|
||||
|
||||
## Crushing the Impostor Syndrome
|
||||
|
||||
Hey friends. You look really good today. Nice shirt.
|
||||
|
||||
So, the other day, someone I work with (a genius, I might add) told me that they didn't actually know anything about their job. I laughed it off and said they knew so much more than I did, they didn't need to worry at all. Then they laughed at what I said, and said that I knew more than them!
|
||||
|
||||
What the heck.
|
||||
|
||||
They are lying.
|
||||
|
||||
Or are they?
|
||||
|
||||
This is a phenomenon called the Impostor Syndrome. You achieve things, you do assignments, and you go through school and work, hoping that nobody will realize that you have no idea what you're doing. You say, "oh, I got lucky on that one," or, "someone helped me along with that one," or, "what I did really wasn't that big of a deal."
|
||||
|
||||
Have you ever thought that?
|
||||
If not, good for you. Stop reading this and go enjoy your summer.
|
||||
If so, welcome to the rest of the world.
|
||||
|
||||
Impostor syndrome is a real thing. Search for it all over the internet and you'll find papers upon studies upon books upon articles of countless people going through the same thing.
|
||||
|
||||
> "I have written eleven books, but each time I think, ‘Uh oh, they're going to find out now. I've run a game on everybody, and they're going to find me out.'" – Maya Angelou
|
||||
|
||||
Sometimes in classes and at work, I feel like I'm the only one who's struggling. I'm the only one who's not sleeping at night and spending countless hours on a single assignment or paper or program. Everyone else seems to just get it. It's like I'm lying to everyone that I belong at that level, including myself. When I try to confide this in others, they just say, "don't be silly, you're great at this." And all I can think is, "Crap, I've fooled them too."
|
||||
|
||||
> "The beauty of the impostor syndrome is you vacillate between extreme egomania and a complete feeling of: ‘I'm a fraud! Oh God, they're on to me! I'm a fraud!' So you just try to ride the egomania when it comes and enjoy it, and then slide through the idea of fraud." – Tina Fey
|
||||
|
||||
Students don't just feel this. Everyone encounters this at some points. But why? Why do we feel like this? Dr. Valerie Young says that, "The thing about ‘impostors' is they have unsustainably high standards for everything they do. The thinking here is, If I don't know everything, then I know nothing. If it's not absolutely perfect, it's woefully deficient. If I'm not operating at the top of my game 24/7, then I'm incompetent."
|
||||
|
||||
> "You think, ‘Why would anyone want to see me again in a movie? And I don't know how to act anyway, so why am I doing this?'" – Meryl Streep
|
||||
|
||||
One day a couple of months ago at my internship, I wrote this fairly simple application for my team that would make one of their projects run more smoothly. When I showed it to them, I was terrified that they'd just be like, "that's nice, Cassidy," then go on with their work. But then a miracle happened. They were impressed. They asked how I did it. They asked if I'd talk at a lunch about the language and algorithm I used. I'm not saying this to brag. I'm saying this out of pure shock.
|
||||
|
||||
I came to a realization that can be explained by the following. I assumed that everyone around me was a super genius programmer, because they seemed like it. But in fact, everything I knew was not in their repertoire. I could teach them as they were teaching me. What?!?
|
||||
|
||||
|
||||
|
||||
So, how do you destroy the Impostor Syndrome? Here's a few tips.
|
||||
|
||||
Be confident. Don't just wait until you feel confident to act like it. Admit when you don't know something, and be authentic and accept that you don't need to know everything.
|
||||
Communicate and seek encouragement. It sounds like silly advice. But sometimes, you need a pep talk. When you're feeling down about yourself, tell a parent, a teacher, or a close friend. Be willing to accept their encouragement and don't just tell yourself that they're just being nice! If you accept and internalize what they say, you might just live by it.
|
||||
Take risks, and get out of your comfort zone. When you tell yourself that you "fooled them again" or that you "got lucky again," you're going to start avoiding taking on challenges and opportunities just in case you won't be able to pull it off like last time. Take that hard class with the difficult professor, take on the tough assignment at work, join a team that you feel is better than you are. You learn the most when you challenge yourself!
|
||||
So, with that, good luck. I know this was a lot to take in, but I want to tell you that you are great. You are smart. You're about to go to the best university in the world (in my opinion anyway, people probably have others), take on impressive courses, join clubs I never could, and be successful.
|
||||
|
||||
## You'll do great.
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Use CSS accent-color to style your inputs"
|
||||
slug: css-accent-color
|
||||
description: "If you want a quick styling win, you can set a color for your input and progress HTML tags!"
|
||||
added: "Jan 30 2024"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
If you've ever wanted to style HTML `<input>` tags in your projects, you know it's a bit tricky to deal with the labels and making everything look custom and themed.
|
||||
|
||||
This won't go wildly into all the ways you can style them, BUT, if you want a quick win to change the color of those controls, use the CSS `accent-color` property!
|
||||
|
||||
`accent-color` works on the following HTML elements:
|
||||
|
||||
- `<input type="checkbox">`
|
||||
- `<input type="radio">`
|
||||
- `<input type="range">`
|
||||
- `<progress>`
|
||||
|
||||
You can style all of these by just plopping it in your root:
|
||||
|
||||
```css
|
||||
:root {
|
||||
accent-color: #ccff00;
|
||||
}
|
||||
```
|
||||
|
||||
Or, if you want different elements to have different colors, you can style them all individually!
|
||||
|
||||
<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="css,result" data-slug-hash="OJqQQwg" data-editable="true" data-user="cassidoo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
|
||||
<span>See the Pen <a href="https://codepen.io/cassidoo/pen/OJqQQwg">
|
||||
accent-color demo</a> by Cassidy (<a href="https://codepen.io/cassidoo">@cassidoo</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.</span>
|
||||
</p>
|
||||
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
|
||||
|
||||
[Here's the documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) if you want to learn more!
|
||||
|
||||
Byyyyye <3
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: 'A use-case for CSS :has()'
|
||||
slug: css-has
|
||||
description: 'I found an unexpected use case for the newly, fully supported :has() selector!'
|
||||
tags:
|
||||
- technical
|
||||
added: 2023-11-19T07:09:43.844Z
|
||||
---
|
||||
|
||||
In case you missed it, [the CSS `:has()` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) is [now supported](https://caniuse.com/css-has) in all major browsers!
|
||||
|
||||
It's a very weird (but cool) selector that allows you to select elements that contain a specific thing, like for example `a:has(img)` selects all anchor `<a>` tags that have an `<img>` inside.
|
||||
|
||||
I've thought it was really interesting, but I've never actually had a good use-case to use it myself besides... adding captions to images or something. But, that changed today!
|
||||
|
||||
On [my personal website](https://cassidoo.co) (which I first made a solid 4 years ago with plain HTML, CSS, and JS, and I admit I haven't really updated since besides some words and links), I have a dark mode toggle. It's probably rarely if ever clicked (I should probably modernize it with some `prefers-color-scheme` stuff sometime), but when you do, it does what you expect, it turns on dark mode.
|
||||
|
||||
Under the hood, that toggle adds a `.dark-mode` class to the `<body>`, and in the CSS, we style nearly everything based on that:
|
||||
|
||||
```css
|
||||
html,
|
||||
body {
|
||||
/* ... */
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
body.dark-mode,
|
||||
body.dark-mode a {
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* ... */
|
||||
```
|
||||
|
||||
Now, here's the problem: the body doesn't always take up the entire height of the page. I was cleaning up and organizing some code, and when I put the `background` and `color` properties under `html, body`, that meant that the `html` was keeping its white background and black text color, even in dark mode.
|
||||
|
||||
|
||||
|
||||
BUT `:has()` came to my rescue! Because it kind of acts like a parent selector, I'm able to say "if the `<html>` has `.dark-mode` inside of it, that means it should have certain styles." One line change later we had this:
|
||||
|
||||
```css
|
||||
html:has(.dark-mode),
|
||||
body.dark-mode,
|
||||
body.dark-mode a {
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
}
|
||||
```
|
||||
|
||||
...and voilà, just like that, all of my problems I've ever had are solved!
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "The CSS Image Values Spec"
|
||||
slug: css-image-values
|
||||
description: "The CSS Image Values Spec allows you to cleanly blow up pixel art on the web."
|
||||
added: "Jun 07 2015"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
I started looking at the [CSS Image Values Specification](http://dev.w3.org/csswg/css-images-3/) recently and was fascinated by it, particularly the [image rendering](http://dev.w3.org/csswg/css-images-3/#the-image-rendering) section.
|
||||
|
||||
Say you take a small image sprite, like one that you would use in a video game:
|
||||
|
||||
<img src="/assets/linksprite.gif" style="width:32px;" />
|
||||
|
||||
Now, when you decide to blow this picture up, something happens that's not totally unexpected.
|
||||
|
||||
<img src="/assets/linksprite.gif" style="width:300px;" />
|
||||
|
||||
It's all blurry and gross. As we expect.
|
||||
|
||||
But, there's a better way to deal with it. Add the following into your CSS:
|
||||
|
||||
```css
|
||||
.image-class {
|
||||
/* Firefox */
|
||||
image-rendering: -moz-crisp-edges;
|
||||
|
||||
/* Safari */
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
|
||||
/* IE */
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
|
||||
/* Everything Else */
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
```
|
||||
|
||||
Yes, it's a lot for one effect, but hey. It's cross-browser.
|
||||
|
||||
Now check out your glorious image!
|
||||
|
||||
<img src="/assets/linksprite.gif" style="width:300px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neightbor; image-rendering: pixelated;" />
|
||||
|
||||
Whoa! Beautiful! So let's dig into this. Why are there SO many different values? Well, put simply, each browser just hasn't hit standard yet. But, it's coming.
|
||||
The CSS Image Values spec is still being constantly updated and reviewed. It only just recently consolidated all of these values (`crisp-edges`, `optimize-contrast`, `nearest-neighbor`, and `pixelated`) by officially standardizing `image-rendering` to have either `pixelated`, `crisp-edges`, or `auto` as its values.
|
||||
As you can see [in the example on the spec website](http://dev.w3.org/csswg/css-images-3/#the-image-rendering), `auto` and `crisp-edges` have their own uses, but `pixelated` is best for this pixel art example.
|
||||
|
||||
One thing that will be interesting to look out for moving forward is the Microsoft Edge browser. They're slowly phasing out all of the `-ms` prefixes, so I'm personally curious to see it they're going to use the standard and use `image-rendering: pixelated` or if they're going to stick to the `nearest-neighbor` idea. Only time will tell.
|
||||
|
||||
Enjoy making giant pixelated images, until next time!
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Pure CSS3 Text Carousel"
|
||||
slug: css-text-carousel
|
||||
description: "I built a pure CSS text carousel because I couldn't find one I liked. Here's how I did it, and tweaks for later."
|
||||
added: "Mar 04 2016"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
Recently while building a pretty typical static site, I found the need to have
|
||||
some quotes scrolling through a page. Classic job for a carousel. After doing
|
||||
some hunting online though, almost all carousels either used jQuery or Bootstrap
|
||||
as a dependency, and/or just had some really nasty CSS. And, also, I only found
|
||||
ONE carousel in all my hunting that was just for text, not for pictures.
|
||||
|
||||
So, it came time to act. AKA build it myself.
|
||||
|
||||
This is the result I came up with. It's a little hacky, but it's pure CSS3 and
|
||||
is perfect for quotes, if I do say so myself:
|
||||
|
||||
<p data-height="268" data-theme-id="0" data-slug-hash="MyaWzp" data-default-tab="result" data-user="cassidoo" class="codepen">See the Pen <a href="http://codepen.io/cassidoo/pen/MyaWzp/">Pure CSS3 Text Carousel</a> by Cassidy Williams (<a href="http://codepen.io/cassidoo">@cassidoo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
|
||||
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
|
||||
|
||||
The code isn't too crazy, if you read it out. The first thing I had to add in
|
||||
the HTML was the wrappers for the quotes. The `<div>` tags for
|
||||
`content-slider`, `slider`, and `mask` (let's call these the _Trio of Mystery_)
|
||||
were all purely for the actual box holding the quotes and making sure that they
|
||||
disappeared when they "faded away" (I use quotes because of how it's written,
|
||||
you'll see).
|
||||
|
||||
Then you see that there's an unordered list, where each `<li>` has an animation
|
||||
class and contains a quote and its source. This is probably the most
|
||||
straightforward part of the code.
|
||||
|
||||
Now let's get crazy.
|
||||
|
||||
So in the CSS you'll see basic body stuff, and then the _Trio of Mystery_. Like
|
||||
I said before, pretty straightforward, just creates a container and a mask that
|
||||
makes innocent `<div>`s like you disappear. Now, you'll notice a little further
|
||||
down that the `.slider li` section has something a little gross in there. This
|
||||
is where things get hard-coded.
|
||||
|
||||
```css
|
||||
height: 320px;
|
||||
position: absolute;
|
||||
top: -325px;
|
||||
```
|
||||
|
||||
Here, you'll notice that the `<li>` are being set at a height and positioned
|
||||
325px above their normal position. That's because the container is set at 320px
|
||||
high. The `top` part could have had `-321px` and it would have been fine. This
|
||||
is how the _Trio of Mystery_ gets away with hiding its stowaways.
|
||||
|
||||
If you look after this section, you'll get to the animations. Now, this is the
|
||||
part that would have been very, very significantly improved had I used a CSS
|
||||
preprocessor. There's a LOT of repetition here, and a lot of things hard-coded
|
||||
for 5 quotes (no more, no less). The way each animation works is that each
|
||||
quote is hidden at `-325px` (just out of sight, again, thanks to the _Trio of
|
||||
Mystery_), and then when it's that quote's turn, it scrolls into view at 100%
|
||||
opacity, and after 3 seconds, it fades (when really, its position is just moving
|
||||
at the same time as the opacity is lowered to zero). Because each of the
|
||||
animations last the same amount of time and goes in one direction
|
||||
(`15s linear infinite`), we just break up the 100% into approximately fifths so
|
||||
that the quotes can be spread out (the first one "exiting" at 20%, the next at
|
||||
around 40%, etc).
|
||||
|
||||
## But alas, what now?
|
||||
|
||||
Honestly, this works for what my original needs were. But, this mini-project
|
||||
could DEFINITELY be improved. Some of my ideas for a next time:
|
||||
|
||||
- Use a pre-processor
|
||||
- Save CSS variables for the number of quotes that exist
|
||||
- Generate HTML code based on the number of quotes
|
||||
- Divide the percentages for the animations based on the number of quotes
|
||||
|
||||
Until next time!
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Dear Cassidy of 2 months ago"
|
||||
slug: dear-early-may-cassidy
|
||||
description: "A letter to my past self about the roller coaster of emotions I've been through."
|
||||
added: "Jul 12 2023"
|
||||
tags: [learning, personal]
|
||||
---
|
||||
|
||||
Hey Cassidy of 2 months ago,
|
||||
|
||||
Baby Nadia is 2.5 months old now and is the best. Truly. The hormonal mood swings are lying to you.
|
||||
|
||||
You're going to cry a whole lot over the next few weeks. You'll feel anxious, and angry, and sad, and feel like this was a mistake. You'll look at your baby and wonder what you've done. You'll go on walks to try and clear the clouds in your head (and also to try and physically heal), and they'll sometimes work (temporarily). You'll have wonderful people around you to help you out, and as grateful as you are, you'll still feel sad.
|
||||
|
||||
That sadness **sucks**. It's irrational. You've got such a good baby who eats well, and sleeps (relatively) well, and loves to kick literally all day long like a little baby Mia Hamm. Even when she cries, she's cute. But the hormones are lying to you and telling you to be sad anyway.
|
||||
|
||||
Finally, after a few weeks of trying therapy and a support group, your doctor is going to tell you "enough is enough" and prescribe you some antidepressants to try and get you out of the funk. You're going to be nervous about it, but several of your friends give you stories of their experiences about how helpful they are at regulating your feelings. And then, coincidentally, the day you pick them up from the pharmacy... the clouds will clear. You'll never actually need to take the pills (at least we haven't so far, heh). The sadness just... stops, and you'll suddenly enjoy hanging out with the baby.
|
||||
|
||||
It's super weird how it happens. Truly you just suddenly feel like yourself again, 2 days after crying to the doctor at the 6-week checkup. Your shows will be funny again, and you like playing Zelda again, and your appetite comes back, and you actually clean your house (at least a little, you have a baby to take care of). Holding the baby is suddenly a joy, rather than a burden. Instead of thinking about how daunting it is to have this human around forever, now you'll think, "we'll cross tough bridges when we get there," and just enjoy the time now.
|
||||
|
||||
Annnnnd then your breastmilk dries up, and you get your first period since the baby, and you'll be sad all over again. You'll go back on your walks, you'll cry the whole time, and you'll wake up each day almost angry that you can't kick these feelings out of your system. But just make it through that for a couple weeks, and you'll be okay again.
|
||||
|
||||
We're at the 2.5 month mark now. Nadia slept 10 WHOLE HOURS last night. She's started to laugh when you make silly faces at her, and she's guzzling formula like a tank. She is so cuddly and loves it when you read books to her. She coos a ton and it **almost** sounds like she's saying "I love you" back, and we're just going to pretend that's on purpose.
|
||||
|
||||
You can make it through, Cassidy of 2 months ago. A lot of people tell you that parenthood is hard forever, and it is. It's unreal how hard it is. But those hormone swings (and impossible sleep patterns) make it harder than ever. It gets easier, and you get braver. You can do it. You can do it. You can do it.
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Design Your First iPhone App
|
||||
slug: design-iphone-app
|
||||
description: It's not too bad to start building the phone app of your dreams!
|
||||
tags:
|
||||
- advice
|
||||
- technical
|
||||
added: 2013-10-21T05:00:00.000Z
|
||||
---
|
||||
|
||||
Hey good lookin.
|
||||
|
||||
So, I'm a computer science major. Introducing myself that way usually sends people running for the hills. "I'm not tech savvy," they say. "I could never do that," they say.
|
||||
|
||||
They are wrong.
|
||||
|
||||
Anyone can code, if you put your mind to it. So, I'm going to show you the first steps you need to make an iPhone app of your very own. I'll keep it general and let you follow more specific tutorials and such, but if you follow these steps, you're on your way to building your own app. If you've got a great idea, and you're good at the business side of things, there are plenty of learning resources and opportunities to help you with actually creating the next big app!
|
||||
|
||||
First of all, be sure you own a Mac. If you own a PC, you're kind of out of luck. Don't worry, I didn't have a Mac for a while, so I just learned on lab computers and borrowed them!
|
||||
|
||||
If this is covered, it's just a few easy steps:
|
||||
|
||||
1. **Get an App Store Developer account.**
|
||||
You can't sell an app that you can't list on the store. You have to set up an account that costs about $100 a year. Even if you don't launch your app for a little while, it's good to do. An App Store account provides access to helpful tools and resources for development.
|
||||
|
||||
2. **Map out your app.**
|
||||
What's the look and feel of your app? What will the home screen look like? What pages do you need? What do you expect out of your users? How will it flow from screen to screen?
|
||||
There's a great app called [POP](https://marvelapp.com/pop) that helps you figure this out. You just draw out what each screen will look like on paper and take pictures of your drawings, and then it treats your sketches as a real app! It really helps you figure out the flow and design of things.
|
||||
3. **Put it together!**
|
||||
The next, fairly intimidating, step is actually coding the app! But don't let that scare you. If you're willing to learn, you can totally learn to code with one of the following resources:
|
||||
|
||||
- [Treehouse](https://teamtreehouse.com/)
|
||||
- [Skillshare](https://www.skillshare.com/)
|
||||
- [Codecademy](https://www.codecademy.com/)
|
||||
- [Stack Overflow](https://stackoverflow.com/)
|
||||
|
||||
If you put your mind to it, you can learn it!
|
||||
|
||||
If you aren't up for coding but you still want your idea to exist, you can hire a team. Yes, that sounds expensive, but even in just talking to friends and classmates, you might find someone!
|
||||
|
||||
There's plenty of options for you to make your great ideas a reality. Good luck!
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Finding your dream major in college
|
||||
slug: dream-major
|
||||
description: What if you could study exactly what you wanted to?
|
||||
tags:
|
||||
- advice
|
||||
added: 2013-11-14T06:00:00.000Z
|
||||
---
|
||||
|
||||
It's hard to pick a major sometimes. It's scary too. I mean, you're not DEFINITELY stuck with your choice for the rest of your life, if you don't like it. But imagine if you loved your choice from the start, and that you can get your dream job right out of college??
|
||||
|
||||
I feel like that kind of happened to me. I asked myself several questions, and the job I got for after graduation is exactly what I want to do with my life!
|
||||
|
||||
So, I thought I'd pass along those questions. Who knows, maybe you'll find something new about yourself.
|
||||
|
||||
1. I've always wondered what it would be like to do \_\_\_\_\_\_\_\_\_\_\_\_, and I think it's interesting to me because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
2. If I had to go back to school tomorrow, I'd major in \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
3. My co-workers and friends always say I'm great at \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
4. The thing I love most about my current schoolwork/job/major is \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
5. If I had the right skill set, I'd definitely try \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
6. If my parents/boss/roommate/manager/professor would let me, I'd do more of \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
7. If I had a free Saturday that had to be spent just "working" on something, I'd choose \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
8. When I retire, I want to be known for \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
9. If I could choose one friend to trade jobs/majors with, I'd choose \_\_\_\_\_\_\_\_\_\_\_\_, because \_\_\_\_\_\_\_\_\_\_\_\_.
|
||||
|
||||
What'd you come up with?
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Facebook's 2012 Summer of Hack
|
||||
slug: fb-hackathon
|
||||
description: I got to check out the Seattle Facebook offices for their summer hackathon!
|
||||
tags:
|
||||
- events
|
||||
added: 2012-08-10T05:00:00.000Z
|
||||
---
|
||||
|
||||
Hey everyone!
|
||||
|
||||
So my friends and I were invited to the Facebook offices in Seattle for their Summer of Hack 24 hour Hackathon the other day. From Saturday 1PM to Sunday 1PM we had out our computers and just coded. It was SO fun! My friend Luis and I made a browser game where stars fall from the sky and you have to catch them, and you can tweet your score. Other people made things like Mac applications and collage designers! It was so fun! It took me FOREVER to recover from the lack of sleep though.
|
||||
|
||||
[Here's the code for our game!](https://github.com/cassidoo/Star-Catcher)
|
||||
|
||||
But, to make it all even more worth it, I got to walk away with a nice bundle of swag.
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Feedback is awesome"
|
||||
slug: feedback-is-awesome
|
||||
description: "I love getting feedback from people. You learn most from it."
|
||||
added: "Feb 22 2014"
|
||||
tags: [advice, musings]
|
||||
---
|
||||
|
||||
Today was a great day full of feedback from people.
|
||||
|
||||
First of all, my tutorial I wrote ([which is here if you didn't see it](http://cassidoo.github.io/html/css/tutorial/2014/02/10/html-css-tutorial.html)) has been getting some great results!
|
||||
A few people I know have been checking it out, and I presented it to Twilio yesterday, and so far I've heard a lot of positive things!
|
||||
|
||||
Today I got a message from a girl in NCWIT:
|
||||
|
||||
> This girl across from us wanted to learn HTML today at a hackathon and she was trying to watch some videos and I literally jumped out of my chair and was like "omggg i know the best guide ever!" and showed her your tutorial, and she loved it. I think she finally got some neat stuff together at the end.
|
||||
> I've seen a lot of tutorials and guides and stuff, yours is hands down one of the best ones I've seen.
|
||||
|
||||
This made my day! I love getting positive feedback like this, it only makes me want to write more.
|
||||
|
||||
And then, I also got an email from one of the higher ups at Intuit today:
|
||||
|
||||
> We were just talking about you the other day, in relation to the Women in Technology initiative in QuickBooks Product Dev. We rolled out a formal goal of mentorship and sponsorship to develop a pipeline of women ready for director, group manager, principal engineer, and architect roles. Since we started... we have two new women group managers, a new woman principal engineer, and several new first-time managers. We have a monthly lunch with the women PD leaders, and we feature various guest speakers— mostly women execs at Intuit. Intuit also hosted a Girl Geek Dinner...
|
||||
> Btw, your work on ...[things I worked on at Intuit]... default template is now live in QBO. So you've got a legacy at Intuit from your internship.
|
||||
|
||||
Between the two messages, I don't know which one made me more happy. I love hearing that my views on mentorship are being spread, and that my work I'm doing is making a real impact.
|
||||
|
||||
So anyway, to the point.
|
||||
|
||||
Feedback should be given more often. Good and bad, even a pat on the back, is more motivating than almost anything else! At a majority of my internships, I'd work on something and if I finished, I'd get another assignment, and that'd be that.
|
||||
I wouldn't find out feedback from my coworkers and managers until my midpoint reviews, most of the time.
|
||||
In fact (probably as a result of the impostor syndrome), I often thought I was doing terribly until I got such midpoint reviews, because I didn't hear any feedback until then.
|
||||
|
||||
Was it my fault for not asking for it? Probably. I ask for it more often now. But it makes me wonder about everyone out there who doesn't ask for feedback once in a while.
|
||||
Some people might be stopping projects, giving up on problems, or even quitting jobs, just because they don't know they're doing well. There's plenty of articles out there about the importance of encouragement in the workplace.
|
||||
|
||||
But, there might not be as many articles about asking for feedback. I don't want to bore you with statistics and psychology. So, I'll leave it at this: Ask for feedback from someone this week.
|
||||
Ask them about a project of yours, an assignment you've done, even about your attitude about work or school. It could be the extra kick in the pants you need to do more of what you're doing, or to work harder.
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Finding a Mentor"
|
||||
slug: finding-a-mentor
|
||||
description: "Finding a mentor isn't always as explicit as it seems."
|
||||
added: "Jun 06 2015"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
I feel like I see a, "how do I find a mentor?" post or an email asking about mentorship twice a week at the very least.
|
||||
|
||||
I wrote this to answer those questions.
|
||||
|
||||
Finding a mentor isn't some magical moment where you meet and someone puts their hand on your head saying, "I will mentor you, my child."
|
||||
|
||||
|
||||
|
||||
Finding a mentor is really just a matter of keeping communication lines open. Once you meet someone, continue talking and building a relationship with them. There's so many ways to do this. Go to a meetup, chat with people in forums or Facebook groups, have a coffee chat, video chat someone, email someone (as if they're your pen pal, not like a cover letter).
|
||||
|
||||
## What you should look for in a mentor
|
||||
|
||||
- _Someone who wants a mentee_. Sometimes, you won't get a reply to that email asking for coffee. Sometimes, people won't chat with you. That's okay. You want someone who wants the relationship.
|
||||
- _Someone you can be friends with_. Your mentor isn't just someone you suck advice from. You should enjoy your relationship with them, they should be someone around whom you can be yourself. If you have a very formal, not really comfortable relationship, you won't be able to easily converse with each other to get the guidance for which you're seeking.
|
||||
- _Someone who doesn't compete with you_. You want someone that can help celebrate your accomplishments, not feel threatened by them.
|
||||
- _Someone who drives you to succeed_. A good mentor will be someone who can push you to be the best that you can be, even if it's just by finding someone else that can answer your questions, or by just being a good role model.
|
||||
|
||||
## How to be a good mentee
|
||||
|
||||
- _Don't just suck information out of your mentor_. Nobody likes someone who is just in it for themselves, who is selfish with their information. Build a relationship that's give and take with your mentor, don't just email them once a month with your latest problem.
|
||||
- _Lift as you climb_. As you move up with your career, help people who are like you who could use your own advice. A great mentee gives back.
|
||||
- _Accept things your mentor tells you, even if it's not what you want to hear_. Sometimes it's hard to absorb frank feedback. But, it's necessary to do so if you really want to internalize the information you're getting. Sometimes things don't go the way you want, and sometimes you just want to be further along, like your mentor. It can be frustrating sometimes when things don't go your way, but trust the advice you get. Sure, that doesn't mean you have to follow _all_ of it, but trust that it's coming from someone who cares.
|
||||
|
||||
## Thank you to my mentors
|
||||
|
||||
My mentors are amazing women who I look up to every single day as they're making the world a better place. I'm going to link to their Twitter handles here, and tell you how I met each of them.
|
||||
|
||||
- [Jennifer Arguello](https://twitter.com/engijen) - I met Jennifer at the White House Tech Inclusion Summit, where we hit it off talking about diversity in tech and her time with the Latino Startup Alliance. I made sure to keep in touch since I would be interning in the Bay Area, where she's located, and we've been chatting ever since.
|
||||
- [Kelly Hoey](https://twitter.com/jkhoey) - I met Kelly at a women in tech hackathon, and then she ended up being on my team on the [British Airways UnGrounded Thinking hackathon](http://ungroundedthinking.com/). She and I both live in NYC, now, and we see each other regularly at speaking engagements and chat over email about networking and inclusion.
|
||||
- [Rane Johnson](https://twitter.com/sfbayrane) - I met Rane at the [Grace Hopper Celebration for Women in Computing](http://gracehopper.org) in 2011, and then again when I interned at Microsoft in 2012. She and I started emailing and video chatting each other during my senior year of college, when I started working with her on the [Big Dream Documentary](http://bigdreammovement.com) and the International Women's Hackathon at the USA Science and Engineering Festival.
|
||||
- [Ruthe Farmer](https://twitter.com/ruthef) - I first met Ruthe back in 2010 during my senior year of high school when I won the [Illinois NCWIT Aspirations Award](https://www.aspirations.org/). She and I have been talking with each other at events and conferences and meetups (and even just online) almost weekly since then about getting more girls into tech, working, and everything in between.
|
||||
|
||||
These women have helped me probably more than they can imagine, even when they're just a listening ear when I'm asking endless questions about what I should do next with my career or how I should approach certain situations. They're amazing, influential, and make a _real_ difference in hundreds (even thousands) of lives with their work, and I strive to be like them someday.
|
||||
|
||||
I hope that you find someone like them to work with. It's, in the realest sense of the phrase, life-changing.
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: My first go tournament
|
||||
slug: first-go-tourney
|
||||
description: I participated in the 2023 Chicago Rapid Open!
|
||||
tags:
|
||||
- events
|
||||
added: 2023-11-05T00:07:19.741Z
|
||||
---
|
||||
|
||||
I just finished [my first in-person go tournament](https://baduk.news/s/calling-all-2023-chicago-rapid-championship-early-birds)! The 2023 Chicago Rapid Championship broke records this time for the largest tournament in the country outside of the [Go Congress](https://usgo.org/content.aspx?page_id=22\&club_id=454497\&module_id=561849) event, which is really cool.
|
||||
|
||||
If you've been around whenever I talk about it, you know that I really love [playing go online](https://online-go.com/), but I rarely get the opportunity to play in person. This was... a humbling experience, to say the least! Of the 5 rounds, I lost 3 games by the *thinnest* margin (literally the smallest margins you *can* lose by), and it was *so* painful. I did win one, though, and I'm really glad I did it! I learned a lot and I can't wait to try out another tournament in the future.
|
||||
|
||||
Playing online and in-person is very different. There's stress wondering what the other person is thinking, you have to watch out for your own "tells" and where you're looking on the board, and also the scoring varies depending on the event. I definitely could tell that a couple of my movements made my opponents play a certain way, and I also took advantage of what I could, too.
|
||||
|
||||
It was really cool seeing people of all ages playing respectfully. Kids as young as 8 or 9 were playing, you saw groups of older adults who have been playing for decades, and tons of people in between. I appreciated how there was an etiquette about everything, and nobody seemed to be sore losers or winners.
|
||||
|
||||
I admit I didn't stay for the closing ceremonies because I needed to head home, but overall it was a really well-organized event and I'm happy for all of the players who enjoyed themselves. It was a really unique experience and I hope to play like this again, someday!
|
||||
|
||||
Until then, if you ever want to play with me online, please [add me on OGS](https://online-go.com/user/view/340298), I'd love it!
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Amazing and Free Software
|
||||
slug: free-software
|
||||
description: Here's some great free software!
|
||||
tags: []
|
||||
added: 2010-03-22T05:00:00.000Z
|
||||
---
|
||||
|
||||
I've been "collecting" free software for ages, and now I think it's time to start sharing the fun. Here's a list of come of my favorite software that you can have for FREE!
|
||||
|
||||
## Graphics
|
||||
[GIMP](http://gimp.org/) - Adobe Photoshop-like image editor
|
||||
[Sumo Paint](http://www.sumopaint.com/home/) - Online Photoshop-like image editor
|
||||
[Inkscape](http://www.inkscape.org/) - Adobe Illustrator-like vector editor
|
||||
[ColorPic](http://www.iconico.com/colorpic/) - Color picker (i.e. "Gee, I want to use the color of her shirt" \*uses ColorPic\*)
|
||||
[Blender](http://www.blender.org/) - 3D content creation
|
||||
|
||||
## Desktop Apps
|
||||
[Handbrake](http://handbrake.fr/) - Converts DVD videos to computer formats
|
||||
[DVDVideoSoft](http://www.dvdvideosoft.com/) - Converts pretty much anything, anywhere from YouTube to PSP to MP3.
|
||||
[Skype](http://www.skype.com/) - Online phone and video calls
|
||||
|
||||
## Audio
|
||||
[Audacity](http://audacity.sourceforge.net/) - Incredible audio editor, plug-ins available
|
||||
[Juice](http://juicereceiver.sourceforge.net/) - Organizes and captures your podcasts
|
||||
[EphPod](http://www.ephpod.com/) - Similar to iTunes, but does more, including moving music from your iPod to a new computer!
|
||||
[WavePad](http://www.nch.com.au/wavepad/) - Audio editor (make sure you get the free version!)
|
||||
[Screamer Radio](http://www.screamer-radio.com/) - Record internet radio in many different formats
|
||||
|
||||
## Others
|
||||
[ADRIFT](https://www.adrift.co/) - Text/Interactive Fiction/Game generator
|
||||
|
||||
That's all for now. Have fun!
|
||||
@@ -1,119 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Cassidy's Gift Guide 2023
|
||||
slug: gift-guide-2023
|
||||
description: I've got some gift suggestions for the nerds in your life!
|
||||
tags:
|
||||
- personal
|
||||
- advice
|
||||
added: 2023-12-09T06:00:00.000Z
|
||||
---
|
||||
|
||||
I've bookmarked various things over the past year or so of things I would get for friends, family, and myself, and I thought I'd share 'em with ya after seeing [Chris Coyier's very cool guide](https://chriscoyier.net/2023/12/06/gift-guide-2023/)! Nobody's paying me to share these, I just think these are fun.
|
||||
|
||||
## Digital Things
|
||||
|
||||
I'm not talking about NFTs, just talking about things that are actually useful digital things! Mostly for nerds.
|
||||
|
||||
[Frontend Masters subscription](https://frontendmasters.com/)\
|
||||
If you have friends learning to code or wanting to get better at it, I thought the FM courses were awesome.
|
||||
|
||||
[omg.lol subscription](https://omg.lol/)\
|
||||
I got one of these recently ([check it out](https://cassidoo.omg.lol/)) and it's a really delightful service to make a little homepage, have email forwarding, and a bunch of other nice goodies.
|
||||
|
||||
[The Sukha Company pro subscription](https://www.thesukha.co/)\
|
||||
I've mentioned this app before, it's a pomodoro timer + task list + focus music + digital coach app that has really helped my focus a lot (plus if you use code `CASSIDY` you get 20% off).
|
||||
|
||||
[CodePen Pro](https://codepen.io/features/pro)\
|
||||
I really love CodePen in general, and this would be a great little gift for anyone who uses it.
|
||||
|
||||
[Brainstory subscription](https://www.brainstory.ai/)\
|
||||
Okay I work on Brainstory so my credibility here is waning BUT it's a really great brainstorming app and I personally use it a ton (use code `ADVENT` for 20% off).
|
||||
|
||||
## Bags and wallets
|
||||
|
||||
I love things that contain things. If you ever aren't sure what to get me, just get me a cool bag or pouch or something.
|
||||
|
||||
[Secrid wallet](https://secrid.com/)\
|
||||
I got my husband one of these a few years ago and it's so durable and useful, he gets compliments on it regularly!
|
||||
|
||||
[Analog Laptop Totes](https://analogcompany.co/en-us/collections/analog-laptop-tote)\
|
||||
I really like how practical and well-made these are.
|
||||
|
||||
[Baboon to the Moon canvas tote](https://baboontothemoon.com/products/mega-canvas-tote?variant=39698386485319&sale=true)\
|
||||
This brand is fairly pricey so I only really get things from them when they're on sale, but this canvas tote is **solid**. I have two and we use them both very often.
|
||||
|
||||
[Oceanbags: The Sunderbans](https://oceanbags.com/collections/all/products/the-sunderbans?variant=45432422072622)\
|
||||
Anything that stops more plastic from getting into the ocean, I'm on board.
|
||||
|
||||
## Stuff for your desk
|
||||
|
||||
_Resisting making this entire section just all mechanical keyboards..._
|
||||
|
||||
[Carpio 2.0 ergonomic wrist rest](https://deltahub.io/products/carpio-ergonomic-wrist-rest)\
|
||||
I like how subtle this one looks compared to other wrist rests I've seen before.
|
||||
|
||||
[Paper Republic Notebooks](https://www.paper-republic.com/en-us/collections/paper)\
|
||||
I got one of these as a gift a while back and the paper is really delightful to write on!
|
||||
|
||||
[Scrabble keycaps](https://www.clackeys.com/scrabble)\
|
||||
Okay, **yes** I designed these, but I also just love the look in general.
|
||||
|
||||
[Lord of the Rings Elvish keyboard](https://drop.com/buy/drop-the-lord-of-the-rings-elvish-keyboard?utm_source=linkshare&referer=EEA27B)\
|
||||
This is a really unique board for your nerd friends.
|
||||
|
||||
[Muji pen set](https://www.muji.us/collections/pens/products/smooth-gel-ink-knock-type-ballpoint-pen-0-5mm-10-pieces-set-9a63)\
|
||||
These pens are just so good. They're simple and look clean, and they write super well.
|
||||
|
||||
## Books
|
||||
|
||||
Support your local bookstores, but if you aren't able to, I tried to link to some shops that are good here!
|
||||
|
||||
[How to sew clothes](https://allwellworkshop.com/how-to-sew-clothes)\
|
||||
I love that this one comes with patterns, too!
|
||||
|
||||
[The Mistborn Trilogy](https://www.abebooks.com/9781473213692/Mistborn-Trilogy-Final-Empire-Ascension-147321369X/plp)\
|
||||
This series was **so** fun to read. The way I describe it quickly to folks is, "imagine Ocean's 11, but a fantasy adventure story." It starts as a heist and spirals from there!
|
||||
|
||||
[Think Again](https://adamgrant.net/book/think-again/)\
|
||||
I read this book a couple years ago and I reference it to this day. I genuinely think most people should read it.
|
||||
|
||||
## Beverage things
|
||||
|
||||
I've become kind of a tea snob lately (especially after learning about microplastics in tea bags, ugh) so... join me in being a tea snob.
|
||||
|
||||
[Purple clay teapots](https://zishacraftsman.com/collections/all)\
|
||||
I don't have one of these but whew, they're fancy lookin. Someday!
|
||||
|
||||
[Jumbo glass tea cup and infuser](https://www.adagio.com/teaware/jumbo_cup_and_infuser.html)\
|
||||
My friend Ann got me one of these and I've used it... every single day since. It's a really great cup (made from borosilicate glass so it can handle high temps), and the infuser is perfect for any loose leaf teas you might like.
|
||||
|
||||
[Sardine cup](https://shop.visitlisboa.com/products/cup-2)\
|
||||
I really like this green color and the little sardine art on it is just so cute.
|
||||
|
||||
[Once Upon a Time "fairy tale" tea](https://gildedcoach.com/products/once-upon-a-time)\
|
||||
I haven't tried this but a friend of mine swears by it. This brand has edible glitter in it (did not know that was a thing) so your tea is shiny and fun.
|
||||
|
||||
[Hot chocolate velvetizer](https://us.hotelchocolat.com/collections/velvetiser-hot-chocolate-maker)\
|
||||
Probably the most extra appliance I own (my friend Jason got it for me) and yet... it's spectacular and I am now a hot chocolate snob as well.
|
||||
|
||||
## Other stuff
|
||||
|
||||
[Mr. Jones watches](https://us.mrjoneswatches.com/)\
|
||||
These are so artsy and fun for the analog lover in your life.
|
||||
|
||||
[Pocket Tripod](https://pocket-tripod.com/)\
|
||||
My friend Tom recommended this one to me and it's great if you wanna take a non-selfie and adjust where your phone is sitting!
|
||||
|
||||
[Frank Lloyd Wright: Timeless art](https://spoke-art.com/collections/frank-lloyd-wright-timeless)\
|
||||
I love Frank Lloyd Wright architecture in general, and the art prints here are a really cool homage to his work.
|
||||
|
||||
[Rosanna Tasker art](https://www.rosannatasker.com/shop/giclee-prints)\
|
||||
I love this artist's style in how she draws plants!
|
||||
|
||||
[Canvas board game](https://boardgamegeek.com/boardgame/290236/canvas)\
|
||||
A friend of mine introduced me to this game a couple months ago and I bought it instantly. If you like board games, imagine a combo of [7 Wonders](https://boardgamegeek.com/boardgame/68448/7-wonders) and [Century: Spice Road](https://boardgamegeek.com/boardgame/209685/century-spice-road), but in this one, you make pretty art!
|
||||
|
||||
## Goodbye
|
||||
|
||||
I don't know how people usually end gift guides so... _aggressively points finger guns while backing away_
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Non-traditional push presents"
|
||||
slug: gifts-for-new-parents
|
||||
description: "New parents often are given very baby-oriented gifts, and here's some that are more about them."
|
||||
added: "Apr 06 2024"
|
||||
tags: [advice, personal]
|
||||
---
|
||||
|
||||
Now that I'm a bit more out of the "brand new parent" phase, I've been thinking about gifts people got me after giving birth (AKA "push presents"), and things I give new parents now. Nearly all of these things are not ones you'd normally see on a baby registry, but they're really, really nice/useful.
|
||||
|
||||
- A microwavable heat pad
|
||||
- A water bottle with a straw (specifically a straw, so it can be hands-free)
|
||||
- Getting their house deep cleaned
|
||||
- A bidet
|
||||
- A really nice soap/lotion set from Lush or something
|
||||
- A postpartum massage
|
||||
- A hands-free book/e-reader holder
|
||||
- A Theragun
|
||||
|
||||
All of these were so dang helpful to me, and it's nice to give/receive something that sees a new parent as "an adult that happens to have a baby now," and offers convenience and comfort, rather than, "your entire life is baby now, baby baby baby." We love baby, of course. But we gotta love the parent, too.
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Grace Hopper in Baltimore!
|
||||
slug: grace-hopper-baltimore
|
||||
description: I'm at a huge women in tech conference!
|
||||
tags:
|
||||
- events
|
||||
added: 2012-10-03T05:00:00.000Z
|
||||
---
|
||||
|
||||
Hey everyone!!
|
||||
|
||||
Right now I'm at the [Grace Hopper Celebration for Women in Computing Conference](https://ghc.anitab.org/) in Baltimore, Maryland!! I got sponsorship from Microsoft to go and so far I'm having SO MUCH FUN. I have some friends here who came with me last year and also my sister! They got sponsorship through the Iowa State Computer Science department.
|
||||
|
||||
This morning we had our welcome in the Baltimore Convention Center, it was super glamorous.
|
||||
|
||||
Throughout the day we have seminars and sessions and later a career fair full of tech companies. It's an awesome way to network with people and really celebrate women in computing!
|
||||
|
||||
So while you may be enjoying the lovely Midwest, I'll be here in the humid East for the next week!!
|
||||
|
||||
SEE YA!
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: HackISU Hackathon!!
|
||||
slug: hackisu
|
||||
description: We had the first ever Iowa State hackathon!
|
||||
tags:
|
||||
- events
|
||||
added: 2014-04-08T05:00:00.000Z
|
||||
---
|
||||
|
||||
Hello my darling kumquats!
|
||||
|
||||
I hope you're enjoying the spectacular weather outside.
|
||||
|
||||
This past weekend, Iowa State held its first HackISU hackathon, the largest the campus has seen yet! We had around 150 student hackers come in for the weekend and make some incredible things.
|
||||
|
||||
For those of you who are like, "WAIT. You make people hack into computers?" No. We don't. A hackathon is a span of time in which you simply make something (or "hack" it together). Hackers were given 24 hours to come up with the coolest hacks they could, and they certainly didn't disappoint!
|
||||
|
||||
Throughout the event we had a bunch of food and swag to give out, sponsored by some awesome companies from all over the country.
|
||||
|
||||
The event was organized by some groups on campus, the Computer Science/Software Engineering Club (I'm the president of that group, hollerrrr) and CyHack. It was such a successful event, and I was super proud of our team who put it all together.
|
||||
|
||||
What kind of cool hacks did we see?? Well, there were some incredible ones!
|
||||
|
||||
The winning team made what they called a "Hackulus Leap," which was a hacked-together Oculus Rift-esque virtual reality device controlled by your head, a tablet, a headpiece, and a Leap Motion device! We had everything from games to skydiving apps to lights that changed with music to productivity apps like Tweet shorteners.
|
||||
|
||||
Isn't that awesome?? It's amazing what you can do in 24 hours. We had all kinds of majors too, not just programmers and hardware hackers! We had some economics majors, some mechanical engineers, designers, advertisers… everyone was welcome.
|
||||
|
||||
HackISU will only get bigger every year, and I hope you join us next year!
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Hello.
|
||||
slug: hello-blog
|
||||
description: Wee a blog!
|
||||
tags: []
|
||||
added: 2009-01-11T06:00:00.000Z
|
||||
---
|
||||
|
||||
I will post pretty much nothing that really matters here.
|
||||
@@ -1,14 +1,12 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Hello, world"
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Hello, world!
|
||||
slug: hello-world
|
||||
description: "Lorem ipsum dolor sit amet (but for real)"
|
||||
added: "Aug 08 2022"
|
||||
tags: [meta, technical]
|
||||
description: >-
|
||||
This is an example blog!
|
||||
tags:
|
||||
- personal
|
||||
added: "May 01 2024"
|
||||
---
|
||||
|
||||
I decided to (re)make my own little blog, but... more like the concept of a [digital garden](https://maggieappleton.com/garden-history). Sometimes I might update this a lot, sometimes I might not.
|
||||
|
||||
I want to have a space where I can write anything, not have it be confined to tech things, and not worry about it being particularly polished. That's what this is!
|
||||
|
||||
I built this in Astro, I pulled in some posts from blogs past, and... here we gooo!
|
||||
This is an example blog post!
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Here come the 2013 Mashups!
|
||||
slug: here-come-the-2013-mashups
|
||||
description: Here's some of my favorite mashup music of the year!
|
||||
tags:
|
||||
- personal
|
||||
added: 2013-12-30T06:00:00.000Z
|
||||
---
|
||||
|
||||
Hey friends!
|
||||
|
||||
So, I think you're really good looking.
|
||||
|
||||
You deserve the best.
|
||||
|
||||
So, I wanted to share with you my three favorite 2013 Mashups so far! I love mashup songs, the combination and layering of different music is my favorite to listen and study to!
|
||||
|
||||
[Pop Danthology 2013](https://www.youtube.com/watch?v=HJMapA8WgYw): The artist here, Daniel Kim, makes my favorite yearly mashups by far. In this one, he combined 68+ songs from this year to bring you this!
|
||||
|
||||
[DJ Earworm's United State of Pop 2013 (Living the Fantasy)](https://soundcloud.com/dj_earworm/united-state-of-pop-2013-living-the-fantasy): I don't usually listen to DJ Earworm, but this is probably my favorite of his yearly mashups yet! It's really epic sounding group of 25 songs from this year.
|
||||
|
||||
[#AnDyWuMUSICLAND Mashup 2013](https://www.youtube.com/watch?v=q2jWmB5Uy0g): This one is SUPER fun. It might be because I like that he included a Les Miserables song in there… along with 64 others!! Something also cool about this one is that he lined up not only the songs, but the lyrics too [(here's a link to them)](https://andywumusicland.tumblr.com/post/69081318879/andywumusicland-mashup-2013-best-60-pop-songs).
|
||||
|
||||
So, I hope you enjoy the end of your 2013 school year, and I can't wait to see you all again in 2014!
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "How to Ace an Interview"
|
||||
slug: ace-interview
|
||||
description: "Interviews are scary, but they don't have to be. When you're on the spot, it's best to be prepared. Let's prepare you."
|
||||
added: "Mar 04 2014"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
Hey cutie. Let's talk interviews. I've had what's felt like a billion interviews over the past several years, for everything from leadership positions to internships to jobs to scholarships.
|
||||
So, I thought I'd give you some advice based on what I've learned.
|
||||
|
||||
Right now.
|
||||
|
||||
## Study the usual interview questions, and fit in your own experiences.
|
||||
|
||||
All you have to do here is go on the internet and search, "common interview questions."
|
||||
Everything from "describe a time when you worked on a team" to "what was the most fun presentation you've ever had to plan?" is asked to everyone, engineers and business majors alike.
|
||||
Make sure you follow STAR: _Situation_ (what was the situation you were in), _Task_ (what was your job, or task, to tackle the situation), _Action_ (what were the actions to ultimately took), and _Results_ (what were the responses you received and the results you achieved)!
|
||||
Now, if you're thinking about technical questions (which I'm a computer science chick too, I get it), my only advice here is to talk a LOT.
|
||||
Too many engineers just go up to the white board and start coding then and there without explaining what they're doing.
|
||||
Whenever I've interviewed with someone, I stay sitting and talk about the problem with the interviewer.
|
||||
When you do it that way, they can see where you're going with your thought process when you start writing on the board.
|
||||
And if you change what you're thinking, turn around, away from the board, and tell the interviewer your thought process again.
|
||||
The _thought process_ is what these companies are looking for, not just correct code.
|
||||
It's better to have a good thought process and bad code than good code and a bad thought process.
|
||||
|
||||
## Know your story well.
|
||||
|
||||
Instead of reflecting all the time on interview questions and rehearsing answers, try reflecting on your school and career chronology until now!
|
||||
Think about how you got started in your field, struggles you overcame, what you've learned over the years, where and how you developed certain skills, what you're most proud of, etc.
|
||||
When you know your story, you can answer almost any question about anything because of your personal experiences and what you know already about yourself.
|
||||
|
||||
## Follow the PIE.
|
||||
|
||||
I mean this in both senses of the word. Pie is delicious.
|
||||
BUT, what I really mean is, the best interviewees are the ones who are _Positive, Interested, and Engaged_ in the interview conversations.
|
||||
If you keep worrying about the next question and saying things perfectly, you might forget to have your positive game face showing.
|
||||
Just remember to smile! If you look like you're happy to be there, they'll be more happy to interview you.
|
||||
|
||||
## Consider what the company (or organization or school, whatever) wants.
|
||||
|
||||
When you're at the career fair, ask companies what they look for, and what their culture is like.
|
||||
You don't want to think, "oh yeah I'll just keep practicing, if I know what I'm talking about and can show it, they'll hire me."
|
||||
Yes and no. You do want to show them that you know what you're talking about. But, they also want to feel that you are likable, and that you'll fit in at the company!
|
||||
Focus more on demonstrating aptitude while being likable rather than just spitting out perfectly crafted answers.
|
||||
Laugh with them, relax a bit, and let them see your personality! I mean, I like you, so why wouldn't they?
|
||||
You personality is one of your skill sets that people often don't count. Believe me, it counts for a lot.
|
||||
|
||||
## Breathe.
|
||||
|
||||
You're going to rock this! Just know that if it doesn't work out, it's not the end of the world, and if it does, that's even better. Have FUN and good luck!
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "How to ask for help"
|
||||
slug: ask-for-help
|
||||
description: "Some people don't know how to ask for help. Luckily, there's a proper way to do it."
|
||||
added: "Apr 24 2014"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
Hey cutie. Your laugh makes my morning, and your smile makes my afternoon.
|
||||
|
||||
So, I've helped as a peer mentor, as an impromptu tutor, as a friend, and just as an upperclassman with a lot of homework problems. From math to science to computing to whatever, you'll often run into something that you just can't figure out, and you need to ask for help.
|
||||
|
||||
As both an asker and a helper, I've discovered the best techniques for asking for help, that will actually get you help.
|
||||
|
||||
## First: Actually try something.
|
||||
|
||||
People who you're asking will be giving you help, not a solution.
|
||||
The first thing someone will probably ask you is "What have you tried?"
|
||||
If your answer amounts to "not a lot", they have a perfect excuse to flat out say, "then why should I help you?"
|
||||
If you try something, then you show that you're at least moderately familiar with your problem, that you know what won't work, and it'll give the helper a guide for how they could explain something to you.
|
||||
If you're totally lost on what to try, search for your problem online to get some familiarity.
|
||||
|
||||
## Narrow down your problem.
|
||||
|
||||
If you know that just one part of the problem is your issue (because you tried something), make sure you tell your helper (this sounds like I'm talking about some sort of designated buddy system... anyway...) what that small part is.
|
||||
Now, don't show them something so small that they can't help you at all, but give them something fairly small to work with.
|
||||
If it's a coding problem, chances are they won't want to go through 10,000 lines of code.
|
||||
If it's a math problem, they probably don't need to see ALL of your steps getting to where you're at. Et cetera.
|
||||
I mean sure, be able to describe the larger context of your problem, but then focus on your problem area when you're asking for help.
|
||||
|
||||
## Don't be a lazy recipient.
|
||||
|
||||
When someone is helping you, they're donating their time and effort into making sure you understand something.
|
||||
Don't sit there on your phone while they look at your screen or read your paper.
|
||||
Be an active learner, and talk through things with them. At the same time, be patient.
|
||||
Unless you're paying them for their time, you're not simply entitled to their help.
|
||||
I'm guilty of getting impatient if I don't understand something right away.
|
||||
Let them explain how they think about the problem to you in their own way, chances are they might have a different idea than you do, and you'll come to a mutual solution together.
|
||||
Lovingly.
|
||||
|
||||
Hopefully you'll get the help you need on that nasty problem! I believe in you.
|
||||
@@ -1,863 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "HTML+CSS Tutorial, Part 2"
|
||||
slug: html-css-part-2
|
||||
description: "This is part 2 of a two-part tutorial for beginners as an introduction to HTML and CSS."
|
||||
added: "Feb 10 2014"
|
||||
tags: [technical, advice]
|
||||
---
|
||||
|
||||
### What
|
||||
|
||||
This is Part 2 of this tutorial, where we start from the very beginning of HTML and CSS. You don't need to know anything about HTML and CSS or anything about code to start.
|
||||
|
||||
[You can find Part 1 here.](http://cassidoo.github.io/html/css/tutorial/2014/02/10/html-css-tutorial/)
|
||||
|
||||
I'll included some tutorial files for you to play with and check out here: [HTML+CSS Tutorial Files](https://github.com/cassidoo/HTML-CSS-Tutorial/archive/master.zip)
|
||||
|
||||
### When
|
||||
|
||||
Now. Or whenever. I'm not planning on taking this down anytime soon. But you are only limited by your own schedule. Or set free by it. Whatever.
|
||||
|
||||
### Where
|
||||
|
||||
On a computer. Here.
|
||||
I have this tutorial hosted on [my GitHub account](https://github.com/cassidoo/HTML-CSS-Tutorial) if you'd like to look at it there, or if you'd like to suggest improvements!
|
||||
|
||||
### Why
|
||||
|
||||
Because this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- HTML (this half is in a separate post, for your readability, because I care)
|
||||
- Editors
|
||||
- Tag Structure
|
||||
- Text Structure
|
||||
- Links
|
||||
- Other tags
|
||||
- Images
|
||||
- Line Breaks
|
||||
- Tables
|
||||
- Making Things Gorgeous The Wrong Way
|
||||
- Colors
|
||||
- Width and Height
|
||||
- Borders
|
||||
- Text Styles
|
||||
- The `<head>` tag
|
||||
- Putting it all together so far
|
||||
- CSS
|
||||
- Classes and IDs and other Segregation
|
||||
- Classes
|
||||
- IDs
|
||||
- Other Segregation
|
||||
- The `<span>` tag
|
||||
- The `<div>` tag
|
||||
- Background color
|
||||
- Floating
|
||||
- Positioning
|
||||
- Margins and Padding
|
||||
- Z-Index
|
||||
- The `<link>` Tag, Comments, and other Developer Joys
|
||||
- The `<link>` tag
|
||||
- Commenting
|
||||
- HTML Comments
|
||||
- CSS Comments
|
||||
- Other Developer Joys
|
||||
- Forms
|
||||
- HTML5 and CSS3
|
||||
- How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
|
||||
- Final Project!
|
||||
- And now, the end is near
|
||||
|
||||
## CSS is magical, and now you're gonna learn it.
|
||||
|
||||
So far, we've been making things pretty the wrong way. So, we're going to learn it the right way. So excited.
|
||||
|
||||
Right now, I'm going to show you how to write CSS just straight in your HTML documents. That's still kind of wrong, but it'll give you the basics. After that, we'll move into the big leagues and have separate files for everything. Pumped.
|
||||
|
||||
Open up your **3 - Styles** folder again and open style2.html in your favorite editor. This site is pretty barebones. Let's take out the barebones part and just make it pretty.
|
||||
|
||||
We're going to be working in the `<head>` tag again. Underneath the `<title>` tag, stick in the following:
|
||||
|
||||
<style>
|
||||
body
|
||||
{ }
|
||||
|
||||
h1
|
||||
{ }
|
||||
|
||||
p
|
||||
{ }
|
||||
|
||||
ol
|
||||
{ }
|
||||
</style>
|
||||
|
||||
Congratulations. You have some empty CSS. Now, what the heck is CSS anyway? Well, CSS stands for _Cascading Style Sheets_. Gee whiz, that word _style_ is everywhere. And it's true. The `style` attribute is for styling _inline_ HTML (just that line of code), the `<style>` tag is for holding CSS, and CSS _defines_ the styles! Let that sink in. Nice. Stylish. Just like you.
|
||||
|
||||
Now, you'll notice some familiar keywords in there, in particular, `body`, `h1`, `p`, and `ol`. That's right, they're the tags we know and love! But, in CSS, these are called _selectors_. The selector tells us what tag you're about to style. So, whatever code you put in between the curly braces `{}` after the `body` selector will affect everything in the `<body>` tags. Whatever you put in the braces after the `p` selector will affect what's in the `<p>` tags.
|
||||
Whatever code you have in those curly braces will only affect that tag, so if you try editing the font colors for the `h1` selector, it won't affect whatever is in the `p` selector's tags. Each portion of code `selector { code }` in CSS is called a _declaration_. Make sense? Good. If not, keep reading and hopefully it will become more clear as we go on.
|
||||
|
||||
The code that we're going to be putting in each declaration is the same syntax as the code that we normally put in the `style` attribute. How convenient. So, change your code above to the following:
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
width: 400px;
|
||||
border: 5px solid #333333;
|
||||
}
|
||||
|
||||
ol
|
||||
{
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
|
||||
Recognize that? It's exactly the same! For each selector, there is a _property_ of that selector, and each property has a _value_, just like how we wrote it in the `style` attributes!
|
||||
|
||||
You will always have your CSS in the syntax, `selector { property: value; property: value; }`. I've only shown you some properties so far, but don't worry. There are plenty more to come.
|
||||
|
||||
Try playing around with the CSS we have right now. Edit the colors, add some borders, change the font styles. Don't forget your semicolons!
|
||||
|
||||
###Classes and IDs and other Segregation
|
||||
|
||||
So, you have some of the CSS basics down already. You're so smart. It's really a simple language, once you know the basic syntax. So, now we'll get into more fancy stuff. What if you want to edit several tags differently?
|
||||
|
||||
#### Classes
|
||||
|
||||
Let's say that we have 8 `<p>` tags on our HTML page (hint: open style3.html in the **3 - Styles** folder).
|
||||
If we want to style each of these tags differently, we can use _classes_. A class is actually an HTML attribute that you can name whatever you want.
|
||||
Check out style3.html to see the classes I added to the `<p>` tags on the page. When you add a class, the user doesn't see it.
|
||||
But, you can style specific classes to do what you want, instead of having all `<p>` tags be the same.
|
||||
|
||||
How about we style one of the classes specifically? It's simple. Just take the class name you made up (I'll use the `poemtitle` class for my example) and add a period `.` in front of it to select it in CSS, like so:
|
||||
|
||||
.poemtitle
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
And there you have it! Even though you might have different styles for your paragraphs, you can style the ones of class `poemtitle` individually.
|
||||
For this example, let's make all paragraphs with the font family Arial, the `poemtitle`s font weight `bolder`, the `author`s the color `#555555`, and the `poem`s in `italic`.
|
||||
Try doing it on your own if you can (just put your code in the given `<style>` tags), but you're welcome to cheat:
|
||||
|
||||
p
|
||||
{
|
||||
font-family: Arial;
|
||||
}
|
||||
.poemtitle
|
||||
{
|
||||
font-weight: bolder;
|
||||
}
|
||||
.author
|
||||
{
|
||||
color: #555555;
|
||||
}
|
||||
.poem
|
||||
{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
Gosh you're good at this. Go eat a cookie.
|
||||
|
||||
[Pausing here for cookie break]
|
||||
|
||||
#### IDs
|
||||
|
||||
Now, let's talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the `id` attribute like so:
|
||||
|
||||
<p id="special">This is so special that I want it uniquely styled forever.</p>
|
||||
|
||||
When you want to style your IDs, you put a hashtag `#` before it in your CSS, like so:
|
||||
|
||||
#special
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
Remember: You can only use an ID once. IDs are more helpful when you're controlling the element with JavaScript, not styling, but that's something for another day.
|
||||
|
||||
#### Other Segregation
|
||||
|
||||
Let's say that you want to separate individual text in your paragraphs or sections on your page. Let's introduce 2 new tags: `<span>` and `<div>`.
|
||||
|
||||
##### The `<span>` tag
|
||||
|
||||
The `<span>` tag is pretty invisible unless you style it. It's used to group _inline-elements_ (so like a word in a paragraph), and it doesn't actually do anything unless you style or manipulate it with something else.
|
||||
|
||||
So, let's say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes `<span>`. For example:
|
||||
|
||||
<p>"My grandmother started walking <span>five miles a day</span> when she was sixty. She's ninety-seven now, and <span>we don't know where the heck she is.</span>" </p>
|
||||
<p>~ Ellen DeGeneres </p>
|
||||
|
||||
In the above quote, you might want to style the `<span>` tags differently than the rest of the paragraph. Maybe you want those words bold, or italics, or in red. Now you can.
|
||||
|
||||
Add some `<span>` tags around your favorite lines of the poems in style3.html of the **3 - Styles** folder. Then, put the following CSS in your `<style>` tags:
|
||||
|
||||
p span
|
||||
{
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell you. This is called _nesting_ CSS. When you have a space in your selector like this, it means that, in this case, the style will only affect `<span>` tags within `<p>` tags. So, if you put `<span>` tags around a word in your `<h1>` tags, your CSS will not affect it. You can still have a plain `span` selector, or nest it in one of your classes too:
|
||||
|
||||
span
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
.author span
|
||||
{
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
Make sense? I hope so. To sum up: `<span>` tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next.
|
||||
|
||||
##### The `<div>` tag
|
||||
|
||||
Alrighty. Go enjoy a beach vacation and then come back to this.
|
||||
|
||||
Welcome back.
|
||||
|
||||
The `<div>` tag is very similar to the `<span>` tag, in that it separates a section of something but doesn't do much else. However, the difference with `<div>` tags is that they are _block level_ elements, not just within a line of text.
|
||||
|
||||
The `<div>` tag might end up being the tag that you use most often. It is what lets you easily make website layouts (with help from CSS of course), and so, let's play with it!
|
||||
|
||||
Open up the **5 - Layout** folder, and use your editor to open `homepage.html`.
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title> My Website </title>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header"></div>
|
||||
<div class="menu"></div>
|
||||
<div class="content"></div>
|
||||
<div class="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Besides the `<div>` tags, everything here should look familiar. Each of the `<divs>` have a `class`, which means we should style those, right? Right.
|
||||
|
||||
Within those `<style>` tags, let's add some pizzazz.
|
||||
First, let's throw in what we'll be styling: the `<html>` (it is unusual to style this, but I'll explain why we are later), `<body>`, and each of the 4 classes:
|
||||
|
||||
html
|
||||
{
|
||||
|
||||
}
|
||||
body
|
||||
{
|
||||
|
||||
}
|
||||
.header
|
||||
{
|
||||
|
||||
}
|
||||
.menu
|
||||
{
|
||||
|
||||
}
|
||||
.content
|
||||
{
|
||||
|
||||
}
|
||||
.footer
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
This should be straightforward for you so far. The first thing we'll do is create our layout by making each `<div>` a different size.
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
.header
|
||||
{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
}
|
||||
.content
|
||||
{
|
||||
height: 200px;
|
||||
}
|
||||
.footer
|
||||
{
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Whoa ho ho, slow down there. What the heck is with these `%` signs?? Well, what this means is that if, for example, a tag's `width` is `75%`, then it's width on the page will be 75% of it's _containing element._
|
||||
So when you see that the `.menu` class has a `width: 15%;`, it takes up 15% of its containing element's width, which is the `<body>` tag.
|
||||
|
||||
Typically, the `height` property defaults to `0%` and the `width` property defaults to `100%`.
|
||||
This is why we had to style the `height` properties of both `<html>` and `<body>`.
|
||||
If we had just made our `.menu` selector have a height of `100%`, we know that 100% of zero is just zero, so we wouldn't have a menu showing up!
|
||||
When we made the `<body>` tag have `height: 100%`, it also would still be zero, because our `<html>` tag also had a height of 0 without the CSS helping it out.
|
||||
Now, if we had just said `height: 50px;` for `.menu`, we wouldn't need the `height` fixes for `<html>` and `<body>`, because it's given a set value, not a value dependent on others.
|
||||
Makes sense? I hope so. You're hot.
|
||||
|
||||
Okay, so if you open `homepage.html` in the browser, you see nothing. That's okay. Let's change that by learning a few new CSS properties!
|
||||
|
||||
###### Background color
|
||||
|
||||
One property that you will learn to know and love is `background-color`.
|
||||
It does exactly what you would expect it to: it sets the background color of the element it is styling!
|
||||
You can fill it in with HEX colors or RGB colors, just like we learned earlier, and the default color is white.
|
||||
|
||||
Let's add some backgrounds.
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
.header
|
||||
{
|
||||
background-color: #99B5DD;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
background-color: #DE90B1;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
}
|
||||
.content
|
||||
{
|
||||
height: 200px;
|
||||
}
|
||||
.footer
|
||||
{
|
||||
background-color: #0F215D;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Save in your editor and now refresh in that browser! WOW. COLOR. Now, our site definitely isn't perfect yet.
|
||||
Let's throw some MORE new CSS properties at you!
|
||||
|
||||
###### Floating
|
||||
|
||||
One property that you will probably use fairly often is `float`. This is one of those properties that you will learn to both love and hate.
|
||||
It's kind of magical.
|
||||
So, let's say that you want to have a picture in a paragraph. When you see a picture in a news article or even a paper you're writing, the picture is either on the left or the right.
|
||||
It's the same in CSS! If you wanted to put a picture in a paragraph, you'd make the `<img>` tag inside a `<p>` tag have the properties `float: left;` or `float: right;`.
|
||||
So, what does this have to do with `<div>` tags? Why could you potentially hate it?
|
||||
|
||||
I'll tell you.
|
||||
|
||||
With CSS float, a given element can be pushed to the left or right, allowing other elements to wrap around it.
|
||||
An element with `float` affecting it will move as far to the left or right as it can.
|
||||
Usually this means all the way to the left or right of the containing element.
|
||||
|
||||
Pretty simple, right? Right. Now, here's the cause for hate: sometimes, `float` just doesn't stop.
|
||||
It has the potential to mess up your layouts and have things move around other things, and really just give you a headache.
|
||||
How do you stop that?
|
||||
|
||||
With the `clear` property! On the element(s) after any floated elements, make sure that they have `clear: both;` on them (we say `both` because it turns off both `left` and `right` floating).
|
||||
Let's add `float: left;` to the `.menu` and `.content` sections, and `clear: both;` to the `.footer`:
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
.header
|
||||
{
|
||||
background-color: #99B5DD;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
background-color: #DE90B1;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
float: left;
|
||||
}
|
||||
.content
|
||||
{
|
||||
height: 200px;
|
||||
float: left;
|
||||
}
|
||||
.footer
|
||||
{
|
||||
background-color: #0F215D;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
Now if you refresh your browser, things are starting to look a bit more sexy. Like you.
|
||||
|
||||
Let's add more delight to this! So let's think, what if you're on your website, but you want to see the footer.
|
||||
You scroll down. What if, though, you want to see the header again? You'd have to scroll back up.
|
||||
|
||||
That's exhausting.
|
||||
|
||||
Your poor finger.
|
||||
|
||||
Let's make it so that your header and footer are always on the top and bottom of your screen, and only your content moves!
|
||||
|
||||
Incoming, the `position` property.
|
||||
|
||||
###### Positioning
|
||||
|
||||
The `position` property is pretty much exactly what one would expect a positioning property to do: It positions things.
|
||||
|
||||
It can have several states, but we'll focus on the 3 states you'll probably use most: `absolute`, `relative`, and `fixed` (the default state is `static`, but you will rarely need to work with this).
|
||||
|
||||
- In `absolute` positioning, the selected element will be placed in an exact location on the page, and moves with the page. So, in our example, the header could be placed at the top of the page and the footer at the bottom, but when you scroll, they will move with the page and they won't stay where they are supposed to. Some people like this, some don't. In our case, we won't use this.
|
||||
- In `relative` positioning, the selected element will be placed _relative_ (fancy that) to its default position. I'll show you an example of this later.
|
||||
- Now, `fixed` positioning is just like `absolute` positioning, except that once an element is placed in an exact location on the page, it is stuck there. A similar example is like a watermark on a video. It stays the same there, no matter what the content is.
|
||||
|
||||
How do we actually position things after you use `position`? You can use `top`, `bottom`, `left`, and `right` to place it.
|
||||
So, for example, if you want a header bar to be at the top of the page (but it's okay if it scrolls with the page), you'll have `position: absolute;` and `top: 0px;` because you want it to be 0 pixels from the top.
|
||||
If you have an image on your page that's sitting on the left of your document, but it's way too far left, you can do `position: relative;` and `left: 5px` to scoot it 5 pixels to the right (because you're adding space to the left).
|
||||
Another more complicated example could be if, say, you want a 50px by 50px image to stay in the bottom right corner of your page as you scroll, you could do `position: fixed;` and `right: 50px;` and `bottom: 50px`. You'll understand it more as we use it!
|
||||
|
||||
So, let's get rid of our `float` on `.menu` and `.content`, and the `clear` on the footer. Let's position everything using `position` instead, like so:
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
.header
|
||||
{
|
||||
background-color: #99B5DD;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
background-color: #DE90B1;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 60px;
|
||||
}
|
||||
.content
|
||||
{
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15%;
|
||||
}
|
||||
.footer
|
||||
{
|
||||
background-color: #0F215D;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
We are starting to look really hot now.
|
||||
If you refresh your page in the browser though, you'll notice that there's a little space to the left of our header and footer.
|
||||
Why the heck is that happening?
|
||||
|
||||
I'll tell you.
|
||||
|
||||
###### Margins and Padding
|
||||
|
||||
|
||||
|
||||
I made the diagram above to show you what the heck you'll be working with.
|
||||
|
||||
First, let's look at the CSS property `margin`. Like you can see above, `margin` is the space _outside_ the content's border.
|
||||
Think of it as the 1 inch margins when you write a paper, or the margins of the pages of a book.
|
||||
|
||||
The HTML `<body>` tag actually has a natural margin, which is why our header and footer have the space on their sides. S
|
||||
o, let's add `margin: 0px;` to our `<body>` (that's all we'll change right now though):
|
||||
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
Now, let's talk about `padding`. Padding is the space _inside_ the content's border. Now, if you look at our `.content` currently, it is uncomfortably close to our `.menu`. These things are not meant to be touching. I would insert a joke here but you can figure out what the punchline would be.
|
||||
|
||||
Anyway.
|
||||
|
||||
Let's add some padding into our `.content` and `.header` so that our text has some breathing room. Our CSS should look like this now:
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
.header
|
||||
{
|
||||
background-color: #99B5DD;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
background-color: #DE90B1;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 60px;
|
||||
padding: 10px;
|
||||
}
|
||||
.content
|
||||
{
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15%;
|
||||
}
|
||||
.footer
|
||||
{
|
||||
background-color: #0F215D;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Oh darn! Did you see how our header expanded? If you did this right, our header is now starting to overlap the menu and content. Crap.
|
||||
|
||||
There is a way to fix this.
|
||||
|
||||
So, instead of adding space to margins and padding on all four sides, you can add them just to the top, bottom, left, and/or right. There's a few ways to do this:
|
||||
|
||||
- `margin: 5px 10px 15px 0px;`
|
||||
- top margin is 5px
|
||||
- right margin is 10px
|
||||
- bottom margin is 15px
|
||||
- left margin is 0px
|
||||
- `margin: 15px 0px 5px;`
|
||||
- top margin is 15px
|
||||
- right and left margins are 0px
|
||||
- bottom margin is 5px
|
||||
- `margin: 5px 10px;`
|
||||
- top and bottom margins are 5px
|
||||
- right and left margins are 10px
|
||||
- `margin: 15px;`
|
||||
- all four margins are 15px
|
||||
|
||||
The same goes for `padding`, you can also do `padding: 5px 10px 15px 0px;`, etc. for all of the properties above. We're going to make some changes to both the `.header` and the `.menu` here:
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
.header
|
||||
{
|
||||
background-color: #99B5DD;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
background-color: #DE90B1;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 60px;
|
||||
padding: 10px 0px 0px;
|
||||
}
|
||||
.content
|
||||
{
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15%;
|
||||
padding: 10px;
|
||||
}
|
||||
.footer
|
||||
{
|
||||
background-color: #0F215D;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Now, with all that you've learned so far, you should probably make this a really great, functional website.
|
||||
I'll teach you just one more thing, and then I'll set you free like a bird or something.
|
||||
|
||||
###### Z-Index
|
||||
|
||||
The property `z-index` isn't one that you'll run into super often, but it's something that will help you in the long run.
|
||||
|
||||
Now, if you think of your screen as a stack of layers, like a stack of paper on the screen.
|
||||
Layer 1 is the lowest layer, and the higher the number, the higher the layer.
|
||||
|
||||
The numbers in `z-index` are the same. If an element has `z-index: 0;`, then it is a bottom layer.
|
||||
If you have an element with a `z-index: 5;`, it's going to be on the 5th layer.
|
||||
|
||||
When you create a page and you don't add `z-index` to anything, the layers are just in order.
|
||||
So in our example, the `.header` was created first, so it's on the lowest layer, and the `.footer` was created last so it is on the top layer.
|
||||
|
||||
We don't want that. What if your `.content` had a ton of information and you had to scroll the page?
|
||||
The content would overlap on top of the header (because we just HAD to make our header `fixed`).
|
||||
|
||||
So, let's add some `z-index` magic to our page! A couple things to note first:
|
||||
|
||||
- `z-index` only works when you have already set the `position` of an element.
|
||||
- You can assign any number you want to `z-index`, as long as it is an integer (no decimals), and as long as the highest number is the highest level, and the lowest number is the lowest level.
|
||||
|
||||
Okay, I'm going to add some `z-index` properties to the page, and I'm also going to add some text changes that you have seen before (`text-align`, `font-family`) and one that you haven't seen before (`font-size`... you get one guess to figure out what this does):
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
font-family: Arial;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
.header
|
||||
{
|
||||
background-color: #99B5DD;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
padding: 0px 10px;
|
||||
font-size: 50px;
|
||||
z-index: 10;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
background-color: #DE90B1;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 60px;
|
||||
padding: 10px 0px 0px;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
}
|
||||
.content
|
||||
{
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 15%;
|
||||
padding: 10px;
|
||||
z-index: 0;
|
||||
}
|
||||
.footer
|
||||
{
|
||||
background-color: #0F215D;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
And there you have it! Look at your website in your browser and feel proud of yourself. Eat some cake. Do a dance.
|
||||
|
||||
Now you can see how flexible `<div>` tags really are. You can style them pretty much any different way you want without breaking a sweat.
|
||||
|
||||
So, you have this delightful homepage set up now, try adding some content and play with the CSS a bit to make it your own! Add colors, change sizes, the works.
|
||||
When you click on the links to the other pages, About and Contact, you'll notice that they have no style right now (unlike you). Change that! Try making your own layout for each of those pages. If you're really digging what we've made here, that's cool too. You can copy over the styles to each page.
|
||||
|
||||
But hey, that's a LOT of reusing code. Plus what if someone is trying to read your code, and they don't get what you're doing (because they aren't as smart as you are)? Is there a better way?
|
||||
|
||||
Duh.
|
||||
|
||||
### The `<link>` Tag, Comments, and other Developer Joys
|
||||
|
||||
Let's just say you want to reuse your styles across your website on every page. It makes sense.
|
||||
It'd be kind of annoying to have drastic changes on every page.
|
||||
|
||||
#### The `<link>` tag
|
||||
|
||||
That's where the `<link>` tag comes in! The `<link>` tag is an empty tag (like <br> and <img>), so it has no end tag, and it's used to link to external stylesheets!
|
||||
|
||||
What the heck is an external stylesheet? Well, put simply, it's CSS, in its own file.
|
||||
|
||||
You write the `<link>` tag like this:
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="main.css">
|
||||
|
||||
Let's take a look at those attributes. The `rel` attribute is for _relationship_.
|
||||
It specifies the relationship between the current document and the linked document, which will almost always be `stylesheet`.
|
||||
I've never actually seen it in action with anything other than `stylesheet`, but if you really want to know other values you can look it up.
|
||||
The `type` attribute will also pretty much always be `text/css`. If it's ever anything else when you want to use it with CSS, I will be quite surprised.
|
||||
And finally, `href`. You remember this one, I hope! It's just like our `<a>` tag. It is the URL of the stylesheet.
|
||||
|
||||
Let's check out this `<link>` tag in action. Open up the **6 - Linking** folder and open home.html, and paste the `<link>` line above on the line below the `<title>` tags in the `<head>`. Voila! That's it. Refresh your browser and check out the magic. It should look just like what we made in the previous section!
|
||||
Now, if you open the main.css file in your editor, you'll see that it's all the CSS you recognize and love, but there's no `<style>` tags. Those tags aren't needed when you are using a CSS file!
|
||||
|
||||
#### Commenting
|
||||
|
||||
Let's just say that you want to show off your code to someone, but they're not exactly sure what you're doing.
|
||||
|
||||
You can add comments!
|
||||
|
||||
_Comments_ in your code are blocks of text that will not be read by the computer. Every computer language has them.
|
||||
|
||||
##### HTML Comments
|
||||
|
||||
In HTML, a comment looks like this:
|
||||
|
||||
<!-- This is an HTML comment! -->
|
||||
|
||||
As you can see, it almost looks like a regular tag, with an opening `<!--` and an ending `-->`. You can put this pretty much anywhere in your HTML files and it won't affect your work!
|
||||
|
||||
Look inside the **7 - Project** folder, and open index.html. You'll see a few comments there. Notice how you can put them all on one line, or in a multi-line block! As long as you have a beginning `<!--` and end `-->`, you have total freedom with comments.
|
||||
|
||||
##### CSS Comments
|
||||
|
||||
Don't worry, you can comment your CSS too!
|
||||
|
||||
A comment in CSS is similar to HTML in that it has a beginning and end part, but it looks a little different:
|
||||
|
||||
/* This is a comment in CSS! */
|
||||
|
||||
Just like in the HTML comments, you have a beginning `/*` and an end `*/`.
|
||||
If you open up main.css in the **7 - Project** folder, you can see the comments I wrote in there!
|
||||
And again, you can have single-line comments, and multi-line ones too.
|
||||
|
||||
Comments are great for keeping track of what you're doing, especially if a project you're working on spans over a period of time.
|
||||
You can make notes for yourself to check later, or you could just tell someone who is reading your code that they are attractive.
|
||||
|
||||
#### Other Developer Joys
|
||||
|
||||
There's so many things that could go in this section for such a generic title. So, what am I going to tell you?
|
||||
Well, I'm going to tell you what I _haven't_ taught you so far.
|
||||
|
||||
##### Forms
|
||||
|
||||
A common thing you'll see on websites are forms, like textboxes, buttons, and checkboxes.
|
||||
I didn't teach you these because you can't do things with them unless you know a bit more than beginner knowledge, which isn't the purpose of this tutorial.
|
||||
|
||||
If you're really dying to see a button, here you go:
|
||||
|
||||
<button type="button">Click Me!</button>
|
||||
|
||||
And there you have it, a button on your website! If you actually want to know how to make the button or form do something, you'll need to know some JavaScript.
|
||||
Until you do, here's more information on buttons: [W3Schools - HTML Forms](http://www.w3schools.com/tags/tag_form.asp)
|
||||
|
||||
##### HTML5 and CSS3
|
||||
|
||||
If you've read anything about the internet and developing for it, you've probably heard some key words thrown around, and a couple of those key words are HTML5 and CSS3.
|
||||
What are those, actually? Well, HTML5 is the latest standard for HTML. The previous HTML version came out in 1999, which is quite a while ago. Unless you're time traveling right now and you printed this out to read as you go.
|
||||
|
||||
Anyway. HTML5 was designed to deliver rich content without the need for additional plugins (for example, Shockwave Flash, Silverlight, etc.), and can handle everything from animation to graphics, music to movies, and can also be used to build complex web applications.
|
||||
Not to mention the fact that it works on every device, from tablets to phones to your standard computer.
|
||||
|
||||
CSS3 has a bunch of new features too. From new selectors to fancy text effects to 2D/3D tranformations, there's just so much to learn!
|
||||
|
||||
If you want to read more about HTML5 and CSS3, check out some of the links below. If you feel like you've mastered the materials you learned here, you're probably ready to start diving in further!
|
||||
|
||||
- [W3Schools - HTML5](http://www.w3schools.com/html/html5_intro.asp)
|
||||
- [W3Schools - CSS3](http://www.w3schools.com/css/css3_intro.asp)
|
||||
- [HTML5 Rocks](http://www.html5rocks.com/)
|
||||
- [Dive Into HTML5](http://diveintohtml5.info/)
|
||||
|
||||
##### How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
|
||||
|
||||
Honestly I have nothing to put here I just like the joke that HTML stands for that.
|
||||
|
||||
I hope your HTML is spin and <span>. Heh.
|
||||
|
||||
## Final Project!
|
||||
|
||||
Alrighty! So you've looked at the **7 - Project** folder a bit, but I haven't told you what that folder is for yet.
|
||||
|
||||
Well guess what.
|
||||
|
||||
It's a project. [confetti]
|
||||
|
||||
With all that you've learned so far, make something! I want you to make a website about the most attractive person in the room.
|
||||
|
||||
You.
|
||||
|
||||
Put a photo up of yourself, add a biography, talk about your skills (be sure to include HTML and CSS among them) and experiences, make it the online version of you.
|
||||
|
||||
Use `<div>` tags and CSS to make a really awesome layout. Style everything in the text from `<h1>` to `<p>`.
|
||||
|
||||
Include lists `<ul>` and links `<a>`! Make it sparkly.
|
||||
|
||||
I made your homepage for you, and your main CSS document. But don't let that limit you! Add as much as you want, and experiment!
|
||||
|
||||
The best way to learn is by doing. Do as much as you can until you think you have everything down pat.
|
||||
|
||||
And if you need help you can always come back and visit. :)
|
||||
|
||||
## And now, the end is near
|
||||
|
||||
Actually, now the end is here.
|
||||
|
||||
You've learned pretty much all that I can teach you. Congratulations, really. I'm not even going to joke around here.
|
||||
You've accomplished something that will help you for years to come!
|
||||
|
||||
Show off your website to your friends, and be proud of what you've done!
|
||||
|
||||
And with that, I'm signing off.
|
||||
|
||||
Thanks for reading, you beautiful specimen, you.
|
||||
@@ -1,454 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "HTML+CSS Tutorial, Part 1"
|
||||
slug: html-css-part-1
|
||||
description: "This is part 1 of a two-part tutorial for beginners as an introduction to HTML and CSS."
|
||||
added: "Feb 10 2014"
|
||||
tags: [technical, advice]
|
||||
---
|
||||
|
||||
### What
|
||||
|
||||
In this tutorial, we'll start from the very beginning. You don't need to know anything about HTML and CSS or anything about code to start.
|
||||
I'll included some tutorial files for you to play with and check out here: [HTML+CSS Tutorial Files](https://github.com/cassidoo/HTML-CSS-Tutorial/archive/master.zip)
|
||||
|
||||
### When
|
||||
|
||||
Now. Or whenever. I'm not planning on taking this down anytime soon. But you are only limited by your own schedule. Or set free by it. Whatever.
|
||||
|
||||
### Where
|
||||
|
||||
On a computer. Here.
|
||||
I have this tutorial hosted on [my GitHub account](https://github.com/cassidoo/HTML-CSS-Tutorial) if you'd like to look at it there, or if you'd like to suggest improvements!
|
||||
|
||||
### Why
|
||||
|
||||
Because this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- HTML
|
||||
- Editors
|
||||
- Tag Structure
|
||||
- Text Structure
|
||||
- Links
|
||||
- Other tags
|
||||
- Images
|
||||
- Line Breaks
|
||||
- Tables
|
||||
- Making Things Gorgeous The Wrong Way
|
||||
- Colors
|
||||
- Width and Height
|
||||
- Borders
|
||||
- Text Styles
|
||||
- The `<head>` tag
|
||||
- Putting it all together so far
|
||||
- CSS (this half is in a separate post, for your readability, because I care)
|
||||
- Classes and IDs and other Segregation
|
||||
- Classes
|
||||
- IDs
|
||||
- Other Segregation
|
||||
- The `<span>` tag
|
||||
- The `<div>` tag
|
||||
- Background color
|
||||
- Floating
|
||||
- Positioning
|
||||
- Margins and Padding
|
||||
- Z-Index
|
||||
- The `<link>` Tag, Comments, and other Developer Joys
|
||||
- The `<link>` tag
|
||||
- Commenting
|
||||
- HTML Comments
|
||||
- CSS Comments
|
||||
- Other Developer Joys
|
||||
- Forms
|
||||
- HTML5 and CSS3
|
||||
- How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
|
||||
- Final Project!
|
||||
- And now, the end is near
|
||||
|
||||
## HTML Time. Let's Go.
|
||||
|
||||
### Editors
|
||||
|
||||
So the first thing you'll need is an editor to edit your jazz. There's tons of options out there.
|
||||
|
||||
- Notepad (that's right, the stupid thing that comes on your PC) - This is about as basic as you can get. It's totally okay if you want to use this, but I recommend one of the editors below just so you can see code highlighting (which will help you out later on). But, if you want to be a purist, this'll work just fine.
|
||||
- [Aptana Studio 3](http://aptana.com/) - This is what I typically use. It's fairly easy to navigate, you create projects in it and it supports standard web projects, PHP, and Ruby. If you're a beginner that probably means nothing to you. Anyway, a decent choice.
|
||||
- [Sublime Text 2](http://www.sublimetext.com/2) - This is a pretty popular option, and for good reason. Very clean interface. Once you can navigate it (learning curve isn't that big), it's pretty dreamy. Like your face.
|
||||
- [Notepad++](http://notepad-plus-plus.org/) - This is just one step up from Notepad. But it's pretty dece. Code highlighting is in it, and nothing else too fancy, which is what I like about it.
|
||||
- [IDEcoder](http://icecoder.net/) - this is an in-browser code editor, which lets you code directly within the web browser, online or offline, it means you only need one program (your browser) to develop websites, which is cool
|
||||
|
||||
There's a bunch of others [listed here](http://en.wikipedia.org/wiki/List_of_HTML_editors), I just listed the ones I've used and liked!
|
||||
|
||||
### HTML Tag Structure
|
||||
|
||||
Here is a barebones HTML page, about as simple as you can get. You can open it up in the **1 - Structure** folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you'll see a plain webpage with the title "My Website" and the words, "Hello, World!" written on the page.
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
My Website
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
Hello, World!
|
||||
</body>
|
||||
</html>
|
||||
|
||||
So, what are we looking at here?
|
||||
HTML, short for _HyperText Markup Language_, consists of these things called tags, which are words written between `<` and `>` characters, like `<sometag>`. All tags (with just a few exceptions that we'll talk about later) have a matching closing tag, which has the same name as the opening tag, except that it contains `/` after the first `<`, like `</sometag>`.
|
||||
|
||||
For example, `<html>` is one tag and the closing tag for it is `</html>`, same with `<head>` and `</head>` and `<body>` and `</body>`, and so on. You get it.
|
||||
The opening and closing tags together are an _element_ (which also includes everything written in it). For example, `<title>My Website</title>` is one element. The text inside an element, in the title case, `My Website`, is called the _content_ of an element.
|
||||
|
||||
Tags organize your page and tell the browser what your page consists of. There's tons of tags out there, some that you may never use.
|
||||
Here's some lists of tags if you really care to see all of them at this point:
|
||||
|
||||
- [HTML Dog Tag List](http://www.htmldog.com/reference/htmltags/)
|
||||
- [W3Schools Tag List](http://www.w3schools.com/tags/default.asp)
|
||||
- [Quackit HTML Tag List](http://www.quackit.com/html/tags/)
|
||||
|
||||
So, if you look at our example, you can also put tags inside other tags (like we did with the `<title>` tags inside the `<head>` tags). This is called _nesting_ elements.
|
||||
In this case, we would say that the `<head>` _contains_ the `<title>`. Sometimes when you have a lot of nested tags, it's hard to keep track, so you have to format your code with spacing, as shown. Typically, inner tags are spaced more than their outer tags (just as `<title>` is indented further than `<head>`).
|
||||
|
||||
Let's take a look again at part1.html in the **1 - Structure** folder. You'll notice that the first line has `<!doctype html>`. Every HTML document and website has to have this special tag, as it tells the browser what language we're using. This is one of those special tags I mentioned that doesn't need a closing tag.
|
||||
|
||||
On the second line, you can see a `<html>` tag. Everything in the website is contained by this tag, and the last line of your entire document will always be `</html>`.
|
||||
|
||||
Inside `<html>`, there are two elements: `<head>`and `<body>`. Contained in `<head></head>`, we will put all kinds of information for the browser that the user doesn't necessarily need to see. For now, we just have `<title>`. The content of `<title>` will be used for the name of the tab of the browser, and also by search engines.
|
||||
|
||||
On the other side of the planet, we have `<body></body>`. Everything visible to the user is contained in these tags. Right now, all that consists of is "Hello, World!" Let's change that for fun. Replace "Hello, World!" with your own text in your favorite HTML editor, and then open the page in your browser. Neat!
|
||||
|
||||
### Structuring text
|
||||
|
||||
Let's get juicy. We're going to talk about some new tags for structuring your text. Because you're not going to want just one style of text throughout your whole website, right?
|
||||
|
||||
Check out part2.html in the **1 - Structure** folder. The tags that we'll be talking about here are `<h1>`, `<p>`, `<ul>`, and `<li>`. Open the file in the browser to try and understand what the heck is going on.
|
||||
|
||||
Now, let's talk about it.
|
||||
|
||||
First, we have `<h1>`, which adds a _heading_ to our website. Basically, a heading is just text with a bigger font. But still. Important. We'll soon learn how to adjust any and all font sizes, but not yet. Just know that your headings should be in `<h1>` tags. Also, if you have a smaller heading, or _sub-heading_, you could use `<h2>`, which is smaller than `<h1>`, but bigger than regular text. You can keep going with more numbers until you reach `<h6>`, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading!
|
||||
|
||||
Next, we have `<p>` tags. `<p>` adds a _paragraph_ of text to our website, which are blocks of text that have some space before and after them. Edit the text in the paragraphs given, and add your own to see what I mean!
|
||||
|
||||
And finally, we have `<ul>`. `<ul>` means a bulleted list (also known as an _unordered list_), where every `<li>` is an item in that list (called a _list item_). But what if you want a numbered list? You could change `<ul>` to `<ol>` (and don't forget its closing tag), it's that simple! `<ol>` is an _ordered list_, which has numbers instead of bullet points, and that is truly the only difference. Add some list items (`<li>`) to the list (make sure you stay inside the `<ul>` tags), and then change your `<ul>` tags to `<ol>`!
|
||||
|
||||
### Links
|
||||
|
||||
Links are what makes the world/Internet go 'round. Seriously. So, let's learn about them.
|
||||
|
||||
Links are made with the `<a>` tag, which stands for _anchor_.
|
||||
|
||||
Open up the **2 - Tags** folder, and add this piece of code right after your heading in page1.html:
|
||||
|
||||
<p>This paragraph <a href="http://www.lalalalalalalalalalalalalalalalalala.com/">has a totally awesome link.</a></p>
|
||||
|
||||
Open page1.html in a browser and click on it! BEAUTIFUL.
|
||||
|
||||
Okay, so let's take a look at this. First of all, you can see the `<a>` tag there contained in the paragraph. Beautiful.
|
||||
But what's that funky milk `href=`? Well, that syntax called an _attribute_. Attributes change the way a tag works, and are not visible to the website's user. You only add attributes to the opening tag, not a closing tag. Tags can have multiple attributes, for example:
|
||||
|
||||
<tag attribute="value1" attribute2="value2">Content of tag</tag>`
|
||||
|
||||
Got it? Good. You're so good looking.
|
||||
|
||||
So, anyway, the attribute 'href' tells us where the link is going to go when the user clicks on it (and for those curious, it stands for _hyperreference_). Try adding some more links to the page to different websites!
|
||||
|
||||
Also, one thing you should note: Links don't have to be in `<p>` tags like I put above. You could put them in `<li>` tags in a list, `<h1>` tags for a linking header, or completely on their own!
|
||||
|
||||
#### Adding links to other pages in your website
|
||||
|
||||
Let's just say you have a fully functioning website called fakewebsite.com. You have your homepage and your "Contact Us" page in the same directory or folder.
|
||||
|
||||
Normally when a beginner links to different pages on their website, they just make links that look like `<a href="http://www.fakewebsite.com/index.htmL">Home</a>` and `<a href="http://www.fakewebsite.com/contactus.htmL">Contact Us</a>`.
|
||||
|
||||
This is okay. BUT, you can do better. So, what if you change your domain name to reallyfakewebsite.com? When you edit your HTML, you'd have to edit every single one of the links to match the new domain. That's gross. There is a better way.
|
||||
|
||||
When you make a link to a page within your own directory or folder on your website, instead of putting in the whole URL, put in something more like this:
|
||||
|
||||
<a href="page2.html">Click here to go back to Page 2.</a>
|
||||
|
||||
Paste this line of code into page1.html. Watch the magic happen.
|
||||
|
||||
Now, if you were to change your domain or location of your files, you don't have to change a thing. Boo yah.
|
||||
|
||||
### Other tags
|
||||
|
||||
So, you can reference the links that I showed you before if you want to check out some jazzy stuff you can do with your page. There are some other ones though that you might want to see before we move on to cooler and bigger things.
|
||||
|
||||
#### Images
|
||||
|
||||
`<img>`. Let's just say you want to put an image on your website. This is probably a good tag to know.
|
||||
Add the following to page1.html:
|
||||
|
||||
<img src="https://i.imgur.com/B9q0A.gif" />
|
||||
|
||||
Open up the page in a browser. WHOA. Image! So, the `<img>` tag is one of those special tags. First of all, it doesn't have a closing tag. You just stick in a `/` at the end of the one tag and you're done. Secondly, it also has a `src` attribute (which is short for _source_), and in the value of that attribute you put the URL of the image (similar to `href` in the anchor tag).
|
||||
|
||||
One attribute that might be good for you to remember for `<img>` tags is the `alt` attribute. If you changed the code above to:
|
||||
|
||||
<img src="https://i.imgur.com/B9q0A.gif" alt="I could have danced all night" />
|
||||
|
||||
When you load the page in the browser, the image looks the same. But, if you roll your mouse over the image, you'll see some words appear! WOW. That's the `alt` attribute. It stands for the _alternate text_ for an image, and it's used when a user can't view the image for whatever reason (using a screen reader, slow connection, error in the `src` attribute, etc.). Or, in the case of [XKCD](http://xkcd.com/), it's used to add more humor to the page (roll your mouse over all of the comics on the site, they always add another joke or two that a lot of people don't know about).
|
||||
|
||||
#### Line breaks
|
||||
|
||||
Let's just say you want to keep all your content in one paragraph `<p>`, but you still want to break it up.
|
||||
|
||||
That's easy.
|
||||
|
||||
So, there's two special tags here, `<hr>` and `<br>`. They are _empty tags_, meaning they have no closing tag.
|
||||
|
||||
`<hr>` stands for _horizontal rule_, and creates a visible line break.
|
||||
`<br>` is a simple line break, all it does is split your paragraph up.
|
||||
|
||||
Try inserting these in between some of your `<p>` tags to try it out!
|
||||
|
||||
#### Tables
|
||||
|
||||
Tables are really cool. They can also be a bit confusing. Open up tables.html (in the **2 - Tags** folder) in a browser to check out the example table I made for you there.
|
||||
|
||||
There's several tags for tables, but the essential ones are `<table>`, `<tr>`, `<th>`, and `<td>`. Look at tables.html in your editor.
|
||||
|
||||
We're going to make our own table again on this page. You can delete the one I made for you, or just make one underneath the current one there.
|
||||
|
||||
So, to create a table, you start with the `<table>` tag. Simple enough.
|
||||
|
||||
This will contain all the parts of your table. Sometimes, tables have a `border` attribute that will equal some value for the thickness of the table's border (it's proper to have just "1" or nothing, for reasons we'll explain later). Go ahead and add one so it looks like this:
|
||||
|
||||
<table border="1">
|
||||
</table>
|
||||
|
||||
Boom. Let's add some more.
|
||||
|
||||
The next tag we're gonna check out is `<tr>`, which is for a _table row_. Easy peasy. So, let's add 3 `<tr>` tags to our table.
|
||||
|
||||
<table border="1">
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
And finally, we have the actual cells of the table. There are two types of tags for this, `<th>` (_table header_) and `<td>` (_table data_). As their names indicate, the former is for the header of the table and the latter is for all of the data in the table.
|
||||
|
||||
In our first set of `<tr>` tags, add 4 `<th>` tags, and in the second and third `<tr>` tags add 4 `<td>` tags.
|
||||
|
||||
<table border="1">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Alright! Our table is all set up. We have a table with a `border=1` attribute, 3 rows, and 4 columns. Let's populate it with data so you can see a proper application of the `<table>` tag:
|
||||
|
||||
<table border="1">
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Quantity</th>
|
||||
<th>Rate</th>
|
||||
<th>Cost</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Candy</td>
|
||||
<td>10</td>
|
||||
<td>$.50</td>
|
||||
<td>$5.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toothpaste</td>
|
||||
<td>2</td>
|
||||
<td>$3.00</td>
|
||||
<td>$6.00</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Open the page in a browser and check out your work. Nice job! I'm truly impressed. Go eat something good and fattening.
|
||||
|
||||
One other fun thing you can try playing with are the `colspan` and `rowspan` attributes. If you add `colspan="2"` (or `rowspan`, or any other number) into a `<th>` or `<td>` tag, the cell will expand past their cell size. For example, `<th colspan="2">` will give you a table header that spans 2 columns, and `<td rowspan="3">` will yield a cell that is the height of 3 rows. Jazzy!
|
||||
|
||||
You can also nest tables, but I won't get into that right now. If you want to play around with the code, try adding some `<tr>` and `<td>` tags inside your current `<td>` tags. MaGiCal ThInGs.
|
||||
|
||||
### Making Things Gorgeous The Wrong Way
|
||||
|
||||
So, your website right now looks pretty bland, and that's normal. But, we want a website that is hot, sexy, ravishing, and powerful. Yes, that's right, we want a website just like you.
|
||||
|
||||
So first, I will show you the wrong way to style your pages. You might ask why, but trust me, if you learn in this order, you'll understand HTML attributes a lot better, and then when you move on to CSS your mind will explode with joy. Explode.
|
||||
|
||||
#### Colors
|
||||
|
||||
Alrighty. Let's get frisky. Open up the **3 - Styles** folder and the file style1.html. You might notice that this file is pretty bland right now, but that's what we're gonna fix. Be patient, my grasshopper.
|
||||
|
||||
Add this line of code in the `<body>` somewhere below the header tags (I made a lot for fun...): `<p style="color: red">This text is hot like my body</p>`
|
||||
|
||||
Oh man. Load that baby in a browser. WHAT. MAGNIFICENT. COLOR.
|
||||
|
||||
The first thing we'll look at is the `style` attribute. You can style all kind of things in that, from colors to widths to heights to borders to weights. But for now, let's just talk color.
|
||||
|
||||
So, you might wonder, "what the heck how does that work can I just type any color in that space where red is?" And the answer is no. You can type a ton of colors there, like `blue` and `yellow` and `cyan` and `magenta`, but you can't just say `oasisorange` or `electricwhite` and hope that that'll work.
|
||||
|
||||
How do you get a specific color of your liking? Well that's when you use RGB or HEX colors. This is kind of a pain to grasp, it took me a little bit, so I'll explain it as simply as I can: RGB stands for Red, Green, and Blue. You can have the values 0 to 255 in each to form pretty much any color in existance. Whoa. The way to form an RGB code similarly to the one above is simple: `style="color: rgb(255,0,0)"`. In this example, there's 255 reds, 0 greens, and 0 blues. So, it's all red. Boom, simple enough.
|
||||
|
||||
Now HEX colors is very similar. It consists of the hashtag sign `#`, and then 6 _hexadecimal digits_, which are 0123456789ABCDEF, with F being the highest digit. Like RGB, the first two digits of HEX are reds, the second two digits are blues, and the third couple of digits are greens. So, to write the same color code above, you'd do `style="color: #FF0000"` to get red, because you have FF for reds, 00 for blues, and 00 for greens. Simple? Simple.
|
||||
|
||||
Don't worry, you won't have to come up with RGB and HEX colors yourself. There's plenty of websites and programs and color pickers out there to help you with that. Here's a few:
|
||||
|
||||
- [Color Picker](http://www.colorpicker.com/)
|
||||
- [HTML color codes and names](http://www.computerhope.com/htmcolor.htm)
|
||||
- [HTML Color Codes](http://html-color-codes.info/)
|
||||
- [HTML Color Picker](http://www.w3schools.com/tags/ref_colorpicker.asp)
|
||||
|
||||
Try adding colors to various tags on the page! You can make your `<h1>` the color `#005DFC`, your `<h3>` tag `rgb(242,127,56)`, and your `<p>` tag `lightblue`. Keep playing til you're happy.
|
||||
|
||||
Now, you might see the syntax in your HTML journey where you actually have the `color` attribute, like `<p color="red">wut</p>`. Though this is technically allowed, please don't do this. Please. You'll be so much happier in the long run, I promise.
|
||||
|
||||
#### Width and Height
|
||||
|
||||
So, what if you want to make a picture or a paragraph a different size? Easy peasy.
|
||||
|
||||
There are two options you can use, the `style` attribute and the `width` and `height` attributes. I'll show you both.
|
||||
|
||||
Take this block of code here and stick it into style1.html:
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" />
|
||||
|
||||
Now, let's just say you want the image to be an exact size, say, 600x800. All you need to do is add `width` and `height` attributes to do just that!
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" width="600" height="800" />
|
||||
|
||||
Load that baby in a browser. Boo yah. But, you'll notice that the proportions of the image are a little off. What a pain. That's actually pretty easy to fix. Let's say that you absolutely have to have the width at 600 pixels, but the height can slide. It's as easy as taking out the `height` attribute.
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" width="600" />
|
||||
|
||||
Refresh dat page. Huzzah. Same works for if you have a set height that you want, just include the `height` attribute and not the `width`.
|
||||
|
||||
Now, you can also do these changes with the `style` attribute.
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" style="width: 600px" />
|
||||
|
||||
Simple enough! Now, we've looked at the `style` attribute a bit now but I haven't explained the syntax. The `style` attribute is for _inline styles_. This means that you're styling your HTML directly in each element, rather than using CSS. But, we haven't gotten that far yet, so I won't go into that part.
|
||||
|
||||
Now, the syntax within a `style` attribute is a little funky. It is always `style="property: value"`, where the _property_ is literally a property of the tag you're editing (for example, `color`, `width`, `height`), and the _value_ is to what you're changing or editing the property (for example `blue`, `600px`, `#FF0000`).
|
||||
If you have more than one property that you want to style, for example both height and width, you put a semicolon between delarations. So, in our example, if you want to edit both height and width of our image in the `style` attribute, we'd do:
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" style="width: 600px; height: 800px" />
|
||||
|
||||
Why is the syntax this funky? Well, that's because it's secretly CSS syntax. But we'll get into that more later.
|
||||
|
||||
#### Borders
|
||||
|
||||
What if we have a paragraph IN A BOX. That's right. Kind of like a table. But not. That'd be cool. Of course, there are plenty of other things that can have a border. Buttons (we'll get to those later), color blocks (also later), and images, and MORE can have them. Mmmhm.
|
||||
|
||||
Let's take the same image we played with before:
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" />
|
||||
|
||||
Now, you can add `border="5"` to this and you'll get a border with a thickness of 5 pixels around the image. But, this attribute is actually no longer supported for things other than tables (oh yeah, we used this for tables. Memories.), so we can do this a better way. You guessed it. `style` is coming to SAVE THE DAY.
|
||||
|
||||
The styling for borders with the `style` attribute is a bit different than just adding `border="5"`, but it's also much more powerful. Let's change our code:
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:5px solid black" />
|
||||
|
||||
Whoa. That's a lot of crap in there. Let's break it down.
|
||||
|
||||
The first part of the declaration is obvious, `border`. This is the property that we're editing. Man, this is easy.
|
||||
|
||||
Next, we have 3 parts in the value section. The first part is `5px`. Firstly, `px` stands for _pixels_. We used this above for our width and heights as well. You always have to include the units (just like in 5th grade math) in your styling, and our units here are pixels. Now, that whole first part, `5px`, is the border's thickness. You guessed it: it's 5 pixels thick. Gosh you're smart.
|
||||
The next part is the _border style_. You can plug in several words here, as indicated [on this webpage](http://www.w3schools.com/css/css_border.asp). We used `solid`, but you can also say `dotted`, `dashed`, or `double`. There are some other words you can use, but those depend on the color of the border.
|
||||
Color? What? OH YEAH. That's the third part of the border style. You can stick in any color for that, but in this example, we have `black`.
|
||||
|
||||
Let's mix it up a bit with different borders for you to check out. I'm just going to keep using the same image, you can replace it with whatever. Stick this in the `<body>` tags of style1.html and check it out, and play with the values yourself!
|
||||
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:5px dotted #ffcc00" />
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:10px ridge rgb(77, 145, 99); width: 300px" />
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:8px outset red" />
|
||||
<img src="https://i.imgur.com/wjiVXJe.gif" style="border:3px double #333a21; height: 30px" />
|
||||
|
||||
Notice how I added `width` and `height` to a couple of them. We're getting incestuous with our stylings. Aww yeah.
|
||||
|
||||
#### Text Styles
|
||||
|
||||
Besides having header tags and colors, there are other text styles that you can use. What if you want bold text, or italics? Different sizes? Once again, the `style` attribute comes to the rescue.
|
||||
|
||||
Add the following to style1.html in **3 - Styles**:
|
||||
|
||||
<p style="text-align: center; font-weight: bold">This text is magnificent.</p>
|
||||
|
||||
Load that in a browser and check it out. YUS. You've got some magically centered, bolded text! The properties defined here are pretty simple to follow. `text-align` lets you align your text either `center`, `left`, or `right`. Mess around with that so you get it.
|
||||
`font-weight`, you guessed it, edits the weight in your text. It can have the values `normal` for normally weighted text, `bold` for thick characters, `bolder` for thicker characters (specific, right?), `lighter` for lighter-weighted characters, and the numbers `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, and `900` (where 400 is the same as normal and 700 is the same as bold).
|
||||
|
||||
Play with this one now:
|
||||
|
||||
<p style="font-family: Arial; font-style: italic">This text is magnificent.</p>
|
||||
|
||||
Browser time. You've now got some text in the font Arial, and it's italic! WOOO HOOOOOO.
|
||||
The properties we used here are `font-family` and `font-style`. For the former, you can choose a lot of fonts, but you have to be careful. Not every computer has the same fonts. This is just my personal opinion: don't put something here besides Arial unless you've done some JavaScript magic. And because I'm assuming you don't know JavaScript, don't use this unless you're changing this to Arial. At least not yet. :)
|
||||
And for `font-style`, it can be `normal`, `oblique`, and `italic`. You can play with those now, it's pretty straightforward.
|
||||
|
||||
### The `<head>` Tag
|
||||
|
||||
Before we start going insane with how good you are at HTML, let's start looking at something that you haven't played with yet. The `<head>` tag.
|
||||
|
||||
I mentioned before that in the `<head>` is information that the user doesn't see, so it's not that big of a deal, right? WRONG. It's not all about looks. That's at least what I try to tell people when they see me.
|
||||
|
||||
So. What else can go in the `<head>`? We've already got `<title>`, which we've talked about already to help search engines find us. What if we want to help the search engines out a bit more? Incoming, the `<meta>` tag.
|
||||
|
||||
The `<meta>` tag gives _metadata_ about the HTML document. Metadata will not be displayed on the page, but machines can read it. An example of metadata not on a webpage is in a typical music file. When you have a music file on your computer and you open it in some media player of some kind, it shows the album title, the artist, the genre, and other information about the song. This information is metadata. The user can't see it directly in the music file, but your music players can read it and will tell you what it is.
|
||||
So, on a website, this metadata is used by search engines, your browser, and other web services to make your website easy to find, read, and display.
|
||||
|
||||
There are 4 important uses for the `<meta>` tag. There are plenty of other uses, but let's be honest, I don't care about them right now, and I don't think you do either.
|
||||
Open up the **4 - Head** (heh get it? Forehead? I crack myself up.) folder, and open cooking.html in your favorite editor.
|
||||
|
||||
- _Defining keywords for search engines._ Let's say that you have a website that's about cooking, hence our filename. You want people searching for your website to be able to find it. So, you can add the following right before the `<title>` tag:
|
||||
|
||||
`<meta name="keywords" content="cooking, cook, recipe, food, microwave">`
|
||||
|
||||
Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice!
|
||||
|
||||
- _Defining a description of your site._ Again, this one is for the search engines. Whenever you search for a website, there's a tiny description in the search results. Go search for anything right now, and you'll see it. So, you can define what that is with this snippet:
|
||||
|
||||
`<meta name="description" content="The best cooking website in the entire universe. You're welcome.">`
|
||||
|
||||
Add this right after the keywords line in cooking.html. Now if people were searching for this, they'd get this description and instantly see that your website is the best cooking website in the universe.
|
||||
|
||||
- _Defining the author of a website._ Let's say that someone's looking for the author of your website, because your writing style is sexy. Or something. You can let them know who you are with the following:
|
||||
|
||||
`<meta name="author" content="Sexy McGoodlooking">`
|
||||
|
||||
Add this after your description line, and stick your name in it! I think I got it as close as possible.
|
||||
|
||||
- _Refreshing your document every 30 seconds._ This one is for your browser. Let's say that you have comments available on your recipes, and you want to have the page refresh so the comments can appear "live". Just add this:
|
||||
|
||||
`<meta http-equiv="refresh" content="30">`
|
||||
|
||||
And there you have it, a self-refreshing webpage. You're so good at this.
|
||||
|
||||
### Putting it all together so far
|
||||
|
||||
Okay, you have a pretty solid understanding of stuff so far. I want you to take cooking.html, and make it shine.
|
||||
Resize the images so the page is more uniform. Add borders to them. Change the font styles and weights. Change the colors. Add some keywords in the metadata and change the title of the page.
|
||||
Using the information I've given you so far, you can make a pretty good looking site!
|
||||
|
||||
## What, why did we stop?
|
||||
|
||||
This concludes Part 1 of this tutorial! You've done such a great job so far. You're so hot.
|
||||
[You can find Part 2 here.](http://cassidoo.github.io/html/css/tutorial/2014/02/10/html-css-tutorial-part-2/) Go get 'em!
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "I miss human curation"
|
||||
slug: human-curation
|
||||
description: "Where are my internet friends? And where are their weird blogs?"
|
||||
added: "Jan 12 2024"
|
||||
tags: [musings]
|
||||
---
|
||||
|
||||
I've been thinking a lot about the internet lately, like as a concept. It feels like... I don't know where everyone went.
|
||||
|
||||
Back in like... 2007, you'd find me checking out [MyLifeIsAverage](https://en.wikipedia.org/wiki/MyLifeIsAverage), maybe [StumbleUpon](https://en.wikipedia.org/wiki/StumbleUpon), and a few blogs of folks that I knew, who mostly shared videos and articles they liked. I had my own little forum (not gonna share it because I am okay with forgetting teenage Cassidy cringe), and practiced my HTML and CSS skills on a website that was... **so** early 2000s (which you can find in [a little feature in this zine](https://blog.glitch.com/post/you-got-this-zine) from the Glitch team).
|
||||
|
||||
|
||||
|
||||
When I say "I don't know where everyone went," I know everyone's out there _surfing the web_, of course, but it feels like it's a different place now. When the algorithms are determining everything we should be seeing, it's a much less personal internet. The "For You" pages of the world are right, I **am** interested in that content, but I'm not seeing it from my friends, or that one author I like, or that random blog I found when I was learning about an obscure hobby.
|
||||
|
||||
Especially now that Twitter is kind of a mess (I won't get into other social networks, but they all feel like this lately), the networks of people that I know are really hard to navigate. I can't really swing from profile to profile of friends like I did before. _The Algorithm_ wants me to see content relevant to me, not my friends. We don't have "affiliate links" in our website footers anymore to go down rabbit holes of other websites, and I rarely see a little corner of the internet that I can bookmark and check on regularly. Those spaces **do** exist, but they're just much, much harder to find.
|
||||
|
||||
As I noodled on this, I realized that in addition to my missing humans curating the content for me, it's also me curating what I want to see, when I want to see it, better. There was an interesting note in [Alexander Obenauer's lab notes](https://alexanderobenauer.com/labnotes/019/) about notifications, and this line stuck out to me: "fundamentally, the way notifications work in modern OSes is backwards: someone else decides when (and how often) my device wakes up to interrupt what I’m doing." In the earlier internet days, you went to a fun website or read the latest thing because you decided to go do it. Now, all of this content is [pushed in your face](https://www.nbcnews.com/health/health-news/teens-inundated-phone-prompts-day-night-research-finds-rcna108044), designed to be as addicting as possible, so you keep coming back. You can curate it to a point, but companies design these systems this way on purpose.
|
||||
|
||||
Eh. Anyway. I definitely sound like an old woman talking about "the good ol' days," but really I just miss humans driving what I see, no matter how quirky the content ends up being. I feel like the closest thing I have to that is my Discord friends (who are probably the main people reading this, hiiiiii), and I'm going to cling to them as it feels like the internet as we know it goes through some major changes with all of these AI doohickeys and algorithm thingamabobs.
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Ideal fishing spots"
|
||||
slug: ideal-fishing-spots
|
||||
description: "Sometimes our success is pushed to the side when the conditions aren't right, but that's okay."
|
||||
added: "Dec 18 2023"
|
||||
tags: [musings]
|
||||
---
|
||||
|
||||
My husband Joe is really into fishing. I've done it before myself, but it's a bit embarrassing because I am afraid of fish, so let's not get into it.
|
||||
|
||||
Anyway, he goes fishing at really weird and specific times, like, "5am in early December is ideal for perch in Lake Michigan" (is that sentence correct? Maybe? Eh) or, "if you want sheepshead fish, you GOTTA go to Florida" (sure, Joe).
|
||||
|
||||
Sometimes he comes home from fishing without catching anything, and he'll say something like, "the conditions weren't good, I'll just try again when they are." He'll be sad, but it doesn't stop him from fishing, and he's gotten a lot better over time.
|
||||
|
||||
I think this is a good metaphor for a lot of things. A lot of folks I know right now are struggling with job hunting, struggling with sales, struggling with getting things done, struggling with staying above water, etc. Maybe the conditions just aren't good right now. You can still work with them, push through, and get better over time.
|
||||
|
||||
Or be a scaredy cat, like me. Wee!
|
||||
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Inspirational quotes to get you through the day
|
||||
slug: inspirational-quotes
|
||||
description: These are some great quotes that have really helped me out!
|
||||
tags:
|
||||
- advice
|
||||
added: 2013-12-12T06:00:00.000Z
|
||||
---
|
||||
|
||||
Hey. You're looking ravishing as always.
|
||||
|
||||
Sometimes when I'm working hard over several hours on homework, it's hard to stay motivated to keep going. It's then that I try to listen to advice that people have given me to keep me working.
|
||||
|
||||
Here's some of that advice, for you.
|
||||
|
||||
"The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle."
|
||||
Steve Jobs
|
||||
|
||||
"No matter what you do, you'll make it through. What doesn't kill you makes you stronger. The thing they don't tell you is that it nearly kills you."
|
||||
Tyler Arnold
|
||||
|
||||
"Life's too short to be stuck in a job you hate."
|
||||
Kathryn Minshew
|
||||
|
||||
"If you really want to know where your destiny lies, look at where you apply your time. Time is the most valuable asset you don't own. You may or may not realize it yet, but how you use or don't use your time is going to be the best indication of where your future is going to take you… Don't follow your passions, follow your effort. It will lead you to your passions and to success, however you define it."
|
||||
Mark Cuban
|
||||
|
||||
"Do what you say you're going to do."
|
||||
Danielle LaPorte
|
||||
|
||||
"Work hard and be nice to people."
|
||||
Marie Burns
|
||||
|
||||
"In chaos, there is opportunity. Most major career accelerations happen when someone steps into a mess and makes a difference."
|
||||
Kristi Hedges
|
||||
|
||||
"You can do this. You wouldn't be given all the work in front of you if you couldn't do it. Also I think you're hot."
|
||||
Cassidy Williams
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Jumblie 100
|
||||
slug: jumblie-100
|
||||
description: Today is the 100th Jumblie puzzle day!
|
||||
tags:
|
||||
- personal
|
||||
- events
|
||||
- technical
|
||||
added: 2024-01-11T06:52:49.475Z
|
||||
---
|
||||
|
||||
I am really, really excited to have made it to... _drum roll_...
|
||||
|
||||
> Jumblie #100
|
||||
> 🟠🔴🟢🔵
|
||||
> 4 guesses in 40s
|
||||
|
||||
That's right, it's the **100th** [Jumblie](https://jumblie.com/) puzzle!
|
||||
|
||||
I've already talked about [how I built it](https://blog.cassidoo.co/post/jumblie-build-log/) and how I'm adding features here and there, so I'm not going to get into that.
|
||||
|
||||
Really, I'm just excited to celebrate this small milestone for my little game. It makes me so happy to see people playing it, and hearing that folks like it (especially when people say that their non-techie families play it, that is just the best).
|
||||
|
||||
Please do [submit your puzzle ideas](https://jumblie.com/suggest/)! I love seeing how clever some of them are, and I'm planning out more features around submissions and stuff, too.
|
||||
|
||||
|
||||
@@ -1,196 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Jumblie Build Log
|
||||
slug: jumblie-build-log
|
||||
description: 'I built Jumblie, a jumbled word search game. Here''s how!'
|
||||
tags:
|
||||
- learning
|
||||
- technical
|
||||
added: 2023-11-28T18:50:37.893Z
|
||||
---
|
||||
|
||||
I built a word game called [Jumblie](https://jumblie.com) that I'm very excited about, and I'm gonna tell you how I did it! This is gonna be long, so buckle up.
|
||||
|
||||
## Why I built it
|
||||
|
||||
A friend of mine, [Jason](https://www.learnwithjason.dev/), is starting a video series where he gives 4 developers 1 idea (aptly named **[4 Web Devs, 1 App Idea](https://youtu.be/zR8dUhLPK80?si=8GLivmrZ6B_ILRuk)**, wow), and he asked us to build something that could use a leaderboard.
|
||||
|
||||
When I see "leaderboard" I think "game" which meant I had to come up with a very fun game worth playing, and build it in less than a couple weeks.
|
||||
|
||||
## How I came up with it
|
||||
|
||||
Not to be a mega-shill for my own company, but we have an app called [Brainstory](https://www.brainstory.ai/) that I'm really into. You can use it to brainstorm ideas, and I needed to think hard about what sort of game I wanted to make!
|
||||
|
||||
I came to Brainstory saying "sooo I want to make a game" and slowly but surely it walked me through some of my thoughts around complexity and themes, and I came up with the concept of a jumbled word search game!
|
||||
|
||||
I knew I wanted to:
|
||||
|
||||
* Make a daily puzzle that changes each day
|
||||
* Have 4, 5, 6, and 7 letter words, jumbled together
|
||||
* Make it play kind of like the [New York Times Connections](https://www.nytimes.com/games/connections) game
|
||||
* Have it be mobile and desktop friendly
|
||||
|
||||
## What I did next
|
||||
|
||||
Obviously I bought the domain name first. Duh.
|
||||
|
||||
## But actually though, what I did next: gathered words
|
||||
|
||||
Okay so I knew I wanted to jumble the 4 random words together, but I didn't have piles of words to pull from. So, I literally googled "lists of words with 4 letters" (and 5 letters, and 6, and so on), and scraped the lists just in the developer console of the browser, and pasted those into text files.
|
||||
|
||||
Then, I wrote Python, which is not something I should ever be allowed to do, and used it to pull out words at random into a JSON array of arrays of 4, 5, 6, and 7 letter words:
|
||||
|
||||
```python
|
||||
import json
|
||||
import random
|
||||
|
||||
def read_words(filename):
|
||||
with open(filename, 'r') as file:
|
||||
return file.read().splitlines()
|
||||
|
||||
def create_game_data():
|
||||
words_4 = read_words('4words.txt')
|
||||
words_5 = read_words('5words.txt')
|
||||
words_6 = read_words('6words.txt')
|
||||
words_7 = read_words('7words.txt')
|
||||
|
||||
game_data = []
|
||||
|
||||
for _ in range(min(len(words_4), len(words_5), len(words_6), len(words_7))):
|
||||
game_data.append([
|
||||
random.choice(words_4),
|
||||
random.choice(words_5),
|
||||
random.choice(words_6),
|
||||
random.choice(words_7)
|
||||
])
|
||||
|
||||
return game_data
|
||||
|
||||
def write_json(data, filename):
|
||||
with open(filename, 'w') as file:
|
||||
json.dump(data, file, indent=4)
|
||||
|
||||
def main():
|
||||
game_data = create_game_data()
|
||||
write_json(game_data, 'wordlist.json')
|
||||
```
|
||||
|
||||
The output was very simple:
|
||||
|
||||
```js
|
||||
[
|
||||
["vote", "serve", "trucks", "upscale"],
|
||||
["fast", "point", "wooden", "general"],
|
||||
["heal", "wound", "forest", "wrestle"],
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
But as you can imagine, when I made my first prototype of the game, it was... impossible to win.
|
||||
|
||||
|
||||
|
||||
It was just too hard! I had my braintrust (a.k.a. my cousin group chat) play it and one of my poor cousins had 81 guesses with no success. Noah, if you're reading this, I'm still so sorry.
|
||||
|
||||
Back to the drawing board, I had to come up with a way to make this game significantly easier. My sister had recommended I come up with a theme for each of the groups of words, which meant I had to do some sorting.
|
||||
|
||||
## Enter... large language models
|
||||
|
||||
I work at an AI company, I should probably think to use AI more in general.
|
||||
|
||||
I first thought that I'd keep all of my words that I had already scraped from the internet, and just ask the LLM to sort them all.
|
||||
|
||||
I prompted:
|
||||
|
||||
```
|
||||
I have a JavaScript array of objects. Each object has a property words that has an array of 4 words (each with 4 letters, then 5 letters, then 6 letters, then 7 letters).
|
||||
|
||||
For example:
|
||||
|
||||
[
|
||||
{ words: ["gods", "truck", "anodes", "bifocal"] },
|
||||
{ words: ["heal", "wound", "forest", "wrestle"] },
|
||||
{ words: ["shop", "bound", "august", "numbers"] }
|
||||
]
|
||||
|
||||
I want you to rearrange all of the words across the arrays by theme (while still having each one with 4 letters, then 5 letters, then 6 letters, then 7 letters), and add a theme property to each element, providing a theme for the 4 words.
|
||||
|
||||
(and then I pasted my mega array)
|
||||
```
|
||||
|
||||
But, this... was not a good output. I really learned that generating a new dataset is significantly easier than working with an existing one when you're using LLMs. LLMs are good at making stuff up.
|
||||
|
||||
I talked to my coworker Kevin (thanks Kevin) who gave me some tips on messing with prompting and formatting. There were quite a few things I learned, for example LLMs have general semantic knowledge of words, but not really the actual length of words. I got some amusing outputs where the LLM actually knew that it was wrong:
|
||||
|
||||
```json
|
||||
{
|
||||
lengths: [4, 5, 6, 7],
|
||||
words: ["pear", "apple", "banana", "cherries"],
|
||||
theme: "Fruits",
|
||||
isValid: false
|
||||
},
|
||||
```
|
||||
|
||||
Also, as outputs get longer, the LLMs get more and more inaccurate. I would get responses that were good for like the first 50 or so words, but if I wanted something closer to 1000, it would offer worse and worse output. There were times where it would give me the theme "finance" and the words would be like "microeconomics" and "macroeconomics" for the shortest words, or I would ask it for themes and it would start with something like "ocean" and end up with "Space Battle Royale Candyland Confectionary" (which was honestly very funny but incredibly hard to work with).
|
||||
|
||||
Eventually, I had a prompt that would allow for multiple kinds of words per theme, and I wrote a script on top of that to choose words from the output:
|
||||
|
||||
```
|
||||
Give me a list of themes. For each theme, generate a list of words that fit that theme, broken up by length. The lengths should always be between 4 and 7 letters. Never include other word lengths! For example:
|
||||
|
||||
{
|
||||
space: {
|
||||
4: ["mars", "moon", "star", ...],
|
||||
5: ["comet", "earth", "venus", ...],
|
||||
6: ["galaxy", "nebula", ...],
|
||||
7: ["jupiter", "mercury", ...]
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
It wasn't the best output, but I was able to get a solid 150 or so themes and word combos (and I decided to also let it occasionally go up to 9 letters because the poor bot couldn't handle the restrictions), which would take me far enough that I could actually implement the game.
|
||||
|
||||
## Actually building the game
|
||||
|
||||
Some might say I over-engineered this game already, but I prefer the term "thoroughly thought-out". I decided to also continue this line of thorough thinking by building the app without any frameworks, just pure HTML, CSS, and JavaScript. Probably not the best move in hindsight. We live and we learn.
|
||||
|
||||
Anyway! Jumblie was about as basic as it could get at first, where it would take the letters from the day's words, jumble them up, and plop them on the screen as clickable buttons, with the theme displayed on the screen as well.
|
||||
|
||||
|
||||
|
||||
After this, it... just worked. I added a scoring setup so that based on the word you guessed, it would be assigned to a color, and you could copy the score just like with games like Wordle and Connections:
|
||||
|
||||
> Jumblie #12🟠🔴🔵🟢5 guesses
|
||||
|
||||
I went from this to adding features like keyboard support (which was painful, because events when you click buttons versus when you type are treated differently in the browser), a shuffling option (which was also painful, because I had to refactor how letters were differentiated on the screen), handling duplicate guesses (which was again painful because when you don't use a framework, you gotta do some really funky imperative programming where you select the div, select the word in the div, compare it with the current guess, etc), and a timer (which was actually not that painful, phew).
|
||||
|
||||
## Remember why you built this, Cassidy?
|
||||
|
||||
But, I still needed a leaderboard! I... ran out of time to build a real one against your friends. But the best competition is against yourself, I say! Right? Eh. Anyway.
|
||||
|
||||
I set up local storage to:
|
||||
|
||||
* Save your best times while playing
|
||||
* Save your longest streak while playing the game
|
||||
* Save your current streak
|
||||
|
||||
You know what's fun? Time zones. My word, time zones. A very common ask from folks was asking for pausing functionality and autosaving if you exit the game, and my word, setting up time zones with this scoring and the personal leaderboards made me lose far too much sleep and happiness. But, once I finally, finally fixed all of them (she said, foolishly), the personal leaderboard setup was complete!
|
||||
|
||||
## Freeeeedom!
|
||||
|
||||
Since "finalizing" the game, I've been so happy with how much people play it! I added [Fathom Analytics](https://usefathom.com/ref/CDEUHI) out of curiosity to see how it was doing (which was a learning experience in itself, because ad blockers made certain game functionality not work unless I "rearranged" where the analytics stuff lived), and as of writing, there's around 800-1000 people who play it daily!
|
||||
|
||||
I've since added features like:
|
||||
|
||||
* Ability to add the game to your home screen
|
||||
* [A puzzle archive](https://jumblie.com/archive/)
|
||||
* [A way for users to suggest new puzzles](https://jumblie.com/suggest/) (because I am NOT going to deal with AI again for that)
|
||||
|
||||
I've gotten some other requests for things like internationalization (which would take a fairly large refactor I admit), actual shared leaderboards with friends, and a mobile app! I'm thinking about how I'll implement those, but until then, I'm super happy where Jumblie is at right now.
|
||||
|
||||
Some of my favorite feedback is from folks who are not in my circles at all. Some folks have messaged me saying that this is their family group chat's favorite game now, some others have said that it gives them the right level of difficulty beyond Wordle, and I've even gotten some fun traction from [fans of the show Devil's Plan](https://middleclass.sg/trending/jumblie-the-devils-plan/), because there was a similar game on the show!
|
||||
|
||||
Phew, anyway, if you'd like to play it, **check out [Jumblie here](https://jumblie.com) and please do share it with your friends!**
|
||||
|
||||
Until next time!
|
||||
@@ -1,76 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Jumblie has a database!"
|
||||
slug: jumblie-db
|
||||
description: "Using the power of Supabase and Netlify Build Plugins, I was able to make Jumblie a bit cleaner under the hood!"
|
||||
added: "Feb 25 2024"
|
||||
tags: [technical, learning]
|
||||
---
|
||||
|
||||
If you haven't played [Jumblie](https://jumblie.com) yet, you should!
|
||||
|
||||
I've talked about [how I made Jumblie](https://blog.cassidoo.co/post/jumblie-build-log/) before. Long story short: it's very vanilla HTML, CSS, and JavaScript, and doesn't have any dependencies.
|
||||
|
||||
That being said, the way puzzles are generated every day is very manual: I update a JavaScript object in a plain ol' file in the repository to add them on occasion. As you can imagine, that's not very sustainable or practical! But, I didn't want to make the codebase more complicated by pulling from a database and potentially having to install/rewrite a bunch of things.
|
||||
|
||||
I ended up coming up with a solution using [Supabase](https://supabase.com/) and [Netlify Build Plugins](https://docs.netlify.com/integrations/build-plugins/) that I'm pretty happy with!
|
||||
|
||||
## The Supabase side
|
||||
|
||||
On the Supabase side, it was pretty straightforward to throw together a table of all of the puzzles so far, as well as some upcoming ones. I did some funky conversions and scripting to turn my original large JS object into a CSV file, which I could then import directly into a new database.
|
||||
|
||||
Supabase does have a well-supported [JavaScript client library](https://supabase.com/docs/reference/javascript/introduction) that I almost used, but because I wanted the script to be in a build plugin, I ended up just doing a simple REST query.
|
||||
|
||||
```js
|
||||
const response = await fetch(`${supabaseUrl}/rest/v1/${tableName}`, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
apikey: supabaseKey,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Which brings me to...
|
||||
|
||||
## The Build Plugin side
|
||||
|
||||
I decided on a Netlify Build Plugin approach because I realized that I didn't have to query Supabase every single time the page was loaded by a user, but rather just when I need to load in some new puzzles. So, when I hit the snazzy deploy button, the build plugin is called `onPreBuild` (so right before things are built and deployed), it pulls the puzzles from Supabase, and creates a new file that has all of the content for the rest of the site to query!
|
||||
|
||||
```js
|
||||
const fs = require("fs");
|
||||
|
||||
module.exports = {
|
||||
onPreBuild: async () => {
|
||||
const outputFile = "./wordList.js";
|
||||
|
||||
// ... Supabase query ...
|
||||
|
||||
// content from Supabase
|
||||
const data = await response.json();
|
||||
|
||||
const fileContent = `const wordList = ${JSON.stringify(data)};`;
|
||||
fs.writeFileSync(outputFile, fileContent);
|
||||
|
||||
console.log(`Successfully saved word list to ${outputFile} 🔥`);
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Because the output of this combo is almost exactly the same as what it was before (the `wordList` file is just populated from the database instead of from my occasionally updating it), I didn't have to change any game logic.
|
||||
|
||||
Installing the plugin was just adding these lines to the `netlify.toml`!
|
||||
|
||||
```toml
|
||||
[[plugins]]
|
||||
package = "/plugins/get-words"
|
||||
```
|
||||
|
||||
And that's it! In summary, we have a Netlify Build Plugin that creates a file, populates it with data from Supabase, and saves that file to the build, and it's referenced throughout the codebase.
|
||||
|
||||
## Woo hoo!
|
||||
|
||||
I hadn't worked on a build plugin in a long time, and haven't used Supabase in a while either, so it was a fun little learning experience to make something like this! My dream plan is to be able to set up accounts and stuff so that you can save progress and play old puzzles, so this felt like a good step in that direction. But until then, it's the same ol' Jumblie to users, but much cleaner under the hood.
|
||||
|
||||
All of the logic for this entire improvement was less than 30 lines of code! [You can see it here](https://github.com/cassidoo/jumblie/blob/main/plugins/get-words/index.js), along with the rest of the Jumblie game code.
|
||||
|
||||
Go play [Jumblie](https://jumblie.com), and [suggest a puzzle](https://jumblie.com/suggest/) if you'd like!
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "L4 Digital: First Impressions"
|
||||
slug: l4-digital-first-week
|
||||
description: "This week was my first week at L4 Digital!"
|
||||
added: "Dec 02 2016"
|
||||
tags: [work]
|
||||
---
|
||||
|
||||
Hello, world!
|
||||
|
||||
This week was my first at L4 Digital. I came in as a new Seattleite, nervous and excited to see what this new gig would be like, and boy, was I impressed!
|
||||
|
||||
On Monday, I officially joined and started setting up my computer and meeting people. It was all sorts of HR-type stuff, filling out forms and getting an office tour. The office is wonderful. The building dates back to 1893, and inside there's classic elements like exposed brick and beamed ceilings surrounding the glass conference rooms and seas of monitors and gadgets. One of the rooms is dedicated entirely to foosball (there was a team of people who even built a live scoreboard with bluetooth button score tracking and a Slack integration for it), and there's another room with various video games and a 3D printer that anyone can use! One thing that I also really appreciated was L4's "phone museum" that is chock-full of old and new devices. The Director of Engineering, Ben, told me about how difficult it was to program for those old Palm Pilots and Samsung flip phones. I can only imagine!
|
||||
|
||||
On Tuesday and Wednesday, I got more integrated into the team. I was put on a project and started configuring my computer for some exciting dev work. While doing so I ended up open sourcing my vim configuration files, so anyone can get up and running with vim quickly:
|
||||
https://github.com/cassidoo/vim-up
|
||||
|
||||
Now Thursday was a special day (not that all days at L4 aren't). Every first Thursday of the month, L4 has what they call "First Thursdays", which involves a company-wide meeting of updates, project demos, and introductions. We talked about our new parent company, Globant, as well as a bunch of fun and interesting internal projects. L4 has something called "L4ge" where people can work on projects with people outside of their teams. Some of those projects included an Alexa receptionist, and a full-on classic arcade cabinet! After the meeting, everyone headed to a company happy hour nearby, where I got to meet more coworkers and be social with everyone.
|
||||
|
||||
Finally, Friday, I got to dive into code! My machine was finally all set up, so I made my first pull requests in the codebase. I also got to play some Super Smash Brothers, watch a pushup contest (I politely declined participating when the first person did over 50 of them), join a book club, learn how to use the 3D printer, and try out some of the great office snacks. Not bad for a Friday.
|
||||
|
||||
So, the first week is up! L4 has made a great first impression on me. I'm so excited to be a part of a creative, exciting group of people. Everyone has such a diverse set of interests, and they really emphasize celebrating those here. I know I made the right choice joining a team like L4, and I'm eagerly anticipating Monday!
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Making a single line break in markdown
|
||||
slug: line-break-md
|
||||
description: Here's how you can add single line breaks in your markdown documents!
|
||||
tags:
|
||||
- technical
|
||||
added: 2023-12-10T06:00:00.000Z
|
||||
---
|
||||
|
||||
Sometimes when you write markdown, you'll write some paragraph...
|
||||
|
||||
and then you hit "Enter" twice to make another paragraph.
|
||||
|
||||
```
|
||||
Like this...
|
||||
|
||||
...and then this.
|
||||
```
|
||||
|
||||
This will render:
|
||||
|
||||
```html
|
||||
<p>Like this...</p>
|
||||
<p>...and then this.</p>
|
||||
```
|
||||
|
||||
But, sometimes you want to make a single line break, kind of like in HTML where you have:
|
||||
|
||||
```html
|
||||
<p>
|
||||
Like this... <br />
|
||||
...and then this.
|
||||
</p>
|
||||
```
|
||||
|
||||
In markdown, you **can** just drop in a `<br />` and it'll work perfectly fine. But, if you want to keep your markdown HTML-less, you can add a backslash `\` after your line, like so!
|
||||
|
||||
```
|
||||
Like this...\
|
||||
...and then this.
|
||||
```
|
||||
|
||||
This is supported in _most_ markdown processors, but not all of them. Definitely check on the one you're using before you push to prod. Some processors also allow you to add a double space at the end of a line as well (truly just ` `, hit your spacebar twice), but since a lot of code editor setups trim empty spaces, I personally prefer the backslash way.
|
||||
|
||||
Have\
|
||||
fun!
|
||||
@@ -1,33 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Things you should have on your LinkedIn profile
|
||||
slug: linkedin-profile-things
|
||||
description: People should know what you're about!
|
||||
tags:
|
||||
- advice
|
||||
added: 2013-11-26T06:00:00.000Z
|
||||
---
|
||||
|
||||
Hello friends!
|
||||
|
||||
Now I know what you're thinking. "I'm attractive, and that'll get me a job after college. Why do I need a LinkedIn?"
|
||||
|
||||
Well, the harsh reality is, the world thinks you're beautiful, but that's the least interesting thing about you. It wants to see your work ethic, your personality, and your LinkedIn profile.
|
||||
|
||||
So let's give the world what it wants.
|
||||
|
||||
Firstly, you'll want your professional name on there. No nicknames. As much as I want to put my common name (Cassie "The Rock" Danger Girl) on there, I know that Cassidy will have to do, and it will have to for you too.
|
||||
|
||||
Secondly, you'll want a professional photo. I know that selfie of you with 50 grapes in your mouth is impressive, but typically companies don't put that in job descriptions. So, get someone to take a photo of you where you're looking sharp!
|
||||
|
||||
Manage your endorsements! If you want more people to endorse you for the fact that you know Spanish, ask them to. They affect how you appear in LinkedIn search results. The average number of endorsements per LinkedIn user is 5, but it's much easier than you think to get more. I recommend trying to get 12 for as many skills as possible. That's the maximum number of pictures that show per skill, so it looks more impressive on your profile visually.
|
||||
|
||||
Build credibility with some recommendations! A few recommendations from respected people like a professor, mentor, coworker, or boss can really help you out and establish your credibility. You might have to ask for them, but it's worth it!
|
||||
|
||||
Join relevant groups. There's a ton of groups on LinkedIn for people from different companies, events, schools, interests, etc. 81% of LinkedIn users belong to at least one group. When you have those showing up on your profile, it can really show potential employers what your interests are and which organizations you're a part of. Plus, you can use group messaging to contact other group members about potential opportunities.
|
||||
|
||||
And finally, show your stuff! Post your projects, classwork, test scores, patents, certifications, volunteer activities, extracurriculars, anything that will help you become more marketable! Add pictures, videos, and descriptions to really show what you did.
|
||||
|
||||
Your LinkedIn profile is your public facing profile to employers all over the country. Help them help you find a job, internship, co-op, or work study!
|
||||
|
||||
Talk to you soon, my lovelies \<3
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Loving and hating the streak"
|
||||
slug: the-streak
|
||||
description: "I have a love/hate relationship with my GitHub streak."
|
||||
added: "Jan 27 2023"
|
||||
updated: "Dec 27 2023"
|
||||
tags: [work, personal, musings]
|
||||
---
|
||||
|
||||
My GitHub streak right now (January 27, 2023) is like, really good. Today marks 1 full month: I haven't missed a day of committing since December 27th! Whew! Watch out world! She's a woman in STEM! She's a girl who codes! Live, laugh, love!
|
||||
|
||||
I'm definitely thinking those unhealthy thoughts of, "dang, if only I committed code on Christmas Eve, Christmas Day, and the day after, so the streak could be even **longer**." Who needs family when you have a GitHub streak?!
|
||||
I haven't really been purposely committing daily, it's just been one of those times where I have a lot to do at work, and I have the mental energy and motivation to work on some of my side projects as well. And I gotta say, it's pretty dang fun to see the streak work, but I also feel the unhealthy relationship with it lingering.
|
||||
|
||||
I don't ever want to code just to have the streak. That kind of motivation doesn't last very long. I feel like this sentiment is anti-"everything you read about in productivity books," (in [Atomic Habits](https://jamesclear.com/habit-tracker) they literally call the people who track the streak "elite performers").
|
||||
But, I also know myself, and know that if I am motivated by the streak too much, the streak will stress me out and I'll code and commit less for enjoyment and usefulness, and more purely for the streak, which feels... icky. It's like when the Duolingo owl haunts me to practice a language and the stress and guilt stops me from actually learning. Only this time, it's those alluring green squares dancing on the screen.
|
||||
|
||||
|
||||
|
||||
I'm probably overthinking this. I'll probably lose my streak within 48 hours of writing this and I'll be like "eh, it was good while it lasted," and move on. But at this point, I'm... feeling good about the progress I've been making on projects, hoping to keep it up for the joy of actually getting code written, and trying very hard to not fall into streak-motivated work.
|
||||
|
||||
**Update exactly 11 months later:** I kept the streak. It was probably unhealthy. You can see exactly when I gave birth and when I went back to work. But it was FUN and WORTH IT.
|
||||
|
||||
|
||||
|
||||
I was able to ship more this year than I have in a long time. I committed code to both public and private repos, reviewed pull requests, made + solved issues, and made fun projects like [Jumblie](https://jumblie.com/) and [Thirteen Potions](https://cassidoo.itch.io/thirteen-potions) and [Cardstock](https://github.com/cassidoo/cardstock)! I don't plan on keeping the pace up (especially with a baby who is increasingly aware of screens), but it was a fun year.
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Making the Whitney Houston API"
|
||||
slug: whitney-houston-api
|
||||
description: "I made a Whitney Houston API. Because why not."
|
||||
added: "Jul 26 2015"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
I'm a Whitney Houston fan. Anyone who's known me for more than a [moment in time](https://www.youtube.com/watch?v=c84ogrNEds0) would know that (see, making references already, agh I'm so funny).
|
||||
|
||||
Anyway, I took a nap the other day and I dreamt that I made a Whitney Houston API. So obviously I had to make one.
|
||||
|
||||
But, I had never made an API from scratch before. [I had nothing](https://www.youtube.com/watch?v=FxYw0XPEoKE). But I had to try.
|
||||
|
||||
First, I had to get all of the songs she ever recorded. Wikipedia came to save the day. I scraped [the article of all of her songs](https://en.wikipedia.org/wiki/List_of_songs_recorded_by_Whitney_Houston) with a Python script, and then got to work on parsing it. Let me tell you, it was not fun. The HTML in Wikipedia tables is a pain in the BUTT to deal with. Sure, I _could_ do it, but I wouldn't wish that mess on anyone. So, I said to myself, [it's not right, but it's okay](https://www.youtube.com/watch?v=6J538b-OLRU), I'll get through this.
|
||||
Once I filtered out a lot of crap (like stripping out the links and the special characters) and broke it down into something readable, it looked more like this:
|
||||
|
||||
```
|
||||
"Could I Have This Kiss Forever"
|
||||
Whitney Houston and Enrique Iglesias
|
||||
Diane Warren
|
||||
Whitney: The Greatest Hits and Enrique
|
||||
2000
|
||||
|-
|
||||
```
|
||||
|
||||
So, it had the title of each song, the artists who sang (most of these were just Whitney), the writer(s), the albums on which the song appeared, and the year it was released. And the weird `|-` delimiter between them.
|
||||
|
||||
The next stop was to convert all of this to JSON. I was all, "[I look to you](https://www.youtube.com/watch?v=5Pze_mdbOK8)" to [JSON API](http://jsonapi.org/) and Stack Overflow at this point so I could make sure I was formatting everything properly. Some kind folks helped me refactor my original script I wrote into this efficient one here:
|
||||
|
||||
```py
|
||||
from itertools import groupby
|
||||
import json
|
||||
names = ["title", "artist","writer","album", "year"]
|
||||
|
||||
with open("test.csv") as f, open("out.json","w") as out:
|
||||
grouped = groupby(map(str.rstrip,f), key=lambda x: x.startswith("|-"))
|
||||
for k,v in grouped:
|
||||
if not k:
|
||||
json.dump(dict(zip(names,v)),out)
|
||||
out.write("\n")
|
||||
```
|
||||
|
||||
Thanks so much to [Padraic Cunningham](http://stackoverflow.com/users/2141635/padraic-cunningham) for the assistance with this one. I really wanted to make a reference to the song, [Same Script, Different Cast](https://www.youtube.com/watch?v=5FQgxxJ0Jrg) just because of the excellent pun but the show must go on.
|
||||
|
||||
Anyway.
|
||||
|
||||
I finally had some clean JSON that I could work with!
|
||||
|
||||
At this point, I was doing a TON of research into how to actually make an API just from JSON. I didn't want anything fancy like a database or anything, because I figured just a GET would do for this project. After asking plenty of questions here and there and starting and restarting and asking myself [why does it hurt so bad](https://www.youtube.com/watch?v=_EHoj-Oe-Ws) to just do something simple, I found [Instant API](https://github.com/jbradforddillon/instant-api-py)! It was a great solution, and seemed pretty extensible.
|
||||
|
||||
After tweaking and adding some functionality of my own (like an `/all/album` route for example, for each of the groups), I had it! My first API. Sure, it's not perfect, and I'd like to add in functionality for lyrics and other queries, but for now, I'm [celebrating](https://www.youtube.com/watch?v=zgsIGEm3f7w)! [I learned from the best](https://www.youtube.com/watch?v=YFVnVuTcz9I) people on Stack Overflow and in various Facebook groups, so thanks to all of those who helped me understand all of this!
|
||||
|
||||
[Here's a link to the Whitney Houston API](https://github.com/cassidoo/whitney-api). Again, it's still a work in progress, but it's been fun so far!
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Geek mama... saying no
|
||||
slug: mama-says-no
|
||||
description: 'I can''t "do it all" right now, but I can do some. Sometimes.'
|
||||
tags:
|
||||
- personal
|
||||
added: 2023-12-13T05:55:07.953Z
|
||||
---
|
||||
|
||||
I said no to something today. It sucks when I have to do that. Typically I'm very much a champion of, "say NO more often!" and "don't push yourself too hard!" (and I stand by that). But in this case, bleh, it hurts a bit. I had signed up for a (live, not recorded) course that I was pretty excited about, and paid for it, and even did a little office rearranging to prepare for it.
|
||||
|
||||
But... I have to remember that I'm a new parent, with a busy job, with obligations, and I can't just sign up for nerdy things that sound fun. Which sounds more depressing than it is. It's just a mindset shift. I have more limited time, currently, and I have to pick things that I can do async, when I can grab a spare moment, until I can have a more predictable schedule. I'm learning how to be more efficient with the time I have, and more patient with myself when I can't do as much as I want to.
|
||||
|
||||
Justin Jackson wrote [a post kind of like this](https://justinjackson.ca/geek-dad) a while back, and his line, "but now's not the time" resonates with me right now.
|
||||
|
||||
I really care about my hobbies, and I want my daughter to see me enjoying non-work things as she grows up. So, though I can't do **all the things** as much as I used to (until she's a bit more self-sufficient, at least), I can do the more important things. Slowly but surely, she might just do them with me, too.
|
||||
107
src/posts/markdown-example.md
Normal file
107
src/posts/markdown-example.md
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Markdown Example
|
||||
slug: markdown
|
||||
description: >-
|
||||
Check out how markdown is rendered!
|
||||
tags:
|
||||
- technical
|
||||
added: "May 09 2024"
|
||||
---
|
||||
|
||||
This is an example blog post!
|
||||
|
||||
# Heading 1
|
||||
|
||||
This is an example lil thingy wow look at me!
|
||||
|
||||
## Heading 2
|
||||
|
||||
### Heading 3
|
||||
|
||||
#### Heading 4
|
||||
|
||||
##### Heading 5
|
||||
|
||||
###### Heading 6
|
||||
|
||||
I'm baby tumblr deep v franzen [umami hammock](https://google.com) scenester retro VHS, pop-up truffaut tacos polaroid gochujang. Jean ugh _vexillologist snackwave keytar williamsburg bitters pinterest_. Photo booth schlitz quinoa tbh edison bulb vexillologist occupy single-origin dreamcatcher. **Chartreuse meggings gochujang synth.** Narwhal green juice snackwave thundercats kickstarter XOXO deep v.
|
||||
|
||||
1. numbered
|
||||
2. list
|
||||
3. of
|
||||
4. items
|
||||
|
||||
Hello there, welcome to my list.
|
||||
|
||||
- list
|
||||
- of
|
||||
- items
|
||||
- nested
|
||||
- list
|
||||
- wow
|
||||
|
||||
## Hello, babies, I think that you need to understand what a long line length is
|
||||
|
||||
V franzen umami hammock scenester retro VHS, pop-up truffaut tacos polaroid heirloom gochujang.
|
||||
|
||||
- [x] hello
|
||||
- [ ] these
|
||||
- [x] are
|
||||
- [ ] tasks
|
||||
|
||||
**bold** _italic_
|
||||
**_bold and italic_**
|
||||
~~strikethrough~~
|
||||
==highlighted text==
|
||||
|
||||
```js
|
||||
// This is an example of some React
|
||||
|
||||
useEffect(() => {
|
||||
let isCurrent = true;
|
||||
|
||||
if (isCurrent === true) {
|
||||
fetch("...");
|
||||
}
|
||||
|
||||
return () => {
|
||||
isCurrent = false;
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
Language-less:
|
||||
|
||||
```
|
||||
useEffect(() => { // wow
|
||||
let isCurrent = true;
|
||||
|
||||
if (isCurrent === true) {
|
||||
fetch('...')
|
||||
}
|
||||
|
||||
return () => {
|
||||
isCurrent = false;
|
||||
}
|
||||
}, [])
|
||||
```
|
||||
|
||||
A horizontal line:
|
||||
|
||||
---
|
||||
|
||||
Some inline `code` between normal text
|
||||
|
||||
> A blockquote, lorem ipsum dolor
|
||||
|
||||
Just some normal text, wow.
|
||||
|
||||
---
|
||||
|
||||
| Example table | Example things |
|
||||
| ------------- | -------------- |
|
||||
| What | how |
|
||||
| Why | when |
|
||||
|
||||
Okay, that's it! Good luck! Write more! Follow your dreams!
|
||||
@@ -1,50 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Maternity TV"
|
||||
slug: maternity-tv
|
||||
description: "The shows that I've watched during my maternity leave"
|
||||
added: "Jul 14 2023"
|
||||
tags: [personal]
|
||||
---
|
||||
|
||||
I normally don't watch a ton of TV, but on my maternity leave while holding/playing with/changing/carrying my baby I had _a lot_ of things on the big screen to occupy my brain as my hands were full! This is a list of the TV shows I saw (or at least had on in the background), in no particular order. I watched movies too (mostly musical ones so I could sing to the baby) but I can't be bothered to list those as well.
|
||||
|
||||
## Shows I watched
|
||||
|
||||
- [Girls5Eva](https://www.imdb.com/title/tt11650492/) (funniest show I've seen in a really long time)
|
||||
- [Veep](https://www.imdb.com/title/tt1759761/)
|
||||
- [Bloodhounds](https://www.netflix.com/title/81444051) (so violent and very much a bro show, but well done)
|
||||
- [Poker Face](https://www.imdb.com/title/tt14269590/) (the TWISTS)
|
||||
- [Marvelous Mrs. Maisel](https://www.imdb.com/title/tt5788792/)
|
||||
- [Ted Lasso](https://www.imdb.com/title/tt10986410/) (very wholesome, not my favorite show in the world but it was a nice show)
|
||||
- [Project Runway](https://www.bravotv.com/project-runway)
|
||||
- [Top Chef](https://www.bravotv.com/top-chef)
|
||||
- [Survivor](https://www.cbs.com/shows/survivor/)
|
||||
|
||||
## Shows I re-watched
|
||||
|
||||
- [The Office: Superfan episodes](https://www.imdb.com/title/tt27738382/) (added some new elements to the show that were so great)
|
||||
- [Community](https://www.imdb.com/title/tt1439629/)
|
||||
- [Business Proposal](https://www.imdb.com/title/tt14819828/) (one of my fave k-dramas!)
|
||||
- [Alone](https://www.history.com/shows/alone)
|
||||
- [Kim's Convenience](https://www.imdb.com/title/tt5912064/) (never watched it all the way through before, and I am very sad it was cancelled)
|
||||
- [Grace & Frankie](https://www.imdb.com/title/tt3609352/)
|
||||
- [Black-ish](https://www.imdb.com/title/tt3487356/)
|
||||
|
||||
## Shows I purposely didn't finish
|
||||
|
||||
- [Suits](https://www.imdb.com/title/tt1632701/) (stopped around season 3, there was a lot of "if you don't tell the truth, I WILL" and I got tired of it)
|
||||
- [The Good Wife](https://www.imdb.com/title/tt1442462/) (too serious)
|
||||
- [Doogie Kamealoha, M.D.](https://www.imdb.com/title/tt12225230/)
|
||||
- [Hack my Home](https://www.netflix.com/title/81319212)
|
||||
- [Sweet Tooth](https://www.imdb.com/title/tt12809988/)
|
||||
- [Siren: Survive the Island](https://www.netflix.com/title/81631016) (just lost interest on this one)
|
||||
- [Workin' Moms](https://www.imdb.com/title/tt6143796/)
|
||||
- [Beef](https://www.imdb.com/title/tt14403178/) (a little too intense for me)
|
||||
- [The Bear](https://www.imdb.com/title/tt14452776/) (same)
|
||||
- [Schmigadoon! Season 2](https://www.imdb.com/title/tt11808942/)
|
||||
- [Mythic Quest](https://www.imdb.com/title/tt8879940/)
|
||||
- [Taskmaster](https://taskmaster.tv/)
|
||||
- [The Morning Show](https://www.imdb.com/title/tt7203552/)
|
||||
- [I Love That For You](https://www.imdb.com/title/tt9319706/) (I couldn't handle the cringe)
|
||||
- [What if...?](https://www.imdb.com/title/tt10168312/)
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Memorize quotes"
|
||||
slug: memorize-quotes
|
||||
description: "Memorizing quotes is probably one of my favorite easy 'life hacks'."
|
||||
added: "Mar 27 2023"
|
||||
tags: [advice, musings]
|
||||
---
|
||||
|
||||
When I was young, my parents gave me a poster I put on my wall of a bunch of different inspirational quotes from various people. Every morning as I got dressed, I'd have the quotes up in my face, and slowly but surely I started memorizing them and internalizing them. There were inspirational ones like:
|
||||
|
||||
> "Great work is done by people who are not afraid to be great."
|
||||
>
|
||||
> - Fernando Flores
|
||||
|
||||
And ones that are just good life advice, like:
|
||||
|
||||
> "Finish each day and be done with it. You have done what you could. Some blunders and absurdities no doubt crept in; forget them as soon as you can. Tomorrow is a new day. You shall begin it serenely and with too high a spirit to be encumbered with your old nonsense."
|
||||
>
|
||||
> - Ralph Waldo Emerson
|
||||
|
||||
And though I don't remember all of them at all times, the whole concept of "memorizing quotes" has been a genuinely useful practice for me that I highly, highly recommend to folks in general. Both for, you know, actual life advice and encouragement, but also to pull out of your butt at any given moment.
|
||||
|
||||
"Wow Cassidy, this post just took a turn," you may say, but no no, hear me out: When someone hears you quote something legit and applicable to a situation, you suddenly come off as waaay smarter and more prepared for a conversation than you did before.
|
||||
|
||||
## No way, give me an example.
|
||||
|
||||
One of the quotes that I memorized on my poster growing up was from Helen Keller:
|
||||
|
||||
> "One can never consent to creep when one feels an impulse to soar."
|
||||
|
||||
I have used this quote in every written exam I've ever taken since middle school. Testing into Honors English courses, the PSAT exam, social studies tests, the ACT exam, taking the AP English exam, college admissions essays, testing out of English in college, some job applications... every single one. It's _just_ generic enough that you can apply this quote to pretty much any situation. And on almost every exam on which I've gotten feedback, the examiner compliments me on how much I've prepared for that portion of the test.
|
||||
|
||||
But it is all a lie.
|
||||
|
||||
I do not prepare.
|
||||
|
||||
I memorize quotes.
|
||||
|
||||
## Oh my word, Cassidy
|
||||
|
||||
I know. It's like a little life hack, but it's so dang helpful. When I'm mentoring someone or giving some kind of inspirational talk?
|
||||
|
||||
> "Comparison is the death of joy."
|
||||
>
|
||||
> - Mark Twain
|
||||
|
||||
When someone is deciding if they should take action on something?
|
||||
|
||||
> "This is your world. Shape it, or someone else will."
|
||||
>
|
||||
> - Gary Lew
|
||||
|
||||
When I'm feeling slightly spiteful because someone questioned my ability to do something?
|
||||
|
||||
> "The greatest pleasure in life is doing what people say you cannot do."
|
||||
>
|
||||
> - Walter Bagehot
|
||||
|
||||
When someone is saying I'm being too paranoid and over-preparing for something?
|
||||
|
||||
> "Luck favors the prepared."
|
||||
>
|
||||
> - Edna Mode, The Incredibles
|
||||
|
||||
Having even just a small handful of quotes in your back pocket makes you seem credible, prepared, or at least somewhat quick-witted. It's a small thing that you can do that genuinely pays dividends over time.
|
||||
|
||||
> "You should always listen to Cassidy."
|
||||
>
|
||||
> - Cassidy
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Messing with Sketch Club"
|
||||
slug: trying-sketch-club
|
||||
description: "I got the app Sketch Club and have really enjoyed making some fun drawings!"
|
||||
added: "Feb 22 2016"
|
||||
tags: [learning]
|
||||
---
|
||||
|
||||
So a little while back I got the app [Sketch Club](http://app.sketchclub.com/), but I never really did anything with it besides using it to annotate photos.
|
||||
|
||||
But recently, I decided to stop playing games on the subway and instead try my hand at drawing instead. My conclusion: Sketch Club is AWESOME.
|
||||
It handles different brushes, layers, layer styles, recordings of drawings, and it's constantly being updated!
|
||||
|
||||
I personally like drawing cartoony-style doodles, here's a couple that I did recently:
|
||||
|
||||
|
||||
(If you play the game Neko Atsume, you'll understand the inspiration behind this one)
|
||||
|
||||
|
||||
|
||||
I still have to improve myself on shading and drawing things other than animals that seem destructive. But hey, it's a great stress reliever, and it's a fun way to feel productive on the way to work. :)
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: This is how a rock star feels
|
||||
slug: microsoft-rock-star
|
||||
description: I had an incredible day!!
|
||||
tags:
|
||||
- events
|
||||
added: 2012-07-20T05:00:00.000Z
|
||||
---
|
||||
|
||||
SO, the other day, I had pretty much one of the best days ever.
|
||||
|
||||
I work at Microsoft this summer, in their advertising division. There was an email sent out to everyone asking for a trumpet player.
|
||||
|
||||
I am a trumpet player.
|
||||
|
||||
So, I replied. They immediately rented me one (I was the only one who replied) and said I'd be playing at this meeting for the end of the fiscal year (it was horse-race themed).
|
||||
|
||||
A week later, my team (we call ourselves The Dream Team) and I went to the meeting.
|
||||
|
||||
But it wasn't just any meeting.
|
||||
|
||||
It was a 2000-person, division-wide conference.
|
||||
|
||||
Cue nerves.
|
||||
|
||||
So, I went to the back of the room and was told when I would be playing and how the event would work (basically I did introduction music).
|
||||
|
||||
And then several fast, nerve-wracking minutes later, it began. I got to the front where they had roses and fake grass (for the theme) and I blasted the horn to start the event!
|
||||
|
||||
AND HOORAH, I DIDN'T MESS UP!!
|
||||
|
||||
It was glorious. There was applause and free food.
|
||||
|
||||
After my introduction, they had a Microsoft-themed trivia contest for all 2000 people. They had everyone stand up and watch the big screen state the multiple choice question, and then answer it by raising hands for each option. If you got it wrong, you sat down. If you got it right, you stayed standing.
|
||||
|
||||
I was doing surprisingly well, some answers I knew, some were complete guesses. Eventually I turned around (I was in the front row because of the introduction), and only 4 of us were left standing. They called us up to the stage and had us introduce ourselves. I was the only intern who had made it that far!
|
||||
|
||||
They continued to challenge us, not just with Microsoft questions, but also with Kentucky Derby questions (thank goodness it was the ONE year I watched it!) and other general trivia.
|
||||
|
||||
And then, there were two, myself and one other person.
|
||||
|
||||
We were neck-in-neck for several questions. They actually ran out of them on the PowerPoint and were just coming up with some for us.
|
||||
|
||||
AND THEN, GUESS WHO WON??? (me!)
|
||||
|
||||
So yeah that was utterly STUPENDOUS. I got a money prize plus a big bouquet of flowers! It was so fun. My friends texted me saying, "This is how a rock star feels. Soak it in." They had to be right.
|
||||
|
||||
Throughout the rest of the event I played the horn again a few times and enjoyed the free food.
|
||||
|
||||
At the end, everyone got free Microsoft advertising jackets! They are SWEET. Here's the Dream Team and I together sporting them together with the flowers and decor behind us.
|
||||
|
||||
|
||||
|
||||
All in all, it was a fantastic day!!!
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "My language brain is... broken?"
|
||||
slug: broken-language-brain
|
||||
description: "I think in one language when I hear another, and... I have no idea why."
|
||||
added: "Nov 29 2022"
|
||||
tags: [personal, learning, musings]
|
||||
---
|
||||
|
||||
I visited my in-laws in South Korea recently, and it was really awesome being able to see them. I don't speak Korean, but I've picked up enough words here and there to be able to somewhat understand the high-level topic of conversation, and nodded suuuper enthusiastically if they smiled at me.
|
||||
|
||||
One thing that I did notice though (that kind of messed with me) is that as I was trying to pay attention to what was going on in Korean, I was thinking more and more in Spanish (my second language). A couple times I actually responded "sí" or, "puedo tener un poco más?"
|
||||
|
||||
This happened throughout the entire trip. I tried researching this as a phenomenon, with no results. There were lots of articles and studies like, "your language shapes how you see the world" and "music helps with learning multiple languages" and "your personality changes depending on the language you use" etc, but nothing on... thinking in one language when you hear another.
|
||||
|
||||
I'm sure though that there's some kind of trigger in our brains for this. All I can think that there's a toggle in my weird brain that says, "ah ha, it's foreign language time, time to switch to the other language you know, but not as well as English!" I have no idea if this is true, or if there's any science behind it whatsoever, but for now, I'll just have to rest in my hypothesis. It might be different too because I learned Spanish a little later (after age 10), rather than from a more native perspective, so that "toggle" I'm thinking of is more of a learning toggle, rather than a language one? I don't know.
|
||||
|
||||
Anyway, my brain is weird. Maybe I'll think in Korean someday while listening to Spanish, who knows!
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "My last days at ISU"
|
||||
slug: bye-isu
|
||||
description: "I'm leaving Iowa State in a few weeks, which is both a bummer and very exciting."
|
||||
added: "Apr 30 2014"
|
||||
tags: [advice, personal]
|
||||
---
|
||||
|
||||
This week is my last as the president ISU CSE Club. I haven't been really emotional at all about graduating, but today, I felt it.
|
||||
|
||||
During the day I had some meetings with the department about my experience at ISU, and my advisor, Deb, thanked me on behalf of the department.
|
||||
She was so nice, she said, "We might not get the chance to tell you later, but we're all so grateful for what you've done for the department."
|
||||
I told her I'd be coming back. I hope to get Venmo on the Iowa State bandwagon.
|
||||
|
||||
I got an email from a high school student in New Jersey later. I had hung out with him and his mom when they visited Iowa State to answer their questions and give advice.
|
||||
|
||||
> Hi Cassidy,
|
||||
>
|
||||
> Well I'm happy to say that I am now a Cyclone. Talking with you really helped me make my decision and I would just like to thank you once again. Im really excited about going to Iowa State because the school and the Computer Science Department had everything I was looking for. If you have any advice for me before I go it would be much appreciated. And good luck at Venmo, I'm sure your going to do a great job and enjoy New York.
|
||||
>
|
||||
> Thanks,
|
||||
> Glenn
|
||||
|
||||
I'm so happy that Glenn made this decision. He and his mom were so nice, and I think he's a very motivated young guy. He's going to be really successful someday.
|
||||
|
||||
Right before our final CSE Club meeting (for those of you who don't know by the way, it's the Computer Science and Software Engineering Club), I got an awesome email from one of our club members.
|
||||
|
||||
> Dear Cassidy,
|
||||
>
|
||||
> It was fun having as you as the president for my first year of Computer Science at ISU. I know I wasn't very active this second semester, but on top of my classes I had a lot more responsibilities at my church, so its been crazy. =) Being a 2nd degree student, however, last semester being my first semester at ISU, I thought I'd have a rough time finding people to connect with.
|
||||
>
|
||||
> CSE club was a great place to meet people, and it helped my connect to others in my same situation. Knowing other 2nd degree students is a blessing. Having you as the face of the club really eased the transition I believe for a lot of people. You are fun, outgoing, a little crazy (don't worry, we all are), intelligent, and you are full of showmanship(show-womanship?). I know some other fellas in the club that also were able to open up to other beautiful women on campus, after being able to interact with you. I know that sounds a little out there, but some of my friends were shy enough around guys they didn't know and some of them even have girlfriends now. O_O
|
||||
>
|
||||
> I'm proud to say I'm a member of CSE, and I know many of us were proud that you were the president the year we joined the ISU CSE family.
|
||||
>
|
||||
> I wish you the greatest luck in the future, not that you'll need it, and thank you for ensuring the club was so fun, welcoming, and exciting this year.
|
||||
>
|
||||
> Sincerely, with best regards,
|
||||
> Shawn
|
||||
|
||||
This email made my day! I've blogged before about feedback and how much I love it, but this was even beyond that. It made me feel like all of the work I put in was worth it.
|
||||
|
||||
After CSE Club, I got some hugs from members, they're all so great.
|
||||
One girl, Kelsey, came up to me and said, "I don't know if I'll get to tell you this later, but I stayed in computer science because of you. You're my role model, and you gave me something to strive for, and I wouldn't have been as successful as I am now without you. So thank you."
|
||||
Oh my goodness. I almost cried. She's grown so much as a member of our computer science community. She's studying abroad next year, and she has a software internship this summer! I'm so proud of her.
|
||||
|
||||
And finally, I checked my email again, and my professor, Dr. Mitra, sent me an email. He's the CSE Club advisor.
|
||||
|
||||
> Dear Cassidy,
|
||||
>
|
||||
> My turn to share.
|
||||
>
|
||||
> As long as I have been advisor for the club, one of my primary goals - and something that I have shared with all presidents – is that the club should make students feel at home. You have been the only one who has really made that happen to such a large extent. You have been a master organizer and have mobilized your team to achieve great things. You have been the first woman president of the club – and have done one of the BEST jobs.
|
||||
>
|
||||
> I am really so happy with you and your team. Your successor will have a tough time trying to fill your shoes!
|
||||
> Simanta
|
||||
|
||||
I'm completely overwhelmed at the response my work has gotten. With finals coming next week, and my last official class tomorrow, I'm realizing how much I really will miss Iowa State and the community we have here.
|
||||
I can only hope I'll have a taste of a warm community like this after school.
|
||||
|
||||
I suppose though, if I can't find one, I'll build it myself.
|
||||
@@ -1,15 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: System.out.print("My Major");
|
||||
slug: my-major
|
||||
description: I'm studying computer science!
|
||||
tags:
|
||||
- work
|
||||
added: 2011-03-22T05:00:00.000Z
|
||||
---
|
||||
|
||||
Well howdy! As the weather is warming up, so are my coding skills. That's right, I'm a computer science major. I'm one of those rare cases who chose their major in middle school and I've been loving it since.
|
||||
|
||||
Many people don't know everything you can do with computer science. You can go into Information Assurance, Computer Graphics, Artificial Intelligence, Virtual Reality, Software Engineering, and so much more! I'm not entirely sure which branch I'm headed into yet, because all sound so interesting! My classes for computer science are fun. I'm in ComS 228 at Iowa State now, and we're learning the nitty gritty bits of the programming language Java. One of our recent projects in the class involved coding the game Tetris. Not only was making the game fun, but then we were able to play it to our heart's content!
|
||||
|
||||
My second test of the semester is on Thursday! I have some more studying to do, but at least I like what I'm doing!
|
||||
@@ -1,41 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "My Talk at TEDxDesMoines"
|
||||
slug: tedx-talk
|
||||
description: "I spoke at TEDxDesMoines, come hear what I had to say!"
|
||||
added: "Feb 22 2014"
|
||||
tags: [advice, events]
|
||||
---
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/7O0z06YRKHg" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
Hello friends!
|
||||
|
||||
So, I don't know if a lot of you have ever watched a TED talk before, but they usually have some interesting food for thought.
|
||||
|
||||
WELL, I gave a talk at TEDxDesMoines last December, and I thought I'd share it with you all!
|
||||
|
||||
It's just about my growing up as a woman in STEM (Science, Tech, Engineering, Math), and about following your passions.
|
||||
|
||||
I hope it gives you some inspiration to go after what you want.
|
||||
|
||||
And, you know I like feedback! I'm so happy about some of the comments and discussions coming out of the video:
|
||||
|
||||
> "I particularly enjoyed this presentation. For some silly reason, many of the Math, Science and Engineering academic folks do not embrace Computer Science as a core element of STEM. In reality, Computer Science is the cortex of STEM. This young woman encorages everyone to have a passion, explore, network and have fun!
|
||||
> She is combining her avocation with her vocation! I applaud her.. clap clap clap."
|
||||
>
|
||||
> - Arta Szathmary
|
||||
|
||||
> "I believe that Cassidy is a perfect STEM model for women and humankind."
|
||||
>
|
||||
> - Chris Pirillo
|
||||
|
||||
> "Cassidy will change the world, I am honored to know and work with her! Please show this video to all your daughters!"
|
||||
>
|
||||
> - Rane Johnson-Stempson
|
||||
|
||||
> "Wonderful speech and thank you for being such an inspiration for young women everywhere! I can only hope that the doors you are working to open are there for my daughter when she gets older. Keep up the great work and keep inspiring everyone! <3"
|
||||
>
|
||||
> - Dee Sunday
|
||||
|
||||
I don't know if any of those people will read this post, but I hope they know how much I appreciated their thoughts!
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Networking as a college student
|
||||
slug: networking-as-a-student
|
||||
description: Networking is one of the most important skills you can develop!
|
||||
tags:
|
||||
- advice
|
||||
added: 2013-09-16T05:00:00.000Z
|
||||
---
|
||||
|
||||
Hey friends!
|
||||
|
||||
So, an important thing that you'll have to do in college is networking. Let's face it, knowing people in the business you're going into is essential.
|
||||
|
||||
But how do you meet said people? How can you connect with strangers?
|
||||
|
||||
I'll tell you.
|
||||
|
||||
- **Build your online profile.** Many people say, "oh, I can get a LinkedIn when I start looking for a full time job." NO. Start now. Add all of your projects, skills, and experience (if any) to show you off. You can even generate a resume from your LinkedIn profile, how great is that? The next step here is actually connecting with people. Join groups you're interested in, follow companies, and add people from whom you want to ask questions. Soon you'll have your own network going there for people to introduce you to others and as a public profile for potential employers. Take it a step further and build your own personal website. There's all kinds of free site makers out there, or if you're really ambitious, you can make your own from scratch! If you want some inspiration, [check out mine](https://cassidoo.co/). I bet you can make yours better. 😉
|
||||
- **Join professional organizations.** There's groups across campus like this. All you need to do is go to a couple meetings, and you can start to meet the alumni from the group and talk with companies that present! Myself, being a computer science major, lead the Computer Science/Software Engineering Club on campus, and we literally have companies emailing us every day asking to speak and/or hire our members. You can't lose!
|
||||
- **Get internships and work experience.** Iowa State, for example, has some career fairs every semester, and also a whole online career management system (cleverly named CyHire), just for students to get some work experience under their belts. You can get internships in other ways too! For my first internship, I went to the career fair. My second one, I talked with my adviser and some professors in our department a lot, and when a company called them for recommendations, my adviser and professors recommended me! And for my third summer one, I went to a professional conference to their career area and interviewed on the spot. There's all kinds of different ways to get the work, if you put your mind to it! The people you meet at your jobs are essential for your future recommendations, introductions, and opportunities later down the road.
|
||||
- **Get a mentor.** Mentors are an amazing resource that often go untapped. They are great people that have been in your shoes before, and can give you all kinds of great advice and introduce you to future connections! You don't even have to go up to someone and say, "hey, be my mentor plz." Just start asking them questions. Build a relationship. The word, "mentor" never has to escape your mouths if you let the relationship form naturally. My mentors that I have now are incredible. From scholarships to connections with companies to just general life advice, I feel like I can go to them for anything and they magically have the solution for me, and I love them for it!
|
||||
- **Participate.** You're in your major because you like it, right? I hope so. So, prove it! Go out there and participate and do something with it. When you do so, you can meet people from all over who have similar interests and could potentially help you out in the long run. From conferences to competitions to events to clubs to meetings, participate in them! You'd be surprised how many people you'll get to know.
|
||||
- **Ask questions.** I can't emphasize this enough. It seems like a silly thing to advise you to do, but hear me out. Just ask. The worst thing someone can say is no. You want to know if an employer has an extra opening? Ask. You want to see if someone knows about scholarships for students in your major? Ask. You want an extension on a deadline? Just ask! One of my mom's favorite phrases is, "the squeaky wheel gets the grease." If you're not asking for what you want, how will you ever get it?
|
||||
|
||||
I hope this helped you out in some way! Networking is an amazing skill that just takes a bit of practice. When used right, you can do great things with it.
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "One year at Venmo"
|
||||
slug: one-year-at-venmo
|
||||
description: "I've been at Venmo for a year!"
|
||||
added: "Jul 13 2015"
|
||||
tags: [work]
|
||||
---
|
||||
|
||||
My goodness, I've been at Venmo for a year now. It's a little mind-blowing! I still feel like I just got here, and at the same time, I feel like I've been here forever.
|
||||
|
||||
I keep this private journal (check out [Dabble.me](https://dabble.me/), it's awesome), and it's so funny reading my posts from a year ago.
|
||||
|
||||
> Today was my first full day of work! I admit I'm pretty intimidated by what lies ahead. I'll be working with languages I don't really know, and I'm using technologies I'm not familiar with. I hope I can learn quickly and show them what I can do!
|
||||
|
||||
As I read through some of them, during my first few months I was just so worried about my performance. I was convinced that I wasn't going anything right.
|
||||
|
||||
And then, in November, something just clicked. I worked at a hackathon and had a really productive week, and one of my entries simply reads:
|
||||
|
||||
> I have a sudden motivation to really stand out and be a leader at Venmo.
|
||||
|
||||
Almost all of my posts after this one about work are so positive! I didn't realize there was a shift then, but now I can see it over time. Ever since this post, I've been loving my work more and more. I'm getting to work on some cool projects, with some truly wonderful people, and I feel like the company is doing really well.
|
||||
|
||||
I love working at Venmo. I'm looking forward to helping the team grow and thrive, and I can't wait until the day Venmo can be used for any payment in the world.
|
||||
|
||||
And who knows? Maybe, someday, I will get to lead something big at Venmo. Only time will tell. :)
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Open standards, trust, and Google"
|
||||
slug: open-standards-are-good
|
||||
description: "We should build and use software that uses open standards, and be careful about the companies in which we place our trust."
|
||||
added: "Jun 21 2023"
|
||||
tags: [musings]
|
||||
---
|
||||
|
||||
Seeing Google [kill off and sell Google Domains](https://9to5google.com/2023/06/15/google-domains-squarespace/) is such a big surprise to me. It shouldn't be, given they've [shut down waaay more than that](https://killedbygoogle.com/). I'm still annoyed at them stopping the [Google Code Jam competitions](https://en.wikipedia.org/wiki/Google_Code_Jam) and [Hangouts](https://arstechnica.com/gadgets/2022/06/google-hangouts-finally-gets-a-shutdown-date-november-2022/) and [G Suite](https://9to5google.com/2022/01/19/g-suite-legacy-free-edition/) and... way too many other services.
|
||||
|
||||
The domains service felt different, for some reason. It was something that it felt like they were investing a lot into (didn't they _just_ come out with the [.zip TLD](https://shkspr.mobi/blog/2023/05/the-new-zip-tld-is-going-to-cause-some-problems/) amongst others?) and that people were really trusting. And it made so much money! It served millions of domains!
|
||||
|
||||
But... it didn't make _enough_ money. [Why have a business that can make millions of dollars when you can make billions on ads](https://youtu.be/Rqnt17APIbc?t=284)? It's disheartening, but the bottom line is: Because Google is Google, the only thing that we as users can trust is that if they can make money with ads, the product is more likely to live, otherwise it's going to die.
|
||||
|
||||
Google has sunk its teeth into our daily lives with Gmail and Google Calendar and YouTube and Drive (and more), and they've made these tools (amongst others, Google Domains included) _really_ convenient. They all _just work_ together, and their APIs are solid enough that third party developers can build off of them relatively easily. And because they own the APIs as a centralized system, developers are at the whim of whatever they decide to change. They can monetize it however they want, and control how content is served to an extent.
|
||||
|
||||
Now, don't get me wrong, Google is _not_ the only company that does this. Anyone can look at how [Reddit and Twitter](https://mashable.com/article/social-media-paid-api-internet-future) have changed things for their developers in the past few months because of the dependence on their APIs. Content creators are at the mercy of the platforms that service them, and if TikTok, Facebook/Meta, Spotify, Netflix, YouTube, Medium, Twitter, etc. change, creators have to work even harder to reach their audiences and tailor their content to The Algorithm.
|
||||
|
||||
All of this brings me to the topic of **open standards**. I listened to [this 2021 podcast episode](https://www.fastmail.com/digitalcitizen/why-open-internet-standards-are-so-important-to-your-future-with-bron-gondwana/) recently about the importance of open internet standards and it's stuck in my brain as these big changes are announced. When you use communication software that is fully proprietary, you're at the mercy of the creators of that software and how (and sometimes what) they want you to communicate. When you use software based on open standards, you're able to more easily transfer how you communicate and work to other platforms if you want to.
|
||||
|
||||
Side note: open standards are different from open source, but both are good things, and [here is an article](https://www.ibm.com/blog/open-standards-vs-open-source-explanation/) about the differences between them.
|
||||
|
||||
Now, if you're creating software, I'm sure you might be thinking, "why would I want to make it easy for someone to leave?" To that, I'd honestly probably respond snarkily with, "then just build better software," heh. But real talk, it's about building a good internet citizen. Think: [A rising tide lifts all boats](https://en.wikipedia.org/wiki/A_rising_tide_lifts_all_boats). When something is built with an open standard, that means it can be improved alongside that standard. When you contribute to the standard in addition to your own software, you're benefitting everyone, which is ultimately good for your business.
|
||||
|
||||
Podcasting is a great example of this, being built on RSS. Listeners get to choose where they want to listen, creators get to choose where/how they want to host their shows, and developers get to choose how they support + build on top of features. Plus, RSS has gotten some great improvements thanks to the podcast ecosystem! There's so many more examples like this that deserve credit, using HTTP and JMAP and WebRTC and mooore. The stability of the open standard enables innovation!
|
||||
|
||||
Anyway, because of all of these services being killed recently, I personally have been looking to switch away from Google and other softwares that I rely on that don't use open standards, so that I can feel a bit safer about my data. I admit it's fairly challenging (Google Calendar is the only thing supported by most of the scheduling apps I like, ugh, and some things don't have an open standard to work with). But, I hope app devs out there see what's happening as a result of closed systems, and move towards building more in the open and helping push standards forward. [Or building new ones](https://xkcd.com/927/)!
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Happy Pi Day!
|
||||
slug: pi-day-2013
|
||||
description: It's the mathiest day of the year!
|
||||
tags:
|
||||
- events
|
||||
added: 2013-03-14T05:00:00.000Z
|
||||
---
|
||||
|
||||
HAPPY PI DAY.
|
||||
For those of you who don't know what Pi Day is, there's the number 3.14159265358979…etc. which is a very significant number in all of our lives, and today, 3/14, CELEBRATES IT.
|
||||
|
||||
I've been celebrating Pi Day for many years now! I once memorized over 600 digits of pi to become 65th in the world and 18th for memorizing pi that year. I can still remember quite a few, but I'm out of practice.
|
||||
|
||||
ANYWAY, enjoy a slice of pie today, wear your favorite pi clothes (I am), and have a GREAT Pi Day!
|
||||
|
||||
Here's my outfit for the day if you need some inspiration:
|
||||
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Picking your brain: Cold call email etiquette"
|
||||
slug: cold-call-email
|
||||
description: 'I get a LOT of emails from people asking to "pick my brain." Here is how I wish people would approach this.'
|
||||
added: "Jul 20 2015"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
I love meeting with people. Coffee chats with different people is so fun!
|
||||
|
||||
But, unfortunately, I don't scale well. After talking with my friend
|
||||
[Rebecca Garcia](http://www.geekgirlweb.com/), I realized I wasn't alone in
|
||||
this. As you get more involved with work and the community, a coffee chat isn't
|
||||
just a one-off, it's a constant stream of requests.
|
||||
|
||||
I've slowly gotten better at handling them, I use [Assistant.to](http://www.assistant.to/)
|
||||
to schedule things and try to only meet with people a max of twice a week, but
|
||||
that's created _quite_ the backlog.
|
||||
|
||||
So, this is a post for you, the meeting requester, and for the benefit of you
|
||||
and myself/anyone busy to whom you might be reaching out. This is how to ask a
|
||||
busy person for a coffee chat.
|
||||
|
||||
### 1. Be specific.
|
||||
|
||||
Don't just email someone saying, "Hey, I saw you once, and I'd like to pick your
|
||||
brain! I'm free tomorrow."
|
||||
|
||||
I don't know what you mean.
|
||||
|
||||
You could want to literally pick pieces of their brain out for all I know. Not
|
||||
to be dramatic. But you didn't specify.
|
||||
|
||||
Make sure you say _how_ you met the person you're contacting, and why you're
|
||||
contacting them. Simple stuff. Big impact.
|
||||
|
||||
### 2. Be flexible.
|
||||
|
||||
You're asking the person to meet you and take time out of their day. So, you
|
||||
should work with their schedule! Give them several options, let them pick a
|
||||
location (or pick one that's convenient for them), give them an out, and don't
|
||||
be sad if they aren't able to meet with you for a while (if at all).
|
||||
|
||||
At that point, just email them your questions or whatever, and have hope that
|
||||
they'll email you back!
|
||||
|
||||
### 3. Don't be afraid to ping them if they haven't gotten back to you in a week.
|
||||
|
||||
If someone emails me for a nonspecific coffee chat and I have a bunch of other
|
||||
emails that day, I might not get back to them for a while. I personally really
|
||||
appreciate pings. It's a friendly reminder, and it puts you back on someone's
|
||||
radar. Now, if the busy person doesn't get back to you after a couple pings,
|
||||
don't fret, and again, don't be sad. They're busy for a reason! There's plenty
|
||||
of other fish in the sea. And people in the world, if fish isn't your thing.
|
||||
|
||||
### 4. Be prepared.
|
||||
|
||||
If you're nonspecific in your email, that can be frustrating for a busy person
|
||||
among their mass amounts of meet up requests. Outside of being specific, be
|
||||
prepared. If they reply back with questions about what you mean, or with
|
||||
details, be ready to give that information up right away. This is both for your
|
||||
benefit and theirs, because you want to get the most out of it, and they want to
|
||||
give relevant, efficient information and advice!
|
||||
|
||||
### That's it.
|
||||
|
||||
A _much_ better email is something like, "hey, I'm interested in how you got to
|
||||
where you are today. I'm a **\_\_\_\_** at **\_\_\_\_**, I met you at/read about you in
|
||||
**\_\_\_\_** and I just have a few questions about what classes I should take/which
|
||||
role I should follow/how I should format my resume. Could we meet for coffee?
|
||||
My treat! I'm pretty free over the next few weeks, Tuesdays and Thursdays are
|
||||
best! I know you're a busy bee, so I can work around your schedule.
|
||||
Let me know, and see you soon."
|
||||
|
||||
This is clear, it gives options for dates, it gives an out, and it lets the
|
||||
person know what you want from them. If I got this email, I would meet with you.
|
||||
|
||||
Good luck!
|
||||
@@ -1,73 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: The positives coming from the negatives
|
||||
slug: positives-from-negatives
|
||||
description: >-
|
||||
From the negatives we see and experience online, together we can create
|
||||
positives.
|
||||
tags:
|
||||
- learning
|
||||
- events
|
||||
added: 2015-01-20T06:00:00.000Z
|
||||
---
|
||||
|
||||
There's this great poem that my mother shared with me recently, called "If" by Rudyard Kipling.
|
||||
|
||||
> If you can keep your head when all about you
|
||||
> Are losing theirs and blaming it on you,
|
||||
> If you can trust yourself when all men doubt you,
|
||||
> But make allowance for their doubting too;
|
||||
> If you can wait and not be tired by waiting,
|
||||
> Or being lied about, don't deal in lies,
|
||||
> Or being hated, don't give way to hating,
|
||||
> And yet don't look too good, nor talk too wise
|
||||
> …
|
||||
> If you can talk with crowds and keep your virtue,
|
||||
> Or walk with Kings — nor lose the common touch,
|
||||
> If neither foes nor loving friends can hurt you,
|
||||
> If all men count with you, but none too much;
|
||||
> If you can fill the unforgiving minute
|
||||
> With sixty seconds' worth of distance run,
|
||||
> Yours is the Earth and everything that's in it,
|
||||
> And — which is more — you'll be a Man, my son!
|
||||
|
||||
This struck me as such a wise way of thinking and has really influenced me recently. That last line isn't lost on me, by the way. I understand that the author was writing to all young men and women.
|
||||
|
||||
Anyway, over the past several months, I've been bothered online with fake profiles made of/about me across several networks, and I've been sent anonymous messages to my personal phone and email. I had tried tracking them down and trying to figure out why without success.
|
||||
|
||||
It all culminated this past weekend at the hackathon [MHacks](https://www.mhacks.org/), in which someone in these anonymous messages finally gave me an answer and said, "Some people are upset at you for your feminist influence."
|
||||
|
||||
At first, I admit, I was upset. Yes, I had called people out for saying inappropriate things towards women, and I would share articles that were pro-women-in-tech. But I simply couldn't understand why a group would be so bothered by those things, that they had to try and make me feel unsafe and vulnerable.
|
||||
|
||||
But this post isn't about them. This is about the positive outcome.
|
||||
|
||||
The hackathon community's response to the negativity over the weekend has been wonderful. People have donated to the Anita Borg Institute. People have been sending myself and other females in tech such positive, encouraging messages. There's a giant thread going (literally hundreds of interactions) of people proclaiming their appreciation of their female tech role models. There's unity in the community against the negativity, and I love it.
|
||||
|
||||
There's always going to be trolls on the internet who aren't happy about something you're doing or saying. Unfortunately, this is especially true for women. But that doesn't mean you stop.
|
||||
|
||||
"The only thing necessary for the triumph of evil is that good \[people] do nothing."
|
||||
— Edmund Burke
|
||||
|
||||
This weekend further opened my eyes to the needs of the community. Female (and other minority) role models have been silenced for long enough. It's time to encourage them and finally make tech more inclusive. I don't expect changes to happen overnight. Like one of my brilliant mentors Rane Johnson-Stempson told me, "Life is a marathon, not a sprint."
|
||||
|
||||
---
|
||||
|
||||
### Here's some steps that you can take right now.
|
||||
|
||||
Support a diversity organization or community. When I say, "support," I don't necessarily mean monetarily. You could volunteer for the group, join them at an event, or simply tweet about what they're doing. There's so many of them out there. A few of my favorites include:
|
||||
|
||||
- The National Center for Women & IT ([ncwit.org/](https://www.ncwit.org/))
|
||||
- The Anita Borg Institute ([anitaborg.org/](https://anitaborg.org/))
|
||||
- Girls Who Code ([girlswhocode.com/](https://girlswhocode.com/))
|
||||
- CODE2040 ([code2040.org/](https://www.code2040.org/))
|
||||
- Black Girls Code ([blackgirlscode.com/](https://www.blackgirlscode.com/))
|
||||
- ProjectCSGIRLS ([projectcsgirls.com/](https://www.projectcsgirls.com/))
|
||||
|
||||
Tell someone that they're doing a good job. Sure, this is a small, simple task. But all of us can think of someone that is working in this field who is supportive and positive. A simple note of encouragement can go very far.
|
||||
|
||||
And finally, don't stop talking. Make people aware of the negatives, and shower them with the positives. Call people out when they're in the wrong, and help them be in the right.
|
||||
If someone is telling you to take down a feminist post, or to shut up about issues in the workplace, or to keep quiet about something inappropriate happening around you: Don't.
|
||||
|
||||
"The greatest pleasure in life is doing what people say you cannot do." — Walter Bagehot
|
||||
|
||||
Let's build a better community right now. It starts with you!
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: I went to the White House!
|
||||
slug: post-white-house
|
||||
description: My sister and I were so thrilled to be included in such a cool event!
|
||||
tags:
|
||||
- events
|
||||
added: 2013-02-05T06:00:00.000Z
|
||||
---
|
||||
|
||||
So, last week I told you I went to the White House for an event with my sister. NOW I AM BACK.
|
||||
|
||||
As a refresher (or if you didn't read [my previous post](https://blog.cassidoo.co/post/white-house-invite)), we were invited to speak at the White House Tech Inclusion Summit! We were 2 of 10 girls in computer science picked to attend across the U.S. It was an awesome event, we got to meet a lot of cool people in technology and in the government and we spoke about women in technology and computer science education.
|
||||
|
||||
We also got to sight-see a little bit and eat with some important people from Microsoft and the National Center for Women & IT. It was a blast overall, and an incredibly impressive and motivating experience!\
|
||||
|
||||
|
||||
Anyway, that's the update from this end. If you are a high schooler reading this and you don't know what to major in, seriously consider computer science. You get to go amazing events like this one, and you'll truly express your creativity in a fun and unique way!
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Tips for posting on LinkedIn"
|
||||
slug: posting-on-linkedin
|
||||
description: "I took a workshop from LinkedIn about how to post well, and they had helpful insights!"
|
||||
added: "Feb 24 2024"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
I took a workshop that the LinkedIn team had about the best kinds of posts on the platform, so you don't have to! Here's some high level notes:
|
||||
|
||||
- [LinkedIn News](https://www.linkedin.com/showcase/linkedin-news/) loves to amplify content if it's original/not just a link away from the platform (your content has to hit a quality bar to happen). It's okay to link away if there's a good amount of insight on LinkedIn itself.
|
||||
- You should add questions when you end a post so that people engage with your content.
|
||||
- Your first two lines of your posts have to be the engaging ones, don't bury the lede.
|
||||
- When talking about events/talks/anything live, your "superpower" trick is to remember what it feels like to be in the audience and write about your perspective.
|
||||
- When it comes to re-sharing content:
|
||||
- Share 1-3 insights
|
||||
- Give your point of view on what content says
|
||||
- Longer posts do better (at least 3 paragraphs), but short sentences _in_ the long post do even better.
|
||||
- Make sure the first two lines pull people in
|
||||
- The best kind of content that gets re-shared and promoted:
|
||||
- Helps people get jobs
|
||||
- Helps people understand their industry or a trend in their industry
|
||||
- If you post a video, make it 2 minutes or less, and make sure the text accompanying it is not too long (less than 100 words or so).
|
||||
- If you really want to be "boosted" by _the algorithm_, try to post 3-4 times a week.
|
||||
- People love polls. Add polls. Adding an "Other" option to a poll increases its visibility a bunch.
|
||||
|
||||
And this is a [good example post](<https://www.linkedin.com/feed/update/urn:li:activity:7003396408196165633/?updateEntityUrn=urn:li:fs_feedUpdate:(V2,urn:li:activity:7003396408196165633)>) that the LinkedIn team loves, that gets actual human boosts from their team!
|
||||
|
||||
Hope this is helpful!
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "The small, private wins"
|
||||
slug: private-wins
|
||||
description: "Sometimes I can't really share what I work on, and I just gotta deal with that and be happy!"
|
||||
added: "Jan 26 2023"
|
||||
tags: [personal, musings]
|
||||
---
|
||||
|
||||
There's a bunch of random projects and skills that I work on where I'm hyped to make progress on them, but because it's pre-launch or private (or just not useful/understandable for other people to know), I don't really get to talk about how cool it is.
|
||||
|
||||
It's kind of like short-term vs. long-term satisfaction, almost. It's satisfying to work on in the moment, but then sometimes the launch doesn't happen, or it happens so much later that it's not as gratifying when it actually comes out.
|
||||
|
||||
It kind of reminds me of [this blog post](https://rachsmith.com/learning-in-public-is-complicated/) that Rach Smith wrote, about how learning in public is challenging when you're very deep in layers of niche engineering. It's hard for me to lay out, for example, a specific type of strategy I learned in the game go, because so few people I know actually play it. It's hard for me to explain the details around keycap designs I've worked out, because so few people understand how much effort that takes or why it's exciting. It's hard for me to describe some of the little (and big) problems I've solved, because y'all simply don't have the context I have to understand why it's thrilling that it's finally done.
|
||||
|
||||
I admit I'm not sure if there's a solution here, I think it's just a lesson in patience. And probably contentment, too. We've gotten so used to sharing out **all** the things on social media that when you have small wins that aren't public, it's not as intuitive to celebrate on your own. All I can really say with most people is, "I had a fun win recently!" and I gotta learn to be happy with that.
|
||||
|
||||
So, though I can't really share the little wins I've had recently very fully, I'm going to share the little parts of them that were exciting for me that may or may not ever matter/become public later:
|
||||
|
||||
- I got the Portuguese translation part working
|
||||
- I've fully transitioned from the lil HTML script to the lil Markdown script
|
||||
- The connection has **finally** been made between these two people who could make a cool project happen
|
||||
- That goal is... so... close... after literally 8+ years of effort
|
||||
- I think I finally got the colors right on a design I've been dabbling with
|
||||
- That episode we recorded turned out really great
|
||||
- The thing I learned how to do in class the other day is actually working
|
||||
|
||||
And... some of these, you will never know what I'm talking about, but some of these, it'll all make sense soon, heh.
|
||||
@@ -1,72 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "The Productivity apps I use in 2023"
|
||||
slug: producivity-apps-2023
|
||||
description: "My current 'stack' of task-tracking, calendar, and note-taking apps"
|
||||
added: "Apr 08 2023"
|
||||
tags: [advice, learning, work, personal]
|
||||
---
|
||||
|
||||
I often get asked what my favorite tools are and how I use them to get my work done, and I'm writing this both to answer that question, and also for me to just paste a link to this post next time I'm asked. Efficiency!
|
||||
|
||||
[I wrote about this last year](https://dev.to/cassidoo/the-productivity-apps-i-use-in-2022-ea6) and realized that I both didn't include everything I wanted to, and also had more to add, so let's dive in!
|
||||
|
||||
Also: This post will not cover my code editor(s), terminals, or other developer tools. This is just a list of the tools I use daily to get my tasks done! Also, all of them work across operating systems. I use both a PC and a Mac, so that's important to me. There might be better options out there for one machine over the other, but that's not my jam.
|
||||
|
||||
## Obsidian
|
||||
|
||||
[Website](https://obsidian.md/)
|
||||
|
||||
I take notes with Obsidian, [write my newsletter](https://cassidoo.co/newsletter/) with Obsidian, write blogs with Obsidian (like this one), keep track of projects with Obsidian, plan classes with Obsidian... I'm alllllll in on Obsidian.
|
||||
|
||||
**It's a local-first markdown editor.** I love that I can keep everything local to my machine (so I don't have any slow load times), and just write markdown without anything getting in my way. Beyond that, they have an open plugin + theming setup, and you can pay for syncing across devices as well. I often jot down quick notes on my phone, and then I access them later on my computer to flesh them out, and it's perfect for that.
|
||||
|
||||
## Centered
|
||||
|
||||
[Website](https://www.centered.app/)
|
||||
|
||||
When I use Centered, I get more work done, simply put. I was a little slow to get into it at first, I had to give it a second chance, but now I can't imagine getting all that I want done without it. I often have trouble focusing throughout the day when I have a lot to do, and Centered helps a ton with that.
|
||||
|
||||
**Centered is a flow state to-do app.** It's kind of hard to explain quickly, because it does so much while being pretty simple, too. You plop in your to-do list for the day/session/whatever, each task has a certain amount of time assigned to it, and then you hit start. It'll play some music designed to help you focus, and it has a coach that speaks to you about how much time is left in your current task, gives you breaks, and pokes you when you're distracted. It also has an optional thing where you can have your camera on while you work, which is weirdly good at keeping you feeling focused.
|
||||
|
||||
[I made a group in it](https://www.centered.app/g/freakin-nerds) if you'd ever like to flow with me! Other groups in there include students, web developers, special interest groups, and you can make private groups with your friends as well.
|
||||
|
||||
## Raindrop
|
||||
|
||||
[Website](https://raindrop.io/)
|
||||
|
||||
**Raindrop is an all-in-one bookmark manager.** It's one of those apps where I used the free version for about 5 minutes before deciding to pay for it forever, because it works perfectly. It works as a browser extension, as a mobile app, and as a desktop app on all the platforms, and lets you very easily and quickly tag and categorize your bookmarks.
|
||||
|
||||
It lets you do public bookmark collections, so for example if you head over to [cass.run/ref](https://cass.run/ref), that's a public collection of my referral links to various services. It also lets you save permanent copies of your bookmarks (so if something goes offline, you still have access to it, I've saved some of my favorite blog posts this way), does a full text search of the pages you save, and annotate web pages, too.
|
||||
|
||||
## Cron
|
||||
|
||||
[Website](https://cron.com/)
|
||||
|
||||
**Cron is a keyboard shortcut-powered calendar app.** I've tried a bunch of calendar and scheduling apps over the years, and Cron is my current favorite. It lets you quickly use keyboard commands to see your teammate's calendars, share availability, view multiple timezones, and create events. They were bought by Notion recently, so I think we can expect some interesting integrations from them soon. My only complaint with this one is that it only works with Google Calendar so far (and I've been wanting to move away from Google for various things), but it's not the end of the world.
|
||||
|
||||
## todometer
|
||||
|
||||
[Website](http://cass.run/todometer)
|
||||
|
||||
This is a shameless plug, but I use todometer for task management, and... I built todometer.
|
||||
|
||||
**todometer is a meter-based to-do list for your desktop**. I use this to keep track of things that I'd like to get done throughout a given day or week, without the restrictions of a flow state session. I made it because I am motivated by progress bars, and sometimes I just need a simple list prominently on my desktop of what I need to get done. Plus, it's local-only, so you don't have to worry about loading times. [Here is the repository](https://github.com/cassidoo/todometer) if you'd like to see how I built it (full disclosure: I want to maintain it more, I have a roadmap in mind for a few things, but I've got other things to do, so if you make an issue, I'll get to it... someday).
|
||||
|
||||
## Dabble.me
|
||||
|
||||
[Website](https://dabble.me/)
|
||||
|
||||
**Dabble.me is a private. email-based journal.** I've been using Dabble.me for literally over a decade and it's the only journal I've been able to consistently work with, probably because it's just super convenient. It emails you regularly (depending on the frequency you set) asking how your day went, and will occasionally remind you of previous entries saying, "one week ago you wrote..." or "two months ago you wrote..." etc.
|
||||
|
||||
I have absolutely loved this service and is probably my favorite one overall, just because it's a treasure trove of memories for me at this point. Sometimes my entries are super short like, "I played way too much Minecraft today, ugh." and sometimes they are very long essays of me ranting about work or life or food or something. It's not so much a "productivity" app so I wasn't sure if I should include it in the list, but it's a consistent enough tool for me that I thought it deserved a shout.
|
||||
|
||||
## That's it!
|
||||
|
||||
I've tried a lot of different tools over the years, and this is just my current "stack." I do think that it's worth reassessing your tools fairly regularly. I used to use other ones, like Bear, and Notion, and Vimcal, and Trello, etc, and they all worked for me at the time, but figuring out what you like and don't like about your "stack" is super helpful for upgrading how you work over time.
|
||||
|
||||
It's not just the applications, it's the dedication to them that really make them work for me. If something is scheduled on my calendar, whether it's flow time or dedicated time to one specific task, I follow it. If I put a task in todometer, I have to get it done that day.
|
||||
|
||||
If you don't commit yourself to your tools, or try to over-engineer how you use them, they become extra overhead to getting things done. You don't want the perfect work setup to get in the way of you actually working. Keep that in mind as you hunt for tools that might work for you!
|
||||
|
||||
Until next time!
|
||||
@@ -1,65 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Publishing to my blog from Obsidian"
|
||||
slug: publishing-from-obsidian
|
||||
description: "This is how I publish to my Git-based blog straight from Obsidian (kind of)"
|
||||
added: "Dec 28 2023"
|
||||
tags: [technical, meta]
|
||||
---
|
||||
|
||||
I like using [Obsidian](https://obsidian.md/) for almost everything writing-wise. But, this has caused occasional friction when it comes to publishing to my blog. I've mentioned before that [I'm trying out TinaCMS](https://blog.cassidoo.co/post/trying-tinacms/), which is generally working well for me (especially for posts with images), but I wanted to try something where I can push straight from Obsidian if I'm not able to use Tina for whatever reason.
|
||||
|
||||
The [repository for this blog](https://github.com/cassidoo/blahg) is separate from my Obsidian vault, so normally I have to do some copying and pasting across folders, which is _fine_ but really slows me down. I also checked out [Rach Smith's script for publishing to Astro from her vault](https://github.com/rachsmithcodes/obsidian-to-astro-sync), which works great, but not quite what I was hoping for.
|
||||
|
||||
After a little plugin hunting and configuring, I got something that'll work for me!
|
||||
|
||||
## Obsidian Markdown Export plugin
|
||||
|
||||
The [Obsidian Markdown Export plugin by @bingryan](https://github.com/bingryan/obsidian-markdown-export-plugin) takes your current note in Obsidian, and with a command can copy that note's markdown (or HTML!) into another folder on your machine, easily!
|
||||
|
||||
They actually didn't support "out of vault" files before (which I admit I didn't understand the use cases but eh), but [one GitHub issue later](https://github.com/bingryan/obsidian-markdown-export-plugin/issues/52), we're cookin!
|
||||
|
||||
Okay so the way this works is you go to **Settings > Community plugins** and then search + install **Obsidian Markdown Export**. From there in the plugin settings, you have to put in an **absolute** path for your external repository, and a **relative** path for your media assets.
|
||||
|
||||
|
||||
|
||||
So in my case, I put `/Users/cassidoo/GitHub/blahg/src/posts` for the markdown file to end up in my blog repo, and `../../public/assets` to put images in the folder relative to the outputted file.
|
||||
|
||||
## Templater
|
||||
|
||||
I use the [Templater](https://github.com/SilentVoid13/Templater) plugin mostly for [my newsletter](https://cassidoo.co/newsletter) and some other miscellaneous things not relevant here. I ended up making a "blog template" that I can use to quickly add the frontmatter I need!
|
||||
|
||||
Similar to the previous plugin, you can install Templater in the **Community Plugins** section of Obsidian, and then you can choose to configure it (I just added a `templates` folder to my vault for this).
|
||||
|
||||
My "blog template" looks like this:
|
||||
|
||||
```
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "<% tp.file.title %>"
|
||||
slug: some-slug-example
|
||||
description: "-"
|
||||
added: "<% tp.file.creation_date('MMM DD YYYY') %>"
|
||||
tags: [technical, advice, events, learning, meta, work, personal, musings]
|
||||
---
|
||||
```
|
||||
|
||||
Every blog in my repository needs to have this frontmatter, and the `tp.file.whatever` syntax is Templater's way of taking the file's metadata and inserting it when you plop in a template. So when I make a blog titled, "Publishing to my blog from Obsidian" (heyo), it populates that into the `tp.file.title` field, and it inserts the date under `added`.
|
||||
|
||||
The tags are just all the tags I have in my blog so far, and I usually just delete the ones that are irrelevant to the post and get writing.
|
||||
|
||||
## Mashing them all together
|
||||
|
||||
I wrote this blog post in Obsidian using these plugins, and I followed these steps!
|
||||
|
||||
1. Made a file titled "Publishing to my blog from Obsidian"
|
||||
2. Inserted my "blog template" with Templater and wrote the blog
|
||||
3. Ran the Markdown Export plugin
|
||||
4. Navigated to my blog repo
|
||||
5. `git commit -am "Wrote publishing from Obsidian post"`
|
||||
6. `git push`
|
||||
7. Donezo!
|
||||
|
||||
(As a quick side note: for all plugins in Obsidian, you can either click the buttons they have, or you run `Ctrl/Cmd+P` and then type in the name of the plugin, **or** you can set up hotkeys in the plugin's settings.)
|
||||
|
||||
Like my TinaCMS setup, it's not the most ergonomic thing in the world, but it's working well for me for now. I'm trying to embrace incremental changes more instead of trying to make everything instantly perfect, and this is definitely one of those smaller improvements that'll keep me going fast!
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: 5 Questions to Ask Your Boss
|
||||
slug: questions-for-your-boss
|
||||
description: The squeaky wheel gets the grease!
|
||||
tags:
|
||||
- work
|
||||
- advice
|
||||
added: 2013-09-30T05:00:00.000Z
|
||||
---
|
||||
|
||||
A lot of you are working a lot. When you get a job, it's always important to have good communication established with your boss. You should ask them these questions, not just as a student, but also in your future internships and full-time roles!
|
||||
|
||||
1. **What's the most important achievement you hope to accomplish in your current role?**
|
||||
In asking this question, you can see what your boss/manager's short-term motivations are, which will give you a better idea about what your goals and motivations should be. If yours match theirs, you'll be better positioned for success to them.
|
||||
|
||||
2. **What is the most important thing you care about?**
|
||||
Chances are, your manager/boss reports to someone too. Unless your boss is the CEO. In that case, nice work, you're pretty high up, bro. Anyway. asking this question will help you learn more about what higher-ups in your organization expect. Knowing these goals will help you better understand your own work, because you can see how you fit in the organization better.
|
||||
|
||||
3. **What can I do to make you more successful today/this week/this month/etc.?**
|
||||
You should always be trying to make your boss successful, because in turn you're making yourself successful. When you get a direct answer to this question, you'll know where to focus your energy at work, because you'll know exactly what take priority. Plus your boss will like you.
|
||||
|
||||
4. **How would you like to receive feedback and communication from me?**
|
||||
Does your boss want you to respond to emails on weekends? Do they prefer phone, or email, or face-to-face? When you know how to deliver feedback, you'll be more prepared to ask what you need, from deadline updates to project requests. If you get the insight, you'll have a better sense of what to expect, and how you can handle it.
|
||||
|
||||
5. **Why did you hire me?**
|
||||
Especially when you start a job, you should ask this. You are often so excited to get the job that you forget to ask things like this, but it's important, and here's why: You know what they expect you to deliver. If they say, "you seem organized," you know that they want you to produce organized work. If they say, "you seemed well qualified with your Excel skills," then you know they want you to focus your work on spreadsheets. When you focus your work well based on their expectations, you'll be up for bigger and better jobs later on.
|
||||
|
||||
So, I hope this was helpful to you! Good luck at your job, you're going to kill it. :)
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Quirky local delights"
|
||||
slug: quirky-local-delights
|
||||
description: "I love the weird things that remind you that you're home."
|
||||
added: "Feb 08 2023"
|
||||
tags: [personal]
|
||||
---
|
||||
|
||||
There's some things that you really only appreciate when you live in a place for a long amount of time, things that are sort of a... weird constant outside of your house.
|
||||
|
||||
In my case, one of my favorite spots to grab lunch after church on Sundays is a no-frills deli called [Manny's](https://www.mannysdeli.com/). This place has been around for literally more than 50 years, and it's got great food that the neighborhood loves.
|
||||
|
||||
But beyond the awesome food, I love that you can usually find parking at Manny's, and when you open the car door, you immediately start hearing opera music. The 7-Eleven across the street consistently plays opera on their speakers outside. Why? Who knows, and who cares, it's the 7-Eleven that plays opera.
|
||||
|
||||
You walk into Manny's, and you immediately get in line and order somewhat quickly because folks are in a rush to eat, and the people behind the counter are in a rush to get you served. Once you sit down to eat, a local magician works the crowd with family-friendly tricks before he heads out to perform at the [Chicago Magic Lounge](https://www.chicagomagiclounge.com/) in the evening.
|
||||
|
||||
This is just a small little picture of what I mean by these local delights. Anyone who's just visiting might say, "huh, weird" or not even notice the consistent opera, the consistent sandwiches, or the consistent magic tricks. But when the world is chaotic and unpredictable, it's nice to have these little things to remind you that you're home.
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: How and when to use keys in React
|
||||
slug: react-keys
|
||||
description: 'When you render lists in React, you need to use keys.'
|
||||
tags:
|
||||
- technical
|
||||
added: 2023-10-28T00:34:25.253Z
|
||||
---
|
||||
|
||||
Whenever you want to render a list of something in React, you need to add a `key` attribute to it. This helps the renderer know how to keep track of that element, kind of like an ID. That `key` *can* be pretty much anything (a number or a string or whatever), but there's some high-level rules you should follow when using them.
|
||||
|
||||
1. **Keys have to be unique** - when React is differentiating things across renders, keys shouldn't be the same as something else.
|
||||
2. **Keys should not be random IDs** - if an ID is a random number generated during a render, then your items will have all new keys every time the state in your component changes. That being said, if you generate unique IDs when creating the data, that's different and okay.
|
||||
3. **Keys should probably not be just the item's `index`** - if you plan on changing the order of your list, or adding or deleting items, then the indices will change whenever the list changes, and that will throw React off.
|
||||
|
||||
Here's a good example of a `key` being set properly, using an `id` in the list:
|
||||
|
||||
```jsx
|
||||
const CityList = () => {
|
||||
const cities = [
|
||||
{ id: 1, name: 'New York', description: 'The Big Apple' },
|
||||
{ id: 2, name: 'Chicago', description: 'The Windy City' },
|
||||
{ id: 3, name: 'San Francisco', description: 'The Golden City' },
|
||||
{ id: 4, name: 'Los Angeles', description: 'The City of Angels' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>U.S. cities</h1>
|
||||
<ul>
|
||||
{cities.map(city => (
|
||||
<li key={city.id}>
|
||||
<h2>{city.name}</h2>
|
||||
<p>{city.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Here's some further reading if you'd like to learn more!
|
||||
|
||||
* [React documentation on rendering lists](https://react.dev/learn/rendering-lists)
|
||||
* [Real-life example on Stack Overflow](https://stackoverflow.com/questions/56235483/material-ui-popover-is-thrown-to-the-top-left-when-used-on-an-inline-button-in-a)
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Tips for remembering names
|
||||
slug: remembering-names
|
||||
description: Because we've all panicked about this at some point or another.
|
||||
tags:
|
||||
- advice
|
||||
added: 2013-10-07T05:00:00.000Z
|
||||
---
|
||||
|
||||
Sup Tootsie Pop. You're so pretty. I love what you've done with your hair.
|
||||
|
||||
So, when I'm at a meeting or in a club, and someone approaches me, here's how the conversation usually goes:
|
||||
"Oh hey Cassidy, how has your semester been?"
|
||||
\*terror\* "Oh hey…you. It's been great! How has…your stuff been?"
|
||||
|
||||
Then I stress eat or something while I listen to their interactions and hope they introduce themselves to someone.
|
||||
|
||||
"There must be a better way," I whisper to myself, and a single tear slides down my cheek.
|
||||
|
||||
There IS a better way to try and remember names.
|
||||
|
||||
First of all, really focus. This sounds obvious, but think about it. When you meet someone, you're often thinking about how you'll respond next or what you look like or what they're looking like. Stop thinking about that. Repeat their name in your head, and repeat it when they first say it. I guarantee it helps.
|
||||
|
||||
You can remember names based on your learning style too.\\
|
||||
|
||||
**If you're a visual learner**, look for a name tag or at their business card. If you're in a more casual setting, ask them how they spell it. If you spell it in your head, you can better "see" their name and remember it.\\
|
||||
|
||||
**If you're an auditory learner**, repeat their name as often as you can (naturally). "Cassidy, what's your major?" "Joel, did you go to the game last week?" "It's so good to meet you, Shirley!" If you don't overdo it, they'll appreciate it as much as you do that you remember their name. If that doesn't work, just ask them to repeat their name at the end of the conversation, like, "it was great meeting you! Remind me of your name again?" Boo yah. I mean don't do that after a 3 hour conversation, but after a few minutes it's totally acceptable.\\
|
||||
|
||||
And if you're **a hands-on learner**, you have to play with the name to remember it better. If you can't write it down right away, come up with something in your head that'll help you remember, like "Riley from Friley," or "Jungle Jim," or "Hannah Banana." You interact with the name this way, and it'll help you remember much better.
|
||||
|
||||
There's always cop-out ways to find out too, like introducing a friend of yours to the person and hope they introduce themselves to your friend, or ask a buddy that might know. Those ways totally work too.
|
||||
|
||||
Good luck meeting people, my cream puff.
|
||||
I definitely don't remember your name, and so my defense here is using complimentary nicknames to distract you.
|
||||
Whoops.
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Saying goodbye to my crappy vision"
|
||||
slug: crappy-vision
|
||||
description: "My vision sucks... for now, with LASIK on the horizon!"
|
||||
added: "Jul 28 2022"
|
||||
tags: [personal]
|
||||
---
|
||||
|
||||
I'm sitting here tonight, July 28th a little past midnight, thinking about my vision, because it's going to be fixed in the morning soon after I wake up. I'm wearing my glasses, like I have for years and years and years, and I keep taking them off and looking around at the blurry room around me.
|
||||
|
||||
I keep wondering... am I going to miss how blurry this is? It's bad vision. I can't see the mirror across the room, or the number on the scale when I weigh myself in the morning, or captions on a TV, or even the words I'm writing right now. But it's my bad vision, I guess. I grew it myself! And now I'm going to be fixing it myself. I wonder if I'll be overwhelmed, or if it'll just... be. I'm probably being dramatic about it. But it does feel like the end of an era, and saying goodbye to a (flawed) part of myself.
|
||||
|
||||
Cami said to me when I told her I was going to do it, "wow, really, I'm surprised... you're a glasses girl." And I am, I have been forever, but particularly in the pandemic when I lost the interest in the effort of putting in contacts somewhat regularly. Glasses have always been my "let's relax and just wear these today" look and contacts have been my, "okay we're putting in effort today" look, and now... that decision just won't exist for me anymore. The Effort with a capital E is going to be done tomorrow and it'll just be my face and me now. It's wild to think about.
|
||||
|
||||
Back in college when my sleeping habits were horrid, I almost lost my vision. My eyes turned gray and my eyelids were scratchy against them, and from wearing eyepatches to zapping them with very medicated drops, they went through some rough times. That period (a solid 10 years ago now, wow) made me so deeply grateful for the ability to see. I've been so protective of my eyes ever since then, and try to intentionally appreciate art and colors and faces as much as I can, because you never know when that'll go away. It makes me nervous for the zapping tomorrow. But thousands, probably millions, of people have done this before, so... statistically speaking, we should be good, heh.
|
||||
|
||||
Anyway. Goodbye, crappy eyesight. I can't wait to be able to hang out at a beach and wear cheap sunglasses and not have to worry about sand getting in my contacts. I can't wait to shower without glasses and see my legs when I shave them. I can't wait to rub my eyes when I'm sleepy and not have to think about moving a contact lens around. I can't wait to not be nervous about going down stairs because my depth perception won't be warped between my glasses and the blurry space between my actual eye and the lens. I can't wait to be able to lay down on a pillow watching TV with no glasses frames pushing against my skin, and be able to fall asleep without worrying about taking my contacts out before doing so. I can't wait to wear a VR headset and not have to think, "am I wearing the skinny glasses so my head can fit in these?" I can't wait to wear headphones and not have to choose based on which ones push my glasses frames in weird ways. I can't wait to put on makeup and not have to push my face 2 inches from the mirror while I do it. I can't wait to see Joe make his silly faces in the morning that he does when I sleep in and he's trying to sneak up on me. I can't wait to hug people and not have to worry about their hair getting caught in my frames.
|
||||
|
||||
Tonight, I'll appreciate the blur. Tomorrow, we'll celebrate the clarity!
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Seattle and the internet
|
||||
slug: seattle-internet
|
||||
description: The internet today reminds me of when I used to live in Seattle.
|
||||
tags:
|
||||
- personal
|
||||
- musings
|
||||
added: 2024-04-16T00:08:54.561Z
|
||||
---
|
||||
|
||||
From the end of 2016 through the first half of 2020, I lived in Seattle. I really liked living there when I did. It was a quirky city (I had moved there after burning out in NYC), and I often called it a "hobbyist" city. Everyone there is _really_ into the things they're into.
|
||||
|
||||
**Exhibit A:** I moved there with a light interest in mechanical keyboards, and I left with a couple dozen boards to my name, some keycap design brand deals, after helping organize a 300+ person mechanical keyboard event annually, and being on the board of a non-profit that helped kids learn how to solder via mechanical keyboards.
|
||||
|
||||
**Exhibit B:** I love playing music, and in my time there, I was a part of the Seattle Video Game Orchestra (playing fun music from Skyrim and Zelda and more at various events and conventions), as well as an all-electric-guitar band, and almost joined another one before the pandemic hit.
|
||||
|
||||
I _love_ getting into things, and if you wanted to get into something, whether it's rock climbing or birdwatching or music or coffee, Seattle was (and is) the place to do it.
|
||||
|
||||
All that being said... I really, really struggled to make friends there. The [Seattle Freeze](https://en.wikipedia.org/wiki/Seattle_Freeze) is very much a thing. I would invite someone to dinner or to hang out, and it was incredibly common for them to ghost me after I asked. I would go to a tech meetup, and I would almost never actually interact with the people at the meetup (outside of the people in my group with whom I went). Nearly all of the friends I _did_ make were people I knew from outside of Seattle.
|
||||
|
||||
And honestly, I didn't mind that. I am more introverted, and I enjoyed having just 2 or 3 really close friends (one being my sister) and more distant friends that I'd see on occasion.
|
||||
|
||||
However, there was a point in the summer of 2019 where I spoke at back-to-back events, a couple in Denver and one in Chicago, and something hit me that I didn't expect: follow-ups. I had so many emails from people thanking me for my talk, and asking to connect in the future next time I was in town. I had texts from people asking if I wanted to go to a café after the event to talk more. It felt like a social fog had lifted in my brain: follow-ups are **normal**! That human connection is what these events are **for**! What the heck had I been doing **not** meeting people for a couple years?
|
||||
|
||||
At that point, I kind of knew that I didn't want to stay in Seattle forever, but I'd try to work harder at the "social" thing. It didn't really work, and then COVID really messed with my plans. When our jobs went fully remote, my husband and I decided to move to a larger city (Chicago) closer to family.
|
||||
|
||||
And y'all... I'll cut to the chase, we have made _so_ many friends in Chicago. In that first year we were here, end of 2020 - 2021, even though it was the height of the pandemic, we made more friends here than we did in nearly 4 years in Seattle.
|
||||
|
||||
It is not nearly as much of a hobbyist city. Yes, they have a mechanical keyboard meetup and tech meetups and bands you can join, yes. But it's so much more of a _social_ city. We'll be at a burger place and someone will ask us if we've seen any good movies lately. I went to a tech meetup and someone invited me to the Renaissance Fair. I'm friends with people where our Venn Diagram of interests has basically nothing in the middle, but they're friendly, so we can gab about something on occasion. Even as an introverted dweeb, I absolutely love how many people I've gotten to know well, and it's not a slog to make those connections. It's so _filling_!
|
||||
|
||||
That level of human connection and community is so valuable, and has been genuinely great for my brain in ways I didn't expect. I didn't realize that I felt lonely, until I had _so_ many people who were fun to talk to, down to grab food, asking for rides to the airport, able to help watch my baby, sharing Costco memberships, or just wanting to be around. I know other cities and places also have this type of vibe, too. But allow me to stop there and use this experience as a metaphor for...
|
||||
|
||||
## The internet
|
||||
|
||||
I've written about [human curation](https://blog.cassidoo.co/post/human-curation/) before, so it might sound like I'm beating a dead horse, but hang in there with me: Right now, the internet is really, really good at being geared towards your specific interests.
|
||||
|
||||
The internet today is a lot like my Seattle experience. The "For You" pages on the various social networks are spot on with regards to what I like, and they help me get _more_ into the things that I like. But those aren't really "social" networks as much anymore. They're content networks. It's things, not connections. Yes, some connections do happen, but the mediums are geared towards what _content_ will keep you around.
|
||||
|
||||
I feel like the internet of the past was more like my Chicago experience. I made random internet friends who I'm still friends with from over a decade ago. There's little pockets here and there on Discord (hello, nerds) and other more chat-oriented spaces, but it's not what it once was. I saw a post somewhere the other day that was something like:
|
||||
|
||||
> 2006, everyone has a MySpace
|
||||
> 2010, everyone has a Facebook
|
||||
> 2014, everyone has an Instagram
|
||||
> 2016, everyone has a Snapchat
|
||||
> 2020, everyone has a TikTok
|
||||
> 2024, everyone has a ...?
|
||||
|
||||
The responses to this were filled with people saying "short attention spans" and "anxiety" and related things. Though there's exceptions to the rule and "not everyone had every network" blah blah, **the point is** that there isn't a big central place now to find or interact with friends unless you really put a lot of effort into it. Everyone feels like they have really retreated into the comfort of letting the feeds fill their minds with things that generally interest them in bite-sized pieces. We've gotten lazier and lazier, and the UIs are designed to be so intuitive and addicting that we're just pulled in more. We don't have the "social" parts of the social networks as much anymore.
|
||||
|
||||
Since writing my previously linked post on human curation, it's been really cool seeing the things people have written and made that are very much not algorithm-focused (I got a lot of cool emails and messages with links, and I welcome more). I've been able to chat with people and discover topics I never would have known about before. I probably sound like an old woman shaking my fist at the moon when I say this, but I really feel like that's how the internet should be.
|
||||
|
||||
I don't know what the "Chicago" of the internet might be, if we're still leaning into this metaphor. We have brains that we should be using, and social muscles that we should be flexing, no matter how introverted or shy we are. We shouldn't just let the algorithms decide what we see on the internet. We should be able to effortlessly have human connections, even if it's with people who are interested in different things.
|
||||
|
||||
Until someone solves it (please don't make me solve it), I'd better run, some friends just stopped by with boba, and I've got to tell them about a book I just read!
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "See ya, 2022"
|
||||
slug: see-ya-2022
|
||||
description: "2022 is over, taking a lil look back on how it was."
|
||||
added: "Dec 31 2022"
|
||||
tags: [learning, work, personal, musings]
|
||||
---
|
||||
|
||||
Man, 2022 was a year of **extreme** highs and lows, probably the most extreme I've had... ever.
|
||||
|
||||
It's kind of hard to look back on all of them, because there's so much to really think about. Which is not unique to me, but still. I'll break it down and see how much I can process until midnight strikes in... 1.5 hours.
|
||||
|
||||
## Work things!
|
||||
|
||||
Phew so work had some _changes_ this year. At the end of 2021, I decided to leave Netlify, mostly due to burnout and wanting to explore tech education more.
|
||||
|
||||
And so, at the start of this year, I ended up joining [Remote](https://remote.com/) as the Head of Developer Education and Experience to do that for realzies. And, ya know, on paper, that role was pretty perfect. I had a ton of autonomy, I had kind coworkers, and I had time to spare to work on side projects that had been sorely neglected. I genuinely enjoyed hanging out with a lot of the folks there, but at the same time... I was kind of on an island. A lot of the work I was able to accomplish and put out in the world (like [Remote Connect](https://remote.com/events/on-demand/source-code) and [Devs For Ukraine](https://www.devsforukraine.io/) and [the engineering blog](https://remote.com/blog/category/engineering)) was reliant on me getting busy people to work with me on something "extra" outside of their day jobs.
|
||||
|
||||
When people inevitably had to put off the "extra" (particularly as the economy started to buckle a bit), I was very... bored. I would still work— I'd always figure out how to fill in the time with something— but I was very regularly faced with, "this is awesome Cassidy, perhaps we can do this someday," and I was getting impatient with it. I job interviewed a few times, without ever really finding a good fit. I acknowledge I am wildly privileged to be able to have had this experience, and I'm grateful for it, but that's what was going on!
|
||||
|
||||
Meanwhile, in April, I started part time work at [OSS Capital](https://oss.capital)! I had been in chats with them since I worked at Netlify, wanting to work with them, but not quite ready to take the leap into being a full-time founder yet. For OSSC, I joined as a Portfolio Partner for Developer Experience, meaning I was advising the portfolio companies from a dev rel perspective (helping with hiring, strategy, making introductions, that sort of thing), and I also helped out the team on technical things too (like the website)! I genuinely enjoyed doing that gig, and I actually proposed joining them full time, but the timing wasn't quite right. In November, they sadly had to lay me off (amongst others), but I still maintain a good relationship with them and hope to do more work with them in the future.
|
||||
|
||||
I still love advising companies! When I left Netlify, I stayed on as an advisor, and I also joined [Centered](https://www.centered.app/) and [Plasmic](https://www.plasmic.app/) as an advisor this year as well. Being able to help companies grow and offer my perspective is something that's relatively low lift, but high impact, and it's really rewarding... which leads me to where I ultimately ended up at the end of this year!
|
||||
|
||||
In the summer, my friend Lilly (who is the CEO of a startup [Contenda](https://contenda.co/) that I've been advising since they started) started to float the idea to me about joining the company full time. It was super appealing, but I had to think on the timing and how it might work out. The more I thought about it though, it was a no-brainer. I knew the team well, it was a product I cared about, and I could make an impact at my day job (which was something I was missing dearly). So, in September, I joined Contenda as CTO full time! It has been chaotic and wonderful all at once, and I'm so happy I joined such a great group of people building something awesome.
|
||||
|
||||
## Personal things!
|
||||
|
||||
So many things happened, gosh, so many things! My sister got married, I traveled internationally for the first time since March 2020, I saw family, I saw friends, I got LASIK, my cousin got engaged... I loved being with people I care about this year. I also experienced a close family loss, which was deeply devastating, but it brought our family together to mourn with each other.
|
||||
|
||||
I also... got pregnant!! This has been probably the most grueling physical experience I've ever had (so far). I'm due in the Spring, and I have been shaking my fist at the state of research in women's health pretty dang regularly. But, my husband and I are thrilled (and so is the family), and she'll be a very loved baby!
|
||||
|
||||
## Side project things!
|
||||
|
||||
Outside of the busyness of job things and the personal life going every which way, I'm happy with my various projects this year!
|
||||
|
||||
First of all, [my weekly newsletter](https://cassidoo.co/newsletter/) crossed its 5th year anniversary! This is one that is very near and dear to my heart. I probably spend most of my side project time on this one, and the fact that we hit that milestone and folks are actually reading it is really exciting for me. I love getting to help people with coding problems and staying up-to-date, and also love that it keeps me actually reading articles instead of leaving infinite tabs open.
|
||||
|
||||
In other newsletter... news... (heh), we crossed 150 issues of the [Stack Overflow newsletter](https://stackoverflow.blog/newsletter/)! I've been helping the team write it ever since the newsletter started back in 2019, and it's been great to see it grow. I also joined as a regular host of the [Stack Overflow Podcast](https://stackoverflow.blog/podcast/)! I had been speaking on the show regularly for a while now, but it's been fun being able to consistently chat with the other hosts and guests.
|
||||
|
||||
Speaking of podcasts, I started [The Dev Morning Show (at night)](https://www.youtube.com/@DevMorningShow) podcast with my friend [Zach](https://twitter.com/zachplata) and [LaunchDarkly](https://launchdarkly.com/)! It's been a blast working on that show and speaking with such cool people.
|
||||
|
||||
I spoke at a few events this year, outside of the ones I mentioned above at Remote, like [GitHub Universe](https://www.youtube.com/watch?v=fkV3_VQpELI), and [All Day Hey](https://www.youtube.com/watch?v=XGNYDjyD6G8)! I admit I didn't speak as much as I have in the past, but it was kind of nice saying yes to less and being a very happy audience member. I will say though, I spoke at my first in-person event (a local meetup!) since the pandemic this summer, and it was incredible. I can't wait for those to come back more and more, I loved it!
|
||||
|
||||
I did a good chunk of writing this year, too, enough that I rewrote my blog so I could try to consolidate posts _right here on this website_ (how meta). I wrote some articles on [dev.to](https://dev.to/cassidoo/), for [LeadDev](https://leaddev.com/community/cassidy-williams), for [The GitHub ReadME Project](https://github.com/readme/guides/functional-programming-basics), and also a bunch just for myself that I haven't published publicly. I've talked before about how I like to use [Obsidian](https://obsidian.md/) for my note-taking, and it's really helped me write more consistently, whether I publish or not!
|
||||
|
||||
Code-wise, I rewrote the website for [Cosynd](https://cosynd.com/) (this is a project I've been working on for more than 6 years now), I started updating [todometer](https://cassidoo.github.io/todometer/), and I built some random demos [on my regular livestream](http://twitch.tv/cassidoo), too (like [Better Security Questions](https://github.com/cassidoo/better-security-questions) and [a pi memorization game](https://github.com/cassidoo/solid-pi-guesser) and various open source contributions).
|
||||
|
||||
Keyboard-wise, I finally (finally!) got [DSA Scrabble keycaps](https://www.clackeys.com/scrabble) to go live!! I first designed those back in 2017, released V1 in early 2018, and I've been wanting to bring them back ever since. It was a labor of love to get everything re-designed with the new branding and licensing, but it happened! I also shipped [a free email course](https://www.keyboardlegend.dev/) to teach people about mechanical keyboards in general.
|
||||
|
||||
Also, not really a side project but something I'm happy with, I read 10 books this year! It's not a lot by any means, but I've been wanting to build my reading habit back, and it's a start. Similarly (kind of), I've been playing a lot more [go](https://online-go.com/) recently, and I do think I'm getting better, and hope to hit some goal rankings next year.
|
||||
|
||||
## Phew!
|
||||
|
||||
Anyway, 2022 has been quite the year, and I feel so grateful and blessed to have made it through and be where I am today. Who knows what 2023 will bring? Thanks for reading so far. As a reward, here is a joke: What do you say when you see a vegetable that's awesome, but not too awesome? That's rad-ish!
|
||||
@@ -1,52 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: 'HTML "self-awareness" with sibling indexing in JavaScript'
|
||||
slug: self-aware-html
|
||||
description: 'Make your HTML more "self-aware" with a fun little trick to get its own index.'
|
||||
added: "Jan 28 2024"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
This is a super specific use case, but if you have an HTML element and you want it to be more "self-aware", you can do:
|
||||
|
||||
```js
|
||||
let element = document.getElementById('whatever');
|
||||
|
||||
// To get an array of siblings
|
||||
[...element.parentElement.children]
|
||||
|
||||
// To get current index of self
|
||||
[...element.parentElement.children].indexOf(element)
|
||||
```
|
||||
|
||||
What we're doing here is:
|
||||
|
||||
- Getting our HTML element
|
||||
- Getting the parent of our HTML element
|
||||
- Getting the children of the parent
|
||||
- Spreading it into an array (because it's an `HTMLCollection` otherwise, you can also use [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from))
|
||||
- Getting the index of our element amongst all of its siblings
|
||||
|
||||
I figured this out after working on a framework-less project, where I wanted an HTML `<button>` to be able to tell the function it called its own index.
|
||||
|
||||
Example HTML:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<button onclick="whoami(event)">Some button</button>
|
||||
<button onclick="whoami(event)">Some other button</button>
|
||||
<button onclick="whoami(event)">And other button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
And the corresponding example JavaScript:
|
||||
|
||||
```js
|
||||
function whoami(event) {
|
||||
let element = event.currentTarget;
|
||||
let currentButtonIndex = [...element.parentElement.children].indexOf(element);
|
||||
// ...and so on
|
||||
}
|
||||
```
|
||||
|
||||
Anyway, I thought this was cool, hope it's useful for you!
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Sorting Git branches
|
||||
slug: sort-git-branch
|
||||
description: >-
|
||||
If you're tired of your git branches being alphabetically sorted, you can
|
||||
change that!
|
||||
tags:
|
||||
- technical
|
||||
added: 2024-02-15T15:46:32.808Z
|
||||
---
|
||||
|
||||
Normally when you run `git branch` on a repository, you get your list of branches in alphabetical order, which can be very annoying if you have a lot of them (unless you have a very rigid naming system by ticket number or something).
|
||||
|
||||
You can change that now!
|
||||
|
||||
In your repo, if you do:
|
||||
|
||||
```shell
|
||||
git branch --sort=-committerdate
|
||||
```
|
||||
|
||||
This will sort all of your branches by the date of their last commit!
|
||||
|
||||
You can sort by:
|
||||
|
||||
* `authordate`
|
||||
* `committerdate`
|
||||
* `creatordate`
|
||||
* `objectsize`
|
||||
* `taggerdate`
|
||||
|
||||
Plus, you can also do this globally if you want to always do it by one of these, like so:
|
||||
|
||||
```shell
|
||||
git config --global branch.sort -committerdate
|
||||
```
|
||||
|
||||
Or, you could set an alias:
|
||||
|
||||
```shell
|
||||
git config --global alias.brcd "branch --sort=-committerdate"
|
||||
```
|
||||
|
||||
Now go on and git committing!
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
layout: ../layouts/BlogPost.astro
|
||||
title: Startup Weekend Ames
|
||||
slug: startup-weekend-ames
|
||||
description: We built some fun things at Startup Weekend!
|
||||
tags:
|
||||
- events
|
||||
added: 2013-04-17T05:00:00.000Z
|
||||
---
|
||||
|
||||
Have you ever thought about starting your own business?\
|
||||
|
||||
Well, this past weekend, Ames participated in [Startup Weekend](https://www.techstars.com/communities/startup-weekend) for the first time. Startup Weekend is an organization in which you spend Friday evening, plus all of Saturday and Sunday to try and build your own business or product from the ground up.
|
||||
|
||||
I participated with some of my friends and it was a blast! We worked hard all weekend on a phone app called "Finddit" that helps you find where you last left your car or bike or anything, plus you can share marked locations with friends (like if you're tailgating and want to show where your tent is, or where a booth at the career fair is, etc.).
|
||||
|
||||
|
||||
|
||||
We pitched it in front of everyone there and got a lot of good feedback!
|
||||
|
||||
|
||||
|
||||
You should try something like this when you get the opportunity so you can get fabulous prizes and experience!
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Stock options, vesting, and exercising, oh my"
|
||||
slug: stock-option-shenanigans
|
||||
description: "Here's some advice around stock options and why they are... the way that they are!"
|
||||
added: "Dec 30 2023"
|
||||
tags: [advice]
|
||||
---
|
||||
|
||||
I got some good questions [on my livestream](twitch.tv/cassidoo) earlier this year about stock options for startups!
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/_iGcR16LO10?si=KZZZT76mZaeQPusr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
||||
In case you don't want to watch, at a high level, here's what I talk about that might be useful for you:
|
||||
|
||||
1. **Startup Financing**: When a startup decides to raise funds, it usually starts with a seed round, followed by Series A, B, C, etc. There might also be a pre-seed or angel round before the seed round. The startup gets money from investors in exchange for ownership of the company. The lead investor in each round decides the valuation of the company and invests a specific amount based on that valuation.
|
||||
2. **Strike Price**: The strike price is the price per individual share. It's determined by the company's valuation and the amount invested. Initially, the strike price is usually small, but it grows over time as the company's valuation increases. For example, during the seed round, the shares might be worth just a few cents each. However, as the company raises more money, the value of shares increases.
|
||||
3. **Ownership**: The company is owned by the founders, and then the investors, and then eventually, the employees. When you're an employee at a startup, you're typically offered a percentage of the company's ownership that the investors don't own.
|
||||
4. **Risk vs Reward**: Joining a startup at the seed or Series A stage is riskier, but your share price is less, which could lead to greater rewards if the company succeeds. If you join a startup at Series D, for example, it's more secure, but the share price is significantly higher.
|
||||
5. **Vesting and Stock Options**: Vesting is the process of earning the right to buy your ownership in the company. Once your options vest, they're yours to buy until a certain point (typically 30 to 90 days past your last day at the company). If you don't buy them, they go back into the company pool. If you do buy them, they're yours forever, even if you leave the company.
|
||||
6. **Liquidation**: To cash out your shares, you typically have to wait for the startup to exit, either through an IPO or a buyout. When this happens, your shares are converted to cash. Some startups also offer a "buyback" option when they raise a new round, which allows you to sell your shares back to the company at their current value.
|
||||
7. **Preferred vs Common Shares**: Typically, employees get common shares and investors get preferred shares. Preferred shares are advantageous during liquidation, as preferred shareholders get their money first. [More on that here](https://learn.angellist.com/articles/preferred-shares-vs-common-shares).
|
||||
|
||||
Overall, the main thing you need to remember is that investing in startups is always a risk. Companies can fail (and often do, [especially in this economy](https://carta.com/blog/deal-terms-q3-2023/#deals-drying-up)), and when they do, your investment fails with them. But, if a startup succeeds... the returns can be significant! Your equity in a company is a lottery ticket - you may not win, but if you do, the rewards can be huuuge!
|
||||
|
||||
If you'd like more information beyond this, I highly recommend [this blog post by Julia Evans](https://jvns.ca/blog/2015/12/30/do-the-math-on-your-stock-options/).
|
||||
|
||||
Until next time!
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Styling a CSS pseudo-element with JavaScript"
|
||||
slug: styling-css-pseudo
|
||||
description: "JavaScript can't target pseudo-elements, but that doesn't mean you can't mess with them!"
|
||||
added: "Mar 05 2024"
|
||||
tags: [technical]
|
||||
---
|
||||
|
||||
In JavaScript, you can't do some kind of query selector like:
|
||||
|
||||
```js
|
||||
document.querySelector("div::after");
|
||||
```
|
||||
|
||||
But, with the power of CSS variables, you can still change the styles of those selectors with JavaScript!
|
||||
|
||||
In your CSS, pick a variable name and assign it to something:
|
||||
|
||||
```css
|
||||
div::after {
|
||||
/* 50px is the default value if --somewidth doesn't exist */
|
||||
width: var(--somewidth, 50px);
|
||||
}
|
||||
```
|
||||
|
||||
And in your JavaScript, you use the [`setProperty` function](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) to assign a value to that variable!
|
||||
|
||||
```js
|
||||
// this is just grabbing a div, you can change it to select any element
|
||||
const element = document.getElementsByTagName("div")[0];
|
||||
|
||||
element.style.setProperty("--somewidth", "50%");
|
||||
```
|
||||
|
||||
So there ya go! You can obviously make this more complex as needed. Here's an example of all of this in action! It's a template I made for tracking fundraising efforts (feel free to use the template [on CodePen](https://codepen.io/cassidoo/pen/KKYpjMJ)).
|
||||
Specifically note **line 38** in the CSS, and **line 25** in the JavaScript!
|
||||
|
||||
<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="css,result" data-slug-hash="KKYpjMJ" data-user="cassidoo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
|
||||
<span>See the Pen <a href="https://codepen.io/cassidoo/pen/KKYpjMJ">
|
||||
Money goal tracker template</a> by Cassidy (<a href="https://codepen.io/cassidoo">@cassidoo</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.</span>
|
||||
</p>
|
||||
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
|
||||
@@ -1,38 +0,0 @@
|
||||
---
|
||||
layout: "../layouts/BlogPost.astro"
|
||||
title: "Subconscious Learning"
|
||||
slug: subconscious-learning
|
||||
description: "I've been learning about... learning lately, specifically subconscious learning. Here's what I've found!"
|
||||
added: "Mar 16 2016"
|
||||
tags: [learning]
|
||||
---
|
||||
|
||||
One of the things I've done lately is try to passively learn Morse code. I added
|
||||
a bunch of custom vibrations for each letter of the alphabet to my phone, and
|
||||
when I add someone to my contact book, I assign them the custom vibration. So,
|
||||
as people text or call me, I'm slowly but surely learning Morse code because of
|
||||
their names. Now I definitely know some letters, like J and C, a lot more than
|
||||
others like Q or V. But hey, it's something!
|
||||
|
||||
We're all exposed to subliminal messages. Due to the massive amounts of
|
||||
information we're exposed to every single day, and our limited capacity to
|
||||
actively, consciously register it, there's always small changes in our minds.
|
||||
But, if you're exposed to the same information again and again over time,
|
||||
there's more lasting changes. So, like in my example above, I've been constantly
|
||||
hearing vibrations for people every day, and the repetition has led to my
|
||||
learning without my having to think about it.
|
||||
|
||||
When a person is stressed, they use both their conscious memory and their
|
||||
subconscious memory to compensate for all of the stress. The switch from totally
|
||||
conscious learning to conscious+subconscious learning is triggered by
|
||||
[mineralocorticoid receptors](http://en.wikipedia.org/wiki/Mineralocorticoid_receptor),
|
||||
which are released in response to stress. The switches are controlled by the
|
||||
[amygdala](http://en.wikipedia.org/wiki/Amygdala), the part of the brain that's
|
||||
responsible for both memory and emotional reactions. There's a really
|
||||
interesting study by Schwabe, Tegenthoff, and Hoffken that talks about this. You
|
||||
can read it [here](<http://www.biologicalpsychiatryjournal.com/article/S0006-3223(13)00513-1/abstract>).
|
||||
So, it turns out that when I said that I "operate well under stress" in college,
|
||||
I wasn't actually making that up!
|
||||
|
||||
There's probably a lot more to learn about subconscious learning. Please feel
|
||||
free to send me anything you've found on the subject!
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user