John Cox

Blogs · @wyome · Now · Shelf

Interesting

sickdesigner.com

Sickdesigner.com | HTML5 Starter Pack – a sick freebie

A developer announces his "Starter Pack," a scalable HTML5 boilerplate plus a basic Photoshop design template, meant to take the tedium out of starting a new site, whether a portfolio or something much larger. It promises valid HTML5, support back to IE6, tablet and netbook layouts via CSS media queries, jQuery from Google's CDN, reusable structural classes, and Lobster and Raleway fonts from FontSquirrel. A showcase page built with the pack itself demonstrates it, and an update notes that version 2.0 added proper @font-face support after reader feedback, with a request for further suggestions in the comments.

Permalink designdevelopmentjquery

net.tutsplus.com

HTML5 Globals and You | Nettuts+

A tutorial from an HTML5 series on global attributes, the ones now valid on any element. It notes that the old common attributes (id, class, style, title, dir, lang, accesskey, tabindex) are now universally allowed, then walks through the new ones with code examples: contenteditable and spellcheck, hidden (which carries semantic meaning, unlike CSS display), draggable, contextmenu with a menu element, and the data-* attributes. The author is ambivalent about data-* because its open-endedness invites misuse, but suggests uses such as microformats and passing application data to JavaScript, like latitude and longitude on a post. The piece ends by saying browser support is spotty but degrades gracefully, so experimenting is reasonable.

Permalink programmingdevelopmenttutorial

komunitasweb.com

.htaccess What, Why, When and How | KomunitasWeb

Página de portada del blog "En primera línea" que reúne extractos de varios artículos de tecnología y temas variados, no un texto único. El más destacado es uno sobre estrategias para maximizar ganancias en casinos online, que arranca explicando las probabilidades y el retorno al jugador (RTP) como base para decidir. Los demás son avances breves sobre comprar juegos y tarjetas prepago con el plan del móvil, carga inalámbrica, si el smartphone nos escucha, chatbots de IA en empresas, radios VHF marítimas, drones agrícolas, 5G y privacidad en la red. Ninguno se desarrolla aquí más allá del primer párrafo, así que sirve sobre todo como índice, y el artículo concreto que motivó guardarlo habría que buscarlo en su enlace.

Permalink programmingdevelopmenttutorial

net.tutsplus.com

CSS DIY Organization

Proposes a middle path between CSS frameworks and unstructured "Wild West" styling, aimed at what the author calls internal usability: how quickly a developer can return to a stylesheet and understand it. The scheme splits styles across small files (reset, forms, global utility classes, and a main style.css that imports the rest) and accepts extra HTTP requests as the cost. IDs "explain" an element with its unique layout properties, reusable classes "describe" it with color and decoration, and a style attribute is a last-resort override. It closes with advice to indent CSS to mirror the markup's nesting and to comment generously, illustrated by refactoring a gradient-heading tutorial into reusable classes.

Permalink designorganizationdevelopmentcss3

myphpetc.blogspot.com

blogama.org

webdesignledger.com

10 jQuery Plugins to Help with Web Page Layouts | Tools

A roundup of ten jQuery plugins for page layouts that CSS alone couldn't handle at the time, useful for projects with unusual layout demands. The list covers full application-style UI frameworks (UI.Layout, jLayout), draggable and collapsible containers (mb.containerPlus), and a polyfill for the W3C CSS Template Layout Module. It also includes Masonry's gap-minimizing grid, several newspaper-column tools (Columnizer, js-columns, Columnize), jQSlickWrap for wrapping text around an image's actual shape, and Equal Heights for matching element heights.

Permalink designdevelopmentpluginsjquery

net.tutsplus.com

Top 50 Web Graphics, Admin Skins and Scripts to Accelerate Development | Nettuts+

A Tuts+ showcase of ready-made web assets for sale on Envato's sister marketplaces (ThemeForest, GraphicRiver, CodeCanyon), written as a promotional roundup rather than a tutorial. It sorts items into admin skins (Liquid Admin, Flexy, Simpla, Profi, and others), Photoshop web graphics (ribbons, buttons, menus, pricing tables, badges, login screens), 404 and error page templates, and jQuery/JavaScript scripts (sliders, Twitter and Flickr feeds, social sharing, Google Maps marker). Each entry gets a short blurb, and the piece closes with a pitch for readers to become marketplace authors, citing top earnings above $25,000 a month.

Permalink designdevelopmenttools

html5demos.com

HTML5 Demos and Examples

A personal index of small HTML5 demos, each tagged by technology and marked with live, nightly, or no support across IE, Firefox, Opera, Safari and Chrome, with clickable filters to narrow the list. The collection covers getUserMedia video streaming with canvas filters, drag-and-drop with XHR upload, the File API, pushState history, WebSockets chat, Web SQL, web workers, offline manifests and online/offline events, postMessage, geolocation, storage, and an inline SVG clock. It's most useful as a snapshot of browser support circa the early 2010s, when IE mostly lacked these features and getUserMedia was only in Opera and Chrome, and as a set of minimal working examples for each API.

Permalink programmingdevelopment

meyerweb.com

CSS Tools: Reset CSS

Eric Meyer's page offers his "meyerweb reset" stylesheet, version 2.0 from January 2011, which zeroes out margins, padding, borders, and font sizes, sets line-height to 1, removes list bullets and automatic quote marks, collapses table borders, and forces HTML5 sectioning elements to display as blocks for older browsers. He releases it into the public domain but stresses it is a generic starting point to be tweaked with your own colors and baseline, not a drop-in black box. The full code is included for copy-paste, with credit to Paul Chaplin for the blockquote/q rules and a pointer to the older v1.0.

Permalink developmenttoolscss3

flipc.blogspot.com

The Mad Ranter: Damn IE7 and inline-block

A frustrated web developer explains how to lay out a list-based menu horizontally, arguing that inline-block beats floats (which pull elements out of normal flow and need clearing containers) but doesn't work properly in old Internet Explorer. The fix is a trio of hacks: `zoom:1` to trigger IE's hidden hasLayout property, `*display: inline` to make IE7 accept block properties on an inline element, and `_height` to satisfy IE6, each prefixed with a character that only the targeted IE version will parse. It's a practical snippet-plus-rationale for getting inline-block to behave across IE6 and IE7.

Permalink designdevelopmenttipsinternet

www.webstuffshare.com

jQuery Plugin : jConfirmAction | Webstuffshare.com - Worth Sharing Bookmarked Webstuff

This is a general web development tutorial hub rather than a single focused piece, with short sections on what HTML is (tags, opening/closing pairs, the html and head elements), choosing a domain and host (Bluehost, SiteGround, HostGator), fluid grids for responsive layout using relative units, database schema design and indexing, and a brief note on ongoing site security. The security section promises a list of steps but doesn't actually include them, and the intermediate-developer tip stays vague about frameworks and APIs. It closes with an embedded tweet from @MentorWebDev (January 7, 2023) listing the standard stack, from HTML/CSS/JavaScript through frameworks, databases, Git, and backend languages, so it works best as a beginner-level overview or pointer to the site's fuller guides.

Permalink developmenttutorialpluginsjquery

net.tutsplus.com

Rethinking Forms in HTML5 | Nettuts+

A 2010-era tutorial from an HTML5 series that surveys the three areas where forms change: new input attributes (autofocus, placeholder, required, pattern, min/max/step, list/datalist), new input types (number, range, date/time variants, url, email, telephone, color), and new elements (keygen, output, progress, meter). Its main point is that these replace JavaScript validation and UI tricks with single-word markup, and that unsupported browsers, even IE6, degrade to plain text inputs. It admits the spec is unfinished and browser support is spotty, but argues that developers should start using them now, noting that the iPhone already adapts its keyboard to the url, email and number types.

Permalink programmingdevelopmenttutorial

webdesignledger.com

50 Inspiring Examples of Hand Drawn Elements in Web Design | Inspiration

What was saved appears to be just the comment section and author bio of a 2010 roundup of hand-drawn illustration in web design, written by Gisele Muller, since the collection itself didn't come through. The 30 comments mostly praise the showcase of sites that use sketched or hand-drawn elements, with a few debating whether it's an overused style or too skill-demanding, and one doubting that all the examples are truly hand-drawn. Many commenters add their own favorite sites, such as Carol Rivello's (with a "making of" post), Holy Ghost Outdoors, and a paper-cutout redesign of a drawing community site, which makes the thread a useful secondary list of further examples.

Permalink designartcreativity

www.afekenholm.se

HoverAttribute jQuery plugin « afEkenholm Web Design

Inledningen till en svensk webbplats om webbdesign och digital marknadsföring argumenterar för att digital närvaro numera är nödvändig för alla företag, från sågverk till småcafé, eftersom lojal kundkrets och traditionella affärsmodeller inte längre räcker. Texten definierar webbdesign som utformningen av sajter (och ibland mobilappar) anpassad efter ändamål, och digital marknadsföring som ett bredare område med nätreklam och sökmotoroptimering. Den är mest en allmän introduktion som utlovar fördjupande guider, med påståendet att båda branscherna är framtidsbranscher.

Permalink designpluginsjquery

www.madeincima.eu

jQuery plugin: Easy List Splitter | Andrea Cima Serniotti

Easy List Splitter is a 4KB, dependency-free jQuery plugin the author built after failing to find a clean way to columnize lists. It takes a UL or OL, wraps it in a container div, and divides the items into the number of lists you request (two by default). It can order items vertically or horizontally, preserves nested lists, and adds a "last" class to the final list. It sets no widths or inline styles, so you float and space the columns yourself with CSS. The post covers usage (`$('.my-list').easyListSplitter({ colNumber: 3, direction: 'horizontal' })`), the version 1.0.2 changes, and download links, and asks for a link back or a donation.

Permalink developmentpluginsjquery

webdesignledger.com

55 Beautifully Blue Web Designs to Inspire You | Inspiration

A showcase roundup of websites that use blue in their design, pitched as a cure for Monday blues. It frames blue as the color of ocean and sky, suggesting it can work as an accent or across a whole page through gradients, textured backgrounds, blue typography, or icons, and the writer associates it with freedom, freshness, elegance and style. The bulk of the piece is a long list of examples, from agency and portfolio sites to Skype, Vimeo, Mozilla and barackobama.com, with readers invited to submit their own in the comments.

Permalink designcreativitycolor

www.sitepoint.com

Lightbox Print Option? - SitePoint Forums

A forum reply explaining how to add a print button to the Lightbox image viewer (the Prototype/Scriptaculous version) by hand, since no ready-made example exists. It takes four steps. First, a print-media stylesheet hides every element except the Lightbox image. Second, a new image option is added for the print button. Third, the bottomNav builder code is changed to put a print link beside the close link. Finally, a click handler calling window.print() is bound to that link.

Permalink programmingdevelopmenttutorialjquery