Forem: Kate (she/her)

Understanding blank?, present?, empty?, any?, and nil? in Ruby (and Rails)

Kate (she/her) — Mon, 28 Dec 2020 16:16:44 +0000

In Ruby on Rails, there are several methods available for checking the state of an object.

The most common ones include:

blank?
present?
empty?
any?
nil?

It can be pretty confusing to know which method to use and when. For instance, blank? and empty? sound like they would behave the same way. However, they are NOT the same.

Take the following example:

nil.blank?
=> true

nil.empty?
=> NoMethodError

As you can see, these two methods respond differently to nil and are not interchangeable.
It's helpful to understand the nuances of these different state-checking methods so you aren't caught off guard by unexpected behavior.

Let's dive in.

1. `blank?`

blank? is a Rails method defined at the Object class level meaning you can call it on any object. An object is blank if it’s false, empty, or a whitespace string.

docs

Examples:

[].blank?
=> true

{}.blank?
=> true

''.blank?
=> true

' '.blank?
=> true

false.blank?
=> true

nil.blank?
=> true

2. `present?`

present? is another Rails method that is defined at the Object class level. It behaves the opposite of blank?. In other words, it returns true for objects that are true, not empty, and not a whitespace string.

docs

Examples:

[1, 2, 3].present?
=> true

{1:'Dog', 2: 'Cat'}.present?
=> true

'poop'.present?
=> true

'hi'.present?
=> true

true.present?
=> true

nil.present?
=> false

Note 📝

blank? and present? are direct opposites.
blank? and present? can be called on any object type including nil. This may be too all-encompassing and undesirable in some cases. For example, say you expect your data to never be nil. If your data ends up as nil due to some bug in your codepath, these two state-checking methods will make it harder to uncover that fact as opposed to methods like any? or empty? which would throw a NoMethodError for nil. Keep in mind that for stricter type-checking purposes, blank? and present? may be unsuitable.

3. `nil?`

nil? is a Ruby method defined at the Object class level so it can be called on any object similar to the first two. nil? only return true for nil.

docs

Examples:

[].nil?
=> false

{}.nil?
=> false

''.nil?
=> false

' '.nil?
=> false

false.nil?
=> false

nil.nil?
=> true

4. `empty?`

empty? is a Ruby method defined for classes including String, Hash, and Array and will evaluate to true if the length of the object it is called on is 0.

In particular:

For strings, empty? evaluates to true if the string has a length of zero. docs - String
For hashes, empty? returns true if the hash contains no key-value pairs. docs - Hash
For arrays, empty? returns true if the array contains no elements. docs - Array

Examples:

[].empty?
=> true

{}.empty?
=> true

''.empty?
=> true

' '.empty?
=> false

nil.empty?
=> NoMethodError

Note 📝

blank? and empty? respond differently to strings containing whitespace characters.

" ".length
=> 1

" ".blank?
=> true

" ".empty?
=> false

blank? may be more suitable for rejecting data with whitespace characters.

5. `any?`

docs

any? is a Ruby method defined for the Enumerable module, which encompass collection classes including Array and Hash. It returns true if at least one of the collection member is not false or nil.

Examples:

[false].any?
=> false

[true].any?
=> true

[].any?
=> false

{}.any?
=> false

''.any?
=> NoMethodError

nil.any?
=> NoMethodError

It's worth calling out that any? is NOT a direct opposite of empty?, like present? and blank? are. It's also worth calling out that truthiness of the elements within the collection matters for any?, unlike the other methods discussed here.

Consider the following:


[false, nil].any?
=> false

[false, nil].empty?
=> false

[false, nil].present?
=> true

Additionally,

any? can accept a block. Each element of the collection gets passed to the block, and the method will evaluate to true if the block ever returns a value that is not false or nil.

Examples:

[1, 2, 3].any? { |number| number.even? }
=> true

['poop', 'soup', 'loop'].any? { |word| word == 'poop' }
=> true

[2, 4, 6].any? { |number| number.odd? }
=> false

Conclusion

	`blank?`	`present?`	`nil?`	`empty?`	`any?`
	Rails	Rails	Ruby	Ruby	Ruby
	Object	Object	Object	String Hash Array	Enumerable
`[]`	true	false	false	true	false
`{}`	true	false	false	true	false
`nil`	true	false	true	NoMethodError	NoMethodError
`false`	true	false	false	NoMethodError	NoMethodError
`""`	true	false	false	true	NoMethodError
`" "`	true	false	false	false	NoMethodError
`"poop"`	false	true	false	false	NoMethodError
`[false]`	false	true	false	false	false

References:

Understanding attr methods in Ruby!

Kate (she/her) — Mon, 07 Dec 2020 00:15:34 +0000

If you've worked with Ruby, you've likely encounter attr methods such as attr_accessor, attr_reader, and attr_writer sprinkled at the top of the class.

To truly understand what each of these attr methods are and how to use them, we must understand the very basics of how data is stored in a Ruby class. (If you already have the basics down, skip to here!)

How is data stored and access in a Ruby class?

Let’s say we’re creating a Ruby on Rails web app for a veterinary hospital 😸🐶. We want to store information about each dog patient. To start with, we will need a Dog class that stores name.

In Ruby, this class may look something like the following:

  class Dog
    def initialize(name)
      @name = name
    end
  end

Here, we have a Dog class. This Dog class has an initialize method which expects a name parameter. Within this initialize method we instantiate an instance variable @name which stores the name
parameter that is passed in when a Dog instance is created.

What is an instance variable?

In Ruby, instance variables are prefixed with @. You may recognize instance variables being used to pass data between the controller and the view in a Ruby on Rails app. (Under the hood, Ruby on Rails is set up so that an instance variable in a controller method is accessible in the corresponding view.)

Even outside of a Rails-y context, instance variables are used to store data for a regular Ruby class.

An instance variable can be accessed by any method within the class.

Here's an Example:

  class Dog
    def initialize(name)
      @name = name
    end

    def barks
      "#{@name} says WOOF" # This method has access to @name
    end
  end

The catch here is that instance variables are accessible by any method within a class, but are NOT accessible outside the class.

If instantiate a Dog instance and try to call .name, we get a NoMethodError:

dog = Dog.new('Tomi')
#=> <Dog:0x00007fb72cd0aa30 @name="Tomi">
dog.name
#=> NoMethodError: undefined method `name` for #<Dog:0x00007fb72eab6bb0 @name="Tomi">

If we want to read the @name value stored on a Dog instance, we'll need to access it through a method.

Let's define a simple method that returns @name.

  class Dog
    def initialize(name)
      @name = name
    end

    # Method that returns @name
    def name
      @name
    end
  end

Now we are able to access the value of @name by calling the name method!

dog = Dog.new('Tomi')
dog.name
#=> "Tomi"

This simple name method we just defined is what we call a getter method.

A getter method returns the value of an instance variable.

In the previous example, we had the name method simply return @name. However, if you wanted @name to be returned in a certain format, you can easily achieve that by customizing your getter method.

Let's write a custom getter method that returns dog.name in all caps:

  class Dog
    def initialize(name)
      @name = name
    end

    def name
      @name.upcase
    end
  end

dog = Dog.new('Tomi')
#=> #<Dog:0x00007fb7475df010 @name="Tomi">
dog.name
#=> "TOMI"

Notice that here, @name itself is not modified. We’ve simply defined a method that returns @name in the desired format.

Say we initialize a Dog instance but realize we have made a typo! If we try to reset name, we'll get a NoMethodError:

dog = Dog.new('Tomu') # Whoops!
dog.name = 'Tomi'
#=> NoMethodError: undefined method `name=' for #<Dog:0x00007fb7483dd9a0 @name="Tomu">

Similar to how we need to define a getter method to read the @name value, we also need a method to set @name a value. Though we're setting the value of @name on initialize, we don't have anything in place to change it later.

We need a setter method!

A setter method sets the value of an instance variable.

Let's create a setter method that allows us to change the name attribute:

  class Dog
    def initialize(name)
      @name = name
    end

    # Getter method
    def name
      @name
    end

    # Setter method
    def name=(name)
      @name = name
    end
  end

Notice that a setter method follows the format def attribute=(attribute). Now with a setter method, we can easily update the value of @name:

dog = Dog.new('Tomuu')
dog.name = 'Tomi'
dog
#=> #<Dog:0x00007fb7483dd9a0 @name="Tomi">

What is `attr_accessor`, `attr_writer`, and `attr_reader`?

Now that we understand the basics of how data is stored and accessed in a Ruby class, let’s revisit the original question. What are these attr methods? Well... they're ✨magic✨!

Getting and setting an attribute of a class is a pretty basic operation. If we want a Dog class that has name, breed, age, and any number of attributes, we need a getter and setter method for each of these attributes. Writing methods for something very simple can quickly get very repetitive.

You might've heard of Ruby as a very developer-friendly language. Aside from being very human-readable, Ruby aims to make our lives easier via metaprogramming. In other words, as a programming language, Ruby takes care of a lot of things so that developers don't have to! attr methods are one of those things.

`attr_accessor` provides a shorthand way to define getter and setter methods for specified attributes.

Desired attributes are passed in to attr methods as a symbol:

  class Dog

    attr_accessor :name, :breed, :age

    def initialize(name, breed, age)
      @name = name
      @breed = breed
      @age = age
    end

  end

With a single attr_accessor :name, :breed, :age line, we were able to define six methods!

attr_accessor combines attr_reader and attr_writer. If you only want to shorthand a getter method, you can use attr_reader. If you want to shorthand a writer method, you can use attr_writer.

attr_accessor - creates a getter and setter method
attr_reader - creates a getter method only
attr_writer - creates a setter method only

It might make sense to use attr_reader or attr_writer in situations where we want to customize one method, but not the other.

Example: We want `dog.age` to return `@age` in a certain format, but don't want to change how `@age` is stored.

  class Dog

    attr_accessor :name, :breed
    attr_writer :age # Default setter method to set @age

    def initialize(name, breed, age)
      @name = name
      @breed = breed
      @age = age
    end

    # Defining our own getter method to return a formatted age
    def age
      "Age #{@age}"
    end

  end

dog = Dog.new('Tomi', 'pug', 2)
#=> #<Dog:0x00007fb72debcdf0 @age=2, @breed="pug", @name="Tomi">
dog.age
#=> "Age 2"
dog
#=> #<Dog:0x00007fb72debcdf0 @age=2, @breed="pug", @name="Tomi">

Example: We want `@age` to always be set in a certain format.


  class Dog

    attr_accessor :name, :breed
    attr_reader :age # Default getter method to read @age

    def initialize(name, breed, age)
      @name = name
      @breed = breed
      @age = "Age #{age}" # Set @age to age in desired format.
    end

    # Defining our own setter method so @age is always set in desired format
    def age=(age)
      @age = "Age #{age}"
    end

  end

dog = Dog.new('Tomi', 'pug', 2)
#=> #<Dog:0x00007fb73383efe0 @age="Age 2", @breed="pug", @name="Tomi">
dog.age = 3
#=> 3
dog
#=> #<Dog:0x00007fb73383efe0 @age="Age 3", @breed="pug", @name="Tomi">

Conclusion

Instance variables hold data in a Ruby class instance.
Instance variables can only be directly accessed within a Ruby class.
To access an instance variable outside of a Ruby class, we must define methods.
attr_reader, attr_writer, and attr_accessor are convenient shorthands for writing getter and setter methods.

Podcasts are GAMECHANGING for learning! 🗣💻🎧

Kate (she/her) — Sun, 18 Oct 2020 01:06:02 +0000

Discuss:

Do you have any favorite tech or software engineering related podcasts?
What do you like about it?

I absolutely LOVE podcasts.

I find myself listening to podcasts whenever I’m grocery shopping, walking, running, or even folding laundry. Unlike books or videos, podcasts offer the convenience of being listened to on-the-go.

Despite listening to podcasts for years, I actually never listened to tech or software engineering related podcasts.

I'm not sure why but I think I might've had some preconceived notion that software engineering or coding podcasts would be a bit dry, kind of like listening to a lecture.

However, as I've recently discovered, that is absolutely not the case! There’s a HUGE variety of content whether it be related to a specific technology or topic within software engineering or a career question. Wherever you are in your coding journey, you're bound to find something that's interesting and insightful to you.

Listening to podcasts have expanded my world of software engineering in a strange way. There are hundreds and thousands of people who code around the world, all with interesting perspectives and ideas which we may not come across in our day to day. Especially for those who are early in their careers, it can be pretty eye-opening and oddly comforting to realize that a lot of the questions we have or the problems we're trying to solve at work are actually not that unique. Podcasts can be a great way to expand your perspective and gain exposure to the communities and people outside of our everyday.

I had always turned exclusively to books, blogposts, and videos as a learning resource so podcasts have been an absolute game changer!

Outside of serving as a great learning resource, I appreciate that some podcasts have a casualness that make them fun to listen to.

A few of my favorites include...

1. Soft Skills Engineering

Their tagline is:
"It takes more than great code to be a great engineer."

The soft skills side of engineering isn't something that's actively taught in school or bootcamps, but it's actually pretty important! The show covers topics like pay raises, getting promoted, 1 on 1's with managers, which are all pretty universal topics that are important. To give a general sense, some episode titles include:

Declining job offers and being the outside hire
Stuck on the ladder and can't say no
Unpaid team lead and banking hours
One-on-ones and inter-team power struggles

As a plus, the hosts are pretty entertaining and it can be a light-hearted listen.

2. CodeNewbie

Their tagline is:
“The most supportive community of programmers and people learning to code”

Though the name of this show is, “Code Newbie”, you don’t have to be a newbie to enjoy this show! What I really appreciate about this show is the diverse range of guests and topics. Each episode features a different guest who is pretty passionate about a certain topic. This in turn gets me interested in something new I might not have known much about before. To give a general sense, some episode titles include:

Why you shouldn’t forget about CSS
Why you should consider learning Ruby
How to not get bogged down in technical debt
What does ageism in tech look like?

I also like how their guests share their story about how they came to code.

3. Programming Throwdown

Their description says:
"Programming Throwdown attempt to educate Computer Scientists and Software Engineers on a cavalcade of programming and tech topics."

I really love this show for getting a high-level introduction into various topics of software engineering I might not be very familiar with. The episodes are a little over an hour long but I think the hosts do a great job of making their content digestible and interesting to follow. To give a general sense, some episode titles include:

Working from Home
DevOps and Site Reliability
Terminal and Shells
Teaching Kids to Code

A lot of their older episodes are focused on a specific programming language like Javascript, Ruby, Go, C++, Java.

Bonus

I work with Ruby on Rails in my day-to-day. I've really listening to Rails 5by5 and Ruby Rogues! It's super insightful to hear of the challenges other Ruby on Rails developers and teams face. I'm often surprised at how relevant the topics are with whatever I'm dealing with.

Disclaimer: No one's paying me to recommend these shows (unfortunately, lol)

In Conclusion

I really enjoy listening to podcasts. They've expanded my world of software engineering.

We all have our own preferences and styles of learning! While I love podcasts, I know others who can't stand them and would much rather read a blog post. However, if you've never given software engineering or coding related podcasts a try, I highly recommend you give one a listen!

Feel free to recommend me your favorite coding/tech/career-related podcast and what you love about it!

Photo by Tim Mossholder on Unsplash

What is an Operating System?

Kate (she/her) — Sun, 11 Oct 2020 19:30:27 +0000

If you've heard of "operating system", but nothing comes to mind beyond "Mac and Windows?", then this post is for you!

"Mac, Windows, or Linux?"

This has go to be one of the most frequently debated topics on the Internet. These are a reference to the most popular operating systems in the world.

But what do we mean by an operating system?

Before we get into it, let's talk briefly about the three most popular desktop operating systems you're likely familiar with!

macOS (previously known as OS X)

First Mac OS

macOS is a unix-based operating system owned and distributed by Apple Inc. The first Mac OS was introduced back in 1984. In fact, it was introduced during the super bowl with this extremely eerie commercial which alludes to George Orwell's 1984...

As Apple states on their website, macOS is designed specifically to run with Apple hardware. While Windows and Linux can run on a variety of PC hardware, macOS must run on Apple hardware, giving it exclusivity and a higher cost barrier.

While there are tutorials out there that may teach you how to configure macOS on a PC, Apple does not want you to. In fact, it's technically illegal 😅...

Windows

Windows 1.0 Advertisement

Windows refers to the series of operating systems developed by Microsoft first released in 1985. Here's another VERY interesting ad from 1986...

While macOS and Linux can be traced back to unix, Windows is an entirely separate family.

Most PC computers come pre-installed with Windows. This can be traced back to the Wintel alliance. This was an alliance between Windows and Intel where the two pretty much joined forces in an effort to be at the forefront of personal computers, and get Windows software & Intel hardware into every house, school, and workplace...

Windows is by far the most popular desktop operating system in the world! This site estimates that Windows accounts for 77% of desktop operating systems worldwide.

Linux

Tux, the Linux kernel mascot

Linux refers to a family of unix-like open-source operating systems based on the Linux kernel. You can think of a kernel as one of the most important component of an operating system! This kernel was developed by a Finnish engineering student named Linus Torvalds in 1991.

What sets linux apart is it's open-source nature and community backing. You might've heard of linux being very popular with hackers. Anyone can view and contribute to the linux kernel, or modify it as they please. In fact here's the linux kernel repo on Github! Look at the crazy number of pull requests and contributor count....👀

When people talk about linux, they are referring to either:

The different distributions, or flavors of linux operating systems which use the linux kernel.
the linux kernel itself

Individuals and businesses can take this kernel code for free and use it as basis for their own operating system. Funfact: Android and Chrome OS use a modified version of the linux kernel!

Linux kernel can be found in mobile and server operating systems as well. While linux-based operating systems account for less than 2% of desktop operating systems, they DOMINATE web servers with estimates ranging from 60%-98%.

Popular distributions of the linux operating system include Ubuntu, CentOS, Debian, Fedora, Red Hat, Arch Linux, Kubuntu, Deepin...

Of course, there's a LOT more to the history of how these operating systems were developed, what is meant by unix, and the various similarities and differences, but that is impossible to cover in one blog post, so let's move on for now!

So what actually is an operating system?

From Wikipedia,

An operating system (OS) is system software that manages computer hardware, software resources, and provides common services for computer programs.

Though I've focus more on desktop operating systems, operating systems are core to mobile phones, smart watches, tablets, and web servers.

An interesting analogy I've come across a few times is that

An operating system is like the government.

For a moment, set aside your thoughts about the current state of government and how well you think the government is actually working... and just think about all the things government is tasked to do.

Government:

allocates money to different sectors of society like healthcare, education, scientific research, unemployment...
enforces laws that tell us what we can and can’t do.
provides public services like public transportation, DMV, environmental protection... They're also in charge of maintaining infrastructures like traffic lights, roads, bridges so that people can get from place to place.

There's a lot of behind-the-scenes things government is tasked with taking care of so individuals don't have to.

Now... operating systems have a very similar function, but within the realms of a computer.

An operating system:

allocates resources including memory and storage, and sets the schedules to allow tasks to run.
enforces rules that regulate the behavior of different processes. They also enforce security mechanisms to prevent misuse of computer.
provides common services and functionalities that allow application softwares to run. This makes writing application software easier.

See the similarity?

Operating systems take care of a lot of details so that people don't have to.

Operating systems provide a layer of abstraction between people and hardware.

The earliest computers didn't have operating systems. In fact, getting a computer to work was an extremely manual process where multiple people would be tasked with toggling switches and punch paper cards just to get the computer to work. You can read more about it here.

But today, when you're opening Chrome, you're not thinking about memory allocation or how the click of your mouse has to get interpreted and communicated to the computer hardware. You don't have to understand how microprocessors and chips work. Even if you're an application software developer for say, Slack, you're not worrying about how your user is going to switch between your application and something else they have running like Excel or Chrome or Spotify.

Let's dig into these last points a bit more.

What is an application software?

Application software refers to software that is designed for a for a specific end-user purpose. These include browsers like Firefox, Safari, Internet Explorer, Google Chrome, and music listening programs like Spotify, and editing tools like Photoshop, Lightroom, or computer games like Minecraft...

Whenever you're installing anything onto your computer, you're probably checking whether it's compatible with the operating system you're running on.

The reason we have to do this is because application software rely on the core services provided by the operating system. Therefore, application software developers develop for a specific OS.

Good luck trying to install the first release of Microsoft Paint intended for Windows 1.0 in 1985 on your macOS. Heck, good luck running that release of Microsoft Paint on any recent Windows OS version!!!

If you've been skipping your computer's OS updates, you might have trouble running new applications. This all boils down to application software being dependent on a particular operating system environment.

You can't stick a VCR tape into a DVD player and expect a movie to play...

You can't attach bike wheels to a car and expect the car to run...

You get the idea!

Main Takeaway

✅ Operating systems take care of a lot of behind-the-scenes operations.
✅ Operating systems bridge the communication between human users and hardware.
✅ Operating systems provide a common set of services and functionalities that enable application software developers to write programs easily.

Thanks for giving this a read! I've never taken an operating systems course, nor have I really taken time to dig into what we mean by operating system. This post is my understanding of operating systems as someone very new to this topic...

Even digging into the history, there's a lot of nuance! If there's anything that seems off, please let me know.

Side note: anyone remember this Epic Rap Battles of History Steve Jobs vs Bill Gates episode from 2012...?

What are our responsibilities as software developers beyond writing code? 🌎💻

Kate (she/her) — Sat, 03 Oct 2020 20:53:05 +0000

Discuss:

How has tech shaped our society? Your life?
What ethical responsibilities do we have as software developers?
What are ways you keep yourself accountable in your day to day?

Today, it’s impossible to think of a world without any influence of code.

I grew up in the age of rising social media. In 2009, I created my first social media account via Facebook. I was only in middle school.

I know. Middle school feels too early.

Surprisingly though, most of my classmates were on Facebook and I simply didn't want to miss out. I still remember the initial feelings of wariness I had when first registering my profile. Should I use a fake name? Should I even have my full name on the web? Is this safe?

I was cautious. But with an easy click of a button, I entered a new world and that wariness went away.

Snapchat, Instagram, Twitter, LinkedIn... has there been a week that went by in the past twelve years where I didn't check some form of social media? Probably not.

Thousands of hours of mindless scrolling since middle school. Damn.

Nothing is black and white.

Social media has given me an outlet to stay connected with friends who are far away and has helped me maintain a sense of humanity during this isolating age of quarantine.

I've increasingly relied on the convenience provided by companies like Uber, Lyft, AirBnB, and Amazon. With a click of a button I can have products delivered to me next day. Within five minutes, I can have a driver come pick me up and take me wherever I want to be. If I want Mexican food, I can take out my phone and do a quick search filtering out the lower rated places. How convenient!

But there's a lot we ignore behind this convenience.

Taking part in the creation

In college, I took computer science courses. I studied Data Structures, Discrete Mathematics, Algorithms, Databases... I attended engineering career fairs. I remember packing into the auditorium with hundreds of other students. There were long lines before every booth just to chat with recruiters. Recruiters pitched fancy offices, free food perks, and appealed to bright-eyed students promising "interesting engineering problems". Never in my classes, nor these conversations with recruiters, did the ethics of software development, nor the potential consequences behind code come up.

As software engineers, we are programmed to think about ways we can automate tasks with code.

In fact, that's what we get paid for. At times, writing code can feel like a separate thing from the "real" world. In our day to day, when we're simply tackling the micro-level problems at hand, it's hard to see the macro-level impact we have. In reality, we're building products that change everyday experiences of real people. The code we write can potentially shape the habits of even young kids. But that's not what we think about when we're writing code.

For some, writing code is simply a means to make a living, nothing more. Developers can argue that the larger responsibility of the different consequences behind the code we write may lie on business people who make the larger decisions, or the product designers... But is that really true?

If we churn out code without ever stopping to think about the higher-level implications of the code we're writing, the motivations behind the companies we work for, what impact do we have?

What kind of society are we creating?

Thanks for reading until the end. Ethics and the influence of tech and code is something I often think about. At the same time, I don't really know how to think about it... What are you thoughts?

Lessons learned from a weekend wrestling CSS for a dropdown menu...

Kate (she/her) — Mon, 28 Sep 2020 05:42:45 +0000

TLDR; There's a good reason to use bootstrap and CSS frameworks

This weekend, I decided to explore what a CSS-only, accessible dropdown menu component might look like by following some tutorials I found. My hope was to tackle my discomfort with CSS and if I was lucky, end up with a no-JS dropdown menu component that could replace a bootstrap dropdown menu.

However, it is Sunday night and my weekend is nearing an end. I definitely got to a good place with CSS-only and learned a lot. Yet, the dropdown menu I ended up with is far from being able to replace what bootstrap does! What I have is a partially-accessible component... This past weekend, I've learned some important lessons around how much work may go into creating a seemingly simple UI component from scratch.

Preface

I don’t work too much with CSS in my day-to-day. I am a full-stack developer on a small engineering team spending most of my time in Ruby code. Some time ago, I would spend hours in my free time creating CSS art,
for no other reason than: it's fun and looks cool! Needless to say, my working CSS knowledge is very lacking.

Exploration

I came across these neat CSS-only dropdown tutorial:

CSS only and accessible??!!

This sounded great! If it's possible to create a CSS-only dropdown menu, I figured it was worth an exploration!

I lightly followed the above tutorials while being mindful not to blindly copy lines. First and foremost, my goal was learning and understanding what went behind each CSS rule and selectors. After I had a general understanding of what the selectors were and what the rules meant, I started tweaking around! I got lost in this....working with CSS is an entirely different beast from other types of programming work.

Lessons Learned

It’s Sunday night and nearing the end of the weekend. I am pretty proud of what I ended up with and all I've learned. Below I have a left-aligned dropdown, right-aligned dropdown, and some icon dropdowns which would fit my need.

But the reality is, there's a lot this implementation is missing even comparing it to a bootstrap dropdown menu. Like everything else in software development, developing UI isn't just about making something that's working for you on your screen.

Even after creating something that “works” and is looking nice, there’s a few more things to think about:

Is the element FULLY accessible? Does it have correct tab focus, keyboard arrow support, appropriate aria role....It turns out CSS-alone isn't enough for a fully compliant accessible dropdown! There needs to be JS to update the aria-expanded attributes.
Is the element mobile friendly? But again, what does a mobile friendly dropdown menu look like?
What about browser support? For example, for this CSS dropdown, I used the pseudo :focus-within but turns out this isn't supported in IE which I would need to care about. Is there a polyfill available?

The time, resources, and domain-specific knowledge that's required to build up a fully accessible UI element is something that should NOT be underestimated. It isn't just about creating something that "works", but thinking about accessibility, browser compatibility, being attuned to various browser bugs, and making thoughtful implementation decisions for the various usages of the UI element. There's a reason smaller teams rely on bootstrap, and there's a lot to ask yourself before building your own.

With all that said, this deep-dive via trying to create a custom CSS dropdown menu component was a lot of fun! It got me thinking about the various implementation details and decisions that have been abstracted away by third party libraries. What are the benefits of these third party libraries? What are the trade offs? There's a lot to think about!

Thanks for reading till the end! Apologies if this turned out to be a bit of a ramble!

Curious to know:

1) What tools do you or your team use for UI development? Why?
2) When might it make sense to rely on a third party UI framework/library vs building out and maintaining a custom one?
3) What are your favorite ways to learn and get comfy with CSS?

BONUS: Any favorite CSS tricks?

Intro to Keyboard A11y: An (interactive) guide to Tab & Tabindex 🗂⌨️🗺

Kate (she/her) — Sat, 19 Sep 2020 22:45:46 +0000

Note: You will want to skip the "interactive" portions of this guide if you are on a mobile device.

Developers are all about keyboard shortcuts! Being savvy with the keyboard helps us be more effective, and honestly just feels pretty cool... But today, I want to deep-dive into keyboard navigation in the context of accessibility.

Many different people rely on keyboard navigation as a sole means for navigation for any number of reasons. It's important that a web page is 100% accessible with a keyboard.

In particular, the tab key plays a critical role in allowing a keyboard user to navigate through a page.

tab - focus on the next element
shift+tab - focus on the previous element

If you're unfamiliar with tab navigation, you're not alone! Personally, I had no idea what tab navigation was until very recently. If you've never tried tab navigation, take a moment right now to press the tab key a few times, and try navigating around this current web page! See you in a bit!

👋

Welcome back! Did you get the chance to tab around?

You might have noticed your focus first jumped to the very top left of this page. Then as you pressed the tab key, the focus should have moved in a somewhat logical order from left to right, top to bottom.

Remember, an accessible page has a logical tab order.

Can you imagine how frustrating it would be if the the focus jumped around the page in some arbitrary order? That confusion would be amplified for people who rely on a screen reader to announce where they are within a page. As an exercise, you can try tabbing around this terribly inaccessible web page.

But who decides the order!?

The good news is, HTML has built-in tab focus behavior so we usually don't need to worry about manually specifying a tab order.

By default,

Tab navigation follows the logical order of elements in the DOM.
Interactive HTML elements such as form inputs, links, and buttons are included in tab order, while non-interactive elements such as divs and paragraph tags are excluded.

What is tabindex?

There may be times you want to override the default tab or focus behavior. This is when the tabindex attribute comes into play. The default tab behavior of any HTML element can be overridden by setting the tabindex attribute!

tabindex 0

By setting tabindex to 0, an element that is not usually part of the tab order, such as a <div /> can be made focusable and added to the tab order.

Confused? See it in action:

Usecase

Tabindex 0 could come in handy if you have a custom interactive element that is not natively focusable. An example may be a <div /> element that, for whatever reason, needs to act as a button. (Ideally though, you should use the <button /> tag but if for whatever reason, you cannot, you can mimic the native tab behavior of a button by setting the tabindex).

Do you know of other usecases for tabindex 0? Let me know down below!

tabindex negative

When a tabindex is set to a negative number (usually -1), an element may be removed from the tab order. It's important to note that even if the element is removed from the tab order, it can still receive focus programmatically with javascript's focus method.

Confused? See the negative tabindex in action:

Usecase

A negative tabindex can be helpful for something like a modal which is usually inside a <div/> element. We can prevent a keyboard user from focusing on a hidden modal by setting the tabindex to -1. However, when the modal is shown, a programmatic focus can be set using javascript to allow the user to interact with the modal!

Do you know of other usecases for negative tabindex? Let me know down below!

tabindex positive

Last, and perhaps also the least, a positive tabindex is used to specify the exact tab order of an element.

Confused? See what I mean:

Usecase

I haven't actually encountered a valid usecase for setting a positive tabindex... All guides I've encountered list it as something you should never do. 🤷🏻‍♀️

Do you have a valid usecase for positive tabindex? Let me know down below!

To wrap it up..

Tab navigation is essential for keyboard users.
Tab order must be logical.
Using the correct HTML tag usually takes care of most tab order concerns.
You can set tabindex to 0, a negative number, or a positive number, to override the tab behavior for any element.

I found these resources extremely helpful!

Thanks for reading until the end. I'm very early in my learning of best accessibility practices. Is there anything else I should know or anything I didn't get quite right? If you have any thoughts or comments, let me know down below!

Awesome resources to learn more about accessibility 📚⚒️

Kate (she/her) — Wed, 16 Sep 2020 00:31:34 +0000

As developers, we have the power to shape experiences with code. We learn about data structures, algorithms, databases, testing, security.... yet accessibility isn't something that's seen as core to engineering. More often than not, a lot of us — including myself — make assumptions about our users and write code based on those assumptions.

Recently, I decided to deep-dive into best web accessibility practices. I've discovered that there are tons of amazing resources and tools out there!

Here are some that I've found extremely helpful in aiding my learning!

Articles & Blog posts 📑:

Intro to Web Accessibility

Two from Max Antonucci on DEV. I HIGHLY recommend his writing:

Neat Videos 📹:

A11y cast series on Google Chrome developers channel - Short, easy to digest videos around different web accessibility practices.
How Blind People Use Computers - A blind person demos how he navigates Reddit using a screen reader. Extremely insightful since if you aren't familiar with screen readers.

Podcasts 🎧:

Throughline Episode: ADA Now! - Not specific to the web but extremely valuable. Discusses history of A.D.A, how disability has come to be seen as a civil rights issue.
CodeNewbies Episode: How to think about accessibility and empowerment - how tech can empower people of different backgrounds, how BBC integrates accessibility
CodeNewbies Episode: Accessibility - Issues of accessibility and how we can remove invisible barriers

Guides / References :

Web Content Accessibility Guidelines - Guidelines to follow
Reading through guides alone can be confusing!
I’ve found that it can helpful to inspect other websites known to do a11y well (BBC, Reddit)

If you know of any other websites known to do accessibility well, let me know!

Accessibility Tooling

Google Lighthouse Test: if you use Google chrome, this should be available in your Developer tools tab. You can run this on any web page and generate a report on accessibility which tells you what can be improved.
Axe Chrome Extension: Somewhat similar to Lighthouse, but more light-weight.

Final Thoughts

The idea that anyone should be able to access the web is fundamental to inception of the web.

In fact, here's a quote from Tim Berners-Lee, the creator of the world wide web:

The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.

By not taking time to learn or even think about accessibility, we as developers are likely creating invisible barriers with code. There's an abundance of tools and resources out there to help create a universally accessible experience on the web. It's never too late to start learning.

Thanks for reading! Are there any resources you've found helpful or tools you've enjoyed using? Please share down below!

Top 4 Advice to anyone experiencing self-doubt early in their career

Kate (she/her) — Mon, 14 Sep 2020 00:43:42 +0000

"Everyone else knows so much more than I do."

"What value do I bring to the team?"

"Am I enough?"

"Do I belong?"

These are all thoughts that have pervaded my mind at one point or another. These feelings of doubt, of not knowing enough, of being an imposter, are extremely prevalent amongst those starting out in tech— especially amongst those who are underrepresented or come from non-traditional backgrounds.

Personally, I minored in computer science, but even throughout my computer science courses, I've had a creeping feeling that I didn't quite belong or "fit the mold" of a software engineer, whatever that meant!

I am now a little over two years into my career as a software engineer. Recently, I've had a strange realization that much of the self-doubting thoughts I held when I was first starting out has faded away. Not to say I never experience them, but in these past two years, I've grown more confident, learned a lot, and changed in ways that I can't fully put into words.

If I could go back in time, here are some things I would have told myself two years ago. I hope this is helpful for anyone starting a new career in software engineering!

You belong.

You may have a preconceived notion of what a software engineer looks like. You may feel like you don't belong in tech because you're xyz. Let go of those notions. The field of software engineering is beyond what you've see portrayed on media or the confines of your classroom.

There's no doubt that the field of tech, and software engineering in particular, is lacking in diversity. But that is in no way any indication of how the field should be.

From those who have been coding since age 5 to those who wrote their first line of code at age 30, you're going to meet extremely bright software engineers from every walk of life. You'll find that every individual has an immensely valuable and unique perspective to offer, including yourself!

No one expects you to know everything

As you start your new role, you may be flabbergasted by how much you don't know. You may compare yourself to your more experienced coworkers. In fact, you may put them on a pedestal and think, "Damn. They're so smart. How am I ever going to be like them?"

But the truth is, this feeling you have of not knowing anything is extremely normal when you're starting out. You're never going to know everything and you're definitely going to make a lot of mistakes. In fact, you'll realize that everyone makes mistakes. No one knows everything — not even the most senior member of your team. Learning to deal with ambiguity is a huge part of software engineering.

At the very least, as you become more familiar with the codebase and technologies you're using, that feeling of "Ah! I don't know understand anything!" will go away. You will start to develop your own opinions and thoughts around what's good and what's not. Discussions around the codebase that didn't make sense to you in the beginning will start to click. You will find your voice.

Keep expanding your world outside of what you see at work.

Production-level software development is an entirely different beast from personal or class projects. When you're new, you may work hard to "catch up". Learning a new technology working in a new team, and making sense of an entirely new codebase can be mentally exhausting. You may pass out after work and not want to go anywhere near a computer screen. You might feel guilty and think,

"Am I doing enough? Should I be coding outside of work?"

That answer is going to vary from person to person. Just remember that there are various ways to learn, grow, and expand your knowledge within software engineering beyond online tutorials and books. This is something I wish I had known sooner.

I've always love listening to podcasts. It never occurred to me until recently to listen to software engineering related podcasts. I've been amazed at the abundance of amazing content out there whether it be discussing a particular technology, career development, soft skills, etc.

In addition, there are meetups and organizations devoted to various technologies or causes within tech. You'll no doubt find a community that you identify with.

The feelings you experience, the career questions you have, and the technical challenges your team face are likely not unique. Finding opportunities to learn from others outside of work can give you new ideas to share with your teammates, bring you fresh perspectives, and also deepen your sense of belonging in the developer community.

What you want from your work may change, and thats completely okay.

When I was a college student, I remember not knowing at all what I wanted to do. I hustled away at career fairs mostly terrified at the thought of not having a job lined up. At the time, what I prioritized most was financial stability. I didn't know what I wanted from my career. I grew up with the idea that work was a means to making a living so finding fulfillment through work was not anything I had thought about.

However, when I started my first job, I quickly realized that something didn't feel right. The feeling of discontent I felt propelled me to think more about what I actually wanted. I ended up finding a new role at a smaller startup whose mission I identified closely with. That was in no doubt, one of the best career moves I've ever made!

If something doesn't quite feel right about work, take note of it but don't freak out. Remember, it takes time to figure out what you want.

To wrap it up

You belong.
No one expects you to know everything
Keep expanding your world outside of what you see at work.
What you want from your work may change, and thats completely okay.

There can be a lot of ambiguity and self-doubting as you navigate a new codebase, technology, and team. Understand that these feelings of self-doubt you experience are normal, and may gradually fade away. Continue learning and trust that you're growing. :-)

I hope this is helpful to anyone who is early in their career!

Thank you for reading until the end! I'd love to hear any thoughts you have down below.

Forem: Kate (she/her)

Understanding blank?, present?, empty?, any?, and nil? in Ruby (and Rails)

1. blank?

2. present?

Note 📝

3. nil?

4. empty?

Note 📝

5. any?

Additionally,

Conclusion

Understanding attr methods in Ruby!

How is data stored and access in a Ruby class?

What is an instance variable?

An instance variable can be accessed by any method within the class.

A getter method returns the value of an instance variable.

A setter method sets the value of an instance variable.

What is attr_accessor, attr_writer, and attr_reader?

attr_accessor provides a shorthand way to define getter and setter methods for specified attributes.

Example: We want dog.age to return @age in a certain format, but don't want to change how @age is stored.

Example: We want @age to always be set in a certain format.

Conclusion

Podcasts are GAMECHANGING for learning! 🗣💻🎧

I absolutely LOVE podcasts.

A few of my favorites include...

1. Soft Skills Engineering

2. CodeNewbie

3. Programming Throwdown

Bonus

In Conclusion

What *is* an Operating System?

"Mac, Windows, or Linux?"

macOS (previously known as OS X)

Windows

Linux

So what actually is an operating system?

An operating system is like the government.

Operating systems take care of a lot of details so that people don't have to.

What is an application software?

Main Takeaway

What are our responsibilities as software developers beyond writing code? 🌎💻

Today, it’s impossible to think of a world without any influence of code.

Nothing is black and white.

Taking part in the creation

As software engineers, we are programmed to think about ways we can automate tasks with code.

Lessons learned from a weekend wrestling CSS for a dropdown menu...

Preface

Exploration

Lessons Learned

Intro to Keyboard A11y: An (interactive) guide to Tab & Tabindex 🗂⌨️🗺

But who decides the order!?

What is tabindex?

tabindex 0

Usecase

tabindex negative

Usecase

tabindex positive

Usecase

To wrap it up..

Awesome resources to learn more about accessibility 📚⚒️

Articles & Blog posts 📑:

Neat Videos 📹:

Podcasts 🎧:

Guides / References :

Accessibility Tooling

Final Thoughts

Top 4 Advice to anyone experiencing self-doubt early in their career

You belong.

No one expects you to know everything

Keep expanding your world outside of what you see at work.

What you want from your work may change, and thats completely okay.

To wrap it up

1. `blank?`

2. `present?`

3. `nil?`

4. `empty?`

5. `any?`

What is `attr_accessor`, `attr_writer`, and `attr_reader`?

`attr_accessor` provides a shorthand way to define getter and setter methods for specified attributes.

Example: We want `dog.age` to return `@age` in a certain format, but don't want to change how `@age` is stored.

Example: We want `@age` to always be set in a certain format.

What is an Operating System?