Digital nomad or frequent traveller? Take advantage of the best travel perks
Do you work remotely full-time? Are you a company director with your own Ltd for your freelance work? Then you should take advantage of this to treat yourself.
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.
WordPress logout link and redirect from front-end
How to add a logout link and redirect to a page after logging out.
MembershipWorks plugin, how to redirect to the current page on login
You can specify one page to redirect after login. Make this page the current page to provide a better experience for your visitors.
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.
How to view more than 20 posts per page and bulk edits categories and tags without any plugins in WordPress
You can bulk edit categories or/and tags in WordPress, saving you lots of time when you migrate post content.
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.
Business owner? Unlock life benefits with an Amex Business Platinum
This year, I had a life experience using of my Membership Rewards points to fly long haul in business class. Here are more reasons why you should look into the Amex Business Platinum benefits if you run a business.
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.
Safari invalid date, JavaScript new date return “Invalid Date”
A JavaScript bug only in Safari. Chrome and Firefox work well but it turns out you always need to do browser testing, and Safari is always full of surprises!
Probono day – December 6th, 2022 – #givingtuesday – small project, charity, association, get in touch now!
I am a senior web developer. I am offering to help a charity or association for one day, sharing my expertise for your website.
Safari bug, border-radius with overflow hidden and image scale zoom animation
A short article for a CSS Safari hack for zoom overflow and border-radius using -webkit-mask-image.
Vimeo url with 2 strings, the unlisted hash, Vimeo videos with 2 IDs
You can embed Vimeo videos with 2 IDs in their URL. URL with 2 IDs are unlisted videos. Unlisted videos are only playable by viewers with the full URL so you need the correct import.
Solve Manifest: Line: 1, column: 1, Syntax error. site.webmanifest:1 – 401 error
If you get an error in Chrome regarding 404 site.webmanifest here is the fix for it. Obviously, check your path is correct first. Then, if you can open the site.webmanifest in a new window look (so no 404), look at the below.
How to become a freelance web developer in the UK – 10 years after insights
I have been freelancing for soon 10 years as a web developer in London, UK. I present myself as a creative web developer and I provide front-end web services. Here is what I can share for someone who wants to start as a new freelancer in the UK (not only developers).
Get the city name from a user’s IP address in PHP (free up to 50K requests per month)
In a WordPress blog, I wanted to display different content to users depending on their location. It is possible using IPInfo.io (for free until 50k requests a month, then you can get a paid plan). Here is how to get the city name or country name from an IP.
WordPress create scaled files bigger than original file from large image > 2560px
A client asked me why uploading a large image in the WordPress media library would create a scaled image. This scaled down image is heavier than the original image (when optimised for the web). Here is how to deactivate scaled image in WordPress.
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.
gsap ScrollTrigger Uncaught TypeError: _toArray is not a function
I struggled a bit with the ScrollTrigger import in a new project. I could log ScrollTrigger, but it was not working. Using the CDN imports, it was all good. If you have this error, it’s likely the import is wrong.
How to find a freelancer in the UK, hire talented freelancers only
Do you need to find a good freelancer UK-based? Do you run a small studio or small company and need talented extra hands for your projects? Here is my Yunojuno review.
How to redirect WordPress custom post type child posts to a different page
Using WordPress, often we would use custom post type to create some content and then import this content into a page. Meaning the slug created for each post type content is not relevant, we don’t want visitors to access those web pages, so we need a redirect solution.
2 CSS properties for input styling I recently discovered
Just 2 CSS properties I discovered recently: caret-color and accent color.
Lottie files add class/ID to svg elements to animate them in CSS
You can add IDs to elements to Lottie files to then animate the svg elements in CSS (page load, rollover, etc). Simply add “#” to your layer name using unique names for each layer you wish to target.
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.
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.
Link to Twitter intent tweet error 500, percent % character
A simple fix about special characters and especially the % when program a tweet link and experience the error twitter.com is currently unable to handle this request.
Change url parameters without refreshing the page with JavaScript
For tracking purpose, we sometimes want to update the page url parameters but not refresh that page (ie: single page application). For instance, if we have a progress tracking or to come back to a specific place later.
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.
IR35 insurance for web developers or any freelancers / contractors in the UK
So I had to buy one IR35 to work with one of my clients (a large company). It’s part of their requirements to do the contract. They also require the common Public Liability and Professional Indemnity insurance. I bought the IR35 Protect (Essential) from kingsbridge.co.uk
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.
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.
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.
WordPress shortcode showing at the top of the page bug
I had a little issue building my shortcode. It worked fine but if I used it into the CMS that broke the page. I missed a couple of important lines.
InniAccounts pricing (+discount below), my updated review after 8 years of freelancing
InniAccounts pricing update, what you get for the service of InniAccounts. Their tool, the additional cost per year, the new pricing (and a discount for new joiners).
Amex Business Platinum for freelancers and contractors in the UK, is it worth the price?
This is a personal review of the Amex Platinum business card for UK-based freelancers/contractors. It can help you to decide if you should or shouldn’t take the American Express Business Platinum when you are a freelancer running a limited company with no employees.
A simple WordPress plugin to hide a staging website from visitors
I needed a quick solution to hide a WordPress website without using the .htaccess and .htpasswd method, I found a little plugin to help.
Single source content on a WordPress multisite network
How to share posts, pages, with the same content across multiple WordPress with Multi Sites WordPress. Here is a broadcast plugin that can sync content
Pym.js, responsive iframe parent showing 150px height only
If you experience a problem with Pym.js and the child iframe not resizing properly this could be due to the CSS in the child iframe.
How to send a URL with a specific section of text highlighted? Google Chrome Extension
Do you want to share a webpage URL with a specific section of text highlighted in yellow? Check the Link to Text Fragment Chrome extension. You might notice in the URL the characters “#:~:text” and some “%20” replacing spaces in the copy.
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.
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.
An online introduction to artificial intelligence for non-experts – free online course
Learn more about Reaktor’s and the University of Helsinki’s AI course – no programming or complicated math required.
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 […]
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.
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 […]
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
Super simple and quick free tool to create invoices
A super simple web tool for generating a PDF invoice for a single product or service. Just fill out the form and see the PDF update as you go.
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 […]
InniAccount referral code invite, accountant for contractors
Doing a bit of advert, well sharing the “inniAccounts experience” as they say, so we both get 10% off the monthly fees. If you are looking to get a discount, that here.
WordPress save, update button going to 404 page
One of my blog had this issue appearing a bit out of the blue. Clicking update the post would just redirect me to a blog page 404 with the url wp-admin/post.php
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
WordPress Remove media you don’t need
Remove WordPress image you don’t need Those plugins are great to do a bit of cleanup. But do a backup of your images first.
I finally switched from Sublime Text to Atom editor
Atom is a text editor available on MacOs, Microsoft Windows, and Linux. It’s open-source and free. It’s becoming the new most popular source code editor for developers.
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?
Probono day – Friday, March 22 in London – small project, charity, association, get in touch!
I have a day free before to switch projects and I am offering to help a charity or association for one day. I can help you with your website, give you advice for SEO and your online presence in general (social media, etc), answering questions about digital.
WordPress add categories and tags on pages without plugin
To add tags and/or categories in you Pages in WordPress. You don’t need an extra plugin. In your theme functions.php, add this function:
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.
Web tool: remove the background of a photo without software
You can remove the background of a photo without Photoshop or any software using this free online background removal tool. I found it so cool I had to share it.
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.
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.
Flight reclaim review, delayed flight.
It’s a bit off topic from what I normally post about, but it’s it can be useful for everyone, freelancers or not.
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.
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.
HTML5 video autoplay for Chrome policy
The autoplay policy changed in April 2018 for Chrome. Autoplay is currently restricted in the following environments:
Embed fonts CSS only, avoid Access-Control-Allow-Origin error
In a project I need to use fonts embed on an other non https server resulting in security errors in the console. So I look into options and one of them is to encode the font directly into the CSS.
InniAccounts 10% referral discount on your yearly inniaccounts pricing with the code CA3753
Get a good accountant to save you time. Are you looking for an accountant?
Call Denis, tips and mentoring for freelancers and consultants
I am doing it! I always have been really keen to share my freelance knowledge with fellow freelancers or some friends who were thinking about jumping from the permanent stable position to the world of independent work.
Stop smoothState on forms, deactivate SmoothState transition
SmoothState.js is a jQuery plugin for page transitions. It progressively enhances page loads to give us control over the page transitions.
Google fonts render blocking – page speed
Avoid render blocking font when you use google fonts. Here is a short bit of javascript to load your google font asynchronously.
WordPress url fix the %e2%80%a8/ at the end of urls
If you ever experience to have the %e2%80%a8/ at the end of your urls in WordPress. It can be easily fixed. It happens when an invisible space is save in the slug of the url.
IFTTT is a collection of applets to connect your accounts and device
IFTTT is a library of tool working with email, Instagram, Twitter, Flickr, Google Drive, Pinterest and much more.
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.
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.
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.
Convert and optimize videos for website, reduce mp4 size
Video team sending huge video files and telling you that’s the smallest they can get is common. The smallest is often too big for web. I use this online tool to reduced video size.
Slick carousel animation blinking after the last slide / cloned slide in infinite looping
Slick is a great touch responsive carousel. From time to time you might have issues with it and one of them is when you have the carousel set as infinite and some CSS transitions on the active slide. The CSS3 animation doesn’t apply and users experience a blink.
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.
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.
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.
Chrome remove the yellow background on input autocomplete, CSS
Quick CSS to remove the yellow input background colour for Chrome autocomplete.
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.
WordPress fix Fatal error: Allowed memory size of x bytes exhausted
New install, a not so great server, when I copy my WordPress install and activate a few plugins Boum! broken. The classic “Fatal error: Allowed memory size of x bytes exhausted”. Here is how to fix it.
Yesse: host your web projects for free for 72 hours, no sign up
Here is a web tool useful for small online projects. Yesse is the name of a temporary web hosting for your builds.
CSS, stop image selection with user-select and dragging (ghost image)
CSS and HTML tips to avoid your image to be selected in your web pages.
List of websites for inspiration
A non exhaustive list of websites to find inspiration. Tumblr blog, design websites, etc.
Fill your confirmation statement webFiling online, no need for an accountant
Don’t pay your accountant to do something you can do alone in a few minutes only. Filling your confirmation statement is quick and easy.
Remove WordPress wp-embed js script of your page template
Here is a quick tip to remove the piece of code added by WordPress 4.4 in the header of your pages about wp-embed.
Yunojuno referral
Get a referral invite to the freelance platform YunoJuno. Free for freelancers, booking are paid on 14 days.
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
List of websites to learn about code
Just a list non exhaustive of websites and platform to learn about coding, performance, tools and techniques.
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.
Remove the “copy” functionality on mobile Safari
If you want to disable the ‘Cut / Copy / Paste’ invoked by holding down on an element in Safari on the iPhone or iPad you can use the CSS user-select
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.
Javascript geolocation in 2 lines for your webpage / prototypes
This a great piece of javascript to get geolocation infos in your web page. It’s perfect for small websites and prototypes.
gDoc.js Using Google Spreadsheets for your website as a CMS
Just discover this quick way to let your client edit a static website easily using Google Spreadsheets.
WhatsApp, Skype, Slack, Facebook messenger (and more) in one app!
THE app we all need, no need to switch between millions of apps anymore! Check All in one messenger.
Pro bono work day this month for a charity or association in London
This is something I wanted to do for a long time. The problem is, I am always too busy or I can’t plan early enough… I am offering my service for your charity or association pro bono on this Friday 29th (July 2016).
Javascript libraries to create page transitions in your website
Page transitions are part of the user navigation and experience. The SEO, and time to load a page should never be compromised during the user journey inside a website or web app. Here are some libraries I use to create nice page transitions.
Business on a budget buying a WordPress template
Recently, I have been in touch with potential clients asking about WordPress themes. What is good or not?
Professional indemnity and public liability insurance for freelancer/contractors (2023/2024)
In my last contract, the agency I worked for required me to get a professional indemnity and public liability insurance. It was the first time someone required this for my business.
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.
Three years freelancing in London
Three years already, a good amount of projects and companies. Lots of short time colleagues and team!
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
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.
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.
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.
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.
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.
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.
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.
Remove WordPress emoji code in your pages head without plugin
Here is a quick tip to remove the piece of code added by WordPress 4.2 in the header of your pages about emoji icons
Change widget headings from h1 to h3 in WordPress
Recently, I had the bad surprise to find h1 heading titles in the widgets of my WordPress theme. Here is a small function to change those heading h1 to h3 (or another tag)
Free stock video websites
Here is a short list of free stock video websites. Use them for placeholder, testing, or for your projects.
How to use Font Awesome Icons in CSS
Here is a simple quick way to use icons from Font Awesome as a “background-image” using CSS.
WordPress, show admin notices, required plugins for a theme
When you create a bespoke theme, you usually need some specific plugins who needs to be activated for a normal use of your theme. Here is a way to create notice message on your admin area.
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.
Stop WordPress removing tags – without plugins
WordPress editor can be really annoying, you probably experienced that. You can add a small function to your function.php file and voilà!
Create wordpress multilanguage – best way and plugins
I recently worked on a few multilingual WordPress build for different clients. So I have been looking for the best way to build those using relavant code and plugins. Here is what I ended up using.
Start working with Phaser 2, how and where to learn
I used Phaser during a web project I did for Ford. I discovered it long time ago doing some web monitoring and I finally played seriously with it recently.
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.
CSS styling for drop-down list – cross-browser, CSS only
Drop-down list are really difficult to style cross-browser.
Text in images: copy and paste, get the font
Useful web tools to copy and paste text from pictures, online ORC, find the font on an image.
Best way to build cross-browser email templates
Let’s be honest, email templates are a real pain!
Sublime Text 2 – packages I use all the time
Here is the list of package I use and add on a new ST editor when I start with a new machine.
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.
Save money, claim expenses through your limited company
I am running my company for more more than a year now and I only learn a couple of weeks ago some useful tricks about “claiming expenses through your limited company”.
Web optimisation tools for your website
Just a few web optimisation tools you can use to have good performance on your website.
Front-end resources I use all the time
List of web tools I use all the time. Just some good front-end resources for web developers. JS repositories, code generator, placeholder…
CSS target chrome and safari only / Firefox only without plugins
CSS target Chrome and Safari only /* Webkit browser engine: Safari and Chrome */
Think about screen readers, use screenreader class
I recently went to some interesting talk and one was about accessibility. I would like to share the most important point I heard during that talk.
Review of InniAccounts, accountant for freelancers / contractors
It has been a bit more than a year now I use the services of InniAccounts for my accounting and I just want to share my thought and a little review about InniAccounts.
How to replay an animated gif in javascript
I had the problem to have a gif always loaded to the final step. The non-looping animated gif didn’t replay when the page was reloaded.
Front-end animation inspiration website list
List of websites I use to find ideas when I need to think about new animation concept for my front-end projects.
Sublime text 2 – preferences, personal key bindings
As a freelancer, I always start on new machines, downloading every time the software I need and adding back all my settings.
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.
How to stop an ajax request
Quick tip to stop an ajax request
Keep using blogroll (Links menu) in new Worpress versions 3.5.x
If for some reason you still need to use it, it is still possible, just add the following line to your functions.php file.
Get youtube video thumbnail
Quick tip to get youtube thumbnail in your project easily without the API, just with image URLS.
New start for the blog – never trust your hosting provider
Thanks to my lovely hosting provider, there we are for a new start!