txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add old blog posts, update their frontmatter

Browse Source
This commit is contained in:
Cassidy Williams
2022-08-23 17:10:04 -05:00
parent 89b2038744
commit 7317d3982b
34 changed files with 2676 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/blog.astro
View File

@@ -6,7 +6,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
// Use Astro.glob() to fetch all posts, and then sort them by date. // Use Astro.glob() to fetch all posts, and then sort them by date.
const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort( const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
(a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf() (a, b) => new Date(b.frontmatter.added).valueOf() - new Date(a.frontmatter.added).valueOf()
); );
--- ---
@@ -39,8 +39,8 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
<ul> <ul>
{posts.map((post) => ( {posts.map((post) => (
<li> <li>
<time datetime={post.frontmatter.pubDate}> <time datetime={post.frontmatter.added}>
{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', { {new Date(post.frontmatter.added).toLocaleDateString('en-us', {
year: 'numeric', year: 'numeric',
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',

44
src/pages/blog/10-tips-for-successful-public-speaking.md Normal file
View File

@@ -0,0 +1,44 @@
---
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!

44
src/pages/blog/5-examples-of-linear-regression.md Normal file
View File

@@ -0,0 +1,44 @@
---
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:
![pic](/assets/capm.png)
...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.

91
src/pages/blog/a-weekend-at-battlehack-boston.md Normal file
View File

@@ -0,0 +1,91 @@
---
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.
![pic](/assets/bh/swag2.jpg)
It felt like the swag and props were never ending. Which is a good thing.
![pic](/assets/bh/swag3.jpg)
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.
![pic](/assets/bh/swag5.jpg)
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.
![pic](/assets/bh/food.jpg)
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.
![pic](/assets/bh/pose.jpg)
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/)).
![pic](/assets/bh/crowd.jpg)
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.
![pic](/assets/bh/prizes.jpg)
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.
![pic](/assets/bh/demo.jpg)
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.
![pic](/assets/bh/progress.jpg)
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.
![pic](/assets/bh/team.jpg)
Until next time! :)

43
src/pages/blog/adding-keyboard-shortcuts-to-react.md Normal file
View File

@@ -0,0 +1,43 @@
---
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! :)

62
src/pages/blog/agua-caliente-writing-exercise.md Normal file
View File

@@ -0,0 +1,62 @@
---
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. :)

171
src/pages/blog/building-my-s60x-keyboard.md Normal file
View File

@@ -0,0 +1,171 @@
---
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).
![pic](/assets/s60x/unboxing.gif)
The first step was to add the switches to the front plate.
![pic](/assets/s60x/addswitches.jpg)
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.
![pic](/assets/s60x/switchesstabilizers.jpg)
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:
![pic](/assets/s60x/solder.jpg)
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!
![pic](/assets/s60x/backlights.jpg)
Anyway, once the soldering was done, it was time to put the case on!
![pic](/assets/s60x/backplate.jpg)
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.
![pic](/assets/s60x/keycaps.jpg)
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.
![pic](/assets/s60x/keycapsfull.jpg)
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!
![pic](/assets/s60x/finishedboard.jpg)
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. :)

83
src/pages/blog/closures-in-javascript.md Normal file
View File

@@ -0,0 +1,83 @@
---
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.

57
src/pages/blog/crushing-the-impostor-syndrome.md Normal file
View File

@@ -0,0 +1,57 @@
---
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."
added: "Jul 23 2013"
tags: [advice]
---
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?!?
![impostor diagram]({{ site.url }}/assets/impostorsyndrome.jpg)
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.

52
src/pages/blog/css-image-values-spec.md Normal file
View File

@@ -0,0 +1,52 @@
---
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!

77
src/pages/blog/css-text-carousel.md Normal file
View File

@@ -0,0 +1,77 @@
---
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!

39
src/pages/blog/feedback-is-awesome.md Normal file
View File

@@ -0,0 +1,39 @@
---
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]
---
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.

44
src/pages/blog/finding-a-mentor.md Normal file
View File

@@ -0,0 +1,44 @@
---
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."
![pic](http://i.imgur.com/eucxwpW.gif)
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.

17
src/pages/blog/first-post.md
View File

@@ -1,17 +0,0 @@
---
layout: "../../layouts/BlogPost.astro"
title: "First post"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 08 2022"
heroImage: "/placeholder-hero.jpg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

3
src/pages/blog/hello-world.md
View File

@@ -3,9 +3,8 @@ layout: "../../layouts/BlogPost.astro"
title: "Hello, world" title: "Hello, world"
slug: hello-world slug: hello-world
description: "Lorem ipsum dolor sit amet" description: "Lorem ipsum dolor sit amet"
pubDate: "Aug 08 2022"
added: "Aug 08 2022" added: "Aug 08 2022"
tags: [meta, development] tags: [meta, technical]
--- ---
I decided to 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 decided to 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.

47
src/pages/blog/how-ace-an-interview.md Normal file
View File

@@ -0,0 +1,47 @@
---
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!

43
src/pages/blog/how-to-ask-for-help.md Normal file
View File

@@ -0,0 +1,43 @@
---
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.

860
src/pages/blog/html-css-tutorial-part-2.md Normal file
View File

@@ -0,0 +1,860 @@
---
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: [tutorial]
---
### 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
![Alt](https://raw2.github.com/cassidoo/HTML-CSS-Tutorial/master/cpbm.jpg)
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.

449
src/pages/blog/html-css-tutorial.md Normal file
View File

@@ -0,0 +1,449 @@
---
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: [tutorial]
---
###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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://i.imgur.com/wjiVXJe.gif" style="border:5px dotted #ffcc00" />
<img src="http://i.imgur.com/wjiVXJe.gif" style="border:10px ridge rgb(77, 145, 99); width: 300px" />
<img src="http://i.imgur.com/wjiVXJe.gif" style="border:8px outset red" />
<img src="http://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!

24
src/pages/blog/l4-digital-first-impressions.md Normal file
View File

@@ -0,0 +1,24 @@
---
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!

55
src/pages/blog/making-the-whitney-api.md Normal file
View File

@@ -0,0 +1,55 @@
---
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!

2
src/pages/blog/markdown-style-guide.md
View File

@@ -2,7 +2,7 @@
layout: "../../layouts/BlogPost.astro" layout: "../../layouts/BlogPost.astro"
title: "Markdown Style Guide" title: "Markdown Style Guide"
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro." description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
pubDate: "Jul 01 2022" added: "Jul 01 2022"
heroImage: "/placeholder-hero.jpg" heroImage: "/placeholder-hero.jpg"
--- ---

22
src/pages/blog/messing-with-sketch-club.md Normal file
View File

@@ -0,0 +1,22 @@
---
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:
![pic](/assets/freakingtubbs.jpg)
(If you play the game Neko Atsume, you'll understand the inspiration behind this one)
![pic](/assets/totto.jpg)
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. :)

63
src/pages/blog/my-last-days-at-isu.md Normal file
View File

@@ -0,0 +1,63 @@
---
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.

37
src/pages/blog/my-talk-at-tedxdesmoines.md Normal file
View File

@@ -0,0 +1,37 @@
---
layout: "../../layouts/BlogPost.astro"
title: "My Talk at TEDxDesMoines"
slug: tedx-talk
description: "I talked at TEDxDesMoines, come here what I had to say! If you want to, of course."
added: "Feb 22 2014"
tags: [advice]
---
<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!

26
src/pages/blog/one-year-at-venmo.md Normal file
View File

@@ -0,0 +1,26 @@
---
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. :)

79
src/pages/blog/picking-my-brain.md Normal file
View File

@@ -0,0 +1,79 @@
---
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!

17
src/pages/blog/second-post.md
View File

@@ -1,17 +0,0 @@
---
layout: "../../layouts/BlogPost.astro"
title: "Second post"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 22 2022"
heroImage: "http://placekitten.com/g/800/700"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

38
src/pages/blog/subconscious-learning.md Normal file
View File

@@ -0,0 +1,38 @@
---
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!

39
src/pages/blog/the-history-of-the-png.md Normal file
View File

@@ -0,0 +1,39 @@
---
layout: "../../layouts/BlogPost.astro"
title: "A Brief History of the PNG"
slug: png-history
description: "The PNG file format has been around forever... sort of. Not really."
added: "Jun 15 2015"
tags: [technical]
---
I remember clear as day several years ago (2007 to be more exact) when transparent PNGs (Portable Network Graphics) became a reality. I was pretty young, at 15 years old, and I was checking out this web design/development forum I regularly looked at for help as I was teaching myself to code.
I logged on, and the site was UGLY. I was so confused. They had pictures of what could have been beautiful icons and graphics, but they all just had these horrible off-color borders and backgrounds.
There was a banner at the top that told me to download Internet Explorer 7, and my life changed. The transparent PNG. Everything was beautiful and shiny. You could have a multi-color background and an image on top of that, and it wouldn't have to line up perfectly to line up with the background.
Now, later, I found out that Microsoft had this whole alpha channel transparency deal figured out since IE5.5, with a proprietary filter called `AlphaImageLoader`. You could add this chunk of CSS and be all set:
```css
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
```
But, back then, there was no `filter` property in CSS. It was a totally proprietary extension by Microsoft that only worked in IE. And there were *so* many bugs with it back then, it was beautiful. If you used a PNG background image, links wouldn't often be clickable, and forms might have become unfocusable. It was slow to load. Background images couldn't be positioned nor repeated. Ah, the past. So broken. So delightful.
The PNG was first specified in October of 1996, and became an official international standard in November of 2003. There was a [period of time though when it wasn't so popular](http://www.libpng.org/pub/png/slashpng-1999.html).
Fast forward to now, and the PNG is the most used lossless image compression format on the internet. It was originally created to be a replacement of the GIF, but alas, you can't replace this:
![pic](http://i.imgur.com/7GuGra2.gif)
PNG was decided early on to be a single-image format. The developers of PNG tried to change that in 2001 (again, to compete with the GIF) by making the MNG (Multiple-image Network Graphics), but that never took off. Mozilla also tried by making the APNG (Animated Portable Network Graphics) in 2008, but that never really caught on, either.
Outside of animation, though, the PNG excels relative to the GIF. A PNG file with the same information as a GIF is almost always smaller, by as much as 50%. Dang, son.
The PNG today is great.
It supports grayscale, transparency, palette-based images, non-palette-based RGB[A] images, *and* it's lossless. There's [whole books](http://www.libpng.org/pub/png/book/cover.html) dedicated to how revolutionary it was back in the day.
So take some time, [read up about it](https://en.wikipedia.org/wiki/Portable_Network_Graphics), and appreciate history, darn it.

49
src/pages/blog/the-laptop-you-need-for-college.md Normal file
View File

@@ -0,0 +1,49 @@
---
layout: "../../layouts/BlogPost.astro"
title: "The laptop you need for college"
slug: college-laptop
description: "Too often people go for the biggest and best laptop out there, when there are reasonable, affordable options. Let's talk about it."
added: "Apr 14 2014"
tags: [advice]
---
Hello, cutie patootie. Your arms are so strong.
Now, let’s talk laptops.
Chances are, you’ll want one in college. They’re not absolutely necessary, but boy, are they convenient.
When I was about to go to college, I wanted the BEST MACHINE EVER. I was going to be the most hardcore computer science student in the world with the most attractive, powerful laptop that would carry me for the next four years and beyond. I dropped almost $2000 on what I thought was the coolest laptop in the world.
And you know what? It was cool. I loved that thing.
But it didn’t last.
By the middle of my junior year, I was using a different laptop, that was actually less powerful than the one I had bought. But it worked well for what I wanted.
So, moral of the story, don’t spend too much on the best, state-of-the-art laptop you can when you go to college. Every single one of my friends is on a different machine than the one they started with.
##So, what laptop SHOULD you buy?
Well, that depends on what you want to do, and what you like!
I’ll give you some general guidelines that should help you. I won’t tell you straight up which laptop would be perfect for you, because everyone’s different (this is like Harry Potter getting a wand, oh boy oh boy), but these ideas should help you out.
*Disclaimer:* I’m biased.
Also I’m going to talk about computers that aren’t as expensive, which means I probably won’t mention Macs much. But hey, Macs are good computers. They just cost an arm and a leg.
### For non-technical majors:
I’m looking at you, you lovely people who write a lot of papers and proposals for your business classes and your education classes and your sociology classes. Hi. You could probably get away with something not too powerful, but still easy to use and efficient. A Chromebook might be good, if you’re okay with using something like GoogleDocs for all of your files. A Microsoft Surface might also be an awesome solution for you, because it’s lightweight and still has all of Microsoft Office and other cool applications. If you want a more traditional laptop with Windows on it, I recommend the Lenovo ThinkPad E Series and L Series, as well as the Toshiba Satellite laptops. From what I’ve seen, those computers are super functional and fast for what you need, and won’t destroy your budget.
### For engineers, 3D-modelers, and drafters:
Hey, CAD-users. You’re going to need something with some pretty solid graphics and memory to handle all the things you’re making. You should have at least a 2.8 GHz CPU/Processor Speed for an i3 processor, or 1.8 GHz for an i5 or i7 processor, a 500 GB Hard-disk drive, and 4-6 GB RAM. I don’t think you’ll need as high as an i7 processor, but that’s just speaking from experience. You might be making something that is greater than I could ever imagine. Anyway, the machines that might just rock your boat are the HP Envy laptops, Asus K-Series laptops, and the Lenovo T Series laptops. These are some pretty powerful machines that’ll get the job done.
*For design majors:* Hey, artsy fartsy. For you, I’m going to recommend a Mac. The entire Design college at my school uses Macs. They will want you to have a Mac, even if you’ve already bought a PC. So, get one. Sorry there’s not much of an option here. But hey, it makes your choice easy. If you do get a PC, get one with a really good graphics card.
###For programmers and scientific majors:
Haaaayyyy hollerrrr. I’m one of you. For you, you will need the extra RAM, at least 6-8GB, I’d say. You’re going to be sticking a lot of data on your computer. I’d also go with an i5 processor. You won’t be using THAT much power, unless you’re doing some extreme OpenGL programming (which if you are, you’re brave, and should look at the engineering bullet above). I recommend an ultrabook for you. It’ll give you the power and portability you need. I have an i5 Samsung ultrabook, and I really like it. Lenovo has some sexy ultrabooks too. If you’re in the field more often (like for biological, animal, or agricultural sciences), I recommend something more like a Toshiba. They’re really hardcore and can take a hit if you bring it outside.
Boom.
So, there you have it. Now, you might disagree with my laptop opinions here. Again, everyone’s different. But, these guidelines should give you a general idea of what could be best for you. And again, don’t drop too much cash on a computer. Technology is moving fast, and you might end up getting a new one before you even graduate.
##Good luck!

32
src/pages/blog/things-on-your-linkedin.md Normal file
View File

@@ -0,0 +1,32 @@
---
layout: "../../layouts/BlogPost.astro"
title: "Things you should have on your LinkedIn profile"
slug: linkedin-profile
description: "As much as I'd like to say that your looks will get you far, sometimes actual information is good to know too."
added: "Feb 27 2014"
tags: [advice]
---
Hello friends!
Now I know what you’re thinking. “I’m attractive, and that’ll get me a job. 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. Only if your name isn’t Cassidy you should probably put your own name on there.
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

17
src/pages/blog/third-post.md
View File

@@ -1,17 +0,0 @@
---
layout: "../../layouts/BlogPost.astro"
title: "Third post"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 15 2022"
heroImage: "/placeholder-hero.jpg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

2
src/pages/blog/using-mdx.mdx
View File

@@ -2,7 +2,7 @@
layout: '../../layouts/BlogPost.astro' layout: '../../layouts/BlogPost.astro'
title: 'Using MDX' title: 'Using MDX'
description: 'Lorem ipsum dolor sit amet' description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 02 2022' added: 'Jul 02 2022'
heroImage: '/placeholder-hero.jpg' heroImage: '/placeholder-hero.jpg'
--- ---