Kara Codes!

starting up again

2023-05-22T00:00:00+00:00

The last time I sincerely wrote on my blog was right before I started my job at TXI. Since then, I’ve done so much, learned so many new things, that I could’ve filled up my TIL category with heaps of fascinating stuff! I’ve risen from Apprentice, to Associate, to Consultant. I went from a W/S/C organizer, to the Board president, I’ve attempted to build a zine series. I’ve created and shared so many cool tools! I’ve worked on so many fascinating projects, and used all of my energy toward the success of my roles.

First came excitement for something new, then came focus, then came guilt, then came shame, then came avoidance. It’s a sad and vulnerable thing to admit, but just as i’ve grown in my technological prowess, so have I grown in my emotional intelligence, mostly about myself. And with that, I put it in my goal to rekindle the praxis I had setup for myself to share what I learn, and keep a line open for getting to know me better, by way of this site. Its like, returning to a garden that’s been overtaken with plants and debris, and committing to care and nuture, because that garden is me, and I deserve the time and effort.

The fun thing about this return is that it allowed me to revisit where I was when I last left. I actually had quite a bit of drafts about new and interesting things i’d learned, and have already created a list of things that I want to document my learning of. It gave me a moment to clear out the shame, give myself grace, and be proud of what i’ve accomplished in the past 5 years.

My plan for my blog is to take a more routine approach of posting, and perhaps continue to utilize the path DBC started me on with technical and cultural posts, which is exactly the kind of work I do now.

So stay tuned, everyone! and stay excited, because finally, there’s more to come.

all about that Base64

2018-04-26T00:00:00+00:00

Today I spent some time pairing with a colleague, and needed to build a signature for an API call they needed to make, so I took to the googles and learned a bit about how Ruby deals with Base64.

If you’ve never heard of Base64, it’s a numeral system, or BASE-ically a standard for counting. We’re most familiar with Base10 i.e. counting to 10 then starting over 0123456789, or Base2 i.e. the Binary system that computers use 01.

Base64 uses uppercase letters, lowercase letters, numbers, AND a few symbols to get the job done!

In ruby, you can use the Module Base64 to encode or decode things! Here’s an example:

# First, the Base64 Module isn't in Core ruby, so you have to require it
 
require "base64"
=> true

# you can use the method #encode64 and give an argument, and see it translated to Base64!
enc = Base64.encode64("kara is awesome")
=> "a2FyYSBpcyBhd2Vzb21l\n"

# you can even be super sleuth and double encode it! (
double_enc = Base64.encode64(enc)
=> "YTJGeVlTQnBjeUJoZDJWemIyMWwK\n"

# Then to revert back to your original messages, you use the method #decode64
revert = Base64.decode64(double_enc)
=> "a2FyYSBpcyBhd2Vzb21l\n"

plain = Base64.decode64(revert)
=> "kara is awesome"

Sandbox!

Resources

Ruby Module Base64
Wiki page for Base64
Basecs Post on encodingHexes and Other Magical Numbers
BaseCS PodcastS1 Ep2- What is Encoding?

cache it good, service worker

2018-01-16T00:00:00+00:00

Today, I’m back on my Grow With Google Scholarship course, learning about Caching.

The service worker does it’s work best when it can take advantage of a cache of the requests/responses it gathers when you’re online, so it can facilitate getting you the best experience possible when you’re offline, or on what google says “LIE-fi”.

The Cache interface provides a storage mechanism for Request / Response object pairs that are cached, for example as part of the ServiceWorker life cycle.

Here are a range of methods I learned about from the Cache API, and some notes on what they’re for:

// Open up a local Cache
  caches.open('cache-name').then( function(cache) {
    return cache
    })

// Add a request/response pair to the cache
cache.put(request, response)

// Add a set of Req/Res pairs to the cache all at once
cache.addAll(['/things', '/stuff'])

// get out a request promise, if it exists, from the cache
cache.match(request)

// get out a request promise, if it exists, from all the caches
caches.match(request)

// Delete a cache by its name
caches.delete(cacheName)

// Retrieve the caches names
caches.keys();

Resources

MDN Docs Cache API
Google Web Fundamentals Cache and Return Reqests

respondWith and Fetch Events

2018-01-12T22:04:15+00:00

Today, in the continuation of my Grow With Google Udacity Scholarship, I learned about the Service Worker life cycle, and how to set up the service worker to HIJACK the requests!

in particular, I learned about the respondWith method, which in its basic form looks like this:

self.addEventListener('fetch', function(event) {

    event.respondWith(
      new Response("I'm the body", {
        status: 200,
        headers: {
          'Content-Type': 'Text/Html'
        }
      })
    );

});

this function takes a promise that resolves to a Response object, with a body blob and optionally an object filled with further config info for the response, like headers etc.

more complex uses of this method will involve fetch, more promise configs like async/await, or catch and some conditionals. I’m off to learn those now!

Resources

MDN Docs: Response Object
MDN Docs: FetchEvent.respondWith()

service workers

2018-01-10T00:00:00+00:00

Today I was informed of my acceptance into the Grow With Google Scholarship in the Mobile Web Specialist track!🎉

I’ve got 3 months to hone my skills on new web development technologies, and the first few lessons are focused on Offline First Development.

I’d heard of the term in the past year, as Google did a PWA Tour, and I got to go to the Chicago event, but I’m happy to jump back into the concept of how the Service Worker API will help us get to an offline-first environment on the web.

So two terms I’ve mentioned: offline-first and service worker.

Offline-First is a way to consider what the web should do when there’s little, or no connectivity, that doesnt leave us with blank pages. There’s lots of data our devices hold onto when we interact with sites, why not make it so we’re taking advantage of that data in an offline environment? This is what offline-first guides us towards. Consider what the user should be able to do in little to no connectivity first.

Service Workers are how we get to do that. Because there are a few decisions that need to be made depending on what’s being requested and whether there’s something existing in cache or whether it can be fetched, a Service Worker is registered on the browser to facilitate that, so in the case that there is little/no connectivity, things can be pulled from cache, and the service worker can keep an eye on connectivity to fetch and sync new data as things come back online.

You can access the Service Worker API through the Navigator object, which is basically the User Agent you’re interfacing with.

On page load, you call the Navigator to register the service worker, and from there, the Service Worker listens to events, and dispatches actions depending on what you’ve asked it to do in any given network scenario.

  // Code from Mozilla's web docs: 
  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register

// in your main.js
    if ('serviceWorker' in navigator) {
    // Register a service worker hosted at the root of the
    // site using the default scope.
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('Service worker registration succeeded:', registration);
    }).catch(function(error) {
      console.log('Service worker registration failed:', error);
    });
    } else {
      console.log('Service workers are not supported.');
    }

// in your sw.js
  self.addEventListener('fetch', function(event) {
      // magic goes here
  });

Resources

I’m a visual learner, so I’ve appreciated the Udacity lessons so far, and I’ve enjoyed diving in a bit more into the following sites:

Mozilla Web Docs: Using Service Workers tutorial
Medium Article Offline First: The decentralized web and peer-to-peer technologies (it’s a bit old, but fascinating! also there’s an OFFLINE CAMP?!)
a list of offline-first, Progressive Web Apps PWA.Rocks! (My FAVE is paper planes!)
Google Developers Web Fundamentals: Intro to service workers

gatsby static site generator

2018-01-08T00:00:00+00:00

#GreatGatsby

Today, I continued my research on JAMstacks and finally deployed something with netlify. I decided to go with Gatsby instead of Hugo, since it’s built for React, and I’d like to be able to build more on React.

I went through gatsby’s opening tutorials, and it’s a pretty quick uptake on getting pages up and running!

I’m also happy to note that it uses GraphQL, which I’m excited to get to know more about.

My goal will be to build my mom a site that she can share her daily health tips, and hopefully make new friends here in Chicago. I’m not sure that this will be the final tool I’m looking for, but I’m excited to find out.

Resources:

Thats My JAMstack!

2017-12-30T00:00:00+00:00

#Delicioso

In the process of researching various static site generators may be best for the relaunch of my organization United Latinx Pride’s website, I stumbled upon a site that talks about a stack I hadn’t heard of before.

JAMstack

The JAM stack consists of Javascript, APIs, and Markup. There’s a whole community building around the JAMstack, and its uses.

The site, https://jamstack.org/ has a detailed look at the pros & cons of building with a JAMstack, and examples of a few well-made sites built with it.

I’m really happy to hear an influx of folks seeing this combination of languages and frameworks as a viable and professional option, I think it lets folks build light and impactful things.

In 2018, I’d like to be building more stuff with things like Airtable, Contentful, Hugo, Jekyll, and Netlify.

Long live the JAMstack!

Resources

Resources from JAMstack community: https://jamstack.org/resources/
Recent article on the JAMstack: The Sweetness of JAMstack
This is one of my absolute favorite ways to explain a tech stack: Hamburgers! (and I really want to design a JAMstack sammich to add!): Build Your Own Tech Stack
If you’re looking for a static site generator to use, check out StaticGen

Convert your name to binary

2017-12-14T00:00:00+00:00

#IDidAThing

I built this method to convert your name to binary, try it out!

Bitwise OR

2017-12-13T00:00:00+00:00

Talking to a senior engineer the other day, I came across a line of code that looked something like this:

items.inject(0) { |perm, v| ( v | permissions[i] ) }

(PS this is gibberish ruby code I made up, don’t at me.)

When I looked at the line, I thought, OH, ruby uses pipe?!… is that what’s going on?

And that’s when I learned about Bitwise OR.

Bitwise OR

In ruby, we know OR operator to look like ||. when you see | you’re looking at a Bitwise OR operator, and what it’s comparing, is a value, bit by bit.

If we looked at a more simple example, we can walk through bitwise comparison step by step:

# want to know a number's binary representation?
# use to_s and give a base as the arguement
12.to_s(2) #=> "1100"
9.to_s(2) #=> "1001"

# so, if we wanted to compare the binary representations of 12 and 9, the bitwise or operator will look at each bit (from right to left) and choose 1 if one or both bits are 1:

(12 | 9)

"1 1 0 0"
"1 0 0 1"
---------
 1 1 0 1 # guess what number this is?

bhet, WHY?!

In the example I was reviewing with the senior engineer, we were looking at code dealing with permissions, which represented them as long, binary numbers to show whether a given person had the permission, er nah.

Another use case that keeps coming up is “flags” that represent state based on several conditions…

An interesting case I’d love to dive into someday is how it’s used to deal with colors, getting RGB values, and the like…

If you deal with a complicated set of IF THIS THEN THAT conditionals, maybe bitwise is worth using!

Resources

Fascinating resource on Bitwise Operators: Ruby’s Bitwise Operators by Calle Erlandsson
Visual tutorial of Bitwise Operators, language agnostic, with useful practical applications of each: Understanding Bitwise Operators
Stack Overflow thread of folks giving examples for when they’ve used Bitwise operators in real life!: Real world use cases of bitwise operators

State Design Pattern

2017-12-12T00:00:00+00:00

Today I got to have a fascinating conversation with a senior engineer about the State Design Pattern.

The State Pattern, according to Wikipedia, is a behavioral software design pattern that implements a state machine in an object-oriented way.

If a given object’s behavior shifts quite a bit based on multiple states of being throughout run time, State Pattern may be for you!

You might see the objects methods holding really heavy if/else statements, based on the objects’ state, and the state pattern lets you extract that logic into a polymorphic, abstract class, that deals with what should happen, based on state, then in your original object, you can just call on that abstract class to return the appropriate action.

Some examples for what I think might be good challenges for the State Pattern to help solve are:

Apple Trees - Trees bear fruit at a certain age, and can do things based on various stages of their life…
Game Of Life - Cells can live or die based on the number of neighbors it has…
Delivery - A delicious snack can be delivered based on it’s various stages of being done, there being congruent availability between me and the delivery person… and the open status of the food place.

What are some examples you can think of, or have used the State Pattern on?