Hi. I’m Andrew

SEARCH NOTEBOOK
Browse by Tags
Disclaimer

This notebook is Andrew Abogado's online journal to talk about or bookmark stuffs related with his field. Some opinion may not be shared or doesn't represent the company Andrew is working with. The content in this notebook is licensed under Creative Commons which means you are free to share & remix but under the condition of giving credit where credit is due.

For us web designers

Subscriptions
July 28, 2010

CSS Browser Selector

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

USAGE

1. Copy and paste the line below, inside <head> and </head> tag

<script src="css_browser_selector.js" type="text/javascript"></script>

2. Set CSS attributes with the code of each browser/os you want to hack

Examples:

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win - Microsoft Windows
  • linux - Linux (x11 and linux)
  • mac - Mac OS
  • freebsd - FreeBSD
  • ipod - iPod Touch
  • iphone - iPhone
  • webtv - WebTV
  • mobile - J2ME Devices (ex: Opera mini)

Available Browser Codes [browser]:

  • ie - Internet Explorer (All versions)
  • ie8 - Internet Explorer 8.x
  • ie7 - Internet Explorer 7.x
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox (all versions), Camino
  • ff2 - Firefox 2
  • ff3 - Firefox 3
  • ff3_5 - Firefox 3.5 new
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • opera10 - Opera 10.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 - Safari 3.x
  • chrome - Google Chrome
  • iron - SRWare Iron new

Extra Codes:

  • js - Will be available when js is enable, so you can show/hide some stuffs

INSPIRATION

Original idea by 37signals.

http://37signals.com/svn/archives2/browser_selectors_in_css.php

via rafael.adm.br

There's a related post over at 45 Royale. It's however the first result when I searched for this solution. This is quite a handy tool because every operating system's implementation on every browser are different in terms of font rendering. Pretty much perfect for my need.

Loading mentions Retweet
Filed under  //   bookmark   browser   css   selector  

Comments (0)

July 24, 2010

Pay Attention to Your Open Source Software Licenses

via activestate.com

Loading mentions Retweet
Filed under  //   opensource  

Comments (0)

July 22, 2010

Mark Zuckerberg on privacy issue. Facebook & the Illuminati symbol

via gawker.com

Found this while reading Facebook's entry on Wikipedia.

Loading mentions Retweet
Filed under  //   random   social network  

Comments (0)

July 4, 2010

Do websites need to look exactly the same in every browser?

via dowebsitesneedtolookexactlythesameineverybrowser.com

Loading mentions Retweet
Filed under  //   bookmark   modernweb   webdesign   websites  

Comments (0)

July 3, 2010

The Art of Community Now Available For Free Download

When I started work on The Art of Community I was really keen that it should be a body of work that all communities have access to. My passion behind the book was to provide a solid guide to building, energizing and enabling pro-active, productive and enjoyable communities. I wanted to write a book that covered the major areas of community leadership, distilling a set of best practices and experiences, and illustrated by countless stories, a necdotes and tales.

But to give this book real value, I was keen to ensure the book could be freely accessed and shared. I wanted to not only break down the financial barrier to the information, but also enable communities to share it to have the content be as useful as possible in the scenarios, opportunities and problems that face them. To make this happen O’Reilly needed to be on board to allow the book to be freely copied and shared, in an era in which these very freedoms threaten the publishing world.

But they came through. Thanks to the incredible support of Andy Oram, my founding editor for the book, O’Reilly were hugely supportive of the project and our desire to break down these barriers.

Today I am pleased to announce the general availability of The Art Of Community under a Attribution-Noncommercial-Share Alike license.

With this license that the book is under you have the following freedoms with the entire content:

  • to Share — to copy, distribute and transmit the work
  • to Remix — to adapt the work

…with a few requirements:

  • Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
  • Noncommercial — You may not use this work for commercial purposes.
  • Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.
Even if you don’t buy it, I would be hugely grateful that if you like it, please go and review it on Amazon. This is a hugely contribution. Thanks!

You can download the The Art of Community here.

via artofcommunityonline.org

 

Loading mentions Retweet
Filed under  //   book   opensource  

Comments (0)

July 1, 2010

Enjoy & easily read the Web with Readability

Readability™ is a simple tool that makes reading on the Web more enjoyable by removing the clutter around what you're reading.

Read the rest of this post »

Loading mentions Retweet
Filed under  //   addon   modernweb   readability   tools  

Comments (0)

June 27, 2010

Why You Can’t Ignore Marketing | Design Shack

An Evolving Breed

Many still cling to the argument that designers should be just that: designers and nothing else. To expect a designer to also know how to code the HTML and CSS of a website is unreasonable right? This argument would have stayed valid if designers had never given in, but we’re a curious breed, always hungry for new talents. Consequently, today’s freelance web designers don’t simply build Photoshop mockups, they code these designs themselves and keep up with the ever-evolving standards of HTML, CSS and JavaScript.

Those still clinging to the notion that designers need not know basic web code are far too confident in the trends of the past and understand nothing of looking toward the future. Consequently, work will become harder and harder for these purists to find as clients continually pass them up in favor of someone who knows more than just Photoshop.

If you don’t believe me, take a look at some job postings. Google “design job” and try to find anyone looking for a designer that simply does interface mockups and has no knowledge of HTML and CSS. You may find a few, but they’ll be buried under the mountain of postings looking for all-star designer developers that know as much as possible about all popular web technologies. Like it or not, employers want it all.

Refusing to Evolve

You may read the section above while shaking your head and proudly declaring that you refuse to learn anything beyond design. Unfortunately for you, Darwin’s theories will kick in faster than your Dad can say “The Internet is just a fad.”

What I mean by this is that survival of the fittest applies directly to the professional world. You can refuse to evolve all you want, but your competition is moving on. While you’re constructing grand arguments about why designers should remain stagnant in their pool of talents, others are increasing the depth and breadth of their skill set.

The next time you’re sitting in a job interview or hunting for clients, you’re going to hear about other candidates that are far more qualified than you. You can try to land that job by insisting that you’re really really good at slicing a PSD, but everyone else is going to be really good at that and a whole lot else.

As someone who recently underwent a six month job search across several major cities, I can guarantee you that these claims are accurate and I will therefore never stop pushing you to better yourself by increasing your talents. You’ve chosen a rapidly changing industry to work in and you only have two choices: keep up or fall behind.

read the rest of the post via designshack.co.uk

 

Loading mentions Retweet
Filed under  //   marketing   webdesign  

Comments (0)

June 26, 2010

Universal Internet Explorer 6 CSS | for a beautiful web

How do you answer the Internet Explorer 6 question?

  1. Design for better browsers, then design alternative solutions to handle IE6 bugs?
  2. Write a remedial IE6 stylesheet to address layout issues?
  3. Use JavaScript to bootstrap CSS support in IE6?
  4. Make your site look exactly the same in IE6 as in any other browser?
  5. Develop to better browsers and spend no development time or testing for IE6?
  6. Block IE6 users from seeing your site's styles?
read the rest of the post via forabeautifulweb.com

 

Loading mentions Retweet
Filed under  //   bookmark   css   ie6   modernweb   web standards  

Comments (0)

June 20, 2010

Why tables for layout is stupid: problems defined, solutions offered


photos credit: http://www.hotdesign.com/

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

Overview: What’s in it for me?

We'll give you an introduction to a way of working that will

  • make your pages load faster
  • lower your hosting costs
  • make your redesigns more efficient and less expensive
  • help you maintain visual consistency throughout your sites
  • get you better search engine results
  • make your sites more accessible to all viewers and user agents
  • and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.

We'll also talk about how laying out pages with Cascading Style Sheets (CSS) requires a slightly different way of thinking about your content and your markup than you may be used to.

The problem with using tables:

  • mixes presentational data in with your content. (This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit. Bandwidth ain't free. )
  • This makes redesigns of existing sites and content extremely labor intensive (and expensive).
  • It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
  • Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.
via hotdesign.com
Enjoyed reading this post. Very informative. A plus points to Web Standards.

Loading mentions Retweet
Filed under  //   bookmark   tables   web standards  

Comments (0)

June 17, 2010

Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher


Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

How does it work?

Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. But they have distinct benefits — beyond semantics — over the use of nested HTML elements.

To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning.

via nicolasgallagher.com

Loading mentions Retweet
Filed under  //   bookmark   css   modernweb  

Comments (0)



Copyleft 2010 Andrew Abogado. Some Rights Reserved. // Jump to Top