Replied to Adding a Self Contained Site with File Manager by Alan Levine (Extend Activity Bank)
Screenshot of sample basic calling card web page featuring a background with a 6 year old with his mouth agape.

Many of the sites we create in our cpanel are installed via a cpanel tool because they have complex file structures and often require database set ups. But there are quite a few web site themes that are all self contained HTML/CSS/Javsscript files that we can upload directly to our domain with the File Manager.

This activity walks you through the steps to put a self-contained web site within a directory of your site.

I created a sub-folder on my sub-domain and uploaded a simple templated HTML5/CSS website to create a simple calling card page at http://sp.chrisaldrich.net/me/. I couldn’t bring myself to replace the picture of the little kid with the gaping mouth because it was just too cute.

While I occasionally do some small uploading tweaks like this, it seems like ages since I created webpages like this outside of more elaborate content management systems. Hooray for raw HTML and CSS! It’s also a bit refreshing to do it all manually in an interface instead of via FTP or other means.

🔖 HTML5 UP! Responsive HTML5 and CSS3 Site Templates

Bookmarked HTML5 UP by ajlkn (HTML5 UP)
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.
Watched Fraidycat (Prototype Vid) by Kicks CondorKicks Condor from Kicks Condor

Futilely attempting to build an RSS reader that’s not at all an RSS reader.

The year of the reader continues. This is wicked awesome. I want this reader!

There are some interesting UI pieces hiding in here. I love the way things are sortable by importance. I like the sparklines for posting frequency. The color differentiation to give an idea about recency of posts is cool.

And one of the best things is that it’s not really a reader. In true Kicks fashion, it’s all just links, which means that one goes to the original site to read the content. I mentioned just yesterday the fact that some of my “identity” is lost with the CSS and details of my site being stripped within sterile readers. This sort of reader decimates that.

Of course, the verso of that is a reader that could be CSS configurable so that every site looks as busy or crazy as mango zone does in the video. Naturally, many browsers support local CSS, so I suppose I could make the New York Times look like Kicks Condor’s site, but who has the time to do all that configuration?? (Maybe one day…) Maybe some readers will have their simple chrome, but pull in not only the content, but the CSS and visual goodness along with them? The best of both worlds?

👓 A design pattern solved by subgrid | Rachel Andrew

Read A design pattern solved by subgrid by Rachel Andrew (The site of Rachel Andrew, writer, speaker and web developer)
Playing around with subgrid and finding some interesting use cases.

A nice short article and example here.

I do have to wonder about the design choice of so heavily highlighting the “Let’s keep in touch” block at the top of the page between the title and the content.

👓 Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes | Tantek

Read Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes by Tantek ÇelikTantek Çelik (tantek.com)
Search the web for "CSS classes" and you'll find numerous well intentioned references which are imprecise at best, and misleading or incorrect at worst. There are no such things as "CSS classes". Here's why you should refer to HTML classes, CSS class selectors, or even CSS pseudo-classes, but not "C...

I’ve been looking at potentially switching themes again on my website,  but I’m still not sure I want to make the jump. If I do, I’m going to simplify things down a bit.

In the process, I’ve been looking at tweaking some of the CSS in the Post Kinds Plugin, particularly since I’m using it so heavily for a lot of my content. One of the small things I’ve wanted to do was to make what I can only call the pseudo-titles of the bookmarks, reads, etc. slightly larger to bring more attention to the titles and authors of those parts.

To do it, I’ve added the following couple of lines to my child theme’s style.css file:

/* Changes the font size on the titles of Kinds */
section.response > header {
  font-size: 20px;
}
Bookmarked Relative Font Weights Considered Harmful by Den McHenryDen McHenry (denmchenry.com)

Not exactly, but who can resist writing a "considered harmful" article when you can get away with it?

The real harm is that you can very easily conceal the semantics conveyed by font-weight depending on the font that's rendered, which is not always in your control. This all depends on how you define the base weight to which your relative values refer, and (1) whether that base weight is actually available in the rendered font and (2) which value is substituted if it isn't.

You get a webmention, and you get a webmention, and…

👓 HTML, CSS and our vanishing industry entry points | Rachel Andrew

Read HTML, CSS and our vanishing industry entry points by Rachel AndrewRachel Andrew (The site of Rachel Andrew, writer, speaker and web developer)
Some thoughts on entry points to web development today, and my fears about the loss of something that has enabled so many people without a traditional computer science background to be here.

Improving user experience with links, notifications, and Webmentions

Back in December, I was thinking about html links and the functionality of sending notifications using webmentions. Within the IndieWeb, this is known as mentioning or potentially person-tagging someone (inline). By adding a link to a person’s website onto any mentions of their name in my posts, my website will automatically send them a notification that they were mentioned. They can then determine what they want to do or not do with that information.

While I want people that I mention in some of my posts to be aware that they’ve been mentioned by me, I don’t necessarily need to add to the visual cruft and clutter of the pages by intentionally calling out that link with the traditional color change and underline that <a> links in HTML often have. After all, I’m linking to them to send a notification to them, not necessarily to highlight them to everyone else. In some sense, I’m doing this because I’ve never quite liked that Twitter uses @names highlighted within posts. All the additional cruft in Twitter like the “@” and “#” prefixes, while adding useful functionality, have always dramatically decreased the readability and enjoyment of their interface for me. So why not just get rid of them?! I’m glad to have this power and ability to do so on my own website and hope others appreciate it.

In the past I’ve tried “blind notifying” (or bcc’ing via Webmention) people by adding invisible or hidden links in the page, but this has been confusing to some. This is why one of the general principles of the IndieWeb is to

Use & publish visible data for humans first, machines second.

Thus, I’ve added a tiny bit of CSS to those notification links so that they appear just like the rest of the text on the site. The notifications via Webmention will still work, and those who are mentioned will be able to see their names appear within the post.

For those interested, I’ve left in some hover UI so if you hover your mouse over these “hidden” links, they will still indicate there’s a link there and it will work as expected.

As an example of the functionality here within this particular post, I’ve hidden the link on the words “mentioning” and “person-tagging” in the first paragraph. Loqi, the IndieWeb chat bot, should pick up the mention of those wiki pages via WebSub and syndicate my post into the IndieWeb meta chat room, and those interested in the ideas can still hover over the word and click on it for more details. In practice, I’ll typically be doing this for less relevant links as well as for tagging other people solely to send them notifications.

I’m curious if there are any edge cases or ideas I’m missing in this sort of user interface? Sadly it won’t work in most feed readers, but perhaps there’s a standardizable way of indicating this? If you have ideas about improved presentation for this sort of functionality, I’d be thrilled to hear them in the comments below.

Twitter:

👓 CSS Basics: Styling Links Like a Boss | CSS-Tricks

Read CSS Basics: Styling Links Like a Boss (CSS-Tricks)
You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

👓 Basic Things You Need to Know to Become a WordPress Developer | Caldera Forms

Read Basic Things You Need to Know to Become a WordPress Developer by Josh Pollock (WordPress Form Builder | Caldera Forms)
There are a lot of reasons to love WordPress, but one of the reasons I keep WordPressing is the supportive community. While I have no formal training as a web developer, I don’t like describing myself as “self-taught.” I didn’t figure this out on my own, I was taught by a supportive communit...

👓 Programming CSS | Jeremy Keith

Read Programming CSS by Jeremy KeithJeremy Keith (adactio.com)
There’s a worrying tendency for “real” programmers look down their noses at CSS. It’s just a declarative language, they point out, not a fully-featured programming language. Heck, it isn’t even a scripting language.
That may be true, but that doesn’t mean that CSS isn’t powerful. It’s just powerful in different ways to traditional languages.

Spent a few minutes late this afternoon to update the CSS on my website to hide the automatic titles given to annotation and highlight posts. Also modified these slightly to give the highlighted/quoted portion of other sites a highlighter-yellow color.

An example of the yellow highlight color of highlighted/annotated posts on my website. Previously the quoted portions had been a muted grey like other posts.

👓 Introducing Trashy.css | CSS Tricks

Read Introducing Trashy.css by Nathan Smith (CSS-Tricks)
It began, as many things do, with a silly conversation. In this case, I was talking with our Front End Technology Competency Director (aka "boss man")

I can’t wait to try this out on some sites. I love that it’s got a browser bookmarklet that will let one test out other sites too.