“Are you still eating that?” (Access Control at Jellyfish)

 At the time of this writing I work at Jellyfish.co as a security engineer. While there, we did some neat work to provide a capability-based” access control model in AWS IAM with time-boxed, just-in-time access.

Even cooler is that we were able to share details on it with the community. You can read more about it here: https://jellyfish.co/blog/are-you-still-eating-that-access-control-at-jellyfish/.

Narrow - SCA Reachability Analysis without the Effort

 I wrote about a novel method for SCA reachability analysis (which was presented at OWASP Global Dublin) in 2023 here: https://josiahbruner.com/blog/narrow.html

OMSCS Statement of Purpose

I was recently accepted into Georgia Tech's OMSCS program! As an example to others, I made my "Statement of Purpose" (SOP) available on my website.

It can be read here: https://josiahbruner.com/readings/omscs.html

Lollipop CSS effects.

CSS transitions based on Android 5.0

(If you simply want to see and read the finished code, just see the fiddle: http://jsfiddle.net/z4bz0spx/3/)
 
Android 5.0 introduced a pretty slick looking effect when you click on certain controls. If you haven't seen it yet, the effect basically is a growing circle that appears while holding down a control. Here's an example: Image

After seeing it, I figured it would be pretty simple to translate that to the web. It's a refreshing change from simply changing an element's background color or similar.

The Idea

As basic implementation goes, the process is simple enough. We'll have some element, and that element will have a child. The child will be transparent, but the same width and height. We will then apply a background to the child, starting at 0px x 0px, and will increase it substantially.

  <div id="parent"> 
    <div id="circle"> </div> 
  </div>

  #parent {
    height: 200px;
    width: 400px;
    background-color: lightgray;
  }

  #circle {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/
                           0e/Ski_trail_rating_symbol-green_circle.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0 0;
    transition: .3s ease-in;
  }

  #parent:hover #circle {
    background-size: 600px 600px;
  }

That gives us the following result:

Which does look quite nice. However, I then desired a way to make this even cooler. What if the effect started where you clicked?

Improving the Effect

Using that as the basis for the future, I figured the first thing I needed to do is first find a way to detect the position of the mouse when we need to mousedown. Turns out one of the easier solutions is to simply set up a mouse movement listener:

  document.onmousemove = getMouseXY; 
  var tempX = 0; 
  var tempY = 0; 

  function getMouseXY(e) { 
    tempX = e.clientX + document.body.scrollLeft; 
    tempY = e.clientY + document.body.scrollTop; 
  }

This is when things get slightly messy. We want to move the #circle's background position relative to itself, we can't simply set the position equal to the mouse coordinates. Therefore, I did what any reasonable engineer would do; Make a sketch:

 

So basically we want the vertical and horizontal components from the center of #circle to offset your background-image. To do this, we require the distance from the top of #circle to the top of the document, as well as the distance from the left of #circle to the left of the document.

Unfortunately that's not super easy to do (assuming we want this to work even if responsive). We basically need to loop through all the parent elements and obtain offset distances so we can get the total. In code:

  function getPos(el) {
    for (var lx=0, ly=0;
             el != null;
             lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
      return {
        x: lx,
        y: ly
    };
}

We now have everything we need to actually implement the touch code. The implementation is fairly simple, we obtain most of the data that was in the graph, which we can now do using our getPos() function. After that we apply a background-position style of 50% (the center of #circle) - x/y. Here's that:

  function itTouched() {
    var someElement = document.getElementById("parent")
    var circle = document.getElementById("circle");
  
    var xValue = getPos(someElement).x + (someElement.offsetWidth / 2) - tempX;
    var yValue = getPos(someElement).y + (someElement.offsetHeight / 2) - tempY;
  
    var theString = "background-position: calc(50% - " + xValue + "px)" + " calc(50% - " + yValue + "px);";
    
    circle.setAttribute("style", theString);
}

Yay! Now all we have to do is call that onmousedown and onmouseup and change the transition to happen on background-size only. The finished product is shown in this JSFiddle: http://jsfiddle.net/z4bz0spx/3/ (Blogger apparently is doing stupid hacks that break this, so I can't integrate into the post.) I also have an example version on my website here:

 josiahbruner.com/ClickEffect

Note about the circles

I strongly suggest using an .svg graphic like I did for two reasons. A) Scaling works flawlessly, so the edges don't look horrific. B) You can easily edit the .svg file to change the color. That allows it to fit into whatever theme you want.

Using CSS Variables

Using CSS Variables

I'm very excited to say that as of Firefox 29, CSS variables are a reality.

For years web developers have been plauged with the unfortunate realization of not being able to store colors/sizes/images/etc in their code for re-use. Instead, the best one could do is create a ton of classes to store whatever shared properties you had. E.G.

    
    <style>
      .sharedBackground {
        background-color: red;
      }
    </style>

    <body>
      <div class="sharedBackground" id="boxA"> Hello </div>
      <div class="sharedBackground" id="boxB"> World </div>
      etc..
    </body>

Which is fine, except for when you want to share a bunch of different attributes. Then this happens:

<div class="sharedBackground sharedColor sharedFont etc" id="boxA"> Hello World </div>

That's pretty ugly.

Good news is though, CSS variables are coming (eventually to all platforms), but you can try them out now in the current Firefox Nightly!

Usage:

As usage goes, it's pretty simple. Variables are declared like: --something. You then use these variables with the syntax: var(--something); And these variables inherit from their parents, so a simple example of CSS variables would be:

    <style>
      .main {
        --mainBackground: red;
      }
      #boxA {
        background-color: var(--mainBackground);
      } 
      #boxB {
        background-color: var(--mainBackground);
      } 
    </style>

    <body class="main">
      <div id="boxA"> Hello </div>
      <div id="boxB"> World </div>
      etc..
    </body>

It's as easy as that!

New Compose Window UI coming soon to Thunderbird! Sneak Peak

New Compose Window UI soon, take a sneak peak

I'm a guy who likes esthetics. Nice looking apps make me happy. Fortunately I'm also a programmer, so this results in a fantastic combo. Therefore I decided to redo TB compose window. The OS X version is just about finished, and the other platforms should be done within a few weeks. However, I decided to showcase the final compose window look on OS X sooner.

First examine the old version:

Meh. Looks pretty lousy. Now feast your eyes upon the new look:

Make sure you're viewing at full size for best results. Hope you like it!

The state of the Thunderbird Team and Mozilla

The state of the Thunderbird Team and Mozilla

Recently I was emailed by a user slightly frustrated by two things: 1. The lack of Thunderbird advancements and 2. Mozilla becoming a "dictator" essentially to their users.

Sadly, there are really no ways for any of our users to know we are doing differently, so I responded to the email explaining the state of Thunderbird and Mozilla. Here is that conversation for future reference:

Because of privacy I will not give all details in the email. I will however, supply the main points [paraphrased]

Green = User, Blue = Myself

"...Which lead me to the conviction that TB development/enhancement is slowly dying and that other mailclients better suit my and my customer's needs.  Mailclients are for us one of the most important working tools which cannot be beaten by any web-based mailservice."

"I understand the lack of confidence in TB development,
and even we worry about this. But let me tell you
something that may (or may not) help you with your confidence level.

Mozilla itself stopped development of Thunderbird awhile ago. Since then
only volunteers continue it's development. As of lately, our "active"
contributors are less than 20 people. Of those, there are probably about 10 
people that really spend almost every day on Thunderbird. The
people that are left are forced to make the choice between what bugs to
fix, and what not to. Unfortunately sustaining development is very
difficult with only 10 people. And of course, we can't all work on
everything. Each person has specific areas they work in, which means
each person's load is a lot more in that area. As much as I don't like
it, fixing bugs takes precedence over adding features, so that is why we
can't add things as quickly as we would like.

Just be aware that the remaining 10 people spend almost ALL their free
time devoted to Thunderbird. We make no profit whatsoever. Pretty much
everyone has actual jobs, families, etc that are more important. But
just know that those of us that are left work very hard and will
continue to bring the best product we can. It's just not easy, and the
more volunteers we get, the better off we'll be."

"This is not only an issue with TB, but also with FF. Lately I have the impression that the Mozilla Foundation's developments are lead by some kind of "arrogance" to tell their users what's good for them (a thing that is usually attributed to big
commercial companies) instead of hearing from the users what they want."

"Many (power-users/development-minded) people have been under the
impression that Mozilla is now dictating what users get and what they
don't. I myself do some work for Mozilla and the "Australis" project, so
I just want to clarify that this statement is simply not true. Although
it may seem like we don't care, we actually do more than ever. But our 
user base has grown rapidly over a few years and to make "most" of our
users happy, making the browser faster, more stable, and less dangerous
is what we want. That's what we've been targeting recently. Firefox
hasn't changed much in the past few years, mostly because of the amount
of work and time it takes to keep track of all the little features we
support. We just recently decided that some things need to go in order
to advance.

Simply making everything an about:config preference isn't actually that
helpful, since we still must support that preference. This would leave
us with hundreds of things to test, which makes everything much harder. So
you see, just because a small percentage of our users want these little
details, doesn't mean we can make it happen. As much as we would LOVE to
make everyone happy, it unfortunately isn't a reality. "

So there you have it, both Thunderbird and Mozilla work very hard to make their users happy and we will continue to do that until, well, the web becomes a thing of the past. Cheers!

Notice: 
I am only a volunteer for Mozilla, not an employee. My thoughts do not necessarily reflect Mozilla's. I don't agree with everything they do, but no one ever agrees with everything.