Search Results for: javascript

Pure CSS Tooltips Revisited

Pure CSS Tooltips RevisitedCreating pure CSS tooltips with no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from.

For a recent project, I had to research the concept of CSS tooltips and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.

So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.

Roundup of HTML-Based Slide Deck Toolkits

Roundup of HTML-Based Slide Deck Toolkits & LibrariesI recently looked into some options for building a slideshow presentation for display in the browser. While there are options like Slideshare and Speaker Deck that let you upload your slides in PowerPoint or PDF format to convert them to online slides, there are also a ton of options for libraries, toolkits, and APIs that let you create your own non-Flash, full screen, responsive presentations.

Usually these presentations are HTML5-based, use JavaScript and/or jQuery, and often require a modern browser. But some of them are simpler and offer deeper browser support. Here’s a list of all of the ones I’ve been able to find, with a brief description of each.

CSS: The Bad Parts

CSS: The Bad PartsEvery programming language has its good parts and its ugly parts. CSS (I know, it’s not a programming language, but whatevs) is no different.

In this post, I do nothing but vent. I’ve been coding websites for almost 12 years, and I’ve been doing CSS layouts for nearly half that (yeah, I was a late bloomer). I’ve come to realize what is good and bad about CSS, and here are what I consider “the bad parts”.

CSS3 Box Shadow Syntax Breakdown

CSS3 Box Shadow Syntax BreakdownThis post is just a simple breakdown of CSS3’s box-shadow property, which you can also review on my click chart.

This is mainly written for CSS3 beginners, but does contain some extra info that might be useful to developers already familiar with what’s new in CSS3, including the use of shadows.

Browser Support for CSS3 Selectors

Browser Support for CSS3 SelectorsNow that the numbers for IE6 and IE7 usage are diminishing rapidly, more and more development teams are starting to weed out support for those older browsers.

Most readers will probably have removed IE6 completely from the equation and soon IE7 will follow. Despite IE8 still having the highest share of any single browser version, the demise of IE6/7 now allows us to be more creative with CSS selectors.

This post will provide a comprehensive review of support for CSS3 selectors in the most troublesome browsers (guess which ones?). Each selector links to the appropriate location in the CSS3 spec.

A Call For Better Fragment Identifiers

A Call For Better Fragment IdentifiersWhere would the web be without links? Links are what hold together what we know as the World Wide Web. Without links, the World Wide Web would be more appropriately called the World Wide Set Of Unrelated Pages, or, incidentally, WWSOUP.

While it’s great how simple and effective the process is of “linking” pages together, I think there’s room for improvement.

Learn to Program

Learn to ProgramIn Divya Manian’s controversial post on Smashing Magazine discussing HTML semantics, something that she said got somewhat overlooked in all the debates that ensued.

At the end of the article, she pointed out that rather than wasting time debating HTML tag use, developers should focus on learning how to program. I think this is great advice. So to that end, I’ve compiled a roundup of sources where beginners can expand their skills past HTML and CSS.

Textarea Auto Resize

Textarea Auto ResizeOn a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed.

It seemed like a simple task. After doing a search to see what types of plugins and scripts were floating around to do this, the examples I found seemed a little overly complex. While most solutions seemed to incorporate some complex math calculations, I thought of a better way.

Skills for Front-End Developers

Ninjas have skills for front-end developersAs a web professional, I’m constantly trying to learn new skills for front-end developers, along with various technologies related to the field in order to add to what I already know. Front-end developer job postings, however, vary from posting to posting so the list of different languages, libraries, and technologies that could theoretically fall under the category of skills for front-end developers is quite large.

What’s the Difference Between Classes and IDs in CSS?

When applying CSS styles to an element in your HTML, you’ll be using different CSS selectors to target your elements.

Two of the most common selectors used in CSS are the “class” selector and the “ID” selector. There are many others, but this post will focus on these two, and I’ll describe the difference so you’ll know the potential effects of using either of these selectors.