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 […]
A bit of promotion but a good promo for freelancers. I closed my Shawbrook business instant savings account to switch to Tide. It offers a 4.33% AER at the moment, and it’s good to make the cash flow work a bit for you.
The instruction field in ACF will render as HTML so you can bold elements, add line breaks, etc. What if you wish to give users instructions about HTML tags without rendering them?
Moving a website from a GoDaddy account to another GoDaddy should be straightforward, right? Unless you get a conflict error with the domain…
Zing app recently launched by HSBC, lets you hold and spend money in multiple currencies with a debit card. Zing new users get £20 welcome bonus if they register and spend £5 before July 3rd. You can refer friends to Zing me and get up to £400.
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.
ScrollTrigger should allow you to update the filter CSS value as the user scroll. It works well in Chrome and Firefox, but our friend Safari tells another story. Here is how to fix a blur timeline animation with ScrollTrigger in Safari.
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.
It might happen that you use the hash of a URL to jump to a section of a webpage, or bypass some steps in a quiz/tool, etc. Here is a solution using window.location.hash.split(‘?’)[0];
In functions.php you can add a little snippet of code to rename the “Add title” placeholder text at the top of every page in the CMS.
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.
How to add a logout link and redirect to a page after logging out.
You can specify one page to redirect after login. Make this page the current page to provide a better experience for your visitors.
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.
You can bulk edit categories or/and tags in WordPress, saving you lots of time when you migrate post content.
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.
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.
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.
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!
I am a senior web developer. I am offering to help a charity or association for one day, sharing my expertise for your website.
A short article for a CSS Safari hack for zoom overflow and border-radius using -webkit-mask-image.
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.
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.
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).
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.
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 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.
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.
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.
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.
Just 2 CSS properties I discovered recently: caret-color and accent color.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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 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).
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.
I needed a quick solution to hide a WordPress website without using the .htaccess and .htpasswd method, I found a little plugin to help.
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
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.
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.
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.
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.
Learn more about Reaktor’s and the University of Helsinki’s AI course – no programming or complicated math required.
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 […]
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 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 […]
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
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.
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 […]
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.
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
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
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.
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.
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?
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.
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:
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.
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.
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.
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.
It’s a bit off topic from what I normally post about, but it’s it can be useful for everyone, freelancers or not.
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.
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.
The autoplay policy changed in April 2018 for Chrome. Autoplay is currently restricted in the following environments:
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.
Get a good accountant to save you time. Are you looking for an accountant?
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.
SmoothState.js is a jQuery plugin for page transitions. It progressively enhances page loads to give us control over the page transitions.
Avoid render blocking font when you use google fonts. Here is a short bit of javascript to load your google font asynchronously.
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 library of tool working with email, Instagram, Twitter, Flickr, Google Drive, Pinterest and much more.
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.
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.
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.
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 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.
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.
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.
Use your web browser’s default new tab page to access a handy list of links, grouped and sorted how you like.
Quick CSS to remove the yellow input background colour for Chrome autocomplete.
WordPress reduces image quality to 60% on upload when processing. However, you can override this with one line of code without a plugin.
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.
Here is a web tool useful for small online projects. Yesse is the name of a temporary web hosting for your builds.
CSS and HTML tips to avoid your image to be selected in your web pages.
A non exhaustive list of websites to find inspiration. Tumblr blog, design websites, etc.
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.
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.
Get a referral invite to the freelance platform YunoJuno. Free for freelancers, booking are paid on 14 days.
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
Just a list non exhaustive of websites and platform to learn about coding, performance, tools and techniques.
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.
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
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.
This a great piece of javascript to get geolocation infos in your web page. It’s perfect for small websites and prototypes.
Just discover this quick way to let your client edit a static website easily using Google Spreadsheets.
THE app we all need, no need to switch between millions of apps anymore! Check All in one messenger.
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).
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.
Recently, I have been in touch with potential clients asking about WordPress themes. What is good or not?
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.
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 already, a good amount of projects and companies. Lots of short time colleagues and team!
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
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.
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.
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.
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.
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.
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 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.
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
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)
Here is a short list of free stock video websites. Use them for placeholder, testing, or for your projects.
Here is a simple quick way to use icons from Font Awesome as a “background-image” using CSS.
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.
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.
WordPress editor can be really annoying, you probably experienced that. You can add a small function to your function.php file and voilà!
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.
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.
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.
Drop-down list are really difficult to style cross-browser.
Useful web tools to copy and paste text from pictures, online ORC, find the font on an image.
Let’s be honest, email templates are a real pain!
Here is the list of package I use and add on a new ST editor when I start with a new machine.
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.
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”.
Just a few web optimisation tools you can use to have good performance on your website.
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 /* Webkit browser engine: Safari and Chrome */
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.
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.
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.
List of websites I use to find ideas when I need to think about new animation concept for my front-end projects.
As a freelancer, I always start on new machines, downloading every time the software I need and adding back all my settings.
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.
Quick tip to stop an ajax request
If for some reason you still need to use it, it is still possible, just add the following line to your functions.php file.
Quick tip to get youtube thumbnail in your project easily without the API, just with image URLS.
Thanks to my lovely hosting provider, there we are for a new start!
Copyright © 2016-2024. All rights reserved. Designed and coded by Denis Bouquet