Zach Margolis The life and times of Zach Margolis http://www.zachmargolis.com Guerilla Marketing Thu, 17 Apr 2008 00:00:00 PST I had some time before class started today. I couldn't help myself.</p> <div class="caption"> <img src="http://www.zachmargolis.com/img/blog/39/DSC00689.jpg" alt="Chalkboard"> Do what the robot says. </div> <p>I'm definitely going to make more things like this and post them here. Tags: arts,school, http://www.zachmargolis.com/archive.php?postid=39 http://www.zachmargolis.com/archive.php?postid=39 Mini Update, Mega Ideas Wed, 16 Apr 2008 00:00:00 PST I haven't had any significant things happen to me or around me in the past week or so. However, the websites that I'm working on have advanced in leaps and bounds. I was asked to mimic and <a href="http://vis.cs.ucdavis.edu/Ultravis07/">older design</a> and <a href="http://vis.cs.ucdavis.edu/Ultravis08/">update it</a> (make the code easier to read, add the new logo, and such) and finished that off in about an evening.</p> <p>Well that was Friday. What have I been doing since then? I've been almost literally pouring my heart and soul into the redesign of the <a href="http://ucdrss.org/"</a>Regents Scholars Society</a> site. The new design is gorgeous and slick and subtle. Since the last time I really dug into that site was about six months ago, I've learned a lot of little things that I can now apply to improve both the back end and front end. I'm really excited, and I'll brag about the site some more as soon as its launched, hopefully about two weeks from now. If it's any sooner, then I'll have been skimping on my schoolwork. Tags: portfolio,projects, http://www.zachmargolis.com/archive.php?postid=38 http://www.zachmargolis.com/archive.php?postid=38 Inspiration Thu, 10 Apr 2008 00:00:00 PST The past 3 days or so have been semi-crazy in terms of web design ideas for me. First, on Tuesday I forced myself to make a Javascript rollover animation (from scratch, quite a hassle).</p> <p>Then, while staying up late trying out different redesigns for the <a href="http://www.ucdrss.org">RSS website</a>, I sparked and came up with a new logo. Well, the club had a logo at one point, but now we have a placeholder logo. So in a little while, we'll have a real logo. Then, during classes yesterday and today, I came up with the rest of the layout for that site. My term as webmaster ends soon, but now I'll have something for when I run (probably unopposed, though). Tags: life, http://www.zachmargolis.com/archive.php?postid=37 http://www.zachmargolis.com/archive.php?postid=37 Another Twitter CLI Update Fri, 04 Apr 2008 00:00:00 PST I made a quick update to <a href="http://zachmargolis.com/projects/twitterCLI">Twitter CLI</a> this morning, and wanted to notify my avid followers. You can now send and check for direct messages. Oh yeah, and Twitter's small format change no longer screws up Twitter CLI's XML parser. Tags: projects, http://www.zachmargolis.com/archive.php?postid=36 http://www.zachmargolis.com/archive.php?postid=36 My Emails Is Eated! Wed, 02 Apr 2008 00:00:00 PST I think I'm paranoid. I've out a handful of emails from a computer I'm borrowing, but no confirmation that they were actually sent (in the form of proof in my online 'sent messages' folder). So I've tried again a few times. Either these people are going to get triplicate emails, or just one that seems a tad late.</p> <p>So if you receive a couple extra copies of some email for me in the next few days, I'm sorry. A lot. Tags: life,school http://www.zachmargolis.com/archive.php?postid=35 http://www.zachmargolis.com/archive.php?postid=35 Tag! You're It! Thu, 27 Mar 2008 00:00:00 PST I had this plan to add a tagging system to my blog. I promised myself I'd take care of it over spring break. Except, I put it off because I was distracted by Pokemon. I messed up my game, so I decided to stop.</p> <p>So of course, what better time than now to add the tags? So It's 2:20 AM now, and I've been chugging along since midnight or so. It's been a success, and I even was able to make a <a href="http://www.zachmargolis.com/tags_all.php">graph</a> of the tags, which had been something I'd wanted to include for a while. Tags: projects,site update, http://www.zachmargolis.com/archive.php?postid=34 http://www.zachmargolis.com/archive.php?postid=34 WYSIWYG? Forget it. Mon, 24 Mar 2008 00:00:00 PST I was asked to put together a resume today, so I did. The best part is that I just wrote it in HTML and CSS, and decided to skip the whole clunky &quot;What-You-See-Is-What-You-Get&quot; affair. The last time I made one of these, I used Apple's Pages (the not quite InDesign, but not quite Word application). This new HTML one has the same format and everything, but doesn't require a proprietary fomat or anything to be viewed. Yay, freedom!</p> <p>Oh, yeah I might as well post a link since I've been going on about how cool this thing is. Check out <a href="/projects/resume">my resume</a>!</p> <p><strong>Update: </strong> I removed my snail mail address and personal email so I don't get any creepy people watching me. Nothing special. Tags: projects http://www.zachmargolis.com/archive.php?postid=33 http://www.zachmargolis.com/archive.php?postid=33 Gotcha! Wed, 19 Mar 2008 00:00:00 PST First off, I'd like to apologize to the real humans out there. Over the past few days, I've received a lot of comments on my old post that were completely spam. They came from different IP addresses so I couldn't filter by that. It's robot spam for sure, because the content was filled with weird links and jarbled text. What's a quick n' easy way to stop robots? Captchas!</p> <p>So, in order to stop the robots, I have to inconvinience all you real people out there. For that, I am very sorry. On the bright side, the captcha images are all Marvel Comics characters which should make it slightly more entertaining than just translating text.</p> <p>I know I don't own the characters or their images, but they way I see it, I'm just having other people identify them (they're iconic, and widely recognizeable). I do not claim ownership or anything and I hope I'm not offending their copyright owners. Tags: site update,projects http://www.zachmargolis.com/archive.php?postid=32 http://www.zachmargolis.com/archive.php?postid=32 Feed Trouble Thu, 17 Apr 2008 17:53:19 MST <p>I totally spazzed (also, second post in one day? Oh snaps). For a while my RSS feed was a .php file (dynamically generated every time its accessed....bad) and all the links pointed there. My old RSS feed had a crappy redirect.</p> <p>Now, the feed is proper, with escaped HTML entities so as not to freak out any readers. It had been fine for a while, so I don't know what gives. Please use <a href="http://www.zachmargolis.com/news/news.rss">http://www.zachmargolis.com/rss/news.rss</a> as your normal feed. Sorry for the update spam.</p> <p>Tags: site update,</p> http://www.zachmargolis.com/archive.php?postid=40 http://www.zachmargolis.com/archive.php?postid=40 From Now On, No Fruit Shall Go Un-Drawn Tue, 22 Apr 2008 17:15:55 MST <p>All fruits should to have faces drawn on them.</p> <div class="caption"> <img src="/img/blog/41/DSC00692.jpg" alt="Chalkboard"> Bananas get scared when you approach them too quickly. </div> <p>Should you keep watching for more? I'm not sure yet. I tried to make some more chalk drawings, and they were nowhere near as cool as the original. We'll see where this goes.</p> <p>Tags: arts,</p> http://www.zachmargolis.com/archive.php?postid=41 http://www.zachmargolis.com/archive.php?postid=41 Fruit Drawing No. 2 Wed, 23 Apr 2008 21:23:15 MST <p>I had a lot of fun making today's fruit drawing. My goals for the future involve a better camera, or maybe just taking pictures outdoors as oppose to my not so well lit desk.</p> <div class="caption"> <img src="/img/blog/42/DSC00695.jpg" alt="Fruits"> The apple stalks its prey. </div> <p>In other news, the <a href="http://ucdrss.org/">RSS site</a> is coming a lot great. It's going to have four feeds (news, events, pictures and all of the previous ones together) and the admin section is super cool with a nice cookie system. I did work on it a little too much over the course of the week, but I'm proud to say I did absolutely no work on it today. Strange, yes?</p> <p>Tags: arts,</p> http://www.zachmargolis.com/archive.php?postid=42 http://www.zachmargolis.com/archive.php?postid=42 Fruit Drawing No. 3 Sat, 26 Apr 2008 18:16:05 MST <p>Ok, so this might be a little morbid for Saturday afternoon. But it's funny because its cute and fruity and stuff.</p> <div class="caption"> <img src="/img/blog/43/DSC00698.jpg" alt="Fruit drawing"> He didn't even leave a note. </div> <p>Next drawing should be a little more cheery.</p> <p>Tags: fruit drawing</p> http://www.zachmargolis.com/archive.php?postid=43 http://www.zachmargolis.com/archive.php?postid=43 Blind Carbon Copy Tue, 29 Apr 2008 13:42:34 MST <p>BCC. That extra line under &quot;CC&quot; or &quot;To:&quot; when composing an email.</p> <p><a href="http://pogue.blogs.nytimes.com/2008/04/28/a-lesson-on-bcc/">David Pogue discussed</a> this email feature, called &quot;Blind Carbon Copy&quot; earlier this week. Which brings me to today.</p> <p>I get a lot of emails sent to a lot of people other than myself. But this week, one of the primary senders began to use the BCC field, as evidenced by the surprisingly anemic &quot;To:&quot; and &quot;CC:&quot; fields in her emails. This by itself is kind of nice, when these emails are usually sent to the 114 or so of us on a list. However, she has now tapped into the <strong>mysteriously ominous power</strong> that the BCC field contains.</p> <p>So when I receive an email with a flyer attached, and the sole text being, &quot;We thought this might be of interest to you&quot; I got excited. Yay, a personalized email solely for me! I must the the one 'you' in the entire universe, I thought. Oh wait. There's nothing at all in the &quot;To&quot; field, not even my email. Drat! I'm in the BCC line, and I've been had.</p> <p>So children, let it be a lesson to you, that emails are not always unique and personalized. And another lesson, that you should be wary of the BCC line. Oh, how it cleans up the recipient's message box, yes. But that is not a valid reason to shroud them in utter darkness. The power of the BCC line is not one to be taken lightly. Now go be merry or do whatever you kids do these days.</p> <p>Tags: life,school,</p> http://www.zachmargolis.com/archive.php?postid=44 http://www.zachmargolis.com/archive.php?postid=44 Ninjas VS Pirates Tue, 29 Apr 2008 17:00:47 MST <p>This post should answer the age old question, if pirates are better than ninjas.</p> <div class="caption"> <img src="/img/blog/45/DSC00700.jpg" alt="Ninja"> In the fight between ninjas and pirates, ninjas always win. </div> <p></p> <p>Tags: fruit drawing,</p> http://www.zachmargolis.com/archive.php?postid=45 http://www.zachmargolis.com/archive.php?postid=45 The Food Chain Tue, 06 May 2008 18:57:02 MST <p>Dinosaur eats rabbit eats carrot. It's totally the way that it happens in real life. Especially the part of about the dinosaurs. <div class="caption"> <img src="/img/blog/46/DSC00703.jpg" alt="Food chain"> That carrot can run pretty darn fast. Have you ever tried to catch one? </div></p> <p>Tags: arts,</p> http://www.zachmargolis.com/archive.php?postid=46 http://www.zachmargolis.com/archive.php?postid=46 Sneak Peek: UCDRSS.org Wed, 07 May 2008 21:50:04 MST <p>The page doesn't officially launch until tomorrow night (when my second term as UC Davis Regents Scholars Society webmaster begins) but I'm so excited that I had to post something. Check out the <a href="web.html">web design</a> section of the site to see what it looks like.</p> <p>So what's the diff? Well aside from the new look, the navigation bar is smarter with some JavaScript, and is mostly functional without JavaScript at all even. Then, the administrative section is protected by login with cookies, instead of being open as it was before. Then, there's a smart RSVP system with email confirmation. My code is even cleaner on the back end. It's an exciting project, and I'm thankful that I had the opportunity to work on it.</p> <p>I think it's really great when lots of little small tricks come together to create a smooth and fresh site like that one. I look forward to the official launch tomorrow night.</p> <p>Tags: portfolio,projects,</p> http://www.zachmargolis.com/archive.php?postid=47 http://www.zachmargolis.com/archive.php?postid=47 Solid Colors Sat, 10 May 2008 13:08:24 MST <p>I really love solid colors, which is why the new <a href="http://ucdrss.org">UCDRSS.org</a> had (past tense) a solid yellow background. However, when viewed in anything wider than about 700 pixels (my preferred web browser width) the yellow becomes this gross blob.</p> <p>I added a pretty background image and apologize to all you wide-screeners. That was truly a disgusting background.</p></p> <p>Tags: portfolio,projects,</p> http://www.zachmargolis.com/archive.php?postid=48 http://www.zachmargolis.com/archive.php?postid=48 The Art of Powerpoint Tue, 20 May 2008 15:11:10 MST <p>Let me just start by saying that maybe, possibly, I could be picky and feel the need to whine about something. Also, for all intents and purposes, I'm going to declare that Steve Jobs is probably one of the greatest presenters of our time. I'm sure that some of <a href="http://kennethfinnegan.blogspot.com/">my audience</a> will strongly disagree, but I'm going to run with it anyways, and get to that later.</p> <p>When a presenter throws a humungo-jumbo block of text onscreen during a presentation, what do you do? Listen to their interesting anecdote? Scramble to copy it down verbatim? Do you instead ignore their story and focus on absorbing the straight facts? As a rule of them, presenters should never do this. The focus of your presentation should be the presenter, and what comes directly out of their mouths.<p> <p>I really hate to rag on my &quot;generation&quot;, but if there's one thing that I have to strongly disagree with, it's the fact that we have been raised with the expectation of having all the information right there in front of us. When my peers display paragraphs of information, comment on a few details and tell audiences to &quot;read the rest later&quot;, I cringe a little bit. What's the point of including it, and, what fun is listening to a presentation if you can skim the Powerpoint and be done with it? There's no difference between a presenter and a piece of cardboard at that point.</p> <p>Powerpoint is not the reason a lot of presentations suck, but is probably what has pushed everything over the edge. Let's take a trip down memory lane to discover what other than Powerpoints have been the main tools of presenters.</p> <ul> <li><strong>The chalkboard</strong> has been around in years in various shapes and forms. <ul> <li><em>What worked?</em> Draw what you want to talk about. &quot;Here, look at this parabola,&quot; or &quot;Here, this is how you spell onomatopoeia&quot;.</li> <li><em>What didn't?</em> Aside from the fact that chalk gets everywhere is kinda nasty, you have to write out, in fine detail, every letter that needs to be show.</li> <li><em>What can we learn from it?</em> Definitely brevity is a desirable quality.</li> </ul></li> <li><strong>The overhead projector</strong> is the next thing I can think of as a learning tool. Some people, like a few math teachers of mine, use them the same as a chalkboard, but so that they can remain sitting. Other people use the equivalent of slides, or prepared sheets of translucent material. <ul> <li><em>What worked?</em> Well, like a chalkboard, you can have exactly what you need to show, and render it visible for everyone.</li> <li><em>What didn't?</em> Having this accessible stand means that presenters can write and show more and more, overloading audiences with factoids or details. Also, they need darkened rooms so you immediately put your audience one step closer to bedtime.</li> <li><em>What can we learn from it?</em> Well, we learned to throw up oodles of information and this is one of the simplest ways to disconnect from your audience.</li> </ul></li> <li><strong>Slides</strong> are pretty much the same as overhead projectors, but even less personal (see a trend here?). They have that nostalgia&ndash;inducing whirr and click, but not much else. <ul> <li><em>What worked?</em> For an art history class, instead of making a billion black and white copies of the Mona Lisa (or whatever, I'm not an art snob) and handing them out to the class, you can show one full color, high detail version on the board.</li> <li><em>What didn't?</em> Well for anything other than pictures, the difficulties of actually creating personal slides meant that teachers bought manufactured slides that might not actually connect with the material they are teaching. My high school bio teacher did this.</li> <li><em>What can we learn from it?</em> High quality material comes often at the cost of independence.</li> </ul></li> </ul> <p>So at the end of they day, Powerpoints seem to have inherited a lot of the bad qualities of the earlier presentations. They are often impersonal, loaded with facts, and occasionally copied directly from other people. So who will save us? Yes, Steve Jobs. I'm sure there are many other wondrous presenters out there, but his keynote speeches are the ones I've seen and the ones worth marveling at. They only contain blocks of text quoting journalistic sources, and are filled with carefully selected words, simple diagrams, and accompanied by the narration of a skilled orator. It's probably how Powerpoints should be.</p> <p>For years, presenters have leaned on their tools, but none have been as versatile as computers, with their sharp and colorful pictures, relative portability and capability to even include motion graphics. They have their drawbacks, like the need for a darkened room, but that can be overcome with a high-contrast color theme. I think now is the time we should be focusing on the skills behind presenting, and not just on the mere showyness of the tools. I can honestly say that in the few Powerpoints I have created and presented, I've tried to keep the onscreen details to a bare minimum. I will admit to using a few fancy transitions, but usually just a few scales, translations, and opacity changes to make things connect better.</p> <p>If there's anything to take away from my rant, it's that we should work on becoming more than cardboard stand-ins for presenters.</p> <p>Tags: life,</p> http://www.zachmargolis.com/archive.php?postid=49 http://www.zachmargolis.com/archive.php?postid=49 Firefox? Ew. Sun, 01 Jun 2008 22:29:41 MST <p>I had a longer rant to write. Since I don't want to have an excessively negative blog, I'll boil it down:</p> <p>I am unhappy with Firefox because I can't find a reliable way to get mouse positions with it. <kbd>window.event.clientX</kbd> gives me the x-position in both Safari and Opera, but <kbd>window.event</kbd> appears to be undefined in Firefox.</p> <p>As a side note, I have not tried this with Internet Explorer yet. The more I read <a href="http://www.quirksmode.org/">quicksmode.org</a> the less I am angry at IE. They are terrible in terms of CSS, but it seems that Javascript they are doing mostly OK. I haven't even startedXMLHttpRequest yet, which is supposed to be hellish cross-browser, but like I said, for now IE only bugs me when it comes to CSS. Sorry, Firefox, you are the weakest link (for now).</p> <p>Tags: life,</p> http://www.zachmargolis.com/archive.php?postid=50 http://www.zachmargolis.com/archive.php?postid=50 Max/MSP/Jitter Cloak Effect Mon, 02 Jun 2008 18:51:32 MST <p>For a class I'm in, <a href="http://www.bobostertag.com/tcs/110/index.htm">TCS 110: Object-Oriented Programming for Artists</a>, taught by <a href="http://bobostertag.com">Bob Ostertag</a>, I created a cloak filter in <a href="http://cycling74.com">Max/MSP/Jitter</a>. It turned out pretty well, so I'm posting it here. Some of the more popular Max/MSP/Jitter artists post their patches for free, so I'm doing the same, along with a demo video of me pacing.</p> <div class="caption"> <a href="/projects/cloak/cloak.mp4"> <img src="/projects/cloak/gfx_cloak.jpg" alt="Cloak Effect"></a> Video is compressed with h.264 </div> <p class="center"><a href="/projects/cloak/cloak4.mxf" class="file"> Download the Source</a> <span class="smalltext">Version 4</span></p> <p class="center"><strong>This patch is hereby distributed under the Creative Commons <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">&quot;Attribution-Noncommercial-Share Alike 3.0 Unported&quot;</a> License.</strong></p> <h4>Installation</h4> <p>You need to have the MaxMSP 5 Runtime in order to work this patch. For now, the Runtime is not available as a standalone application yet, but go to the <a href="http://cycling74.com/downloads/max5">Cycling '74 Max 5 page</a> to download Max 5 for your computer. The Runtime is installed alongside a 30-day demo of the full application.</p> <h4>Instructions</h4> <p>The patch works by separating the subjects from the background and applying various effects to the subjects. Click the green <kbd>start</kbd> button to let the patch find a camera and select one in the pulldown. Then, click the yellow <kbd>set up</kbd> button to have the patch isolate the background. It will beep for five seconds, then play a camera shutter sound to let you know it is recording. The patch will play another sound to let you know it's done and you can walk into frame to see what you look like when you're not there.</p> <p>From there, feel free to adjust whether you want to look more &quot;Predator&quot; or &quot;Ghost&quot;, or how much you want to displace the background. Every background is different, so please try lots of settings. Enjoy!</p> <p>Tags: projects,school,</p> http://www.zachmargolis.com/archive.php?postid=51 http://www.zachmargolis.com/archive.php?postid=51 New Toys Tue, 10 Jun 2008 11:49:37 MST <p>So yesterday <a href="http://apple.com">Apple</a> showed off the 3G <a href="http://apple.com/iphone">iPhone</a>.</p> <p>I think I want one, but I don't know. The $10 extra on top of the first gen's data plan seems like a lot (that makes for $30 per 3G iPhone line on a plan). Even more so, considering I have unlimited data right now for $15 with ATT&mdash;it's not smartphone certified, but it works the same when my SIM is in a 3G phone. Also, I was just adjusting to the fact that the iPhone was handling acceptably without 3G in its current EDGE data form. The software upgradeability made me really tempted to buy a refurb EDGE iPhone, and now I'm a little bummed I didn't do so.</p> <p>It's too bad they can't be ordered online at all or else I would have pre-ordered already. That way, I wouldn't have let the effects of the Reality Distortion Field wear off from the keynote. I'll see if I still want one come July 11.</p> <p>PS, why doesn't the new MobileMe support note synching? That makes the iPhone's Notes app kind of useless.</p> <p>Tags: life,</p> http://www.zachmargolis.com/archive.php?postid=52 http://www.zachmargolis.com/archive.php?postid=52 More Redesigning Sat, 21 Jun 2008 15:03:25 MST <p>I'm redesigning <a href="http://ucdrss.org">UC Davis RSS site</a> again. I spent a bunch of time making the current design for the site, and it's not holding up. The next one aims to have fewer sections, and is completely dropping the &ldquo;news&rdquo; section, and on the whole look cleaner. I saw <a href="http://theocacao.com/document.page/567">a blog</a> about the advantages of borderless design, so I'm attempting to apply those kinds of techniques.</p> <p>The visual &ldquo;theme&rdquo; of the new site is a paper theme, with a lovely drop shadow and creme colored interior. I'm looking at my own page and noticing some striking similarities...we'll just have to let that slide for now.</p> <p>Tags: projects,</p> http://www.zachmargolis.com/archive.php?postid=53 http://www.zachmargolis.com/archive.php?postid=53 Dry Spell Mon, 30 Jun 2008 22:13:56 MST <p>I'm definitely lagging in terms of blog posts per week. I attribute it to the summer.</p> <p>I'm tweaking the internal layout of this site a bit, and still trying to figure out the new UCDRSS.org layout (soon to be renamed due to copyright infringement, ugh). Woop woop. </p> <p>Tags: life,</p> http://www.zachmargolis.com/archive.php?postid=54 http://www.zachmargolis.com/archive.php?postid=54 I'm Still Here! Promise. Tue, 29 Jul 2008 21:55:30 MST <p>My summer is kind of moving quickly, and so I've been neglecting my site a pinch. This post is mainly just so that I don't skip the month of July.</p> <p>I'm getting a lot of practice with Javascript, and my new favorite sites are <a href="http://quirksmode.org">Quirksmode</a> and <a href="http://alistapart.com">A List Apart</a> because the people who make those sites favor accessibility and all that yummy trendy web stuff, too. When the next iteration of this site is done, it will have better support for user agents (not just browsers) that do not use images or Javascript.</p> <p>Until next time, amigos!</p> <p>Tags: life,</p> http://www.zachmargolis.com/archive.php?postid=55 http://www.zachmargolis.com/archive.php?postid=55 Squeaky-Clean URLs Thu, 31 Jul 2008 19:56:09 MST <p>Starting tonight, zachmargolis.com has clean URLs for archive posts and tags. Wait, huh?</p> <p>Well if you want to view post number 56, instead of going to <a href="http://zachmargolis.com/archive.php?postid=56">zachmargolis.com/archive.php?postid=56</a> you can go to the much more user-friendly <a href="http://zachmargolis.com/archive/56">zachmargolis.com/archive/56</a>. It's definitely not a revolution, but this is my first run-in with Apache's mod_rewrite functions.</p> <p>Starting tonight, the RSS feed will also use these new URLs. I decided not to go back and re-link all of the legacy posts on the RSS file because then readers would see 20 or so brand new posts that are actually recycled, because of the way RSS feeds are marked as new or old.</p> <p>Tags: site update,</p> http://www.zachmargolis.com/archive/56 http://www.zachmargolis.com/archive/56 Regents Scholars Society, Relaunched Again! Sat, 09 Aug 2008 00:57:10 MST <p>Tonight, I've just launched <a href="http://davisrss.org">davisrss.org</a> the successor to ucdrss.org. I'm super proud of how much simpler this site is than the one before it, and it still has all of the same basic functionality. The admin section is also more improved, and acts like a real content managing system. This is high quality stuff!</p> <p>Tags: portfolio,projects,</p> http://www.zachmargolis.com/archive/57 http://www.zachmargolis.com/archive/57 More Streamlining. Sun, 24 Aug 2008 11:54:52 MST <p>Starting today, zachmargolis.com is a lot more streamlined. If you don't have Javascript, you will only be taken to non-javascript pages (where they exist) and if you do have Javascript, you will go to the fancier versions.</p> <p>Also, the URLs have been simplified, there is now /web, /video, and /about instead of /web.html, /video/video.html and /about.html. This should make things easier to remember and it looks way sharper.</p> <p>I know this isn't a real update, I'll do something interesting soon and write about it</p></p> <p>Tags: site update,</p> http://www.zachmargolis.com/archive/58 http://www.zachmargolis.com/archive/58 Happy Anniversary! Mon, 08 Sep 2008 20:13:21 MST <p>Today marks one whole year of zachmargolis.com!</p> <p>In one year, this site has gone from a simple blog with just three postings, to one with an archive, and then comments, and then a tag system. I'm really proud of the progress that I've made and excited to keep improving. Also, the site is now pretty much 100% compatible with Internet Explorer 6+, which is something fewer and fewer sites can claim.</p> <p>Tags: site update,</p> http://www.zachmargolis.com/archive/59 http://www.zachmargolis.com/archive/59 Accessibility Rocks. Sat, 13 Sep 2008 11:48:08 MST <p>Fact: Accessibility is important. For a while now, I’ve been trying really hard to support an accessible Internet. That means that anybody who can understand English (spoken or written) can get the gist of my web sites no matter what browser they have. When I get confident enough to write websites in other languages, the same will apply for those.</p> <p><abbr title="Hypertext Markup Language">HTML</abbr> has specific tags that help with this kind of accessibility. The H tags (<kbd>h1</kbd>, <kbd>h2</kbd>, <kbd>h3</kbd>, <kbd>h4</kbd>, <kbd>h5</kbd>, and <kbd>h6</kbd>) are headers that can be used to break up sections. I like to use an <kbd>h1</kbd> for the title of my page, an <kbd>h2</kbd> for each section of said page, and <kbd>h3</kbd>s for subsections of those. Logical, yes? Well it also helps create structure when viewing a page without styles, or when listening to a site through a screen reader. There’s an entire set of styles in <abbr title="Cascading Stylesheets">CSS</abbr> dedicated solely to audio cues, and oral stylesheets to further emphasize various points. <a href="http://blooberry.com">Blooberry.com</a> has an excellent list of all of them with examples, and it’s one of the first websites that I saw that got me thinking about Accessibility.</p> <p>The next step is Javascript. Most people have <abbr title="Document Object Model">DOM</abbr>-ready Javascript engines in their browsers, which has done a lot for consistency in Javascript. However, not everyone supports Javascript. I turn it off occasionally to save bandwidth (when I’m tethered to the web through my phone), and some browsers on cell phones have truly limited Javascript support, if any at all. Maybe one day, Javascript will be everywhere, and supported consistently, but until then, it’s important to provide alternatives without it. For example, this site has a Javascript version of my web page portfolio and a non-Javascript version. I posted earlier about some code that intelligently directs visitors to whatever their browsers support. But the important part is that there is pretty much no Javascript requirement for a useable site.</p> <p>One of the next steps in Accessibility is image-free accessibility. Everybody downloads images, right? Wrong. Screen readers have to read the <kbd><abbr title="Alternate">alt</abbr></kbd> tags of images (as opposed to, say <em>displaying</em> them), and on occasion, I have chosen to disable images altogether as well to save bandwidth. This site is completely accesible if the viewer does not use images and does not use styles, but in the rare case that there is a user with styles but no images, this site is much tougher to use. I’m working on a solution, but it’s tough.</p> <p>My point is that accessibility is pretty much in the small details. Quick tips like “Use a <kbd>label</kbd> for every <kbd>input</kbd> tag” are actually really valuable. There are plently of other tips I could ramble off, but there are articles in other places with specific tips. I’m focused mainly on accessibility as a concept that should be a part of everybody’s planning process. Maybe not everybody sees this as important, because accessibility is kind of for the “long end of the tail”, meaning very few people actually benefit from it. But it could happen to you. When I get older, I suspect I won’t be able to see as well, so doing things like building a design with a layout that is forgiving to text resizing will be important.</p> <p><abbr title="Hypertext Markup Language">HTML</abbr> accessibility is really easy to get the hang of. Knowing what tags represent what kinds of text is important. The tools exist on the Internet already and we as content creators should use them.</p> <p>Tags: ramblings</p> http://www.zachmargolis.com/archive/60/2 http://www.zachmargolis.com/archive/60/2 Missed a Spot. Tue, 16 Sep 2008 20:16:54 MST <p>Ok, so after my <a href="http://zachmargolis.com/archive/60/">long rant on accessibility</a>, I realized something was missing. The blog Captchas do not function without images. Whoopsidoodle! That kind of undermines the entire point of my earlier post. Well, I just quickly threw together an audio captcha.</p> <p>Clicking on what is now the image captcha will direct users to an audio file that speaks what they should write in the the box. The <kbd>alt</kbd> tag of the image says to click it, which I'd hope makes enough sense to anyone reading. Every so often, it helps to practice what I preach.</p> <p>Tags: site update,</p> http://www.zachmargolis.com/archive/61 http://www.zachmargolis.com/archive/61 Sharing Mon, 20 Oct 2008 22:54:03 MST <p>My life really hasn&rsquo;t been that interesting lately, so here&rsquo;s a rant instead.</p> <div class="caption"> <img src="/img/blog/62/share-icon-128x128.png" alt="Share" /> What in the world does this symbol mean? </div> <p>So I&rsquo;d noticed this symbol on a bunch of sites, indicating &ldquo;sharing.&rdquo; First, I saw it on <a href="http://viddler.com">Viddler</a> (and then somewhere else, but I can&rsquo;t seem to recall where). A search for &ldquo;share icon&rdquo; revealed that this is a product of the <a href="http://shareicons.com/">Share Icon Project</a>. Good for them, they&rsquo;ve created an open source icon meant for everyone to use.</p> <p>However, I wish they&rsquo;d shared some other icon. I mean, seriously? I had to look for the tooltip on that icon like five times before I figured out that it was &ldquo;share.&rdquo; Honestly, it looks like a sideways V to me. As a mnemonic device, I figured it was one person on the left <em>sharing</em> with two people on the right. Ok, cool. But why wasn&rsquo;t that obvious from the start? The idea of an icon is that you can <em>get it</em> with no training whatsoever.</p> <p>I understand that sharing is a tough abstract concept to make a small little icon out of, and I might not be able to do any better myself. (It&rsquo;s just like that scene from the Simpsons where Milhouse&rsquo;s dad tries to draw &lsquo;dignity&rsquo; for pictionary, fails, and then is shown up by Milhouse&rsquo;s mom.) I also understand the idea that if more people use it, then more people will get it, and the icon will become part of our visual lexicon. It could snowball, right? I don&rsquo;t mind if a good icon snowballs, but this feels like just a placeholder.</p> <p>The site&rsquo;s creators liken this to the <abbr title="Really Simple Syndication">RSS</abbr> icon and the <abbr title="Outline Processor Markup Language">OPML</abbr> icon. OK, I see where they&rsquo;re going, they are releasing the design for an icon that can be incorporated anywhere, like the RSS icon. But wait, what the hell is <abbr title="Outline Processor Markup Language">OPML</abbr>? The Share Icon guys present it as an icon that looks like a <a href="http://www.opmlicons.com/">circle with a dot in the middle</a>, or...oh wait, a bullseye. So that means <abbr title="Outline Processor Markup Language">OPML</abbr> is a target of some sort, right? Another quick search reveals that <abbr title="Outline Processor Markup Language">OPML</abbr>, or Outline Processor Markup Language, is an <abbr title="Extensible Markup Language">XML</abbr> file format for outlines. So the icon should be some sort of list, not an abstract circle. Off the top of my head, I would make it four horizontal lines, the bottom three indented, like an outline.</p> <p>My problem is not with free icons for people to use, share and create standards with. I mean, I love the <abbr title="Really Simple Syndication">RSS</abbr> icon. It makes sense, you&rsquo;re <em>broadcasting</em> stuff with, and it&rsquo;s dispersing (<em>just like in the icon!</em>). I even use it proudly on my own feed&mdash;no need to reinvent the wheel. The problem is that the Share and <abbr title="Outline Processor Markup Language">OPML</abbr> icons suck. I applaud the effort of organizations like those for trying to give back and all that, but I do not want to support the effort of icons like theirs that mean nothing.</p> <p>The world is filled with strange icons. Take the &ldquo;save&rdquo; icon, for example. It&rsquo;s another abstract concept, usually a floppy disk. Back in the days of the original Macintosh the only way to save personal data was with a floppy, hence &ldquo;save.&rdquo; Great, but who still uses those? Unfortunately, by the the time floppy disks lost favor, the icon had already been used everywhere and we are stuck with an anachronistic icon. I would call for change, but I don&rsquo;t know if its worth the effort. The &ldquo;share&rdquo; icon is still nascent and I would like to see something different while we still have the option.</p> <p>I&rsquo;ll keep pondering sharing over the next few weeks and see if I can come up with something better so that I&rsquo;m not just another whiny blogger. (I&rsquo;d rather be a whiny blogger who can walk the walk.) Sorry guys, I really hate your sideways V. </p> <p>Tags: life,ramblings,</p> http://www.zachmargolis.com/archive/62 http://www.zachmargolis.com/archive/62 OOPS I LEFT MY CAPS LOCK ON. Thu, 23 Oct 2008 20:31:23 MST <p>A recent trend in websites: HUGE ALL-CAPS TEXT ON A WHITE BACKGROUND, with <a href="http://www.chucknorrisfacts.com/">Chuck Norris</a> style humor. Here are the three I've come across, with some choice quotes. I'm sure there are plenty more.</p> <ul> <li><a href="http://waltmossbergsays.com/">WaltMossbergSays.com</a> pokes fun at the influence of Wall Street Journal writer Walt Mossberg<br /> <em>BAAAAAAAAAAAH. ::CHEW:: ::CHEW:: ::GRAZE::</em></li> <li><a href="http://barackobamaisyournewbicycle.com/">BarackObamaIsYourNewBicycle.com</a> is a list of things Barack Obama would do just because he's your friend, if he were your friend (which he definitely is).<br /> <ul> <li><em>BARACK OBAMA HELPED YOU MOVE A SOFA</em></li> <li><em>BARACK OBAMA THOUGHT YOU COULD USE SOME CHOCOLATE</em></li> </ul></li> <li><a href="http://chocklock.com/">chocklock.com</a> has something to do with <a href="http://furbo.org/">Craig Hockenberry</a> (of the Iconfactory), and I can't quite tell what it is, but it appears to be some big in-joke. I have a feeling it's related to his c4[2] presentation entitled IPHONE ITS NOT A FRICKEN MINATURE LAPTOP OK. The best part about the site is that the style extends into the source code for the page.<br /> <em> JUST THINK HOW MANY MEGABYTES YOU WOULD HAVE IF YOU ONLY USED <a href="http://twitter.com/ahruman/statuses/950394189">SIX BITS</a></em> </li> </ul> <p>I think it might be time for a redesign! Just kidding.</p> <p>Tags: internet</p> http://www.zachmargolis.com/archive/63 http://www.zachmargolis.com/archive/63 Better Late Than Never Sat, 25 Oct 2008 13:27:35 MST <p>I just updated my <a href="/web_nojs/">web design</a> portfolio to include projects from this summer. I guess it's only a month late or so, no big deal.</p> <p>Tags: portfolio,site update,</p> http://www.zachmargolis.com/archive/64 http://www.zachmargolis.com/archive/64 Hash Tags, and Catching the Back Button Mon, 10 Nov 2008 11:07:18 MST <p>I recently found a new Javascript trick that I'd like to share with the world. So it all starts when I was looking at <a href="http://taptaptap.com">taptaptap.com</a>, a company that sells iPhone apps. I noticed that I could click to the different sections of the page, and they would animate. Then, I could click my browser's back button, and they would also animate. Amazing! How could they do that? In Javascript there is no way to directly catch a back button press as an event, so there is a little script running on a loop to look for the signs.</p> <p>Web pages can use hash tags, or <kbd>#something</kbd> to jump to an element on the page with the ID set to <kbd>id="something"</kbd> and moving does not require a reload. This is important because it saves time, and scripts that are running stay active. So, when a user clicks on a link that goes to <kbd>&lt;a href=&quot;#something&quot;&gt;</kbd>, the location in the URI up at top changes to reflect this new &ldquo;hash tag.&rdquo; This means we can use Javascript to catch that change.</p> <p>So, here are some important Javascript values to know:</p> <ul> <li><kbd>document.location</kbd> will give you the full text of the URI</li> <li><kbd>document.location.hash</kbd> will give you everything including and after the <kbd>#</kbd> in the URI</li> <li><kbd>setInterval(<em>function</em>, <em>ms</em>)</kbd> will call <em>function</em> every <em>ms</em> milliseconds. It goes on forever, unless you use <kbd>stopInterval()</kbd>, which is not necessary for this exercise.</li> </ul> <p>Alrighty, now we have the tools, but we are going to need to call some functions as soon as the page loads. My favorite way to do this is reference the source of the script in the <kbd>&lt;head&gt;</kbd> of the page, and then run the scripts at the end of the page.</p> <p>So in the <kbd>&lt;head&gt;</kbd>, I include:</p> <code> &lt;script type="text/javascript" src=&quot;/js/functions.js&quot;&gt;&lt;/script&gt; </code> <p>And just before the <kbd>&lt;/body&gt;</kbd> tag:</p> <code> &lt;script type=&quot;text/javascript&quot;&gt;<br /> &lt;!--<br /> initialize();<br /> //--&gt;<br /> &lt;/script&gt; </code> <p>Where <kbd>intialize()</kbd> is a method that will set up my page, and the funky comment lines are so that older browsers don't just print the text on the page.</p> <p>So now, we dig a little deeper. The <kbd>initialize</kbd> function will look something like this.</p> <code> var selectedHash = '';<br /> <br /> function initialize() {<br /> &nbsp;&nbsp;&nbsp;&nbsp;var currentHash = document.location.hash;<br /> <br /> &nbsp;&nbsp;&nbsp;&nbsp;window.setInterval(function () {<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(selectedHash != currentHash) {<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doSomethingWithHash(currentHash);<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectedHash = currentHash;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, 500);<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br /> &nbsp;&nbsp;&nbsp;&nbsp;}<br /> <br /> </code> <p>So a few important things. There is a global variable <kbd>selectedHash</kbd> that does not go away, and is used as a reference to what is actually goin on in the page. Also, there is an inline function in <kbd>setInterval()</kbd>. You can call a function reference instead, but for a simple function like this, it is much easier to read the source. Then, you might notice I picked an interval of 500 milliseconds. This is twice a second, very often for a script to run. Normally, this could be very bad, but the choice we make is to run often, to catch user actions (specifically the back button, which changes the hash), and users don't like waiting very long at all. The effect is harly noticeable.</p> <p>So, what does it look like in action? Well I updated my portfolios to reflect this. Check out going to <a href="http://zachmargolis.com/web/">/web/</a> and even <a href="http://zachmargolis.com/web/#colours">/web/#colours</a> to see how this Javascript can also allow for the right section of a page to be presented immediately through Javascript. If you look at the source, you may notice that I use slightly different functions in my scripts at the bottom of the page, but the result is almost exactly the same as these sample scripts.</p> <p>Tags: internet,ramblings,site update,</p> http://www.zachmargolis.com/archive/65 http://www.zachmargolis.com/archive/65 Link Styles Thu, 20 Nov 2008 12:23:04 MST <p>I happened to come across a blog today, <a href="http://www.iliveonyourvisits.com/">iliveonyourvisits.com</a>, and I really dig the style. The links are highlighted, not underlined, and have a really obvious “hover” state, so you know when you've moused over them. This is slightly unconventional, but makes a lot of sense. I think underlinining links is nice, but it might be too subtle. In print, people use underlining for emphasis, but on the web we‘re not really allowed to, because that would be confusing.</p> <p>The coolness of highlighted links is compounded by the fact that highlighting links doesn't clash with anything else. Sure, you might think, “Well what if I want to print out and highlight an article that has links in it? Will that overlap?” Well it could be confusing, but if your print stylesheet hides the highlighting, when a page is printed, there won't be any links. It's not like hyperlinks are useful on the printed page, so that would actually be an amazing degradation.</p> <p>What's more is that you could turn links into footnotes, since links and footnotes are essentially analogous. I'm not saying they're the same, but they're closely related. With a little bit of thinking ahead, you could add a superscript number using CSS after every link, and then put the link's address at the bottom of a page with that same number, just like a real footnote. This would be very functional. The one snag is that currently, print styles are not supported very well across browsers, but of course, in the future that will not be a problem. The future fixes everything, duh.</p> <p>But basically, highlighted links are really cool. Using media-specific stylesheets, we can make them fit in their most natural way, like as big flashy link on an interactive web page, or simple footnotes used for reference in print. For the next revision of my site, I think I'll try to implement those kinds of links.</p> <p>Tags: internet,ramblings,</p> http://www.zachmargolis.com/archive/66 http://www.zachmargolis.com/archive/66