DISQUS

Zygote: 10 Dirty Little Web Development Tricks › Yongfook | Web Producer and Consultant based in Tokyo

  • Jay · 1 year ago
    Woot! Thanks for this post! I would buy your book if you ever wrote a web development book.
  • yongfook · 1 year ago
    there's so many out there - I'd need some kind of angle. I'm thinking nude pics of myself, liberally peppered throughout. oh and entirely written in lolcat.
  • Jay · 1 year ago
    Yeah, but it usually covers only some small aspect of it and usually the final site is some really ugly looking site. Your sites are beautiful.

    Also, is OSF and yongfook.com so far the only ones you've used Codeigniter to build?
  • yongfook · 1 year ago
    I have a client project launching in a couple of weeks that is also CodeIgniter-based, which I'll probably talk about after launch. And one other personal project that is in CI, but it's not public yet and won't be launching until a few months from now.
  • Guest · 1 year ago
    keywords: nude pics, some small aspect, your "sites" are beautiful

    We get the message
  • DrRogg · 1 year ago
    Damn. I picked up a few phrases, but I was never fluent.

    The Subversion tip was great, I'd never come across using it for web projects this way. I wonder if I could get our tech department to go for it.

    *giggles maniacally till the tears flow like wine*
  • yongfook · 1 year ago
    I can't lay claim to the tip - it's just one of those things that eventually clicks and you think "why don't I do it like this?" and then afterwards discover that everyone else has been doing it for ages.
  • Fred Isaacs · 1 year ago
    This is actually *industry standard practice* in corporations where they have competent software engineers running the web development departments. The use of svn/cvs is a requirement, and only operations personnel have access to production servers. Typically the operations staff being system admins, not web developers, will only know to svn checkout, and follow brief instructions for editing configuration files for deployment.
  • yongfook · 1 year ago
    I know - I learned it when I worked at one of those big corporations
    who are big on industry standards :) It just surprised me how big of
    a knowledge gap there was between that kind of entity and individual
    web designers / small web shops who had lots of coding / design
    experience but not much experience with best practices.
  • Daniel · 1 year ago
    As far as floating the container, overflow: hidden; works fine for float containment on parent elements.
  • EssEtch · 10 months ago
    One angle that is so lacking is humor...with a mix of neat and lucid expression. I have stumbled upon your site, read through a subject that I have but a partial clue about, and yet enjoyed it. I am a self-taught in html and css, can produce valid mark-up, and stand daunted by anything more than that.

    If you ever write something called 'Learn basic Ajax, Javascript and the likes, while you smile...a book for the yet daunted', please drop me an email. I'll buy it and promote it as well.

    I write professionally, and am a visual artist. Web design is a language I hear more than I can speak.

    Thanks for sharing your skills.
  • Unikatna darila · 1 year ago
    Hei, thanks for simple adits. Just remembered me to take a short nap ;)
  • pyquila · 1 year ago
    Nice article. Watching the CodeIgniter tuttorials now =)

    May i ask what sort of editor you use for php / css?
  • yongfook · 1 year ago
  • helloandy · 1 year ago
    Have you looked at Coda? The SVN integration is awesome! I myself always used TextMate and terminal-based svn up to now, but in this recent project I decided to use Coda and I'm very impressed! I can check in, update, check out and do all sorts of funky stuff by just clicking an icon.
  • Gushin · 1 year ago
    Wow! Another skEdit user. I love that program for it's ease of use, clean interface and fast loading times. I also like that you can have multiple sites open at once.
  • Hamish M · 1 year ago
    Great list! Keep up the good work, mate.
  • Jon · 1 year ago
    Nice tips! I bet before the coffee and the nap, you sometimes have a wank too though, right?
  • Nick · 1 year ago
    You sir, win the internet.
  • Andrew · 1 year ago
    #7, float the container...just changed my life. Thanks for posting this. Also, I can't say enough good things about CodeIgniter...it is teh pwn.
  • Alec · 1 year ago
    The downside to using a float for the container is that sometimes you'll end of with other non-desirable results. What I do is put a clearing div inside of the container div and after the floating elements. This provides basically the same results as floating the container, but it avoids issues with having everything floating.

    The div has a class of "clear" and .clear { clear:both; line-height:1px;height:1px; }
  • Paul Decowski · 1 year ago
    The best solution to this is to use overflow: hidden or overflow: auto on the parent element. This way you don't unnecessarily float the containing block and you don't need to use extranous clearing element.
  • Cameron · 11 months ago
    I don't think there is any 'best solution'. Each solution has its merit and place. There are times that overflow:hidden/auto have undesirable effects, like your content is hidden, or you get scroll bars all over the place.

    Ea of these have their place. I'm personally against adding an unnecessary div to the html, so that solution is at the bottom of my options, but one of the others (floating and overflow, or clearing using a necessary element (ie not adding a random
    or <div> to your code) usually solve this.

    Really nice list though - I've found a lot more to try & learn! thanks!
  • Leeps · 1 year ago
    I know it can be done, but for whatever reason, I have never learned how to keep the static and system files separate. The structure is obvious enough, but getting the files to communicate back and forth makes my brain feel like it's going to implode.
  • Leeps · 1 year ago
    ...I guess what I'm trying to say is: How the heck do you actually make tip #3 work???
  • yongfook · 1 year ago
    not sure what you're asking - it's as simple as just doing it :/

    what specific problem do you have?




    On Fri, Mar 14, 2008 at 6:41 AM, Disqus
  • Mase · 1 year ago
    The structure is usually something like this:

    proj/
    -- htdocs/
    -- htdocs/index.php
    -- system/
    -- system/file_that_routes_requests.php

    You then use an .htaccess with mod_rewrite rules to force all requests to that index.php file. Your PHP scripts can then include files that reside outside the document root. In this example, it might include the "file_that_routes_requests.php" file, and pass the request information to a function contained there, which hands off the execution logic to the appropriate code.

    So instead of going to http://example.com/users/show.php, you might go to http://example.com/users/show . The router sees that you're requesting 'users/show', and has the logic to load up the code that handles that. In CI, this would be the users controller's show action.

    A lot of PHP frameworks do this footwork for you. Rails and CI are both able to use the http://example.com/contoller/action convention, though you can define custom routes as well. Some frameworks, such as Django, don't have a "base convention", or the notion of "controllers" and "actions" (which in Rails and CI are just instances of objects and their methods). In Django, you tie a particular URL to a function object (functions/methods are first-class objects in Python), which gets run when a matching request comes in.

    Saves a lot of time, IMO.
  • yongfook · 1 year ago
    FYI > Leeps emailed me directly and I gave pretty much the same answer, regarding bootstrap index files. The easy answer was basically: use a framework!
  • Mase · 1 year ago
    True enough!

    If I could add an 11th trick (even if it's just a broader version of #10), it would be: Build on the shoulders of giants. If a lot of people who are probably smarter than me have already gone through and made refinements based on their own experiences, there's little reason to start from scratch.
  • Scott Gatz · 1 year ago
    I'm curious about how to do this without a framework. Can you share the how to?
  • Scott · 1 year ago
    Great article. I wish you would do web related blogs more often. Thank especially to #7, something that I probably would have been clueless without.
  • CJ · 1 year ago
    Great list. SVN is the greatest thing for new-developers because of the ability to rollback to previous versions of code. Being able to switch back to a working version helps out so much when something goes wrong.

    Thanks for sharing!
  • Mase · 1 year ago
    I won the internet!

    I like seeing lists like this. Sensible, yet not blatantly obvious.

    If you want to take your svn deployments to the next level, look into Capistrano. Contrary to popular belief, it's not just for Ruby/Rails projects (a point we're trying to make in our next iteration of the documentation). It becomes especially useful once you're dealing with multiple machines that have multiple roles (multiple app servers behind a balancer, multiple db servers behind a master, etc).

    Thanks, Jon!
  • Mase · 1 year ago
    A very-late follow-up. I've written up a tutorial on deploying CodeIgniter projects using Capistrano. I've also included my solution on keeping your system code out of the document root.

    http://masonbrowne.info/2008/03/27/deploying-co...

    In this tutorial, I'm deploying to DreamHost shared hosting... and if I can get it running there, you can get it running anywhere.
  • Alan · 1 year ago
    I'm not a web developer, but I still enjoy reading stuff like this. Thanks!
  • Jay · 1 year ago
    How well would you have to know PHP to start using frameworks like CI or Zend? I only have basic procedural programming experience with PHP and often use CMS to build my sites for dynamic functionality. However, these CMS don't really give me the tools to be flexible that I think CI can give me.
  • yongfook · 1 year ago
    I think you'll be able to jump right into CI with that level of experience. Leave Zend for after you've spent a few months with CI and it will probably click into place.

    The great thing about CI is the extremely well-written and easy to navigate user guide:
    http://codeigniter.com/user_guide/
  • Jay · 1 year ago
    Thank you yongfook. you've definitely been an inspiration for me in terms of becoming a web developer. i really love your blog and humor.
  • Jay · 1 year ago
    I can't believe you didn't add this yongfook!

    https://addons.mozilla.org/en-US/firefox/addon/60
  • yongfook · 1 year ago
    I hardly use that anymore. Firebug is the new defacto plugin for web development.
  • Jeffrey04 · 1 year ago
    if I already have my own implementation for MVC approach, can I still use code igniter?
  • Mase · 1 year ago
    Yes and no.

    If your website is at http://example.com, you could decide to have everything at http://example.com/someprefix/[rest of path here] - Everything after "someprefix" can be routed by the CI router, and you get the benefit of having CI for new code while still having the legacy stuff in place. Then you can gradually migrate over.

    Additionally, if you're the mood for some footwork, you can still take advantage of most of the libraries that come included with CI. In most cases, they'll depend on CI-defined classes (like CI_Base), so you'll still have to include the base library somewhere.

    The "no" is that while you can still _use_ CI with your legacy stuff, it's generally easier to just drop into CI than try to get things like, say, the DB layer, integrated with your MVC structure. But that's not to say it's impossible. Just won't work out of the box.

    If possible, I'd say do the gradual switch. Then you can take advantage of some of its niceties, like page caching, without having to do glue work.
  • yongfook · 1 year ago
    I agree with sintaks. If you're looking to add functionality to an existing MVC setup that you are using, you're probably better off using Zend Framework elements - that's what it's there for. CI is really meant to be used as a self-contained unit, not piggybacked onto an existing setup. Like sintaks said, it's probably possible (most things are) but I wouldn't want to faff around with it - the benefit would be marginal compared to the benefit you get from CI handling your MVC architecture outright.
  • Jeffrey04 · 1 year ago
    thanks
  • moksahero · 1 year ago
    Nice to see lots of tips we exchanged from working together. Thanks for making it all available to everybody else.
  • Mark · 1 year ago
    7. "Float the container"

    So awesome... that solves a lot of VERY annoying problems, thank you!
  • E. Antrobus · 1 year ago
    Here's another tip: use asp.net instead of php. You won't need so many lists of tips like this one any more.
  • yongfook · 1 year ago
    OOOOH SNAP
  • David · 10 months ago
    hahahahahaha

    yea right - asp is for people ( although sometimes I wander ) who are happy to settle for a broken site.
    I have come accross more broken asp sites than working ones (including microsoft.com)
  • Niclas · 1 year ago
    7. Wrap floats in a float, to clear!

    Yes!! That's a everyday problem when working all day with css. This is the best solution of the problem so far! thank you!
  • benjaminclemens · 1 year ago
    #7 made me slap my head. i will never get the time I spent dealing with that back...
  • ntulip · 1 year ago
    #7 my design was to have the floats in a div which was not float:left and use br with style clear:both
    that was a pain but i don't claim to rock at css and thought i had a good fix. now i am going to redo my html real quick..

    thanks - PS: my wife loves opensourcerecipees.com
  • OnLate.com · 1 year ago
    Nice article and thanks for it and the information
  • Blake · 1 year ago
    Thanks for the YUI reset link...nice
  • Martin Leblanc · 1 year ago
    I agree on every single one!

    I'm off to setting up SVN now - no more FTP for my webprojects
  • mdpdb · 1 year ago
    for #1, that's what 'svn export' is for.
  • yggdrasil · 1 year ago
    Actually an svn checkout is much nicer. It updates in seconds, even for large sites. It allows you to do a svn status or svn status -u to see which revision your current site has, etc. Or even switch from one stable branch to another if you'd like that.

    I made the switch from export to checkout in days...
  • dvirsky · 1 year ago
    about ths SVN thing - I think it's a bit too risky. at least for my taste.
    My MO, at lease for "serious" work, is this:
    I have 3 machines: dev, test and production. SVN can sit wherever.
    I commit code from dev, SVN update the test machine, make sure everything is ok, and then run a sync script that syncs test to production. No changes are allowed on test, to avoid SVN collisions.
    It takes a bit longer, but it's much safer.

    the sync script usually looks something like this:
    rsync -avzr --exclude=.svn /var/www/html/* woot@production:/var//www/html/
    just add a public key authorization to the production server, and you won't have to type a password as well.
  • Predatory Kangaroo · 1 year ago
    On one of my projects that I have completely free reign over, I've been experimenting with more advanced SVN hackery.

    The most effective way of using it in web project management that I've found is using branches and post-commit hooks to automate deployment.
    You maintain branches for stable, testing, etc, and trunk (as is the usual practice), and for each branch, you have a public/private key for SSH which is only allowed to update the codebase, nothing else.
    The hooks simply check whether or not a specific branch was changed after each commit, and if they are, ssh into the appropriate place, ensuring that all of your servers are always running the correct version of the code.
  • gayasaids · 1 year ago
    Precisely. Setting up a cron job is far less reliable than taking advantage of svn hooks.
  • anon · 1 year ago
    Ruby on Rails shits on most of these points and its years old. Get with the program.
  • dude · 1 year ago
    I will add this: switch from PHP to Python and use a WSGI framework. Best thing I ever did.
  • yongfook · 1 year ago
    This post is like 6 months old. I now code exclusively in the matrix.
  • mania · 1 year ago
    Love it. Thank you. you made digg. CI and jQuery FTW!
  • Ricardo · 1 year ago
    Regarding tip number 7, you can also set "overflow:auto" in the container. It may have some side effects in certain situations though :P
  • Drew · 1 year ago
    Ricardo, another alternative to #7 is to use overflow:hidden; (add zoom:1; for IE) on the container. Pick your poison.
  • helloandy · 1 year ago
    Yes, the float:left on the container is not water-proof. In many cases you also need to specify a width, or it might float to the left of whatever comes next.
  • Jim · 1 year ago
    I've had problems with parent div shifting other block elements due to float:left (or right), but I found another alternative: Place an empty div (with a non-breaking spacing) as the last div within the container and give it a "clear:both" style, instead of floating the parent div.
  • yongfook · 1 year ago
    that's exactly what I mean in the article when I say:

    "There are a lot of solutions to this, such as sticking in an element to clear the floats (bleh)"

    div's have no semantic purpose anyway so if you want to keep your code clean you have to draw the line when you start sticking them in to randomly fix display bugs.

    if there's a way to do it without markup, that's obviously the better way, and that's what #7 is.
  • John bean · 1 year ago
    Pretty fascinating. Actually makes sense if you think about it.

    jess
    http://www.anonymity.at.tc
  • yo mama · 1 year ago
    Damn good post. its nice to see there is something GOOD left on digg.com
  • lol · 1 year ago
    Yongfook: Was that a joke?
  • Bill · 1 year ago
    Great suggestions!
  • Anonymous · 1 year ago
    Wicked suggestions
  • Darren McPherson · 1 year ago
    Nice article, I use al lot of these. And CI with jquery:D
  • Iain · 1 year ago
    Nice find. Great post. Keep it up.
  • Dan · 1 year ago
    Excellent tips! I will definitely be using some of these in the future. Thanks!
  • M Dolon · 1 year ago
    Old article but nonetheless quality advice. Good sense of humor as well in the comments. =)

    Thanks for Sweetcron as well, hoping to use it in an upcoming project very soon.
  • Alex Marandon · 1 year ago
    Thanks for tip 7. I hope I'll remember it next I run into this problem.

    I'm not sure about tip 9. The popular RESTful style promotes the opposite approach: request handlers are grouped by business logic rather than implementation techniques. I think it makes sense because when working on a feature we usually work on a specific set of objects. Typical RESTful controllers with their 7 CRUD methods (index, show, new, create, edit, update and delete) offer a consistant structure and IMHO make the code so much easier to navigate. This design also allows writing actions that can handle both AJAX and regular request.
  • Andy · 1 year ago
    Not a bad list, I have to disagree with item #1 though. That's bad practice and can get you into trouble. Often web apps need to be bug tested before being pushed live. If you are just one person working on one page then this isn't a big problem, but in a team setting you need to be able to push / pull files without them going live. It also means you can be pushing raw files like FLA or PSD to the live repository, which not only take up web space but could be a security problem.

    #5 could also be an issue depending on how your MVC structure is set up. I personally do $template->render('header'); $template->render($page); $template->render('footer'); , so naming files with underscores would be a bad naming convention for some systems.
  • miles · 1 year ago
    @Andy:

    Item #1 is fine for a team if they follow this discipline: before deploying to the live site, check everything out to a "staging" site like dev.mysite.com; after testing and fixing the code, check it back in and make a "tag" for that revision in the repository. *Then* you deploy that tag to the production site by using svn switch.

    If you want raw assets like FLA and PSD files to be version controlled but not in your web space, you can put them in an "assets" directory that's above the public html directory.
  • Austin · 1 year ago
    I would like to thank your for my new job title, "Web Producer".

    I tried deeming myself a "Web Master" ("oh, so you manage websites?"), "Web Designer" ("Oh, but who does the coding"), and "Web Developer" ("Oh, but who does the designing?")...but none of those fit the bill. "Web Producer" works great! Maybe that will look better on my resume.
  • Bill Ray · 1 year ago
    You are genius. "Floating the container" tip was an epiphany for me. You rock.
  • Petr · 1 year ago
    thanks. funny and great tips.
    www.geek.nexo.com
  • Thim · 1 year ago
    These dirty little tips are really usefull and I was happy that I already used a lot of these tips :-)

    Nevertheless, it always nice when somebody confirms and shares these tricks
  • David · 1 year ago
    #7 FTW.

    Been tryin to figure that crap out.. its really annoying.
  • Nigger · 1 year ago
    great article! i'm checking out svn now, it seems like a great idea!
  • wmwidget · 1 year ago
    Some really useful tips that I and other webmasters can really use, thanks.
  • John Schuster · 1 year ago
    You Rock! Thanks for the tips
  • Jacob · 1 year ago
    Thanks
  • decentdeveloper · 1 year ago
    great tips.
  • Brian Reich · 1 year ago
    Nice to see the Zend Framework getting a little promotion. I've been using it since the early pre-beta stages and instantly fell in love with it.
  • Amateur Devvie · 1 year ago
    Awesome tips, thanks a lot. I'll definitely implement at least 3 or 4 of these. Now I've got one for you. Have a left margin on this page! It's hard to read! I'm using Mozilla Minefield is it just me?
  • Bob Aman · 1 year ago
    Regarding SVN deployment, you should consider using Capistrano or Vlad the Deployer instead. Same effect, but more reliable, and easier. Initial setup is a pain, but once you're up and running, it's much, much better than doing a manual checkout on the production box.
  • James · 1 year ago
    always seems to me that there are more tricks to get CSS to work than to get to tables to work.
  • steve · 1 year ago
    but you had to learn those table tricks at one point, didn't ya?
  • Felix · 1 year ago
    "cycles of going balls-to-the-walls with inspiration writing the best code of your life, to unproductive downtime of feeling unmotivated and looking at lolcat pics"

    Wow, so true.
  • cage · 1 year ago
    this is only a test...
  • Rick · 1 year ago
    Hey mr. Fook, what's your opinion on Kohana? http://kohanaphp.com !
  • Moksha · 1 year ago
    thanks i hope i remember all, thanks again
  • James Sleeman · 1 year ago
    SVN is ok, BUT it does mean that you are doubling the disk space requirements. You also pollute the production website with .svn directories (possible security/exposure implications).

    Personally I prefer to keep subversion for the development systems, the production system gets it's files by using Unison to update from a testing system.

    And I certainly wouldn't recommend leaving off the closing of a PHP file, that's just sloppy.
  • yongfook · 1 year ago
    eh?? why is it sloppy?

    it's not even needed, dude. and it completely eradicates the risk of
    parsing errors.

    See Zend's recommendations here:
    http://framework.zend.com/manual/en/coding-stan...

    B.2.1, first paragraph.
  • PaulFreeman · 1 year ago
    A simple line in either .htaccess or the core Apache config will easily stop .svn directories been public. In fact, my most setups I've seen have automatically restricted public access to all hidden files and directories - but I can't be sure how common that is. Diskspace isn't really an issue, even on the biggest projects I've worked on I've never written a site that is over a couple of hundred meg, if that.

    I do agree that leaving of the trailing php tag seems sloppy, any issue with surplus whitespace should show up in testing, and Zend Studio even removes any trailing null content for you just to make life even easier.
  • Julien · 1 year ago
    Excellent post!
    But you may consider using Git instead of SVN. It will save you some headaches. You can also get a free (public) repo at GitHub.
  • Scott · 1 year ago
    Nice post. Reading up on SVN now!
  • Matt · 1 year ago
    Great stuff thanks for read.
  • David · 1 year ago
    Was waitng for someone to comment on the version control...
    I've just started using Bazaar myself, but I'm using it in tandem with SVN (until I get a better solution going with my server). Handy thing with Bazaar is that it doesn't store a hidden folder in every folder. Instead, it just uses one .bzr folder in the root of your checkout/branch. So you can easily upload a bunch of folders without having to have a gazillion extra files/folders included. That said, rsync is probably the safer bet for updating your production server.

    Tip 7 is pure genius.

    Not sure if I agree with 9. I've tried both methods, and I think I prefer grouping the controllers based on subject rather than context. That way you can write one controller action, eg: updateAddressAction() which will provide a different response based on the type of request. So if you've got js disabled, it will post to the same action but respond appropriately.

    Will definitely be trying the 15 minute nap + coffee trick.
  • ntopics · 1 year ago
    Very cool list of Web Development Tricks!
    I will get started using your tricks today.

    thanks from tony
  • cornelius · 1 year ago
    Nice list. Regarding tip #1:


    Also, since you’re interacting with the production server only through ssh, everything is encrypted, meaning it’s more secure than FTP.


    This isn't necessarily true - it really depends on how you serve your repository. For example, if your repository is on a separate server and you're remotely grabbing code using some unencrypted protocol (http, svnserve), then all your code is being transferred in clear text. Better to serve the repo using https or ssh tunneling.
  • dougwig · 1 year ago
    Regarding float-clearing, unless you float everything you'll eventually need to clear the floats. Overflow:auto or overflow:hiddenon the containing div does the trick ( add width:100% or zoom:1 for IE).
  • william waldon · 1 year ago
    Good tricks man, the YUI is great!
  • chrish · 1 year ago
    Expanding on what others have said, #1 is a misuse of Subversion or any other version control system. Having a working copy for production would allow you to make a quick change on the live site and check it in. While this sounds handy and harmless, it is a bad, bad habit to get in to. Better to use the export functionality to get a clean, detached copy IMHO.
  • yggdrasil · 1 year ago
    Then don't abuse it! If you start using export you're negating many of the advantages of subversion, such as lightning-quick updates and rollbacks, and the svn info command.
    Personally I use a read-only account to checkout from our subversion repo to the live server. Our developers only use capistrano to interact with the live server, so they can't get into any bad habits.

    If you're a freelance developer, than you have only yourself to blame for getting into bad habits.
  • Dan · 1 year ago
    As a newbie programmer your tips are very valuable. Thanks for taking the time to share your best practices with us. I will look forward to incorporating these workflow hacks over the next few days. Cheers!
  • Anoop · 1 year ago
    Cool.. Really informative.

    I liked the first idea of SVN. I don't know which planet I'm living in, but I never came across this idea before. Thx!
  • look_in_the_mirror · 1 year ago
    Yongfook, you are too beautiful. All it takes is good looks, right?
  • look_in_the_mirror · 1 year ago
    OMG yongfook is the most brilliant of people on the internets. If only we had more tubes to him.
  • Nicolas Mutis · 1 year ago
    FYI, another popular CSS reset is Eric Meyer's, http://meyerweb.com/eric/tools/css/reset/index...., and it seems that the accompanying HTML code for jQuery and AJAX forms trick isn't showing up.
  • Gyorgy Fekete · 1 year ago
    I don't agree with 7th tip. What if the container must be centered? By floating it to the left or right you can't do this.
    I found that by using :after pesudo class does the job quite well across all browsers...
  • Miki · 1 year ago
    Number 7 is just pure awesome. But sometimes the wrapper div must not float. What to do in that case??
  • helloandy · 1 year ago
    overflow:hidden, or overflow:auto, possibly combined with zoom:1 and/or position:relative for IE-things.
  • josh · 1 year ago
    with regards to the svn updating site. I would love to implement this but have only one server. is there a way to set this up on a single server using, say, a staging domain and a production domain?
  • josh · 1 year ago
    So i have investigated svn and found a great tutorial on how to get started: http://blog.circlesixdesign.com/2007/04/10/begi...

    this tut explains how you can set up a local repository as well as remotely in answer to my own question ;)
  • Nikola · 1 year ago
    Point 7 was my nightmare. Thank you!!!
  • serge · 1 year ago
    and me too :)
  • Alita · 1 year ago
    Oh my god!! point #7, i spent almost a week trying to solve a problem just like that one, i decided to continue with the coding instead of dealing with that one (wich caused me a big headache).. now i can try again with your tip, thanks Yongfook =) btw i really like your web developing style... =) greetings from Venezuela!
  • badlyDranwToy · 1 year ago
    As others have said, SVN checkout bypasses any controls over your release, but you could rectify this by checking out form a Tag, or a repository just for releases.

    Don't bother with the .htacess change to hide the .svn directories. Use svn export instead. It excludes those directories and will make the checkout a damn site quicker

    Have you takne a look at Kohana? Based on CI, but full OO. I'm really liking it. Not got the patience to learn Python, or Ruby at the moment.. and this is cmnig form an ex Java dev!
  • Clinton Skakun · 1 year ago
    Great post!

    I agree with most. Using SVN has saved my ass over and over, thanks to my team who introduced it to me years ago.

    JQuery is possibly the best thing that ever happened to the JavaScript community.
  • oldfook · 1 year ago
    Zend sucks rancid, puss-oozing donkey balls.
  • Jason · 1 year ago
    #7 - not sure how universal that fix is, but I've always been fond of using 'overflow: visible/hidden' to fix that issue, but it's nice to have a few ways to do things (which is why I mention it for others).

    Not sure if anyone else had problems, but I wasn't able to see the second chunk of code for #8 (the HTML)... either way, good list of dirty lil tricks. :)
  • Timothy · 1 year ago
    Good tips. Minus the bit about JQuery. JQuery SUCKS. Mootools ftw
  • Matt · 1 year ago
    Thank you for number 7. I don't usually comment on anything, but I was having trouble with that one about a week ago. I ended up setting a static height and was never happy with that decision. I just changed it today and it's working splendidly
  • D · 1 year ago
    I use overflow:hidden to clear floats..

    Great article!
  • Mark · 1 year ago
    #7 - you can use overflow:auto instead.
  • WeezaFish · 1 year ago
    Nice tips, thanks for putting them out there. Some methods I'd come across but you also caused me a lot of "oh yeah sh*t, why didn't I think of doing it that way" eureka type moments. Thanks!
  • Ravont · 1 year ago
    Excellent post!
    But you may consider using Git instead of SVN. It will save you some headaches. You can also get a free (public) repo at GitHub.
  • Raymond Selda · 1 year ago
    Awesome post! PHP rocks! Thank you.
  • Andy Sowards · 1 year ago
    PHP DOES Rock. I agree with Raymond lol. Nice post! Lots of good stuff!
  • Rishi Luchun · 1 year ago
    Great post, espcially like tip no.4
    :)
  • Jamp Mark · 1 year ago
    I love PHP. Simple but powerful. Number 4 is interesting. hmmm.
  • Amber Weinberg · 1 year ago
    Great tips! I use some of these already myself when developing, but some of these I haven't heard of. Will try em later ^_~
  • dohdoh · 1 year ago
    i dont't really agree with tip #1.
    you "could" use svn as part of deploying your app but it's better if you could have a build script, see phing, for deploying your applications.
    Update your copy using svn then run phing for deployment. In this way, you can control which part is included and excluded as well as change some settings (ini, xml, yaml) for production only purposes.
  • Scott · 1 year ago
    Here's my neat trick for accessing your website's code:
    Use Linux with sshfs and share the mounted file system via Samba.
  • mohan · 1 year ago
    cool list generated by you guys....nice tips and keep going...
  • Chris · 1 year ago
    To add to the comments re: #7 - see the following for more info about the Block Formatting Context:

    http://www.communitymx.com/content/article.cfm?...
  • Lars · 1 year ago
    Trick 2 doesn't work !

    * { .. }
    not work in older browser, it is better to make a biger reset.css like YUI
  • yongfook · 1 year ago
    I suspect you didn't read the article.

    your suggestion is exactly what I said.
  • calvin · 1 year ago
    Great stuff thanks for read.
  • Tom Steenhuysen · 1 year ago
    I'm gonna start with the 15 minute powernap! :)
  • wallpapers · 1 year ago
    wow - point 7 - that "ex" float problem ! thanks
  • oliver · 1 year ago
    sorry but i dont agree with the min-height solution. the best solution is to add a div clear:both at the very end of the div so that it will expand the parent div.
  • Aaron · 1 year ago
  • JoeM05 · 1 year ago
    you are feakin smart. Thanks for sharing your knowledge.
  • John.BB · 1 year ago
    Great post, espcially like tip no.4 ...
  • Maxime Thériault · 1 year ago
    Thanks for no 7! That will help me like you wouldn't believe.
  • Gabriel · 1 year ago
    nice !
  • Ali · 1 year ago
    Love it. Thank you. you made digg. CI and jQuery FTW!
  • tommy · 1 year ago
    Great tips. many great followup comments as well. Thanks for posting.
  • socratesone · 1 year ago
    Float the container...

    Thank God.

    Great post
  • Ami · 1 year ago
    Came across your blog via stumble and wow!

    Thanks for this great post

    Your tip about FTP andsvn are noted
  • Anthony Damasco · 1 year ago
    Excellent guide, The CSS reset is probably the most useful, intercrap explorer hates padding
  • gedop · 1 year ago
    exellent article, thanks
  • petemayo · 1 year ago
    Cool Shit! Though I am not a fan of opinions.
  • EZ Computers · 1 year ago
    Very useful, thank you!
    I will definitely be implementing a few of these!
  • Duh Only · 1 year ago
    I'm a big fan of #4. "work in cycles of going balls-to-the-walls with inspiration writing the best code of your life, to unproductive downtime of feeling unmotivated and looking at lolcat pics whilst saying “heh” periodically" is a very accurate description of my work routine LOL
  • nachi · 1 year ago
    nice script i can use this tips to my sites
  • chrisranjana_com · 1 year ago
    Nice tips there. Also how would you rate cakephp when compared to codeifgnitor and zend framework ?

    Chrisranjana.com
  • lqdice · 11 months ago
    Zend is bloatware, I wouldn't even bother. CodeIgnitor gives you some basic features + a nice structure for your apps to fall into. Cake gives you full database abstraction at the cost of having to do everything MVC (imo its a benefit but some people dont quite understand MVC).

    I personally use CakePHP and love it.
  • Matt D. · 1 year ago
    Great list of tips! Very useful.
  • Jocko · 1 year ago
    Nice tips but that American Idol Photo is a bit hard to look at
  • Jan Seidl · 1 year ago
    I agree. And here's one shot:

    Make 3 forks
    1) Development
    2) Test
    3) Production

    so you don't get your development locked in by testing neither your testing team crazy about pages changing during tests and most important: Development will hold only what is trully 100% tested.

    PS: Add to your list: Get time to create Unit Tests so you gain time in testing and let anything pass on your tests that you didnt rememered cus you'll have it tested on your unit classes.
  • Nick Masao · 1 year ago
    Thanks for the useful info.
  • Steve · 1 year ago
    PHP is a mine field but I still liked this.
  • Borked · 1 year ago
    Hey, as someone who makes his money off of Zend Framework development I'm curious as to why you prefer CI. Why?
  • Erik · 1 year ago
    Great tips. many great followup comments as well. Thanks for posting...
  • me · 11 months ago
    yay yay yay :) i have no idea what you just said. so ill drink my beer. (beers)

    w00t - rh1n0 9 in the house
  • Message Forum · 11 months ago
    nice post, CSS reset,and the nude pictures keywords are so nice. keep going.
  • Eliot Pearson · 11 months ago
    I really like the svn checkout idea. I am still SCPing files. Thanks for the tip.
  • aj · 11 months ago
    great ideas dude
  • Pliggs · 10 months ago
    The CSS reset is a great tip, I only started using it recently though.
  • ForD HeLl · 10 months ago
    nice post on using float, div class.. i actually use the *{margin , padding} but i never thought dats for reseting the css file. ns
  • Ted Avery · 10 months ago
    Just so you know I bookmarked this article a few months ago and find myself coming back to it over and over again, some great little tidbits of useful information, thank you.
  • CodeSucker · 9 months ago
    You sir, kick ass
  • Website Design · 9 months ago
    Absolutely excellent tips for newbies, I have created an article just to promote your words! good notes dude!
  • emmtqg · 9 months ago
    stumbled your post - fabulous! The clear floats will save me eons - thanks a million for taking the time! I, too, would buy a book that you wrote! Great writing style: clear, entertaining and dead on getting your point across!
  • Derick Ng · 7 months ago
    This isn't about the points you brought up but woah, I really like the way your lifestream gets presented. Nice look and feel!
  • Javier Rincon · 7 months ago
    I agree Yong, the changes on the lifestream are so wigli wigli doodle sweeeeet. Loving the simple design...
  • Azahari Zaman · 7 months ago
    wow... how come I've never found this write up.. really cool tips there bro, the #1 is my fav of all, and I really want to satrt with SVN now...hehe all this while, I thought SVN is just to checkin & checkout.. thanx

    p/s: Im a good fan of symfony. Do u have any personal experiance with symfony?? I'm checking out CI (erkk.. I need coffee & nap.. ..;)
  • Grid212 · 7 months ago
    I love your new 'Peafook' homepage, it's simple, clean and unique. Can I make one comment though, it does compromise a little on usability? The links all display as "#open" in the status bar and there are no "title" roll overs, so for the most part you're clicking blind. Even something as simple as the destination URL might offer a little more context.
  • Selene M. Bowlby · 7 months ago
    GREAT list! I have run into the problem on #7 so many times! I'll be floating the container from now on. Thank you!!!
  • Hiro · 7 months ago
    Awesome tips :) I use most of them :)
  • miksago · 7 months ago
    Hey, Great tips you've got here, I'll have to remember about the "take a nap one." Also, I'd recommend trying out Kohana if you've been using CodeIgniter, I'm just starting with it, and already finding it 30% easier.
  • JK · 7 months ago
    I suggest to take a look at ``$(this).serializeArray()`` to fill the data parameter :)
  • GodMode · 7 months ago
    Quite dirty tips but quite handy ones ;)
    cheers.
  • Grant · 7 months ago
    If i'm using a hosting company. how can I checkout a copy of my repository there?
  • David · 7 months ago
    About SVN: Instead of SSHing into your server and running "svn up" you could just install a post_commit-hook that does the "svn up" for you. Makes things even more easy.

    Btw.: To prevent committing everything directly to your live system: Use branches, merging is really easy nowadays.
  • Shahriat Hossain · 7 months ago
    Really awesome! Discipline can change the code, life and the world :)
  • redips · 7 months ago
    Version control is "must" in Web developing ... I'm still stuck with CVS but I hope we will move on to the SVN.
    Thank you for the great tips!
  • facebook-7102202 · 7 months ago
    Thanks! This is a lot of great info.

    I think I will give the coffee/nap technique a try.
  • roger · 7 months ago
    Yet another great post from "teh fook."

    I'm relatively new to SVN, only been using it for a few months. But after some thought and internal debate (and not having seen this post) I established an SVN commit/update workflow at my new job nearly identical to your #1 suggestion. And after years of "doing it the hard way" I have (ironically?) also adopted many of your suggested tools, tips, 'n' tricks in my daily workflow.

    1. Khoi Vinh's "designing with grids" changed the way I design websites.
    2. The "CSS reset" concept and grid.css style sheet changed the way I build my front ends.
    3. MVC and CodeIgniter changed the way I approach server side programming.
    4. And the power nap definitely works.

    It's nice to know I'm not crazy, just crazy like "teh fook."
  • yongfook · 7 months ago
    I think my web development Space Odyssey "Monolith" moment where my
    world changed was definitely getting to grips with MVC, thanks to
    CodeIgniter's easy-to-get-started MVC implementation (and excellent
    documentation).

    After that, I wasn't building websites anymore - I was making apps.
    Peashoot (current project - www.peashootapp.com) is probably the most
    complex app I've built so far.
  • Montana Flynn · 7 months ago
    This was a great list of tips, consider it tweeted.
  • lisa2009 · 7 months ago
    Interesting post, thanks for compiling. Will Share with our dev team.
  • Leon Fedotov · 6 months ago
    thank you for this wonderful post!
  • Jasa Pembuatan Web/Blog Murah · 5 months ago
    ice article. Watching the CodeIgniter tuttorials now =)
  • wholesale korean clothing · 5 months ago
    Interesting post, but I don't agree something.
  • pennfolio · 4 months ago
    Using Code Igniter and MVC approach had really change serverside programming. when creating an App, I would really suggest to start with OOP approach, it would really make your code clean, simpler and easy to understand.

    I love the CSS Reset and I suggest using CSS framwork like (960.gs) to fasten the workflow.

    Great List! Thanks.
  • rahuliiita · 3 months ago
  • Gregoire Welraeds · 2 months ago
    Ok.
    The proper way to work with svn for production environment:
    1. Tag your code in svn eg: release-1.0
    2. make a folder to host your production files. EG: /var/www/release-1.0
    3. svn export your production files from the tag into the release-1.0 folder.
    4. Make a symbolic link to your /var/www/release-1.0. EG: ln -s /var/www/release-1.0 /var/www/mysite
    5. Inside the httpd configuration file, make sure that your virtual website points to /var/www/mysite (and not /var/www/release-1.0)

    Wants to move to the next version? Easy:
    1. Tag your code in svn eg: release-1.1
    2. make a folder to host your production files. EG: /var/www/release-1.1
    3. svn export your production files from the release-1.1 tag into the release-1.1 folder.
    4. Eventually, perform some testing here to make sure everything is in place.
    5. When ready, just change the symbolic link from /var/www/release-1.0 to /var/www/release-1.1. EG: unlink /var/www/mysite ; ln -s /var/www/release-1.1 /var/www/mysite

    Advantages:
    - Downtime = 5 secondes?
    - You always know which version you run
    - no .svn file in your way
    - Something went horribly wrong on your new release? rollback instantly by changing the symbolic link from release-1.1 to release-1.0
    - Wants to fix a bug found in release-1.0, checkout the release-1.0 tag and go.
    - svn export and changing the symlink are easily scriptable

    ssh + svn up is for the lazy among us.
  • yongfook · 2 months ago
    excellent advice!
  • Gregoire Welraeds · 2 months ago
    Also, you are missing the excellent ezComponents framework:
    http://ez.no/ezcomponents
  • kayjaye · 2 months ago
    I've just graduated with honours in biology but I would like to break into web development as a career. I would like to know what kind of web technologies and languages you learnt in order. I'm in the process of learning html/css and javascript, which will soon be used to hand code a website within a week or twos time.

    I feel like such a n00b, reading your list and not understanding anything yet!