Blog

Salut, I am Denis Bouquet. I am a creative web developer with a polyvalent background based in London. I write about things for web developers, web designers, freelancers and anyone interested about web tools.

23Sep

Avoid widows and orphans in copy using JavaScript

The classic question of designers, “is there anything we can do to make sure we don’t get ‘widows’?” This means no orphan word alone in the last line of the copy. With responsive design, and working with CMS (even static build), the only way to ensure the copy never ends up with what we call […]

18Apr

List.js search issue with string using comma or dash listObj.search

List.js is a great JavaScript library that adds search, sort, filters, and flexibility to plain HTML lists, tables, or anything. I had issues filtering from a dropdown only for some values. It took me a while to figure out what was wrong, as most filters worked.

25Jan

Freelancer business insurance price increase for 2024

Every year, all small businesses need to renew or buy new professional insurance. Freelancer business insurance prices for public liability and professional indemnity went up this year. Let’s review where to get your professional insurance as a freelancer.

25Jul

MembershipWorks use shortcode in your page template

Instead of do_shortcode you will need to use apply_filters if you are using the shortcode provided by MembershipWorks in your theme templates. do_shortcode won’t work with the MembershipWorks snippets codes.

03May

WordPress, how to block spam comments from binance and gate.io

Recently on a blog, we got lots of daily spam comments about “binance” and “gate io”. These are not automatically detected as spam by default. So in order to add them to the spam filter, we can use the Disallowed Comment Keys, under Settings > Discussion.

16Feb

How to create a dynamic QR Code for an unknown destination URL

Is it possible to create a QR code (because we need to add it to a print design) that will eventually link to a website URL, even if we don’t currently have the end address? e.g. can we make one now and update the destination later? Yes, it is possible.

15Jun

How to change your node version using Homebrew

How to downgrade your node version to make it work for a certain NPM package. When you run multiple projects at once, sometimes you will need a newer or older node version to run a specific project. Here is a step-by-step to change your node version.

06Sep

Visual Studio Code, insert console.log snippet with a keyboard shortcut

I like using a shortcut to add console.log statement using my code editor. When switching from Sublime Text to VS Code, I looked into recreating a snippet to insert a console.log with a shortcut. Here is the snippet to bind a keyboard shortcut to create a console log statement.

04Sep

scrollmagic import animation.gsap and debug.addIndicators

Importing Scrollmagic without using the script but the import method made me struggle for a while. Missing plugin error, or the tween playing on load but not being linked to the scroll. Finally, I got it working with the package scrollmagic-plugin-gsap.

15Jun

Test accessibility: keyboard, screen reader, colours

In all web project, we need to make sure all our content is accessible. Everyone does responsive build so the content display nicely on all device sizes and shape, but there is more we need to do at all time. Here is my little check list.

12May

Confirmation Statement (CS01), what is it, and how to fill it?

Every year, your confirmation statement is due within 14 days of the anniversary of your company being incorporated. It cost £13 and it’s a legal requirement to confirm the records held are up to date. All those paper works are the parts freelancers don’t like, but it’s quick and easy to do.

29Apr

SVG animation direction wrong in Safari only

While animating some path with the CSS property stroke-dashoffset, I noticed a bug in safari where the path would animate backward only in safari but work fine in Chrome, Firefox, etc. Here is the simple fix for Safari.

28Apr

CSS Font Features, OpenType features

Controlling the contextual alternate in CSS when your font uses different characters for the same letters. It can be fun but sometimes it can also look a bit strange when 2 exacts consecutive letters look different. The good thing is we can usually have some control over this in CSS.

16Jun

AFC reapeater in a group – WordPress

Building a block I had a group field and inside this group field a repeater. Here is how to use your repeater loop values inside a group’s loop with Advanced Custom Fields.

15Mar

Execute Slick code after a jQuery each loop is finished

Run a “then” function as an “each jQuery” call is completed. The worse way to do it is to have a setTimeout delay before to call the function you wish. The good way to do it is to use promise to set a callback after all asynchronous each loop are completed.

25Oct

Check if we have a real user click or a code trigger click – jQuery

Sometimes you want an action to happen only when the user clicks. For instance, I had a rollover effect going trigger the same action as a click on filter button. However, if the button is clicked I wanted to avoid rollover to change the selected filter to keep the selected filter active. So if the […]

03Oct

Pure CSS loader and spinner resource list

Adding CSS loader is important for the user experience, making the feel of your webpage more smooth during the page load or some specific elements such as bigger assets loading. Here is a list of resource of nice CSS and HTML loaders.

14Sep

Squarespace code injection and page transition, run on script on page reload

Squarespace code injection is a bit limited. You can’t edit the HTML of a template unless if you created your own template from scratch (deploying using FTP). On a couple of different projects, I needed to amend a particular part of a page template in Squarespace websites. The only available option was to use “code […]

27Aug

Fancybox sass compile error “max”

Quick one about fancybox. if you import the library and get an error type env(safe-area-inset-right)” is not a number for `max’. Here is a quick fix

02Jul

Remove upload limit for on All-in-One WP Migration Plugin

All-in-One WP Migration is great to move a full WordPress (images, database). You can do a search and replace before to export. And import it with the right data. It’s one way to duplicate your WordPress in your new destination. However, they push you to get the premium version of the plugin. If it’s a […]

01May

Save WebP google search images as jpg or png

Google web format WEBP is being used by many websites today, including YouTube, Google Play Store, and Facebook Android app. But doing a right click, save for the web give you a web. This is how to save those webp images as normal .jpg or .png

04Apr

Why I don’t learn frameworks

I often present myself as a non-framework person when I meet new agencies. Everyone wants “React”, everyone wants Angular. No one wants Backbone anymore? What happened to the devs who spent hours to learn it?

03Jan

jQuery split string at the last space in variable

Quick one about splitting a variable in two from last chosen character. I use it from a name string with first name(s) and surname. In my case, I wanted to get the last element on a new line to follow the design. 

14Nov

package.json script copy to smb mounted disc

Running a build then copy the “dist” folder into the server in order to share with the team can be time-consuming when you have to do it many times a day for your projects. I was looking into doing one command line for multiples actions.

04Oct

Tools for feedback on websites

Feedbacks on projects can be done in so many ways, using JIRA, a Trello board, etc. InVision comments when it’s only for the design. But with the right tool you can be more efficient. 

21Aug

WordPress passing variables to get_template_part()

I was using advanced custom fields and the flexible content (and clone fields). To keep the code easy to maintain I have some of the flexible content section in their own file. I needed to pass variables to those files.

07Aug

ACF flexible content inside flexible content

I am building a page builder for a bespoke wordpress theme using Advanced Custom Field (pro). I use it in every theme I build. It has the “flexible content”. You can push it further adding a flexible content into an other one. 

26Jan

How to delete a form autofill entry on Mac using Chrome

Simple but useful for shared laptop, etc. Sometimes you enter a wrong login and you want to delete it from the auto-complete list without deleting all your saved data in forms. Here is how to remove one or all auto-complete text entries in Chrome.

22Dec

How to convert webp files into jpg

WebP is an image format developed by Google in 2010. The format allows users to save an image in either lossy or lossless format. Here is how to convert WebP images back to jpg.

12Dec

Mobile Twitter sharing not working on iOS

If you find yourself googling this, it’s a problem I had while testing sharing on mobile device. It’s works fine on Android but it didn’t share my tweet on iPhone, it just opened twitter home and did nothing. Here is why.

08Oct

Disable skrollr on mobile, the good way

Skrollr is a JavaScript library doing a Scroll-jacking basically means we replace native scrolling to link actions to the scroll. Here is the good way to disable skrollr on mobile.

19Sep

Do a cross browser CSS lettrine for CMS content

HTML lettrine (first letter) are not easy to implement, we play with the font-size and line height. It’s easier to have a tag around the first letter but a bit of a pain to add, especially if the copy come from a CMS. Here how I handle that.

06Sep

Efficient new tab links

Use your web browser’s default new tab page to access a handy list of links, grouped and sorted how you like.

17Jul

Remove WordPress image compression

WordPress reduces image quality to 60% on upload when processing. However, you can override this with one line of code without a plugin.

26Feb

Yunojuno referral

Get a referral invite to the freelance platform YunoJuno. Free for freelancers, booking are paid on 14 days.

10Feb

Mac: How to unlock multiple files

I had a new SSD disk on my mac and a few files got a lock icon on them. It’s possible to do a right click and untick the lock box but that’s slow process. Here is the command line for it

21Jan

How to work with the WP REST API v2

WordPress has its REST API which allow to retrieve all your data through JSON. You can use the data from your CMS into your pages without the WordPress PHP structure. Plugins are no longer required, just install the latest version of WordPress 4.7 or more and you’re ready to go.

21Nov

Allow subscriber to see private page in WordPress

I recently had a WordPress problem. I used a plugin to redirect user seeing private page to the login page. However, subscribers can’t see private post once logged in. So it was creating a redirect loop. You can change that with a few lines of code.

17May

Free alternative to Codestyling Localization

To work with translation files, usually you would take a text editor for translation or a specific editor like PoEdit, which have to be installed on your computer first. Using such an editor you can translate *.po files and generate the resulting *.mo files.

04Apr

Use one keyboard and one mouse to control many computers

Wouldn’t it be cool if you could copy and paste from one computer to an other? Avoiding the confusion when switching between keyboard and mouse or just not having to switch! You can with this software: http://synergy-project.org

13Feb

Best scripts to work with images

Makes images truly responsive without bad crop, progressive loading with a blurry image who doesn’t break the design while loading the page, extracting colors from images, that’s what you will find here.

19Dec

Preload images css

In an app, interactive advert, etc., it can be useful to preload some assets before some others to make sure users have a great experience seeing your content.

01Nov

Working with IE8 support

Nearly all of the web build I do still need IE8 support. I know what to use and what not to use in my code to make it work without having the bad surprise of finishing building a website, opening it in Internet explorer 8 and see it completely brocken.

21Aug

Javascript targeting Safari only

We often say Safari and Chrome are the same in terms of HTML and CSS behaviours but it’s not always the case. Here is a bit of javascript to target Safari only. 

20Jul

Become a freelancer

What to do to become a freelancer? Is it lots of paperwork to do? How to find work? Many questions people asked me and keep asking now and then. This article is an intro about how to become a freelancer from my experience.

01Jun

Do you really need jQuery?

As lots of developer, I use jQuery nearly all the time. It makes development quick and easy. However, sometimes I work on very simple build where it will be possible to avoid loading jQuery. 

14May

HTML5 fluid experiments

HTML5 fluid experiments are very popular on the web. Some of them are beautiful, some other are just weird. It’s hard to find a real use for them but here are a few links and examples.

08Apr

Free stock video websites

Here is a short list of free stock video websites. Use them for placeholder, testing, or for your projects.

18Feb

3 bookmarks you should know as a web designer

A short article to introduce 3 of my favourite bookmarks. I use them all the time. No need to install addon or extension, just drag and drop them in your bookmarks bar to start using them.

26Oct

How to have a responsive font size

Make a text fit 100% of the width of parent container if often an idea designers use in their concepts. However, when it comes to responsive design it becomes tricky to keep the text matching the initial idea.

27Aug

Where designers can learn code

Lots of the designers I work with are up to learn at least basic in code. So here are a few website to help beginners starting learning code.

18Apr

Remove blue styling on iOS devices

You create something, think it’s all good and once you see it on an iOS device you find ugly blue links for phone numbers. Thanks iOS devices. How to remove this automatic styling or change it.