DEV Community: CarlyRaeJepsenStan

Converting Hex to Text - the Bash Way

CarlyRaeJepsenStan — Mon, 14 Mar 2022 22:27:06 +0000

Let's start by pretending someone gave us some pure plain-text bytes, like this:
68656c6c6f20776f726c64

What are we going to do to find the hidden message?

First, we know that hexadecimal bytes are always 2 characters - you can verify this by using man ascii in your terminal and checking out the tables it shows. Next, we know that you can convert a hex byte into ASCII (or text) by using echo like this:

echo -e "\x61"

# a

What I thought we could do is split the hex string into an array of two-character pieces, and then use a loop to print them like above. So deciphering our hex string is actually pretty straightforwards!

You can use the command fold to first split up the string:

 ~
  ▲ echo $(echo 68656c6c6f20776f726c64 | fold -w2))
68 65 6c 6c 6f 20 77 6f 72 6c 64

And here's a cool fact: by default, anything with spaces is automatically split into a loopable array by bash!

In case you forgot, you use arrays in bash using a rather odd notation: ${arrayname[location]}.

So if we call our previous output spaced:

for i in ${spaced[@]}; 
 do echo -n -e "\x$i";
done

Easy! Thanks for reading my short tutorial, and have a great day. You never know when this might come in useful...

Decoding Binary - 3 Different Ways

CarlyRaeJepsenStan — Sun, 20 Feb 2022 02:40:25 +0000

Hey everyone! I recently saw this tweet:

anildash

@anildash

01110010 01100101 01101101 01100101 01101101 01100010 01100101 01110010 00100000 01101100 01100101 01100001 01110010 01101110 01101001 01101110 01100111 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00111111 twitter.com/kelseyhightowe…

19:50 PM - 09 Feb 2022

Kelsey Hightower @kelseyhightower
Remember when we all learned Perl. https://t.co/rFLs2jqIMu

Obviously as a programmer, this is what everyone thinks I do - talk about stuff in 1s and 0s. Sadly, I didn't know what this said, so it's time to fix that.

First, I tried figuring out how to convert binary to text in Rust. After a short stint of searching on the combined intelligence of the entire world, I discovered the following useful commands: u8::from_str_radix and String::from_utf8

Now using these commands isn't super intuitive - in the docs for u8::from_str_radix, this is true:

assert_eq!(u8::from_str_radix("A", 16), Ok(10));

A quick trip through man ascii in my terminal revealed "A" to be 41 in base 16, 65 in base 10, and 101 in base 8. But no 10! Ignoring this oddity (maybe u8 tables aren't in man ascii?), you can then chain the output from from_str_radix into from::utf8 to get out a human-readable character.

So, after some more interrogation of Stack Overflow and the friendly and intelligent Rust community, I finally got this code:

    assert_eq!(
        String::from_utf8(vec![u8::from_str_radix(&"01000001", 2).unwrap()]),
        Ok(String::from("A"))
    )

So what's important here? We first make sure the radix (base) of our input is 2, and then because String::from_<any byte type> only accepts vectors, we use the vector macro vec! to ensure our input is a vector, and then finally feed it into String::from to get out something readable.

And because from_str_radix puts out a result, and we're sure that our input is going to be valid, we can safely unwrap it to use the result as our byte.

Great! The hard part is done - all I need to do now is to loop through the tweet's content, feed the words into my script here, and then collect together the resulting bytes and join them together. I won't give a full explanation, but in short map performs a function on every element of an iterator and stores the result to be re-assembled into another array.

fn main() {
    let a = "01110010 01100101 01101101 01100101 01101101 01100010 01100101 01110010 00100000 01101100 01100101 01100001 01110010 01101110 01101001 01101110 01100111 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00111111";
    let output = a
        .split_whitespace()
        .map(|x| binary_to_ascii(&x))
        .collect::<Vec<_>>();
    println!("{:?}", output.concat());
}

pub fn binary_to_ascii(input: &str) -> String {
    return String::from_utf8(vec![u8::from_str_radix(&input, 2).unwrap()]).unwrap();
}

Output:

Standard Error
   Compiling playground v0.0.1 (/playground)
    Finished dev [unoptimized + debuginfo] target(s) in 1.24s
     Running `target/debug/playground`
Standard Output
"remember learning binary?"

Pretty cool, huh? I never learned binary so...

In any case, now it's time to switch gears and try doing it in the terminal! Befitting a true hacker aesthetic, I decided I'll convert binary into text using only native shell commands - no Python or anything like that.

Since we don't have nice things like from_radix and so on, we'll have to convert our base 2 numbers into text like this:
Binary -> Hexadecimal
Hexadecimal -> Text

So, how do we change bases in the terminal? We can use the built-in command bc (basic calculator) and the corresponding commands obase (output base) and ibase (input base) like this:

me@my-UbuntuBook:~$ bc
bc 1.07.1
Copyright 1991-1994, 1997, 1998, 2000, 2004, 2006, 2008, 2012-2017 Free Software Foundation, Inc.
This is free software with ABSOLUTELY NO WARRANTY.
For details type `warranty'. 
obase=16;ibase=2;01110010
72 # HERE!

Now that we have 72, which maps to a corresponding character's hex code, we can convert it into a character using a reverse hexdump! While tools like od and hexdump can convert characters into hexadecimal codes, only xxd provides a way to reverse it via the -r flag. For example, if we have a file only with 72 inside, and then reverse xxd it:

me@my-UbuntuBook:~$ cat has_seventy_two_inside
72
me@my-MacBookUbuntuBook:~$ xxd -r -p has_seventy_two_inside
r

The -p flag means "plain", and outputs the result without line numbers and all that. For some reason if I don't have that flag, the output is blank so I don't know why? If you have any ideas, drop a comment!

Cool huh? But - we can't get arbitrary input into a running bc, and it's going to be a huge pain to have to type everything in, and then make files to xxd -r on. So let me introduce you to piping!

Piping using the pipe character | lets us move output from one command into another, or have a command take input from a previous one. For example, we could do this:

me@my-UbuntuBook:~$ echo "1+2" | bc
3

Cool! So we can chain all our aforementioned commands together like this:

echo "obase=16; ibase=2; $BYTES_HERE" | bc | xxd -r -p

Elegant, no? And because bash automatically turns strings into iterators split by string, I can skip splitting the string and just go straight to looping:

a="01110010 01100101 01101101 01100101 01101101 01100010 01100101 01110010 00100000 01101100 01100101 01100001 01110010 01101110 01101001 01101110 01100111 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00111111"

for i in $a; 
 do echo "obase=16; ibase=2; $i" | bc | xxd -r -p;
done

(sorry for the bad variable names)

Yay! That took quite a while to solve, but gives a nice satisfactory result.

And finally, everyone's favorite language - JavaScript. Not to brag or anything, but I golfed (one-lined) this problem in 2 minutes:

a="01110010 01100101 01101101 01100101 01101101 01100010 01100101 01110010 00100000 01101100 01100101 01100001 01110010 01101110 01101001 01101110 01100111 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00111111"

a.split(" ").map(x => String.fromCharCode(parseInt(x, 2))).join("")

Easy peezy lemon squeezy.

So how does this work? The .split() method on a string divides the string into an array by chopping it up at each argument passed into split. In this case, I passed a single space so the string of bytes got split up into an array of bytes. Next, just like in the Rust solution, I mapped a function that consumes binary information, converts it into a character code of some sort, and then converts the character code into a human-readable letter. More specifically, parseInt accepts two argument: a string and then a radix (in that order), and converts it into base 10. String.fromCharCode is essentially a reverse decimal dump; it accepts base-10 numbers, and outputs their corresponding character. And finally, because we output an array of letters, to put all the letters back together into a sentence, we use .join on an array with no separator so everything just gets mashed together. And with that, we get the same result.

Hopefully this helped you get a role as a master hacker who can read and decode binary in 2022's Most Awesome Upcoming Hacker Action Movie or at least impress your non-programmer parents, so if you learned something, click all the reactions on the side, and even if you didn't, do it anyway!

Thanks for reading, and see you next time!

Do We Live In the Matrix?

CarlyRaeJepsenStan — Mon, 17 Jan 2022 22:26:02 +0000

Allow me to introduce you to the beautiful world of 3D rendering, by posing a simple question - do we live in the "real" world?

Whether or not we experience true meaning in our daily experiences has been the topic of countless metaphysical or philosophical discussions. But, I don't really care about that, neither do I know a lot about it - but what I do know, is how we can rebuild the world around us on the computer.

Let's begin with a simple assumption: the world we live in is truly, deeply, (rather madly) a giant computer simulation.

Part 1: You're Smooth!

Behold, the humble circle:

This shape with infinite sides, at least as you perceive on your device, is not truly a circle. If you were to zoom in - go ahead, I'll wait -

You'll see that this "circle" is actually a set of squares. This conversion of curved things, etc into a bunch of pixels is what's called "rasterization." Early in the study of making realistic 3D scenes on a computer, everything, and I mean EVERYTHING was governed by raster engines. 3D renderers on browsers like THREE.js are built on top of WebGL, which is a rasterizer capable only of drawing 2d stuff. Making our 2D drawings look 3D is a whole other article!

But for now, look closely at anything around you that isn't on your computer, such as, say, your arm. Look REALLY close! Are you seeing pixels yet? Grab a magnifying glass or a pocket microscope and take a good look at anything. If everything around you is dissolving into squares, close Minecraft. Otherwise, keep reading!

Part 2 - But Not Too Smooth

Just because you can zoom in forever and see smoothness doesn't immediately prove that what you're seeing is super real - it's possible that your surroundings are just super high resolution. For example, to see the pixels on a 16k monitor, you would probably need a microscope or magnifying glass to identify the pixels.

So, take a look at this:

If you know where this is from, congratulations! Click all the reactions in the side, if you haven't already. In any case...
Ah, what beauteous smoothness! So smooth, like if you bit into it, your teeth would slide right off its plastic exterior. There is nothing in this world so perfectly and uniformly smooth like this, even plastic items, or Teflon.

However, imperfections are easy to make - things like Perlin noise are the bread and butter of CGI. In fact:

This donut has been given a plush, extremely unhealthy texture thanks some magic involving noise textures.

So these fresh donuts near you may very well be high resolution rendered images. So that's why its time to do some mirror gazing.

Part 3: Oh Looking Glass...

Do you have a mirror nearby? Anything shiny and reflective, like a phone screen? If you do, you'll notice that not only do reflective surfaces show you your beauteous visage, they also throw back a little bit of light. However, with a rasterizer, mirrors are only capable of showing an accurate reflection - they can't show all the light bouncing everywhere.

Now you're probably thinking, a ha! We live in true reality, because our mirrors look pretty and glowy. Not quite, because ray tracing exists.

You may have heard a fair amount about ray tracing, with game companies, tech writers, and everyone in between tripping over themselves to proclaim a new wave of ~~things for anonymous bloggers to pretend to know a lot about~~ hyperrealism.

What makes ray tracers so awesome? We can try comparing these two images:

The lower one was made using Blender's rasterizer (EEVEE) while the other was made with Cycles, Blender's ray tracer. As you can tell, ray tracing makes much better reflections and overall realism - the shadows are more defined in the right places with ray tracing, and the reflection is much less warped.

However, ray tracing is not a panacaea - it has its own limitations, which I'll cover later.

But for now, you can rest assured that ray tracing can provide physically accurate shadows, refractions, and reflections. Now it's time to take a plunge and figure out how to break ray tracing.

Part 4: Splish Splash, What a Flash!

Water is the kryptonite of computers. And no, I'm not just talking about when you accidentally tipped a glass over your keyboard.

Caustics are what reclusive nerds call indirect lighting, and are responsible for some of the most beautiful things you can witness:

(Note the rainbows dispersed by the diamond - I'll cover this in just a sec).

Because they look so awesome, caustics are also a huge pain to render accurately. Think about it this way - for indirect lighting to be accurate, you need a LOT of photons. A 1-amp LED projects 6E18 photons every second, while a 1 terabyte hard drive can only hold 1E12 bytes, so to even come close to having caustics not look like this:

You'd need to fill your entire hard drive, and then some. And even if we give each photon vector only 12 bounces max and assign each bounce, say, 15 operations, a 12 GHz (12E6 operations/second) processor would take a very, very long time to make a pretty diamond picture. PAIN!

And if you've taken a physics class recently, you'll remember that when white light is diffracted, it splits into a rainbow, explaining the diamond's fire a few paragraphs up. But, because physically accurate ray tracers treat light as a vector and not a set of waves, rainbows don't show up!

While there's some level of faking you can do to make rainbows inside of diffractive materials, these again aren't physically accurate. So that's why we need spectrally accurate ray tracers. These treat light as a set of waves, and the math behind them is pretty difficult, but they do exist but aren't real time.

And rendering water is only half the problem. If you've ever tried Blender's fluid physics simulations, you need to "bake" (compute) the fluids moving around (I'm not sure if a real time fluid simulator exists). For a low resolution simulation with one or two vertices in the way, baking takes a few seconds, but the water flow ends up looking weird:

For a more realistic, higher resolution sim, baking can go up to twenty minutes! When you accidentally shatter a glass of water of the ground, the world doesn't freeze as the direction of the water is computed. Also, this doesn't just apply to water - fluids, like water and smoke are also a difficult to realistically render in a short amount of itme.

Hopefully in this article, I've convinced you that the world you live in isn't CGI. If you just skipped everything I wrote (I don't blame you!) here's a tl;dr: fluids take time to render. And even if I haven't, you can probably go work for Pixar or explain why old movies look fake. Thanks for reading, leave a comment if you think I said something wrong, and see you in my next article!

Regular expressions in Rust

CarlyRaeJepsenStan — Fri, 18 Jun 2021 03:20:59 +0000

In many popular languages such as Javascript or Python, using regular expressions is simple. Well.. mostly simple.

For example, let's say I have this inscrutable JS string:
let a = "123bbasfsdf23asd2021-06-17";

For reasons known only to me, I desire to find numbers that are at most 3 digits long - specifically, I want to find the number "23."

The solution? A regular expression. In JavaScript syntax, \d is a number, and putting {1,3} after the digit marker means we search for any group of 1 to 3 adjacent digits

let regex = /\d{1,3}/gi
let a = "123bbasfsdf23asd2021-06-17"
a.match(regex)

     ==>["123", "23", "202", "1", "06", "17"]

That was easy! Now let's try to reproduce this in Rust. As Rust is a lower-level language focused on much different things than Javascript, the process is much different.

First, we have to use the regex crate, which thankfully uses similar expression syntax to JavaScript. So to recreate our previous example, we first have to import the crate by both putting it into Cargo.toml under [dependencies] and by beginning our code with a use statement. So our beginning code is fairly simple:

use regex::Regex;

fn main() {
    let regex = Regex::new(r"\d{3}").unwrap();
    let a: &str = "123bbasfsdf23asd2021-06-17";
}

Some of this might not make sense:

The r in front of our regular expression makes it so we don't have to spam backslashes to make our strings valid. Especially useful for backslash-heavy regexes!

The .unwrap() comes from Option<T> which basically replaces null or undefined with None. I imagine these regexes are Options because there are cases (such as in user input) where the regex can indeed be empty. But, because we are hardcoding the value of the regular expression, we can safely call unwrap, which exposes the string value of the regular expression and allows us to do stuff with it without having to do pattern matching or whatever.

Having written these simple lines, our problems begin. In the documentation for Regex, there's no match function. There are find and capture, but each of these only return the first leftmost match - insufficient for my aim of finding the second match.

After lots of thinking and help from the Rust community, I finally decided on find_iter, which returns an Iterator composed of all the matches. Does it work? Note that I used the regex directly, skipping assigning it to a variable.

use regex::Regex;

fn main() {
    let a: &str = "123bbasfsdf23asd2021-06-17";
    for cap in Regex::new(r"\d{1,3}").unwrap().find_iter(a) {
        println!("{:#?}", cap);
    }
}


==> Match {
    text: "123bbasfsdf23asd2021-06-17",
    start: 0,
    end: 3,
}
Match {
    text: "123bbasfsdf23asd2021-06-17",
    start: 11,
    end: 13,
}
Match {
    text: "123bbasfsdf23asd2021-06-17",
    start: 16,
    end: 19,
}
Match {
    text: "123bbasfsdf23asd2021-06-17",
    start: 19,
    end: 20,
// --snip

So yes, this works. But it's also practically useless - trying to log cap.start or cap.end throws an error about "private fields." After even more thinking, scrolling through documentation and conversing with friendly Discord members, I finally found the as_str method.

Side note, putting :? in the curly braces of println lets you log stuff that empty braces can not format, while :#? prettyprints it. Read more about it - its cool!

use regex::Regex;

fn main() {
    let a: &str = "123bbasfsdf23asd2021-06-17";
    for cap in Regex::new(r"\d{1,3}").unwrap().find_iter(a) {
        println!("{:#?}", cap.as_str());
    }
}

=> "123"
"23"
"202"
"1"
"06"
"17"

Yay!! Now I have my clean, useable outputs. But how do I turn this into an array?

In Rust, an Iterator is essentially a fancy array that makes looping and recursive functions easier. As vectors (as arrays are named in Rust) can be easily turned into iterators through into_iter, iterators can be turned back into vectors through collect.

However, just running Regex::new(r"\d{1,3}").unwrap().find_iter(a).collect() doesn't work - not only do we have to write some type annotations, we get an error that we can't collapse a match iterator into a clean string vector.

The solution? Use the incredible map function (which every developer should know about!) and apply as_str to every item of the iterator. Slap on a type annotation (as Rust requires) and some random borrowing, and voila:

let my_captures: Vec<&str> = (Regex::new(r"\d{1,3}").unwrap().find_iter(a).map(|x| x.as_str()).collect());
println!("{:?}", my_captures);
     => ["123", "23", "202", "1", "06", "17"]

Great! Now use bracket notation: my_captures[1], and you're done! Try it yourself here.

Hopefully this article was helpful to you - I spent over an hour banging my head against documentation and Discord to solve this. Thanks for reading, and good luck!

A one-click cookie deleter

CarlyRaeJepsenStan — Fri, 23 Oct 2020 00:08:33 +0000

Are you sick of clearing your cookies and getting logged out of literally everything? Use this code snippet instead!

javascript:(()=>{document.cookie.split(";").map(o=>o.split("=")).map(o=>o[0]).forEach(o=>document.cookie =`${o}=;max-age=-100`);})();

Usage

Visit a random site and add it as a bookmark.
Control-click, right-click, tap with two fingers, whatever... click "edit" and paste the above code into the "Address" box. 2a. NOTE! Some browsers automatically strip the javascript: part from the beginning. Check to make sure that the bookmarklet address starts with javascript:. If it doesn't, this won't work.
Visit some site (like Glitch) and click on the bookmarklet. Poof! No more cookies. (You might get logged out).

How does this work? Here's the un-minified, readable version:

javascript: (() => {        
document.cookie.split(";")
  .map(o => o.split("="))
  .map(o => o[0])
  .forEach(o => document.cookie = `${o}=;max-age=-100`);
})();

How does each part work?

`javascript:`

This tells the browser that the link is a javascript script. Otherwise, you'll perform a search for "(()=>{....."

`(() => {})()`

These are very cool functions - they're Anonymous Self-Invoking Functions, or ASIFs.

() => {} The above is the most concise form of a function possible, using ES6 arrow syntax. Before ES6, functions were:

const functionName = function(parameters) {
//do something...
}

With arrow functions, they became:

const functionName = (parameters) => {
//do something...
}

Note the A in ASIF - "anonymous". Just like people with no names, functions with no names are anonymous functions. So, this is an anonymous arrow expression.

() (around function)
The set of parentheses around the anonymous arrow function is called a "closure". As you can see in the article, the point of the closure is to avoid naming conflicts. This actually served me well - on sites like Google and Twitter, there were already variables called "a" and "b". 😂
() (end of function)
How does a function call its friends? With parentheses!
Ok, not a funny joke. You should remember how to use functions with names:

const functionName = (parameters) => {
//do something...
}

functionName(params)

What happens if the function doesn't have a name and doesn't have parameters? That's right, it's just:

()

Simplicity is beautiful.

`document.cookie.split(";");`

If you go the console on some random site and run document.cookie, you'll see cookie syntax looks like this:
"key=value; key2=value2; ...".
By using the String#split method, we return an array of all the individual keys and values, like ["key=value", "key2=value"]

`.map(o => o.split("="))`

Using the .map array iterator method, we go through and split apart each key and value pair into two different values.
This line then produces an array of arrays:

[
 ["key", 
   "value"
 ], 
 ["key2", 
  "value"
 ]
]

`.map(o => o[0])`

Now, we need to get the cookie keys. (Trust me, there's an end to this!). Note that the key is the first position of each array element - we simply need to iterate through and grab that key, and then make a new array. Now c looks like ["key", "key2"].

`1.forEach(o => document.cookie =`${o}=;max-age=-100`);``

Unlike the .map iterators which make new arrays, Array#forEach basically provides a compressed for... loop - it does something for each element. We're taking each array of the element (which is the key), setting it to nothing, and then making the max-age negative so the cookie expires immediately.

Thanks for reading! If you made it all the way to the end, a pat on the back and a free mask for you 🤿, and if you found any mistakes or have any thoughts, don't be afraid to comment!

Credits: Josh Wood for the tips on Twitter, and Javascript Minifier for cleaning up my code.

How Do You Make That? - Javascript Random Function

CarlyRaeJepsenStan — Fri, 02 Oct 2020 20:56:34 +0000

For quite a while now, if I wanted to generate a random number between two other numbers, I'd use the functions written in the Math.random() MDN docs

But I never really took the time to understand them. How do they work? I'll explain that, in this article.

1. `Math.random()`, `Math.floor()`, and `Math.ceil()`

Math.random() is simple! It outputs a random decimal number between 0 to 1.

Math.floor() and ceil() are a little different - they always round down and up, respectively. For example:

var firstnum = 1.6
Math.floor(firstnum)
>>> 1
var secondnum = 1.2
Math.ceil(secondnum)
>>> 2

2. Random Decimals

If you try using Math.random on sites like jsconsole, you'll see it always puts out decimals.

So if whatever you're doing is ok with decimals, you can use a function like this:

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

How does it work?

Well first, we need the return statement - otherwise the function doesn't do anything.
Next, you have Math.random() * (max - min). This multiplies the difference between your two numbers by the decimal less than 1 that Math.random() produces. For example, if your range is 1 to 10, than the difference is nine - multiply this by a number less than 1, and it becomes less than nine.

To ensure that you don't get a number out of the range (say, 9 * 0.0007 [which would produce 0.0063 which is less than 1!]), it is then added to the minimum number (in this case, 1).

3. Random Integers

Ah, the function that I have copy and pasted the most.

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

This one's a little more complicated - it returns random whole numbers, or integers. The helpful people at MDN have added a comment saying "The maximum is exclusive and the minimum is inclusive". How does this work? Why use Math.ceil and floor?

Imagine for a moment that you are using the function, and put in 1.2 as the minimum, and 10.6 for the maximum. What kind of numbers would you expect to come out of this function? Any number from 2 to 10. If you were to simply use Math.round() on the minimum and maximum, your bounds would become 1 to 11 - which are too big!

Lastly, we again use Math.floor instead of Math.round or ceil- now that the bounds are from 2 to 10, using Math.round or ceil could result in a 2 being unfairly excluded from the results, or the number 11 being returned.

Helpful? Interesting? Too simple? Well, it's for beginners 😉. Leave a comment!

How Do You Make That? - CSS Razer Animation

CarlyRaeJepsenStan — Tue, 29 Sep 2020 05:24:47 +0000

Part 1 of "How Do You Make That? - Breaking Down Web Animations".

For this article, we'll be looking at this cool codepen I discovered recently:

It's. So. Cool! So, I have to make it myself.

A quick look at the code reveals some cool things.

There's only one element - a div!
The shadow/glowing effect seems to be coming from two pseudo elements.
It's very complicated...

So, let's start breaking it down!

1 - Pseudoelements Galore

Let's jump about halfway through the code to something I haven't worked with a lot - the pseudoelements :before and :after. The developer of this codepen accomplishes this amazing animation with only one element using these selectors. How?

:after: and :before can add elements to a page without explicitly declaring them with HTML tags. This W3Schools example is a good way to understand them.

These pseudoelements - so named because they exist but aren't true HTML elements (they can't be selected with DOM functions and such) - don't just have to be text - they can also be styles. For example, we can make a pseudoelement that's a little bigger than the original, and put it behind.

IMPORTANT! When using z-index, you have to set position to absolute. So, we get this beauty:

It looks... sorta alright. How do we get that sexy border around it? The answer is in these two lines:

left: -2px;
top: -2px;

Yup. It makes sense if you look at a graphic:

So -2px left makes it like:

and -2px top makes it like:

Awesome! We got the gradient down. Now if we make the pseudoelement a gradient...

Beautiful. But wait, the codepen has both :before and :after, but we only have one. Why is that? On to the next part, where I'll explain...

2 - `calc` + `filter` = 🤯

width: calc(100% + 4px);
height: calc(100% + 4px);

🤯🤯🤯
How did I not know about this? It's so cool. Basically what this code does is takes the previous width and height (100% is inherited from the parent element) and then adds 4px. I thought this functionality was only for postprocessors like Sass!
One way we could improve this code is to set the 4px as a variable (like --border-width-gradient) and then calc(--border-width-gradient / 2) for the offset. Pretty cool, huh?

Now, on to blur.
Using our previous square div, I guessed I could just write filter: blur(50px);
WHOA.

It even works for gradients!

Awesome! Now, I'll explain why we need both :before: and :after. If I blur the only pseudoelement we have right now, it becomes like:

Not good. Where's my border? This is easily solved by making both :before and :after the same style, and then blurring one (before or after).

I hardcoded some margins for the main div, just so I could see the entire shadow. And there! We're almost done.

3 - Gradients and Animations

@keyframes steam {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

This is the cool part of the code - it's moving around the gradient. If you remember your background-positions:

So, it seems like the gradient is being shifted back and forth - because the gradient is like 10 colors, there's plenty of space to move it around with. Because the :after, :before selector has the animation applied to it, the shadow and the gradient will move in sync. Now all we need to do is darken the background (to make it look like its glowing) and put together everything we've learned:

Also note that the original div has a very slight gradient so it looks a little curved outwards - I'll just copy that 😅

And, here's the final result!

Building a Colors API Through Web Scraping, pt. 1

CarlyRaeJepsenStan — Sat, 26 Sep 2020 18:44:58 +0000

For this weekend's first backend project, I thought I'd make a useful API. From one of my previous articles, you can see that my simple site accepts hex codes - what if it could accept color names like darkorchid or peru?

My immediate thought was a colors API! I did searching, but no luck. What I did find, though, was this URl:
http://www.html-color-names.com/darkorchid.php

Oooh 👀. Do you see that? There's darkorchid in the URL name! I fiddled with the URL, and it turns out

http://www.html-color-names.com/powderblue.php
http://www.html-color-names.com/thistle.php
http://www.html-color-names.com/lightseagreen.php were all valid URLs!

But, I wanted a site that could get both color names AND hex codes. Turns out, I was asking for too much - my favorite site colorhexa has hex codes in its url, like https://www.colorhexa.com/8acaff

Great! Looks like I can make my own API now. Here's my basic structure:

If input is a hex code, send to colorhexa
If input is a name, send to html-color-names
Scrape sites for the color info (hex code, rgb, etc)
Return in an object, like

{
  input: input, 
  hex: hexcode, rgb: 
  rgb(r,g,b), 
  name: color name (if exists)
}

I have some previous experience with web scraping - I used tools like axios and cheerio before.
Axios downloads the entire HTML page for you to manipulate, and cheerio is like jQuery for the backend - it allows you to manipulate and get elements with CSS selectors like .class and #id.

Anyway, before we start building the Node app, let's check out the HTML code behind these two sites.

On html-color-names, I ran into an issue:

Hmmm.... I assumed that the RGB, hex code and name would have different IDs.

Anyways, I wrote a few lines to make sure the only elements with class="color-data light" were the ones with the color info.

Whew 😅. I'll work this into my API later.

Next is colorhexa. As it turns out, their site organization is much more complex than html-color-names:

A quick read seems to show that all the numbers are inside of class="value" elements...

Anyways, one good thing is that the colorhexa data pattern is consistent - arr[1] is always the RGB value.

Now, on to the backend coding. We can use axios to fetch the site, and then use cheerio to parse the HTML and get what we want.

So first, we're going to do something like this:

//import our packages
const axios = require("axios")
const cheerio = require("cheerio")

//load html-color-names
axios.get("http://www.html-color-names.com/darkorchid.php")
    .then(html => {
        console.log(html)
})

We can't start parsing out HTML yet - this is the axios output:

Whoaaa, what? I expected a plain-text response, but its actually an object! We need to look for the HTML part, which is actually html.data.

axios.get("http://www.html-color-names.com/darkorchid.php")
    .then(html => {
        console.log(html.data)
})

Cool! Now we get HTML plain text. Now, we're going to look at this through our cheerio-tinted lenses:

//import our packages
const axios = require("axios")
const cheerio = require("cheerio")
const data = []

//load html-color-names
axios.get("http://www.html-color-names.com/darkorchid.php")
    .then(html => {
      //console.log(html.data)
    const $ = cheerio.load(html.data)
    var arr = $(".color-data")
    console.log(arr)
})

However, I found an error - arr returns a large object. I tried using arr.text(), but it returned a string. arr.toArray() results in an array. What to do?

After that I tried:

.text(): returns the names, but with tons of whitespace.
.data(): returns the text of only the first element.
this link - I rewrote it as an arrow function, but it just returned ["","",""].

Finally, I tried

arr.each(function(i, elem) {
  a[i] = $(this).text();
});

Whoa! It worked! I got this as the input:

[
  '\n\t\tDarkOrchid\n\t\t',
  '\n\t\t#9932cc\n\t\t',
  '\n\t\t\trgb(153, 50, 204)\n\t\t'
]

Whoa! It worked! It seems like arrow functions don't work in Cheerio. And because we're smart developers who don't copy and paste, let's figure out how it works:

$(this) -> The element being passed into the loop
i -> Every time each runs, i is increased by 1. Basically, it's a compressed for loop.
elem -> a useless parameter - I deleted it and it still works. BUT: you can also write $(elem) instead of $(this). It seems to work the same way, so I'll use it that way in the future.

Getting info from colorhexa is going to be pretty similar; I selected .value, iterated over it, and then got out a result.

[
  'd8bfd8',
  '216, 191, 216',
  '84.7, 74.9, 84.7',
  '0, 12, 0, 15',
  '300°, 24.3, 79.8',
  '300°, 11.6, 84.7',
  'cccccc',
  '80.078, 13.217, -9.237',
  '59.342, 56.819, 72.803',
  '0.314, 0.301, 56.819',
  '80.078, 16.125, 325.053',
  '80.078, 12.716, -16.458',
  '75.378, 8.614, -4.499',
  '11011000, 10111111, 11011000'
]

The second position [1] is the RGB value.

Yay! Looks like I can get the values now.

Ok, now we need to parse our results. As you remember from the html-color-names array, each string in the array is like
'\n\t\tDarkOrchid\n\t\t'
What I'm going to do (and what would be smart) would be to write a quick regex matching \n or \t, replace them with spaces, and then use .trim() to strip the spaces.

But, because each string has exactly six characters behind and in front (\n\t\t), I could also slice (6, str.length() - 6). That would be the fast and hacky way to do it.

But I have all weekend! I'll write a regex. At first, I tried writing \\n and \\t, but, as it turns out \n and \t are legal regex statements - so my code became like this:

var regex = /(\n|\t){3}/
//match any three sets of \n or \t
str.replace(regex, "").trim()
//replace the regex positions with spaces, and then rinse them out
>>> "DarkOrchid"

Anyway, I did end up spending close to an hour debugging this, but my code was much cleaner and simpler.

As for colorhexa, I really only wanted the RGB, so:
a[1].
Yes, that's it. The RGB values are in the second slot in the array, and arrays start from 0, so its 1. Perfect! We can get the color info from the URLs.

Now, let's get on with the actual API part.

Serving the API

First, you should be familiar with NodeJS and Express and stuff like this:

app.get("/" , (req, res) => {
 res.send("Hello world!")
})

In the above, the path is "/" - I'll be talking about paths a lot later on.

So right now, my workflow looks like this:

Get the color
If the color starts with "#", send it to colorhexa.
If it doesn't, send it to html-color-names.
Respond with an object with the desired information.

At this point, I ran into another roadblock. Variables declared inside of the axios.get() functions can't be used outside - so I have to put both of them inside the same path.

So, I came up with this:

Get the input on the path /input/:color.
If :color starts with "#" or matches my color regex from my earlier article, send to /hex/:color and remove the "#".
If color is a string, send to /string/:color

And for those who aren't familiar with the colons, using things like :color allows you to get part of the path using req.params.color.

Basically, I would pass the color parameter into the functions I wrote previously, and then send the results.

That wraps up the first part of my API! Check out the next article to see how I split up the code and set up the validation.

Streamlining my Git workflow with bash

CarlyRaeJepsenStan — Thu, 24 Sep 2020 21:22:25 +0000

Intro

Think about your every-day github workflow. You wrap up your code, make sure everything works fine, and then open your terminal. You would then:

git pull
git stage . or git add .
git commit
Type your commit message and press :x! to exit
git push

Or, if you use the git GUI in an IDE, you would click a bunch of buttons to get your changes sent to your Github/Gitlab/Gitwhatever repo.

Although I have ohmyzsh installed and can run short commands for a lot of git actions (gc instead of git commit, gp instead of git push, etc), I still found the process of committing to Github very...inefficient. Do I really have to write :x! every time? And moving the cursor around to click buttons is always slower than straight typing. How could I make this faster and less error-prone?

Enter bash

I talked with some friends and learned about bash. bash files (extension .sh) combine a programming language with basic shell commands - like git commands!

If I wanted to write a bash script to do my git commits for me, it would need to do the following:

git pull
cd into my git repo
Accept my input
Stage the files and commit with my input as the message.

So I did some quick searching, and found the man page for read, and also found that you use variables my typing a $ in front of the variable name.

Writing something like read myvar means you can get user input, and you can use myvar by writing $myvar. Now I had the beginnings of my script:

echo "Enter your commit message below:"
read myvar
echo "Your commit message is:"
echo $myvar

You can also use optional flags to limit the character input - I used the flag -n to set the character input to 1, just so I could make a cool y/n thing:

echo "Would you like to commit? [y/n]"
read -n 1 -s input

And, the -s flag makes the read "silent," so it doesn't output the character you pressed.

Cool! Now, I thought I could work this into my script: display the commit message, and then confirm my intent to commit. So then I looked up how to write an if/else block.

If/else blocks

Ah, the if/else statement - the basis of beginner programmers and things like IFTTT. In bash, an if/else block looks like:

if [statement];
 then
  # do something
elif [statement];
 then # do something
else 
 # do something - no then! 
fi

This is where I started finding errors - things like "Unexpected syntax error near else". Whaaat?

So after extensive searching, I figured out this:

myvar = "foo"
myvar="foo"

Is there a difference in the above script? In python and javascript, there isn't - spaces don't matter.
But. In shell...
spaces matter.

This was a huge source of frustration for me - it turns out, declaring a variable means you can't have any spaces, but comparing variables requires spaces. That means

if [ myvar = "foo" ];

is different from:

if [ myvar="foo" ];

🤦‍♀️
I spent 20 minutes figuring this out. I hope by reading this article, you'll avoid the same!

Stupid mistakes aside, the if/else statement was pretty simple - if my input was y, commit, if it was n exit and say "You aborted the process," and if it wasn't either of them, exit and say "Your input wasn't y or n".

Recalling our previous line of code read -n 1 -s input, and remembering that we can use input as $input:

And remember, the thens are important! I forgot the then for the elif statement, causing more headaches.

Here's the final product:

#!/bin/bash
cd vanillanimate
git pull
echo "Enter your commit message below:"
read myvar
echo "Your commit message is:"
echo $myvar
echo "Would you like to commit? [y/n]"
read -n 1 -s input

if [ $input = "y" ];
 then 
  git stage .
  git commit -m "$myvar"
  git push
  exit 0
elif [ $input = "n" ];
 then
  echo "process abort exit code 0"
  exit 0
else
  echo "process abort exit code 1 - your input $input is not y or n"
  exit 1
fi

If I were to make this even better, I might make it so the script asks for a path to repo first, instead of having a hard-coded path. But, it worked and only took about an hour. And it worked!

Anyways, thanks for reading and remember that as a developer, you never stop learning.
Thoughts? Found a typo? Leave a comment!

(Partially) Reverse Engineering Neumorphism.io

CarlyRaeJepsenStan — Tue, 22 Sep 2020 22:42:53 +0000

Recently, I've been using neumorphism.io a lot for my projects - I really like the soft and squishy feel buttons have.

However, as I pasted my colors into the site for the nth time, I started to wonder - how does it work? Can I calculate these shadow colors myself?

Of course, the first step was to plug in a bunch of random colors, grab the hex codes for the shadows, and then check out their RGB numbers. I used colorhexa for this.

Name	R	G	B
Thistle	216	191	216
Thistle's pale shadow	248	220	248
Thistle's dark shadow	184	162	184
-	-	-	-
Powderblue	176	224	230
Powderblue's pale shadow	202	255	255
Powderblue's dark shadow	150	190	196
-	-	-	-
Peru	205	133	63
Peru's pale shadow	236	153	72
Peru's dark shadow	174	113	54

Ok, I learned to code so I could avoid typing numbers all day....😭

Anyway, now that we have the numbers, we can try seeing how they are mutated.

Name	R change	G change	B change
Thistle pale	+32	+29	+32
Thistle dark	-32	-29	-32
-	-	-	-
Powderblue pale	+26	+31	+25
Powderblue dark	-26	-34	-37
-	-	-	-

Note that for powderblue pale, the green and blue maxed out at 255, so we can assume that both numbers could be 32, or something larger.
I didn't do any more math for Peru because I got sick of it. However, what we do see is assuming the variable x where x is the amount R, G, and B are changed by, then the pale shadows are r + x, g + x, b + x while the dark shadows are r - x, g - x, b - x.

x also appears to range from 26 to 37 - with more colors, one could assume it can be from 20 to 30, or possibly even larger.

At this point, I took a step back. This project was supposed to be my quick frontend puzzle for today, not a long, code-intensive and complex like my in-progress Node.js app. Just adding and subtracting, say, 25 from each rgb value would be fine enough.

Just for fun, I checked out the code running behind neumorphism.io. There's no way I'm going to write anything with a similar function anytime soon. So for now, I'm going to prototype something that just adds and subtracts 25 to RGB values provided by the user.
(I'll address converting between hex and RGB farther down).

Now the structure looks something like this:

3 inputs - R, G, and B
onsubmit, compose R, G, and B into a legal CSS string using a template literal like background: rgb(${r},${g}, ${b})
Subtract 25 from each number and set this to the positive shadow, and add 25 and set this as the negative shadow.

And I was able to spin up a working demo in about a half-hour:

Pretty cool, huh? It even looks pretty good! I'll definitely use this for my own projects in the future.

The next step: also consume hex codes. But to compute the shadow colors, we need to convert them into HEX codes! This is the part when learning how to read a RegEx comes in handy.

I found this script from this site:

function HEXtoRGB(hex) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
    });
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

But.....I don't really understand how it works. And I dislike copying code. And it looks scary. So let's write break apart this function and make it ourselves!

Hex Color Structure:

8adaff <- This is an example hex color. There are two parts to a hex color:

The optional #
The two digit hexadecimal numbers composed from letters or numbers or both

To match the optional hash, we can use
^#?

^ marks the beginning of the string
# matches # (duh)
? means "optional" in RegEx-ese.

Now we need to split apart the remaining 6 characters and convert them from Base 16 to Base 10.

What we could do is validate the form like this:

Search the form input for # - if there is, slice the function and make it not have a # in front.
- Slice the new string at (0,2), (2,4), and (4,6)
If # is not present, start slicing.

But, a more elegant solution is to use RegExs, like the complex code snippet I found does.
To match each hexadecimal number, we can do this:
a-f - hexadecimals only use letters from a to f. The full hexadecimal number line is 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
\d - matches any number
[] - a bracket will match only one character
{2} - will match twice - placed after the bracket, will match against any two character permutation of number or letter.
() - I learned about these today: they are "matching groups". I'll explain their function later.

Now, to match #8adaff, we can use this RegEx:
^#?([a-f\d]{2}){3}
Cool! Now we can use the RegEx method match() and mess with the numbers.

Or... can we?

This is bad - it seems like we're only matching the whole string, and then the last two characters. How do we fix it?

The solution was actually to write the regex like
^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})
instead of using {3}:

This is where the () matching groups come in - by making three matching groups, the regex match method will spit out three two-character strings: our hexadecimal numbers.

I found another error while putting together the final result - put i at the end of the regex, like
/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i
so it matches case-insensitively.

Perfect! Now we just have to parse the numbers into base 10, and we're good to go.

//assuming hex came from the form:
var num = hex.match(regex)
var r = parseInt(num[1], 16)
var g = parseInt(num[2], 16)
var b = parseInt(num[3], 16)

And because we use parseInt, the values are automatically numbers - we don't need to worry about that anymore!

And if we want to output hex codes, turns out you can't use parseInt - you have to use toString()

Anyway, here's the final product, hosted on Glitch:

Note that this app has some issues - numbers greater than 255 are not filtered out, so they become three-character hexadecimal numbers. If I were to optimize this, I would probably add a layer of validation changing variables greater than 255 or less than 0.
Additionally, the blocks of declaring variables might be better optimized with arrays and methods like .map or .forEach.

But for a project built in a few hours, this isn't too bad!

Thoughts? Ideas? Hate mail? Please leave a comment!

Animating linear-gradient: a guide

CarlyRaeJepsenStan — Tue, 22 Sep 2020 20:16:58 +0000

Intro

div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(-45deg, peru, papayawhip);
  transition: 0.5s;
}

div:hover{
  background-image: linear-gradient(-45deg, peru, peru);
  transition: 0.5s;
}

What's wrong with this code? It should make a nice, clean, gradient animation, from a gradient to a solid fill. It should work, right?

Wrong

background-image is not animatable.

What's a developer to do? I lay in my bed and considered the possibilities. I could use Javascript DOM functions like backgroundImage and template literals to change the color. I could use a RGB to CMYK function, and call requestAnimationFrame. Or, I could look it up.

I found this.

What this StackOverflow thread suggests is basically increasing the background-size to "200% 200%" (I assume double the size of the target window) and then translate it using a bunch of percentages and background-position.

Cool! After spending a while reading up on documentation, I figured out this:

Assuming linear-gradient(145deg, red, blue), of course.

From the StackOverflow code and my newfound knowledge about background-position, I had my steps.

Write gradient
Increase gradient size
Center gradient (50% 50%) so it looked about the same
background-position is animatable, so translate either 100% 100% or 0% 0% to make it look more blue or more red, respectively

Yay! Problem solved. Here's a working demo:

But, as you can probably tell, it's not perfect - 100% 100% still has some red tinge to it, and on a blue background this div will definitely stand out. Also, combining a 200% background size and 50% background position changes the gradient slightly - as you can see in this side by side comparison:

What's a perfection obsessed developer like me to do? After excessive brainstorming, I figured out these things:

background-size is animatable
Changing the gradient to red, blue, blue makes a completely blue portion at one corner.

So my steps now looked like this:

Start the div with a normal gradient *On hover, do these things:
- change background-size to 200%
- change background-position to 100% 100% (the blue blue part of the gradient)
- use nicer colors than red and blue

While messing with the code, I found that I didn't need to change the background-size on hover; leaving it 200% to begin with actually helped differentiate the div from the same-colored background. I also added a quick box-shadow for a cool effect.

And here it is! A successfully animated linear-gradient, in pure CSS.

Helpful? Confusing? Thoughts? Please leave a comment!

DEV Community: CarlyRaeJepsenStan

Converting Hex to Text - the Bash Way

Decoding Binary - 3 Different Ways

Do We Live In the Matrix?

Part 1: You're Smooth!

Part 2 - But Not Too Smooth

Part 3: Oh Looking Glass...

Part 4: Splish Splash, What a Flash!

Regular expressions in Rust

A one-click cookie deleter

javascript:

(() => {})()

document.cookie.split(";");

.map(o => o.split("="))

.map(o => o[0])

1.forEach(o => document.cookie =${o}=;max-age=-100);`

How Do You Make That? - Javascript Random Function

1. Math.random(), Math.floor(), and Math.ceil()

2. Random Decimals

3. Random Integers

How Do You Make That? - CSS Razer Animation

1 - Pseudoelements Galore

2 - calc + filter = 🤯

3 - Gradients and Animations

Building a Colors API Through Web Scraping, pt. 1

Serving the API

Streamlining my Git workflow with bash

Intro

Enter bash

If/else blocks

(Partially) Reverse Engineering Neumorphism.io

Hex Color Structure:

Animating linear-gradient: a guide

Intro

`javascript:`

`(() => {})()`

`document.cookie.split(";");`

`.map(o => o.split("="))`

`.map(o => o[0])`

`1.forEach(o => document.cookie =`${o}=;max-age=-100`);``

1. `Math.random()`, `Math.floor()`, and `Math.ceil()`

2 - `calc` + `filter` = 🤯