Like the Star Trek series that are shot in modern times yet need to look "more primitive" than the 1960s era original, Blade Runner 2049 faced some fascinating design challenges to work within the Zeerust, especially in their UIs.
Cantina Creative and Cisco Torres' Blade Runner 2049 UI page is a great portfolio by some of the people who made them... this is the best collection of shots.
Territory Studio also has a project page and a glamour reel on vimeo, or see this Animation World Network interview with them.
Also great coverage from Engadget.
Like I said at the time, I don't know what comes after the transition in UI from skeuomorphism to "flat design", but if "slightly fuzzy remakes of Blade Runner's 80s vision of the future", I wouldn't mind so much.
INTERFACE LOVE'S Blade Runner tag has a lot of stuff, mostly about the original - actually their main page has tons of interesting sci-fi UI studies - highly recommended. And fans typography might also like Typeset in the Future for the fonts. Also kitbashed has some fascinating behind the scenes look at assembling the hardware of Star Wars.
Wednesday, March 28, 2018
Monday, March 19, 2018
graphic designing in code
I sometimes fumble with the graphics designer's usual arsenal of tools (even with humble "Acorn" as my default image editor) and find it easier to switch to Processing or P5 for some graphical tasks. It's not as flexible as if I were fluent with Illustrator or Sketch, but often I get great flexibility with future variation.
So I was having a tough time making my vision for a poster understood ("the map of Fenway, with a guitar silhouette, outside the silhouette it's a photonegative and inside it's normal") and went to make up an example - p5 has a pretty decent "mask" function for images that says "use the alpha channel of the mask image as the alpha channel for this image (though the example in the documentation is confusing)
I grabbed a free guitar silhouette, used Acorn's Instant Alpha to make a negative and positive cutout... couldn't find Acorn's photo negative filter so I used LunaPic, an interesting little online editor... got the negative and positive, and the whipped together an online p5 program guitarmask.
Also, lifehack: sometimes it's so much easier to have a person be the go-between for projects - like that I Have People Skills guy has a point! I commissioned a coworker Katie whose current draft for the poster looks like this:
And when I offered to have her be in the email thread with the Fenway folks, she wisely backed out, and mentioned it's relaxing to have me as a go between. Similarly, for Arlington Porchfest, I might be consulting in terms of helping them build a version of their map site that won't crash during the event, but another person is taking the main responsibility for dealing with their committee folks...
So I was having a tough time making my vision for a poster understood ("the map of Fenway, with a guitar silhouette, outside the silhouette it's a photonegative and inside it's normal") and went to make up an example - p5 has a pretty decent "mask" function for images that says "use the alpha channel of the mask image as the alpha channel for this image (though the example in the documentation is confusing)
I grabbed a free guitar silhouette, used Acorn's Instant Alpha to make a negative and positive cutout... couldn't find Acorn's photo negative filter so I used LunaPic, an interesting little online editor... got the negative and positive, and the whipped together an online p5 program guitarmask.
Also, lifehack: sometimes it's so much easier to have a person be the go-between for projects - like that I Have People Skills guy has a point! I commissioned a coworker Katie whose current draft for the poster looks like this:
And when I offered to have her be in the email thread with the Fenway folks, she wisely backed out, and mentioned it's relaxing to have me as a go between. Similarly, for Arlington Porchfest, I might be consulting in terms of helping them build a version of their map site that won't crash during the event, but another person is taking the main responsibility for dealing with their committee folks...
Saturday, March 17, 2018
trivial visibility toggle: a why and the how
I have a blog I've been adding to daily since 2000. It's now a lovely resource for my personal retrospection, including an on this day feature and a tag cloud (my most used tends to be kirk.is/tag/tuba for glamour shots of me and my beloved sousaphone.)
Incidentally, it took me way too many years to realize that since my blog was kind of my "statement of record", when I upload personal photos I should include a link to the full-size versions. Ah well, lesson learned, and now that kind of auto-resizing and linking is just a part of my upload workflow.
Sometimes on those conglomarated pages it's frustrating since a day's entry with a large photo gallery will take up an inordinate amount of space on the page. I decided I wanted a simple solution without relying on external js libraries or fixed css blocks to just show a "Click for Photo Library" toggle link with the photos hidden after that link.
So, that's trivial for any competent web UI person, but here it is for my own future copy and pasting:
<h2 style="cursor:pointer;" class="hidden-gallery-clicker" onclick="var gal = this.nextElementSibling; gal.style.display = gal.style.display == '' ? 'none' : '';">Click for Photo Gallery</h2>
<div class="hidden-gallery" style="display:none;">
Oh now I see it!
</div>
Incidentally, it took me way too many years to realize that since my blog was kind of my "statement of record", when I upload personal photos I should include a link to the full-size versions. Ah well, lesson learned, and now that kind of auto-resizing and linking is just a part of my upload workflow.
Sometimes on those conglomarated pages it's frustrating since a day's entry with a large photo gallery will take up an inordinate amount of space on the page. I decided I wanted a simple solution without relying on external js libraries or fixed css blocks to just show a "Click for Photo Library" toggle link with the photos hidden after that link.
So, that's trivial for any competent web UI person, but here it is for my own future copy and pasting:
<h2 style="cursor:pointer;" class="hidden-gallery-clicker" onclick="var gal = this.nextElementSibling; gal.style.display = gal.style.display == '' ? 'none' : '';">Click for Photo Gallery</h2>
<div class="hidden-gallery" style="display:none;">
Oh now I see it!
</div>
I decided to insert a gratuiotus "hidden-gallery" class, to hedge against me wanting to set up "click here to view ALL galleries at once" feature.
The javascript borrows from You Might Not Need JQuery which is a very handy reference.
Now, to just go back and edit all those dang pages.
FOLLOWUP: As satisfying as it is to have a daily blog for over 15 years, this devblog's run of 7 or so years ain't half bad either!
FOLLOWUP: As satisfying as it is to have a daily blog for over 15 years, this devblog's run of 7 or so years ain't half bad either!
Monday, March 12, 2018
the sad tale of the user agent string
History of the browser user-agent string: why every browser calls itself Mozilla. A sample:
And Netscape said, let us make fun of Microsoft and refer to Windows as “poorly debugged device drivers,” and Microsoft was angry. And so Microsoft made their own web browser, which they called Internet Explorer, hoping for it to be a “Netscape Killer”. And Internet Explorer supported frames, and yet was not Mozilla, and so was not given frames. And Microsoft grew impatient, and did not wish to wait for webmasters to learn of IE and begin to send it frames, and so Internet Explorer declared that it was “Mozilla compatible” and began to impersonate Netscape, and called itself Mozilla/1.22 (compatible; MSIE 2.0; Windows 95), and Internet Explorer received frames, and all of Microsoft was happy, but webmasters were confused.Trying to think of how old-school browser sniffing compares to more modern stuff like what Babel does.
how amazon works from a design perspective
The Design Theory Behind Amazon’s $5.6 Billion Success. "Amazon’s success brings into relief a principle that is sometimes hard to swallow in the design community: Successful design is not necessarily beautiful."
Friday, March 9, 2018
Wednesday, March 7, 2018
making a cool in-browser code editor with ace
For a long while, I've used an online editor and set of Perl CGI scripts to edit content on my site.
At first it was just a textarea, later I started using markitup to make it a more editor-y looking thing but to be honest I'm not sure what I got out of doing that.
But now I found out about Ace, a pretty fricking powerful editor, closer in look and feel to sublime or atom or what have you - check out their kitchen sink demo to see what it could do.
So while I was at it, I updated ancient Perl to reasonably fresh PHP (no apologies). The UI is idiosyncratic and weird but I kind of love it. The middle portion (with all the directory and file links and every button but 'save') is usually hidden, but clicking on the current folder name brings it up. You can save the current file under a new name, get a list of Recently edit files, make a directory... hitting delete brings up a bunch of file delete links... hidden files are shown but in a smaller font... it automatically makes a backup every time I save or delete through it... also it's file extension aware.
So it's too weird and oddball for me to properly open source I think, but let me know if any part of this would be useful or interesting to you...
At first it was just a textarea, later I started using markitup to make it a more editor-y looking thing but to be honest I'm not sure what I got out of doing that.
But now I found out about Ace, a pretty fricking powerful editor, closer in look and feel to sublime or atom or what have you - check out their kitchen sink demo to see what it could do.
So while I was at it, I updated ancient Perl to reasonably fresh PHP (no apologies). The UI is idiosyncratic and weird but I kind of love it. The middle portion (with all the directory and file links and every button but 'save') is usually hidden, but clicking on the current folder name brings it up. You can save the current file under a new name, get a list of Recently edit files, make a directory... hitting delete brings up a bunch of file delete links... hidden files are shown but in a smaller font... it automatically makes a backup every time I save or delete through it... also it's file extension aware.
So it's too weird and oddball for me to properly open source I think, but let me know if any part of this would be useful or interesting to you...
Tuesday, March 6, 2018
looked up php read directory 100 times...
I guess this is my favorite way of getting the contents of a directory / folder in PHP,
$files = array_values(array_diff(scandir($path), array('.', '..')));
from StackOverflow (surprise, surprise)
UPDATE APRIL 2019: I added the array_values() call to it, since otherwise the array seems to "start" at 2, and is a map instead of array if you pass it to json_encode()
And just because I've written this at least once in Perl and PHP and might use it again - a clunky function (clunky and clear is good, I think, or at least better than elegant and tough to read when I don't do ALL that much PHP) to read a directory - AFTER verifying it's under a certain directory root with realpath, ala...
$ROOT = "/some/legal/root/";
$folder = realpath($_REQUEST["folder"]);
if(substr($folder,0,strlen($ROOT)) != $ROOT ){
$folder = $ROOT;
}
I have a readdir function like this, that I call twice, once for dirs once for plain files, plus it adds a css class if the file is a hidden "dot" file... and yeah I'm assuming "/" as the path separator, sosueme...
function printFiles($folder,$doDirs) {
if(!(substr(strrev($folder),0,1) == "/")){
$folder .= "/";
}
$files = array_diff(scandir($folder), array('.', '..'));
asort($files);
foreach($files as $i => $filename){
$path = $folder.$filename;
if(($doDirs && is_dir($path)) || ((!$doDirs) && (! is_dir($path)))){
$slash = $doDirs?"/":"";
$typeclass = $doDirs?"dir":"file";
$hiddenclass = (substr($filename,0,1) == ".")?"hidden":"";
print "<a href='$path' class='$typeclass $hiddenclass'>$filename$slash</a> ";
}
}
}
$files = array_values(array_diff(scandir($path), array('.', '..')));
from StackOverflow (surprise, surprise)
UPDATE APRIL 2019: I added the array_values() call to it, since otherwise the array seems to "start" at 2, and is a map instead of array if you pass it to json_encode()
And just because I've written this at least once in Perl and PHP and might use it again - a clunky function (clunky and clear is good, I think, or at least better than elegant and tough to read when I don't do ALL that much PHP) to read a directory - AFTER verifying it's under a certain directory root with realpath, ala...
$ROOT = "/some/legal/root/";
$folder = realpath($_REQUEST["folder"]);
if(substr($folder,0,strlen($ROOT)) != $ROOT ){
$folder = $ROOT;
}
I have a readdir function like this, that I call twice, once for dirs once for plain files, plus it adds a css class if the file is a hidden "dot" file... and yeah I'm assuming "/" as the path separator, sosueme...
function printFiles($folder,$doDirs) {
if(!(substr(strrev($folder),0,1) == "/")){
$folder .= "/";
}
$files = array_diff(scandir($folder), array('.', '..'));
asort($files);
foreach($files as $i => $filename){
$path = $folder.$filename;
if(($doDirs && is_dir($path)) || ((!$doDirs) && (! is_dir($path)))){
$slash = $doDirs?"/":"";
$typeclass = $doDirs?"dir":"file";
$hiddenclass = (substr($filename,0,1) == ".")?"hidden":"";
print "<a href='$path' class='$typeclass $hiddenclass'>$filename$slash</a> ";
}
}
}
Subscribe to:
Posts (Atom)