• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

HTML Desgin Patterns & JS

 
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi

I have never heard about the design patterns in HTML. Will this book provide some information on that?

Will this book provide information on advanced JS. Like how to use it to make your UI more attractive?
 
Author
Posts: 42
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What is "Pro CSS and HTML Design Patterns"?

It is CSS book written for developers. It is full of patterns you can use to code web pages. Each pattern is a building block that you can combine with other patterns to create web pages.

By using these patterns, you will dramatically increase your productivity, your web pages will work reliably in all major browsers, and you will be following the best practices because you will be creating XHTML that is semantic and structural and using CSS to create styles and layouts.

Below is a concrete example of an XHTML/CSS design pattern. It is the Section design pattern and it is the basic building block of all web pages. It is discussed in detail in chapter 13 of my book.

<div class="section TYPE">
<HEADING> content </HEADING>
<BLOCK> content </BLOCK>
</div>

*.section { STYLES }
*.section.TYPE { STYLES }
*.section.TYPE HEADING { STYLES }
*.section.TYPE BLOCK { STYLES }
*.section *.section { STYLES }

Notice that the pattern is pseudo-code for XHMTL and CSS code. HEADING and BLOCK are not XHTML elements but are placeholders for any XHTML heading or block element. TYPE is also not a CSS class, but is a placeholder for a class that specifies a semantically meaningful identifier of the section, such as "introduction", "content", "example", etc. Thus, you can see that a pattern is generalized to work with a variety of XHTML elements and CSS classes.

The CSS code in the pattern is interesting because it shows that CSS does have some "object-oriented" capabilities, such as subclassing and inheritance. These selectors are discussed in detail in Chapter 3.

My book contains concrete examples of each design pattern, such as the following:

<div class="section introduction">
<h2>Introduction</h2)
<p>This paragraph is about the introduction.</p>
</div>

*.section.introduction { padding:10px; }
*.section.introduction p { margin-top:5px; }
*.section.introduction h2 { margin-bottom:10px; }
*.section.introduction { background-color:gold }
*.section.introduction *.section { margin-bottom:0; }

The 300+ examples in my book are posted at my website http://cssdesignpatterns.com
 
Mike Bowers
Author
Posts: 42
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Does "Pro CSS and HTML Design Patterns" cover JavaScript?

Pro CSS and HTML Design Patterns does not teach JavaScript and it is not about JavaScript, but it does contain a few design patterns that use JavaScript. The purpose of these patterns is to show best practices for using JavaScript to style XHTML using CSS.

One best practice for using JavaScript with CSS is to use JavaScript to modify the class attributes of an element to dynamically change how the element is styled. This is the best way for JavaScript to modify the style of an element: CSS defines the style through a class and JavaScript dynamically assigns classes to elements.

As a complement to the best practice of using JavaScript to modify only the class attributes of elements, my book advocates selecting XHTML elements in JavaScript using the CSS selector syntax. This approach allows you to use the same CSS selectors to select elements in CSS and in JavaScript. Using the same selector syntax makes CSS and JavaScript code more intuitive and more maintainable. You have to read Chapter 17 of my book to see how cool this is.

To select elements in JavaScript using CSS selector syntax, you need a JavaScript library. I provide just such a library in my book. It is modular and extensible, and it makes it easy to dynamically style elements using this technique.

Lastly, I show you in the book how to use JavaScript without inserting a single line of JavaScript into the body of an HTML document! This is really cool stuff and makes for a very clean separation of design (CSS), structure (XHTML), and interaction (JavaScript)!
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Originally posted by Mike Bowers:
Lastly, I show you in the book how to use JavaScript without inserting a single line of JavaScript into the body of an HTML document!


Indeed -- this is an increasingly popular methodology becoming known as Unobtrusive JavaScript. Libraries such as jQuery strongly recommend adhering to this principle.
 
And inside of my fortune cookie was this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic