30 December, 2015 -
Tutorials Section Added, Still Working On More Content
By Jason M. Knight (aka Deathshadow)
As you can see there's now a tutorials button on the menu. Pages that are more about how to do things will be going there for now instead of under articles. I hope to expand that section fairly quickly with a lot of the tips, tricks and methods I use to build sites. The first finshed tutorial, CSS Tilesheets -- Scaleable "Sprites" is up there, as is a "work in progress" about forms that I put up for now so I can point at it in a few threads on various forums.
Tutorials and Articles are just content categories in the underlying system, which is why I've flagged both to record any tags I assign to the same content-tags sidebar in both those sections. I also plan on adding a reviews section where tools, other people's articles from other sites, and other web development related items will get ripped to shreds reviewed by me.
The first tutorial addresses the problem a lot of the use of images introduces with modern browsing devices not all having the same dot pitch -- with devices of 150ppi or more becoming commonplace in the mobile market, and so called "4K pixel" displays a reality for many desktop users. Even some 'in-between' machines are putting 1920x1080 resolutions on sizes below 15", leaving users diving for the zoom or changing the OS or browser default font size. Usually such scaling results in the images looking poor quality or blurry, so us developers have to come up with ways to deal with that. SVG is one, but falls apart at smaller sizes... webfonts are another, but they are monochromatic. Scaling images of a higher resolution than needed to the interface is the final method, but can introduce problems in older browsers or with advanced CSS techniques like the incorrectly named "CSS Sprites". We have to change things out a bit to get it working with a fallback for older browsers, but it's not as big a mountain to climb as some people seem to think. Really knowing all three techniques -- fonts, svg, and raster image scaling -- is something anyone serious about building sites should get a handle on, using "the right tool for the right job" as appropriate.
That latter tutorial is highly subject to change as I plan on at least three parts to it, markup, CSS and finally implementing a PHP handler server-side. For now it just addresses how poorly people who claim to know HTML slap together their forms any-old-way, quite often in utter and complete ignorance of form elements like fieldset, label, or legend, much less what any of the tags MEAN or how they relate to each-other. People blindly slap tables into non-tabular forms, they ignore important tags breaking usability, they use placeholder or its scripttardery equivalent to do label's job resulting in an accessibility mess... I'm out to change that!
So, hope folks like the content updates. I've also tweaked the style a bit here to bump the font sizes after some usability complaints on smaller devices still using the 96dpi setting. The system font I'm using -- segoe ui -- is a hair smaller than arial at the same declared size, hopefully this will make it a bit cleaner.
Other small changes are coming for the theme as I react to feedback and suggestions. I may seem dismissive about suggestions at times, but I am listening and while I may not implement everything you folks suggest, I am paying attention!
