Posts tagged with 'css'


When it’s not the fault of CSS

I have a fun website that displays a couple of business cards, the intent being that, when I meet someone I don’t know and they ask me for something like my work phone number or my email address, I can just say “My name is Julian, so go to IMetJulian.com, it’s all there.” […]

READ MORE

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. […]

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. […]

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… […]

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. […]

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. […]

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! […]

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. […]

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”, at least in the web sense. The rest of the responsiveness will come later, when I change how posts are rendered in the browser. […]

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: […]

READ MORE

CSS3 line height is important for drop caps

Recently I was playing around and added drop caps to the blog posts on 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 of the first paragraph. […]

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. […]

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. […]

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. […]

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. […]

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. […]

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. […]

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. […]

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. […]

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. […]

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. […]

READ MORE