Ben Roberts is a web developer. And this is his blog

Web development and ramblings in Hertfordshire and beyond

My latest client has designed a form input field with a black background (the site has a deliciously dark color scheme). For contrast purposes he included a pure white placeholder, and a nice hover effect to complete the UX, successfully distinguishing the placeholder from the input text.

Now, when I came to create the styles for the input field, I obviously changed the color of the placeholder with:

input::placeholder { color: #fff; }

Nope. It wasn’t white. So into dev tools I went, as you do. The white color was clear as day. Nothing obvious changing it to the medium grey it had now become. No inherited opacity issue, no z-index messing things up. Nothing.

After about half an hour of pulling my hair out, something reminded me to check the field in Chrome. Oh. Whiter than white. Perfect.

You see, turns out that Firefox (still) adds an opacity (0.54 to be exact) on placeholders. No one else does. It’s just a quirk, that has never been resolved (not for want of trying mind, see this rather heated exchange on Bugzilla). Explicitly setting the placeholder opacity to “1” did the trick.

It’s the morning of the 11th June. You’ve just unlocked the door to the artisan bakery you own in the village. You sit at the counter, croissants and sourdough slowly turning stale on the shelves behind you. Where is everyone?Read more…

If you are a WooCommerce user, you may have come across an issue where on both archive (shop) pages and single product pages, the ‘add to cart’ button says, ‘read more’. Or, more importantly, you may not want to have the button say, ‘add to cart’ at all. Read more…

Just took an urgent call from a client who was concerned their Android phone had been hacked. Adverts were appearing featuring the following URLs (don’t worry – they are disabled):

These were pop-up adverts that just appeared, covering the whole screen. I immediately suggested my client install Malwarebytes – a program that detects adware/spyware and other malicious software. She did so and Malwarebytes identified an app called ‘Etsy’ to be the culprit. It had been infected with an adware (a piece of software that pushes invasive/obtrusive adverts out to the user), called AdultSwine. Read more…

Do you use Browsersync as part of your workflow? Have you noticed that when you start Browsersync and a new browser window opens, the URL is localhost rather than the actual URL of your site? Annoying isn’t it?

The problem is that when you try to make changes in a dynamic environment such as WordPress, the database starts to save the localhost URL. You then need to do a search and replace on the URLs to change them back to the real one.

Well, you don’t need to live with this.

In your project folder you should see a file called gulpfile.js. This is where your configurations are stored. Open it up. Scroll to the Browsersync configuration block, which should look like this:

browserSync.init(files, {
proxy: 'project.dev',
});

You will probably already have changed the proxy to your local URL to get Browsersync working fully.

To make the browser load the actual URL of your project, you need to change the code block like so:

There’s something really satisfying about finding out how to solve a problem and then sharing the solution with the world. Today – how to add Google fonts to a site built using Zurb’s Foundation framework.

For those who don’t know, Foundation is a really cool responsive front-end framework. it allows us to create great looking websites by providing a base to build on. Styles, scripts, responsiveness, accessibility; it’s all there. My only fault with it is the documentation. Like most ‘community-driven’ products these days, you find yourself having to scour the interwebs to solve the smallest and most irritating of problems. Such as the best way to integrate Google Fonts into it.

Turns out it was quite easy.

Step One

Find your font. This is super-simple. Head to Google Fonts and pick the one you want.

Main Google Fonts Screen

Fonts Customisation Box

You’ll want to select it with the little white cross in the red circle. A box will pop up at the bottom – you can now customise your selection as you see fit, and are supplied with a corresponding ‘import’ snippet. That’s the bit we need next.

Step Two

In your Foundation install directory, navigate to /src/assets/scss. Open up the file called ‘app.scss’ using your favourite text editor (oh the choices; I see another blog post coming on). We need to add the import snippet, without the <style> tags, that we got from Google earlier. Now, when Foundation works its magic, and assuming you have the Sass version (which you should because its AMAZING), it will include the app.scss file into your websites main stylesheet, and you are good to go.

The app.scss file, with imported font

Step Three

The settings.scss file, with a custom font-family variable

You’ve now enabled your new font on the site; it’s time to use it. If you are already familiar with CSS, this will be obvious, I’m sure. You simply use the ‘font-family’ CSS property on a suitable selector, such as a paragraph or ‘H1’ to instruct it to display in a particular font. In the case of Foundation, you get a special Sass file called ‘settings’ which makes it even easier. You only have to add the font name to the variable that corresponds with the text you want to change. The picture above shows the Crimson Text font as the main one for the whole site. Otherwise, you could of course use it on a custom selector inside your main.scss file. Head to the Foundation docs to learn what each of these files do. And that’s it! If it doesn’t work, then either I’ve given you duff advice, or your code is wrong. So let me know in the comments and I’ll help you out.

One of my clients was facing issues uploading and editing images in WordPress. The actual upload passed off successfully, but once added to the media library, he couldn’t rotate, crop or scale the image. Read more…

There is a lot of understandable confusion around the difference between graphic designers, web designers and web developers. Here’s what I think. Let’s say you are company A. Company A is ‘biiiig’. They don’t quite have their own web department, but they have a bit of money to spare. So they approach a large creative agency. And that agency quotes tens upon tens of thousands of pounds for a brand. And some marketing material. And a website. And they throw in an email marketing campaign. Once they’ve designed some promotional pens and mugs. Well, that is all wonderful for Company A. Read more…