Menu Search
Jump to the content X

Posts Tagged ‘HTML’.

We are pleased to present below all posts tagged with ‘HTML’.

Thinking Inside The Box With Vanilla JavaScript

During the past four or five years of blogging regularly and doing research for other writing projects, I’ve come across probably thousands of articles on JavaScript.

Thinking Inside The Box With Vanilla JavaScript

I think those articles are great, and I hope we see more of them. But sometimes the simplest JavaScript features are sitting right under our noses and we just haven’t had a lot of exposure to them. I’m talking about native, more-or-less cross-browser features that have been in the language for some time.


Designing For Emotion With Hover Effects

Of the many factors that must be considered in Web design, emotional interaction is an important, but frequently neglected, component. In the real world, we experience the sensual interaction of design all the time.

Designing For Emotion With Hover Effects

Reflect for a moment on the emotional engagement of slipping behind the wheel of a powerful luxury car: the welcoming embrace of the driving seat, the tactile experience of running your hands over the leather on the steering wheel, the subtle gleam reflected in the controls.


Semantic CSS With Intelligent Selectors

“Form ever follows function. This is the law.” So said the architect and “father of skyscrapers” Louis Sullivan. For architects not wishing to crush hundreds of innocent people under the weight of a colossal building, this rule of thumb is pretty good.

Semantic CSS With Intelligent Selectors

In design, you should always lead with function, and allow form to emerge as a result. If you were to lead with form, making your skyscraper look pretty would be easier, but at the cost of producing something pretty dangerous. So much for architects. What about front-end architects — or “not real architects,” as we are sometimes known?


Introducing Jelly Navigation Menu: When Canvas Meets PaperJS

It's our great pleasure to support active members of the Web design and development community. Today, we're proud to present the Jelly Navigation Menu that shows the power of PaperJS and TweenJS when used together. This article is yet another golden nugget of our series of various tools, libraries and techniques that we've published here on Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin and CSSComb. — Ed.

Jelly Navigation Menu With CSS And CoffeeScript

There is no doubt that the Web helps designers and developers find the best inspiration and resources for their projects. Even though there are a bunch of different tutorials and tips available online, I feel that HTML5 canvas techniques are missing the most. Good news: I had the chance to fulfill this wide gap. In this article, I would like to share my experience and story of how I brought the "Jelly Navigation Menu" to life. Credits go to and Ashleigh Brennan's icons — they were my inspiration for this project.


High-Speed Coding Goodbye, Zen Coding. Hello, Emmet!

Back in 2009, Sergey Chikuyonok wrote an article to present a new way of writing HTML and CSS code. This revolutionary plugin, called Zen Coding, has helped many developers through the years and has now reached a new level.

Goodbye, Zen Coding. Hello, Emmet!

Emmet, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer.


Adapting To The Ink Tips And Tricks For Print Style Sheets

Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this age of digital saturation.

Tips And Tricks For Print Style Sheets

Web developers can take several steps to bridge the gap between the worlds of printers and LCD screens. First, let’s cover the basics. Modern print style sheets are typically placed within a media query.


Case Study The Evolution Of The BEM Methodology

This case study is about the evolution of the BEM, a methodology that enables team members to collaborate and communicate ideas using a unified language that consists of simple yet powerful terms: blocks, elements, modifiers.

The History Of The BEM Methodology

Learn about the challenges that a big company faces when gradually building an entire ecosystem of services with an ever-growing team of developers.


Maintainable Code Using White Space For Readability In HTML And CSS

Right up front, I’ll offer some simple advice: In production, your code should be as performance-friendly as possible. This means, Gzip’ing, concatenating and minifying as many assets as possible, thus serving the smallest possible files and the least number of files.

Using White Space For Readability In HTML And CSS

I don’t think anyone would argue that these suggestions aren’t best practices (even if we don’t implement them in every project). Now that we’ve got that out of the way, how can we use white space in development code to ensure that our files are as readable and maintainable as possible?


From The Server To The Client Client-Side Templating

Using templates in the browser is becoming more and more widespread. Moving application logic from the server to the client, and the increasing usage of MVC-like patterns (model–view–controller) inspired templates to embrace the browser.

Client-Side Templating

This used to be a server-side only affair, but templates are actually very powerful and expressive in client-side development as well. In general, leveraging templates is a great way to separate markup and logic in views, and to maximize code reusability and maintainability. With a syntax close to the desired output (i.e. HTML), you have a clear and fast way to get things done.


Opinion Column The Road To Reusable HTML Components

A few weeks ago, I dug up an old article that I wrote for Smashing Magazine, “When One Word Is More Meaningful Than a Thousand.” While I stand firmly behind all of the HTML development principles I listed back then, the article lacked one important thing: hands-on examples.

The Road To Reusable HTML Components

Sure enough, the theory behind component-based HTML is interesting in its own right, but without a few illustrative examples, it’s all very dry and abstract. Not that HTML enthusiasts should shy away from that (on the contrary, I would say), but there’s nothing like a good example to clear up some of the finer points of a concept.


↑ Back to top