» CSS & Javascript Character Entity Calculator :: CSS, JavaScript and XHTML Explained Enter your HTML Entity Character number (such as ट or just 2335 – ट) to get the CSS and JS values for that entity. Explanations on how to use the results are below. (open in new window). named entities | numeric entities | 2,636 entities If you can’t find the entity you want, try drawing it Example of JavaScript Charater Entities and the DOM Example Code (This is the code for the dynamically generated content in the button above). var calc = document.getElementById("calculator"); var theButton = calc.getElementsByTagName('button')[0]; var buttonOptions = ['\u03a0\u03a1\u0395\u03a3\u03a3', '\u2660\u2663\u2665\u2666', '\u221a']; var rand = Math.floor(Math.random()*buttonOptions.length); var buttonText = document.createTextNode(buttonOptions[rand]); var z = theButton.appendChild(buttonText); The Explanation: Line 1: gets the div containing the button. Including Character Entities in JavaScript and CSS The processes for including special characters in JavaScript and CSS are very similar:
960 Grid System Baseline - a designer framework by Stephanecurzi.me “Real” baseline grid on the web When I first started to design Baseline, I wanted to base the grid on the work of Josef Müller-Brockmann, unfortunately some missing CSS attributes — like type leading — kept me from implementing a true grid based approach. I then decided to another look at the basic grid used in print: the baseline grid. Most frameworks and examples of baseline grids simply put the type on a regular line-height, but one problem with this approach is that the text rarely lines up correctly between columns and headlines — H1 through H6. Baseline try to align to the font metric to correctly line up headlines, paragraphs, form labels and any other major elements on the page baseline, creating a harmonious layout. How to use Baseline Baseline can be used in many different ways. Download The .zip file includes the full set of CSS files both for development and deployment, a Photoshop base document and a full set of HTML templates and examples. Going from 0.2 to 0.5 Version 0.5.1
Free XML editor download Foxe supports most encoding names in the XML Declaration encoding or HTML charset, plus UTF-16 BOM and UTF-8 preambles, only assuming the system current locale ANSI charset when it doesn't pass UTF-8 autodetection. Programmable XML tool Foxe is growing as an XML tool with FOAL scripting for processing documents with CMarkup functions using C++ syntax. It can automatically generate a program for you when you right-click on an element or attribute. Unicode features of the free XML editor The firstobject XML editor also has some unique Unicode text features. <? U+20AC (8364, Currency Symbols 20A0 - 20CF) UTF-8 E2 82 AC shift_jis N/A € U+4E2D (20013, CJK Unified Ideographs 4E00 - 9FFF) UTF-8 E4 B8 AD shift_jis 92 86 中 U+3059 (12377, Hiragana 3040 - 309F) UTF-8 E3 81 99 shift_jis 82 B7 す XML editor C++ source code
css-boilerplate - A simple CSS framework. Boilerplate: noun standardized pieces of text for use as clauses in contracts or as part of a computer program. As one of the original authors of Blueprint CSS I've decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You're the designer and your craft is important. If you prefer: over class="column span-2 append-1" then you're in the right place my friend. Releases
Create the accordion effect using CSS3 | The CSS Ninja - All things CSS, Javascript & xhtml Recently I have been playing around with CSS transitions and animations as implemented in webkit based browsers such as Safari and Chrome. They have been submitted to the W3C for consideration in the CSS3 spec so hopefully we should see more browsers support this soon, Firefox 3.5 supports CSS transforms which was developed by the webkit people to work alongside CSS animations & transitions. To continue my effort to accomplish tasks in CSS that are usually reserved for JavaScript, such as my Futurebox and CSS based iPhone orientation detection. I have developed a CSS based version of the popular “accordion effect” that utilises the webkit CSS transitions. Like the Futurebox demo I’m utilising the CSS3 :target pseudo class to know which item to show based the URI fragment identifier (the # in the url). It should be noted that this works best in a webkit based browser such as Safari 3+, Chrome or iPhone. Firefox 1.5+Opera 9.6+Safari 3+Chrome 1+IE6+ – IE solution The xhtml The CSS IE xhtml
Make Your Mockup in Markup We aren’t designing copies of web pages, we’re designing web pages. Andy Clarke, via Quotes on Design The old way I used to think the best place to design a website was in an image editor. I’d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup. Does this process sound familiar? That process is whack, yo! Recently, thanks in large part to the influence of design hero Dan Cederholm, I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser. Die Photoshop, die Some of you may be wondering, “what’s so bad about using Photoshop for the bulk of my design?” The application Adobe Photoshop CS4 has unexpectedly ruined your day. Photoshop’s propensity to crash at crucial moments is a running joke in the industry, as is its barely usable interface. Text rendered in Photoshop (left) versus Safari (right). A necessary evil? Get started by getting naked
Elliot Jay Stocks » Web designers who can’t code Posted on 18 February 2010 • 392 comments Wow, what a day! It started with one little tweet and ended with a discussion that seemed to sweep across the whole web design community. Because Twitter isn’t really the best place to have a thorough, in-depth conversation about the industry, I thought it best to blog about it. Disclaimer #1: this is a loooooong post. The tweet So, before we get into this, allow me to quickly recap what I said on this morning on Twitter: Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. ~ Me Admittedly the short character limit prevented me from putting across my point with much elegance and it was certainly misunderstood by some, but regardless of the exact meaning, it seemed to cause quite a stir. Disclaimer #2: If you disagree with my opinion, please feel free to let me know in the comments, but kindly read this whole post before doing so. Some clarification ~ Amy Mahon Can’t vs. won’t ~ Andy Budd It’s easy.
Ten useful open source tools for web developers The rapidly changing nature of the Web makes it necessary for web developers to constantly be on the lookout for new, shiny tools. This post will hopefully show you some cool tools you didn’t already know about. Providing you with a list of the ten BEST open source tools for web developers would have been great, but it would be negligent to call this a top ten list because there are so many different tools out there that fall under the Free/Libre/Open Source category. Developers can be notoriously choosy when it comes to the tools they use and it’s close to impossible to create an objective top ten list. Instead, this post presents ten highly useful tools that can make a web developer’s job easier. In order to be included in this list: The project/tool has to be available on the three major platforms; Mac, Windows, and GNU/Linux.The source code has to be available to any and all developers.Finally, it has to be truly useful to web developers. OpenLaszlo Silex Amaya OWASP WebScarab KompoZer Xenu
l Everything You Need To Know About CSS Selector Specificity There's an obscure topic of CSS that I think many people aren't aware of. It's called 'specificity'. I suppose it's not as glamorous as rounded corners, drop shadows or animations but it's still just as important in your day to day work as any other part of CSS. So what is CSS specificity? IDs IDs are the most powerful type of selector you can use. The first example below has a point value of 100, while the second example has a point value of 300. #content { }#content #aside #caption { } Classes Your second most important type is the class selector. The two selectors below are of equal value. #caption { }.content-highlight .aside-type .float .bold .uppercase .quote .featured .etc .etc .etc { } Elements Last but least are elements. Again, both selectors below have the same point value. .uppercase { }html body div div blockquote span span span b i { } Odds & Ends As we all know the 3 groups of selectors above does not encompass everything. Real World Usage Why Is This ! Resources
5 Ways to Instantly Write Better CSS Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours. 1. Seriously, always use a reset of some sort. It can be as simple as removing the margin and padding from all elements: The Eric Meyer and YUI Resets are awesome, but to me, they just go too far. Oh and please, stop this: It takes more time to process, and what do you think should happen to a radio button when you remove the padding? 2. A Little Quiz Which example would you think is faster to find the margin-right property? Example 1 Example 2 You can’t tell me that Example 2 isn’t faster. I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. 3. You should organize your stylesheet so that it is easy to find things and related items are close together. By using comments and grouping similar elements, it becomes much quicker to find what you are looking for. 4. 5.
LESS - Leaner CSS Aloha: The HTML5 Editor Aloha Editor is an easy to use WYSIWYG HTML editor, featuring fast editing, floating menu, and support for HTML5 ContentEditable. It provides WYSIWYG editor to any website content instantaneously, enabling content editors to see the changes the moment they type. Alloha is very easy to integrate in your website, wiki, blog or any other application. It produces clean xHTML5 code once integrated into your application. Another noteworthy features is that it allows you to edit content directly in content accordions, sliders, tickers, captions or descriptions of images in slideshows. Features No reload. Developed by Gentics Software GmbH; Aloha Editor is available for download under AGPLv3 License.