Posts tagged with 'css'


Automating the pasting of code in blog posts

So, just before Christmas, I switched to using a client-side library to highlight the code in my blog posts . The library I chose was Prism JS , and it works by marrying up some JavaScript and CSS to specially decorated pre and code elements so that their content (the code itself) is highlighted nicely. Specially decorated? Yep, it looks like this in the HTML: <div class="jmbcodeblock"> <pre><code class="language-foo"> _the code to be shown highlighted_ </code></pre>...

READ MORE

Highlighting code in blog posts

Once upon a time, I wrote a plug-in for Windows Live Writer that took code that had been copied from Visual Studio to the clipboard and converted it to an HTML pre block for my blog posts. The different colors were maintained during this conversion (in essence VS copies the code as RTF) so that the code displayed here in my blog posts would be nicely highlighted. I even published it to GitHub so that it could also be used for Open Live Writer too. That was then, but this is now. Advantages: it’s...

READ MORE

@media queries and face palms

This is a story with many moving parts. It ends with a complete and utter face palm, so stay tuned… One Our inkjet printer has been having paper feed problems for a while. Send something to the printer, it either doesn’t feed at all or feeds 3 or 4 sheets at once. Plus it was starting to not print in the leftmost inch, inch-and-a-half of the page. Time for a new one. I unpacked it and installed it this lunchtime. Nice and quiet and works perfectly. Two Until a couple of hours ago, this site used...

READ MORE

Professional theme? Sure, except for these bits…

Back in January , I pulled the trigger on a new theme for this blog. I recognized some time ago that I am not a very good web designer (I can do small tweaks to CSS but not comprehensive composition) and it would be far better to buy something that’s well designed and then spend the time wrapping the output from the blog engine to this new look and feel. And that, pretty much, is what happened. I bought a professionally designed theme (making sure it was responsive), and hacked away at the templates...

READ MORE

Developers and adblockers don’t mix

OK, call me dense. I had a problem: the new theme I have for this blog has cute little buttons for the social networks I belong to and use; they’re at the bottom of every page. Internally they use Font Awesome to deliver the individual icons. On my desktop browsers: no issue, they look great. On my iPhone? What. The. Heck. Although you can pretty easily scroll to the bottom of the page to look at them, here’s what they are supposed to look like, this from a desktop browser: Social buttons So, four...

READ MORE

That time when CSS’ position:fixed didn’t

There’s been an ongoing bug with my blog after I added the “hamburger” menu/options on the left side. In essence, adding it interfered with another “feature” of the individual blog post pages where the title of the post sticks to the top of the browser window as you scroll down through the text. And, yes, you guessed it, both features are provided by JavaScript libraries, different ones, by different people. It’s this week’s edition of JavaScript Libraries Gone Wild! Let me describe what was happening...

READ MORE

My new homepage

There’s a TV program on the BBC at the moment that we’re watching called Celebrity Masterchef . In it a bunch of celebrities (90% of which are completely unknown to me) tackle preparing and cooking dishes, competing against each other for the best one, well presented. There’s a couple of jokey judges (who I again have never heard of) to shake their heads in wonderment at the inability of the “celebrity in the street” to actually cook something appetizing. After watching a few of these, we’re getting...

READ MORE

Slide menu

You may have noticed. Or quite possibly, not. I won’t hold it against you; it is a bit nerdy. The thing is, I’ve revamped my blog so that the “ancillary” stuff is now hidden behind a “hamburger menu” over there on the left. Click the icon (it’s known in the trade as a “hamburger”) – or, if you are on a tablet or phone, touch it – and the extra stuff about me, the site, and other information slides in, pushing the normal blog content over to the right. This is my first tentative step to being “ responsive...

READ MORE

Dumb CSS: cursor pointer or hand?

So I had an occasion to peruse someone else’s CSS today, when I came across this peculiar construct: .someClass { cursor : pointer ; cursor : hand ; } Do what? Set the cursor to “pointer” and then set it to “hand”? Whut? After a bit of research, I found out that this is accepted provided that you are supporting IE5 and IE5.5 users . Double whut? Back to the Olde Days. It seems that in those times, Microsoft had gone its own way with regard to displaying a pointing cursor, usually shaped like a hand...

READ MORE

CSS3 line height is important for drop caps

Recently I was playing around and added drop caps to the blog posts on blog.boyet.com. I decided to go for a pure CSS3 version (so, you’ll have to view this site in a reasonably fresh browser to see the effect) rather than a hacky <span> version that mixes presentation “hints” in the content. (For a brief discussion on the two possible methods, see Chris Coyier’s blog post here .) I certainly didn’t want to change all my posts to include spans on the first letter...

READ MORE

Upgrading to jQuery 1.9.x

Today it snowed. It started before we awoke and pretty much kept at it all day. Hence it was a day to do some work inside, and what better task than to clean up my blog? First port of call, and a major one at that, was to upgrade to jQuery 1.9. Before you say, so what, just change the version number in the <script> tag, consider this. jQuery 1.9 removes several APIs that “behaved inconsistently or inefficiently in the past” ( here ), ones that have been deprecated for a while. So, replacing...

READ MORE

Making this blog work as an app on the iPhone (the wrap up)

So far in this series ( one , two , three ) we have specialized content, detection of phone orientation, basics of being Web Clip capable, and a back to home page functionality. This post wraps it all up by removing the latter, implementing some simple Back button functionality, a “loading” indicator, and I do a little bit of code housekeeping too. Before we implement a back button, we need to implement a proper URL stack so that we can save where we’ve been in order that the Back button works properly...

READ MORE

Making this blog work as an app on the iPhone (part 3)

The story so far ( one , two ) is that I’ve simplified the content of this blog for viewing on the iPhone, I’ve added code that recognizes when the phone’s orientation is changed from portrait to landscape (and vice versa), and I’ve added the necessary elements to the head element to indicate that this site can be viewed as a Web Clip. With the current state of play though, the moment you touch on a link, Safari fires up to display the page. To change this behavior we’re going to make use of the...

READ MORE

Making this blog work as an app on the iPhone (part 2)

Now that we have a special web site that displays properly either in portrait or landscape mode, let’s make it a web application that we pin to the Home screen. Boiled down to its essence, this is easy: you bring the web page up in Safari, touch the middle button in the bar at the bottom of the screen, and then select the Add to Home Screen option. iOS selects a screenshot for the icon (bleugh!) and allows you to edit the caption for the icon. Once that’s done the web page will appear as a web application...

READ MORE

Making this blog work as an app on the iPhone (part 1)

With the iPhone you easily view a web site in Safari, but you get the annoying bits of chrome at the top (the address bar) and at the bottom (the buttons). What if you wanted your site to occupy the whole of the screen? Well, you can pin the site to the Home screen and, provided that you make a few changes to the HTML, CSS, and JavaScript, you can make your site behave as if it were pretty much a native app. First of all, like it or not, you’ve got to write your HTML and CSS to serve the content...

READ MORE

Programming the Extras tab

A reader asked me how the Extras tab on my blog was made. It’s a bit of CSS and a bit of JavaScript, so let’s describe it all. The first thing to note is that I wanted to clean up the way my blog looks so that – first – it’s simpler, and – second – to make the blog look good on a mobile device. To that end, as I mentioned before , I converted the CSS to LESS so that the whole experience of writing the styling was made easier. With regard to the tab, it’s still hard to get CSS to display text vertically...

READ MORE

Thinking LESS of this blog

Over the weekend, I spent some time updating the CSS (cascading stylesheet) of this blog. There were two main purposes for this: Less and @media queries. First of all, LESS . This is an open source compiler that imposes some much needed structure and programming ability to CSS. For example, it gives you variables, mixins, nested rules, arithmetic expressions, and so on. The compiler will compile code written as LESS into a standard CSS file, which the browser then uses as normal. There are a couple...

READ MORE

Minor changes to look-and-feel

I’ve been meaning to do a bit of housework on this site to clean up the CSS and to add a bit of interactivity. After all, I write a lot about JavaScript, so I might as well start adding some to my blog. photo © 2007 Dan Brady | more info (via: Wylio ) First things first: if things look a little wacky for you, your browser is probably using the old CSS file. Refresh. That should force the new CSS file to be downloaded and used. Second: the changes to the CSS are two-fold. The main impetus was to allow...

READ MORE

Printer CSS - call to action

Ned Batchelder is a tech blogger I like to read, although he tends to deal with languages and situations I don't. Nevertheless he comes up with some great insights that have applicability to what I do and some great topics that extend what I know. In a recent post , he brought to his readers' attention that good websites should have a proper printer CSS stylesheet, so that their content not only gets rendered well on the screen, but also on paper. Paper being paper, there's no point in rendering...

READ MORE

Writing and debugging CSS

Part of the job of altering the theme for this site, or indeed writing the "theme" for an ordinary page (here's my résumé , for example), is writing or modifying the CSS file (Cascading Style Sheet) to make it look good. I've used three main resources to help me do this as efficiently as I can. Cascading Style Sheets: The Definitive Guide by Eric A. Meyer. Yep, my copy of this is so old, it still has the old name (it's now called CSS: The Definitive Guide ), No matter what it's called, Meyer does...

READ MORE