D3 - Devise Design Develop

I’ve used Dreamweaver since it was part of Macromedia (around version MX) and haven’t found another tool that’s as easy to use for all my coding needs. So in light of that I’ve decided to do one of those ever popular Top X lists about my favorite editor. So without further ado, here’s my list of the Top 5 indispensible features of Adobe Dreamweaver

Snippets

Can’t live without my whole slew of snippets I’ve amassed over the years. I’ve never understood why there isn’t an easier built in way to import/export snippets, instead we’re stuck looking for the Dreamweaver Snippets folder which seems to be different across operating systems and Dreamweaver versions. But I digress, at least once you do find the right folder it’s a simple copy/paste from there.

Code Collapse

Introduced in Dreamweaver 8, code collapsing was the feature I never knew I missed until I had it. I write a lot of OOP code and that comes with several files full of functions, in order to keep them more organized I generally tend to collapse each function so it doesn’t feel as daunting. I’ve found a cool way to keep my code collapsed while still having the ability to edit it which is great when I’m going back into a file for small updates and don’t want to have to expand and re-collapse code. I found that if you put your cursor directly to the right of the collapsed code block and hit Shift+HOME it expands the code but leaves a light blue outline around it. This makes the code editable while retaining the collapse, once you move away from that block it collapses right back into place. Give it a go, it’s really helps my workflow and keeps me more organized. Although I did recently find one caveat, it appears to not work in very large files. I tried this method in a file that’s 1230+ lines and nada, hopefully this becomes a definite feature in an upcoming release because it just seems like the next logical step in collapsing code to me.

Code Hints

I’m sure anyone that’s used Dreamweaver’s Code View has seen code hinting but did you know you can call up Code Hints whenever you want? Sure can! Just hit CTRL + Space and biggity bam! There’s hints available for HTML, CSS, Javascript and PHP. There’s tag libraries available for several languages and you could even make or add your own if you were willing to take the time. Dreamweaver does a good job at pulling up code hints based on the section of a page you’re on. Say you’re in a script block at the top of an HTML page, hitting CTRL + Space will bring up all the javascript hints rather than those for HTML.

Show/Hide Panels

One of the biggest things that helps me while coding is having a big screen to see more of the code at once, but when I’m on a smaller screen there’s still an easy way to maximize that real estate, hitting F4 hides all the various panels I have open leaving the whole screen free to see my code. Hitting F4 again restores the panels for those times you need to see your files, snippets, properties, etc.

Find and Replace

Good ol’ find and replace, where would we be without this wonder of a function? Well there’s a couple things you may not know about it, there’s several options that I find useful on a regular basis. One, obviously, is the ‘Find in:’ select box that allows you to perform a replace on a selected block of text or even a whole website at a time. Second is the awesome ability to use Regular [removed]also known as ‘VooDoo’) in your find queries. This is a great way to change several blocks of content that are not quite exact but really close. I could go on and on about RegEx but I think that’s best left to another article. There’s also the option to search through the source code or through the text on the page, you can even search through the text in a specific tag only (like a paragraph tag). Give it a real once over the next time you use it, you’ll most likely find something that you hadn’t noticed before.

Well that’s it, just a few things I use on a daily (sometimes hourly) basis that might be of use to you other code monkeys out there. Feel free to add onto this list in the comments, I’m sure there’s a few features I’ve missed.

Here are two amazing tools i’m not sure how it took me so long to find.

The first is a Java application called ‘Sloppy‘ that helps you deliberately slow down your browsing to see how pages (and perhaps most helpfully Flash) load. With a variety of connection speeds from 9.6k (ugh) to 3Mb (as if you get that in the first place) to choose from you can be sure your applications run at their best no matter the connection. And from my tests today on a Flash preloader it appears to update the connection speed in realtime, when I went from 56k up to 256k there was a noticeable increase in the loading speed. Very cool! That site has a few other gems, however, so go check out the main site at www.dallaway.com as well.

The second tool is a Flash & javascript application called SWFUpload. This nifty script provides you with advanced browser upload control in a sleek and unassuming package. Perhaps the best feature is the ability to select multiple files to upload and they all run one at a time until the whole queue is complete. This could be an amazing feature for a photography website or for companies with digital asset management systems with users that find themselves uploading folders of content at a time. Be sure to check out the demos while you’re at it, there’s several there to play around with.

I need to quit slacking on this blog, sorry folks for the long delay… those of you that stuck around this quiet place at least.

gBrowser? No, Chrome

Looks like the rumors from several years ago were pretty accurate; Google just released a new browser named Chrome that they have apparently been working on for several years. This thing has been in the rumor mill for ages but it was kept so closely guarded that no one but a select (very) few even knew the project existed. There’s been several dozen reviews/ criticisms written on the browser and it’s features, namely Incognito (a.k.a. porno) Mode where no history or cookies will be recorded for that window, the new super-duper awesome V8 Javascript Engine that multiplies the JavaScript performance of websites through this browser, and it’s speed both in page and javascript rendering. So many articles that I felt it worthless to write anything like that myself so I decided to link to what I found to be the most interesting ones here so you can check those out.

Fanning the Flames

The main reason for this article was just for me to be able to say that although I was initially against YET ANOTHER browser crowding the marketplace I’ve actually become quite smitten with the little browser that could (and probably will, in many respects). Not to use, oh dear no for my heart is still with another, but as I mentioned in that past ‘Google Browser’ article I love how things like this light the fire under everyone else. This is ultimately going to spur on so many new developments in browser technology faster than it would have happened otherwise. The fact that many things like the aptly named V8 Javascript Engine is open sourced is going to make progress all the faster and, according to their comic, they’re hoping that’s the case as well.

Another big reason that I’m now willing to welcome Google Chrome with open arms is because it’s using the open source WebKit Rendering Engine (also utilized by Apple’s Safari) so your sites should render pages the same as Safari. You are testing your sites in Safari right? Right?

Sorry, this post ended up having way more links than I originally anticipated. I think they’re all good reads/resources though so when you get a chance check them out! And as always i’d like to hear what you thought about this article, Google Chrome, and the state of web browsers in general either through comments or via the contact form!

Here’s some links I’ve discovered this month that provided me with some inspiration. Be it inspiration to code or to design or to just get something done, hope they provide the same to you.

http://www.uncontrol.com/ - Algorithmic art at it’s finest. I found this through a link to "#55 - Clock" but have found any other one I click on is just as fascinating. Best of all they graciously open sourced these projects and provide them for download.

http://www.firerift.com/ - Who knew a CMS could have such a cool commercial? Looks like a promising alternative, it’s coming very soon so we’ll see if it can live up to that commercial.

http://photosynth.net/ - I’m sure many of you are familiar with this 3D photo offering from Microsoft, I remember being wowed by it a long while ago. But it just got better, they’ve opened it up to the public so now anyone can register and upload photos that can ultimately be shared with those of someone else. Can’t wait to see what monuments are made ’synthy’.

http://fallingsandgame.com/sand/fall1.html - Not much for inspiration but it’s an awesome way to get away for a few minutes and clear your head. Deceptively simple game with no real point but still manages to be extremely fun.

With a mixture of a few techniques added to the .htaccess or httpd.conf files, you can reduce the pageload and the bandwith usage of your website fairly easily. In the examples below i’m referring to expressions for addition to .htaccess, the http.conf file may be structured differently to do the same things. I’m setting this up in a standard LAMP setup with Apache 2 and PHP5. It will also wirk with versions of PHP4 but not all the following items work in Apache 1.3.

Apache Module mod_expires

The first thing to do is extend the amount of time text, images, css, flash and javascript are stored in the users cache. To turn this on we need mod_expires to be active, we then use the expression ‘ExpiresActive On‘. We then set a default expiry for everything which is generally set to 6 hours (300 seconds) from the time of access. This is set using the expression ‘ExpiresDefault A300‘. Alternatively we can set it to expire a set amount of time since the file was last modified using M instead of A as in ‘ExpiresDefault M300‘. Then, if need be, we can take a more granular approach to expiration times by setting expiration by filetype using the expression ‘ExpiresByType [mimetype] [A|M][seconds]‘. So to set GIF images to expire one week from time of access we’d use ‘ExpiresByType image/gif A604800‘.

FileETag Directive

The FileETag directive configures the file attributes that are used to create the ETag (entity tag) response header field when the document is based on a file. Because we’re manually setting expirations we don’t require these headers so it’s easiest to just turn it off using the expression ‘FileETag none‘.

Compressing PHP Pages

The following requires the PHP installation to have the zlib extension enabled, which it should be by default. We use the expression ‘php_value output_handler ob_gzhandler‘ to turn on compression of the final php pages sent to the users browser. It’s noted on the PHP.net website that turning this on via the php.ini ‘zlib.output_compression‘ is preferred if available to edit.

Apache Module mod_deflate

As of Apache 2.0, there’s an available module that compresses the server output before sending to the user, called mod_deflate. This module must be turned on in order to work.  I set this up to compress by filetype so it looks like ‘AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript text/x-javascript application/javascript application/x-javascript‘. There are ways to set this up even on a per browser basis but since the browser negotiates with the server before any files are transferred, it’s not necessary.  If the browser is not compatible with compressed content, the server will provide the content uncompressed.

It’s also worth noting that Apache version 1.3 had a method for serving compressed content called mod_gzip.

Final Notes

Using these methods I’ve decreased pageload and bandwith on my site, after adding it my ySlow score for the homepage went from a D(64) to a B(83) and there was a noticeable increase in pageload speed as I was navigating the site. Many people stress that including this code into the httpd.conf file is better because it loads faster and isn’t reloaded every page load as the .htaccess file would be but my being on a shared environment I haven’t tried it myself..

Final Code

From 18:16 UTC on June 17, 2008 to 18:16 UTC on June 18, 2008, 8,002,530 people downloaded Firefox 3 winning it the most downloads in 24 hours. What an amazing achievement, I’m glad I was able to be a part of it!

Check out the official release here and get your own personalized Download Day certificate.

Anticipation

I’ve been (not so) patiently waiting for FF3 for months, I remember reading with joyful glee about the ‘awesome bar’ and increased performance. I was right there when the Download Day was announced and I pledged to download Firefox 3 on all the computers I use on that day to assist in achieving a Guinness World Record.

And now, finally, the wait is over!

It was exciting to see people pledge in the millions but seeing that number multiplied several times over the 24 hours of Download Day was truly amazing! At the end of that 24 hours the download number ended up at over 8 million, it’ll be some time before we know for sure we made a record but I gotta say that seeing the world come together and make such a splash was awesome even if we don’t get it.

Initial Reaction

I downloaded and installed Firefox 3 both on my computer at work and at home and now, after a solid day of getting a feel for it, I’m ready to say that the wait was well worth it.

I think the additional security and performance alone would have been enough to make this a successful upgrade. Instead of firefox taking up 120,000 K with a few tabs open in Firefox 2, it now takes 70,000 K with Firefox 3. Believe me, I checked! After hearing from more than one source that performance was a big priority I wanted to be sure that’s what I was getting. Now, so far I haven’t noticed much of an increase in pageload speed but it’s only been a day and having a browser with almost half the footprint it used to is a great start.

Plugins

I rely pretty heavily on all the plugins I have installed to get my work done. So needless to say having any of them unavailable would have been an inconvenience. My heart dropped when I upgraded and saw that the Firebug plugin I had installed was incompatible and disabled. Luckily the authors of all the plugins I used had released new, and some improved, versions of their plugins (including Firebug) compatible with Firefox 3.

Congratulations!

I would like to thank all the people that work on the browser and all of the various plugins for their hard work and dedication. Sometimes I forget how lost I am without Firefox and my installed plugins and i’m positive i’m not the only one. I read that Firefox 3 has already broken past 4% in market share after just 24 hours, that’s truly a testament to their work and dedication. I’m hoping that the trend continues and Firefox becomes the leading web browser, it truly is at the top of the heap in every way.

After a long internal debate and a lot of work I’ve recoded this site from scratch to replace the WordPress engine I’ve been using since this blog started. There were three main reasons why I decided to do this, none of which were in any way related with dissatisfaction with WordPress. In fact, I’ve been thoroughly impressed at the quality of the WordPress system and it ends up being the first thing I recommend to people looking for a blog or an easy way to publish news on their site. "So what were the reasons?" you may ask, well allow me to explain!

Would you like some SPAM with that?

The first big reason was the spam, oh dear God the spam! The comments table for this blog racked up over 32,000 comments and a grand total of 31 of those were actually legitimate. All I have to say is thank goodness Akismet is preinstalled, but even with that I still kept getting slammed with dozens of bogus comments a day. So I thought I’d add the reCAPTCHA captcha system to see if that’d help some. It did, but it was only successful at curbing the spam by half. Not great by any standards. So a custom solution was the best option, if no one knows what you’re running under the hood chances are they’re not going to (easily) know how to get around that system that’s in place.

I think I can, I think I can, I think I can

I’m no stranger to large development projects, i’ve built a custom (albeit fairly simplified) CMS and even an eCommerce engine designed specifically for artwork prints, but I’ve never created a full blog system. So naturally I thought it’d be a cool side project to work on during my free time. I gotta say that as I was coding along I realized countless little things that I didn’t consider when I started but that’s how it usually goes isn’t it? All in all I think it turned out pretty well. Still a few things I need to work on but the majority of it is functional and (hopefully) rock solid.

One cog in the gear

Perhaps the biggest reason I custom coded this is because I envision it eventually being a part of a bigger system of sites I have brewin in the ol’ noggin. Customization and reusability is a crucial aspect of my plans and what better way to go than to create the foundation myself from scratch. This way I know every digital inch of my site and will be able to integrate it infinitely better than I would a packaged solution.What sites you may ask? Well i’m not going to tell just yet, but rest assured it’s BIG!

So that’s it in a nutshell, just me tinkering away on my little corner of the web. Hopefully i’ll be able to get more and more added as time goes on, that’s the plan anyway.

Have you ever seen something and thought "Wow, that’s going to change the future"? I can only remember feeling that way a couple times, one I can remember was when I heard about electric & hybrid cars. I was so amazed that I based a whole science project on it, ahhh those were the days.

Getting back on topic, I recently read an article about a relatively new company called 23 and Me. It’s a web based company that provides people with a way to map and understand their DNA. One of the most intriguing ways they do that is through what they call an Odds Calculator, it combines your genetic information, age and ethnicity to determine your risk for certain conditions such as diabetes and certain types of cancer. All in all it’s still a field in it’s infancy but I think this is a huge leap forward for individualized medicine. I can’t help but love their slogan ‘genetics just got personal.’ and their website is fantastic.  It’s well organized and shares a lot of what you’ll get with their service in layman’s terms with some helpful graphics. But for $1000 a pop it’s a luxury that many can’t afford…yet.

This might be something very obvious to some people but I for one never took the time to look into it until I started working with Joomla 1.5. Their new system uses several .ini files for the language packs which is pretty cool if you ask me. It was because of this that I finally looked into editing different file types in Dreamweaver. It’s rather easy, go to Edit » Preferences (CTRL + U) and in the menu that pops up go to the ‘File Types / Editors‘ and add any file extensions to the end of the textbox ‘Open in code view:‘. So for example mine was…

.js .asa .css .cs .config .inc .txt .as .asc .asr .vb

and now it’s…

.js .asa .css .cs .config .inc .txt .as .asc .asr .vb .ini .htaccess

That’s it! You can add any other file types you want Dreamweaver to open from here too. No more notepad for htaccess edits!