Category: Web Development

Table of contents

• Find and replace text in a single text file
• Find and replace text in multiple files
• Find and replace multiple regexes in all files in a folder recursively
• Sort a list of text
• Get unique / remove duplicate lines in a list of text
• Select a column of text
• Find text in a single file and copy all matches to the clipboard
• Add text to the beginning of each line of text
• Copy differences (diff) between two files
• Rename multiple filenames in multiple folders

The instructions below use Visual Studio Code unless stated otherwise.

Find and replace text in a single text file

1. Open the text file in Visual Studio Code
2. Click Edit > Find or Edit > Replace
3. Enter your search term and replace term
4. Use optional options like
   • case senstive match
   • match whole word
   • regular expression
   • preserve case
   • replace first match
   • replace all matches at once
   • find in selection

Find and replace text in multiple files

1. In Visual Studio Code, right click on a folder and click “Find in Folder…”

2. Enter your search term and replace term
3. Use optional options like
   1. case senstive match
   2. match whole word
   3. regular expression
   4. preserve case
4. In the search results, you will see a preview of the text change.

If you click on a preview in search results, you can can the a side-by-side view of the change in each file.

Find and replace multiple regexes in all files in a folder recursively

Modify this JavaScript and run using NodeJS.

Sort a list of text

1. Select all the text to sort
2. Right click on the selection and click “Sort lines”

Get unique / remove duplicate lines in a list of text

1. Select the list of text
2. Click View > Command Paletter
3. Click one of the unique sort options

Select a column of text

1. Put the cursor at one corner of the column of text you want to select
2. On Windows, click and hold “Shift” + “Alt” keys and drag the cursor to the opposite corner of the column of text you want to select

3. You can then start typing to replace the text or copy the text to the clipboard

Find text in a single file and copy all matches to the clipboard

1. Open the text in Visual Studio Code
2. Click Edit > Find
3. Enter a search term
4. Click Selection > Select All Occurrences
   All matches will be highlighted. Notice the different highlight color in the two screenshots below.

5. Right click on the highlighted text and click “Copy”

6. You could then paste the copied text in a new file

Add text to the beginning of each line of text

1. Click Edit > Replace
2. Use the following regex search

Copy differences (diff) between two files

Let’s say you have two files and you want to get only the differences between the two. Visual Studio Code will show you a diff between two files as follows:

1. Open both files
2. Select both files in the OPEN EDITORS section
3. Right click and click “Compare Selected”

You will then see a nice diff between the two files.

But, you won’t be able to copy only the changed lines or export the diff. On Windows, you can use a tool called DiffMerge by SourceGear. If you open both files, you’ll see a similar view.

You can then click Export > File Diffs > Traditional > In Text > To Clipboard to copy the diff to your clipboard.

You can then paste the diff in a text editor like Visual Studio Code and extract only the text you are interested in.

Rename multiple filenames in multiple folders

Let’s say you have many files and you want to rename the filenames all at once. For this, I find it easy to use a tool like Rename Expert. For example, in the screenshot below, I did the following:

1. Added all files the filenames of which I want to rename
2. Under “Actions”, chose the actions I want done. In this case, I did 2 actions:
   1. Replace (to replace the first character of each filename with an underscore)
   2. Edit file extension (to change the file extension from php to jpg)
3. Previewed the changes and resolve any conflicts
4. Clicked the Apply button to run the batch renaming of files.

Whenever you make a change to a website, you need to deploy your changes to a production server. This can be as simple as uploading some files and as complex as having a multi-step process involving version control, building code, running custom scripts, checking links, image optimization, and then rsync-ing files to multiple production servers. To manage the build and deployment process, developers often use continuous integration (CI) and either continuous delivery or continuous deployment (CD). CI/CD bridges the gaps between development and operation activities and teams by enforcing automation in building, testing and deployment of applications. 

I’ve used Travis CI and attempted to use CircleCI but both seemed more complicated than I would like them to be. I then came across Buddy which got a lot of good reviews and looked super simple to set up. For me personally, I just wanted a simple way to commit changes to this blog’s custom WordPress theme in GitHub and have the changes SFTP’d to the production server. Though you can do that using GitHub Actions, it looked like more work and didn’t come with useful reporting and notifications like what you get with Buddy. Below is how I set up Buddy to detect whenever I commit or push to GitHub and then SFTP the changes to a server.

1. Sign up for Buddy

Buddy requires that you sign up using a work email address or to log in using your GitHub account. I wasn’t using this for work so I just logged in using my existing GitHub account.

2. Create a project

Click the “Create a new project” button. Since I logged in using my GitHub account, Buddy instantly showed me my GitHub repos. Click on a repo for this project you are working on. In my case, I chose “my-blog”.

3. Add a new pipeline

Click to add a new pipeline. You will be asked for a number of things including:

• Name – I just called the pipeline “Commit / Push to GitHub Then SFTP to abdullahyahya.com”
• Trigger Mode – I chose “On push” because I want to trigger the pipeline whenever I commit or push to GitHub.
• Branch or Tag That Triggers the Pipeline – I chose “Single branch” and “main” since, well, I only have one branch (main) and no tags.
• Target Website URL – I entered my blog’s website URL
• Trigger Condition – there are a few options here but I chose to have the pipeline be triggered only if there were changes in the repository since last execution which is probably what most people want.
• Set currently deployed revision on the remotes – Since I already had commits in GitHub that were in sync what production, I chose the most recently commit revision to avoid unnecessarily deploying everything from scratch.
• Other – there are other options but I just left them at their defaults

4. Add an action

On the next step, you need to choose an action that will take place in the pipeline (when there is a change committed / pushed to GitHub). Since I just want to SFTP the changes, I chose the SFTP action. Browse all Buddy actions.

5. Set up action

Now, you need to set up your chosen action. In this case, I need to set up my source and destination file paths and SFTP login credentials.

If you click the Action tab / button, you can name your action and temporarily disable the action, among other things.

Test your action by clicking the “Test action” link. In my case, Buddy connecting to the production server of SFTP, created a test directory, deleted the test directory, testing uploading a file, and deleted the test file.

If your test fails, e.g. you get the following error, then you may need to whitelist Buddy’s IP addresses.

6. List all pipelines

When you are done, you will see your new pipeline listed along with any other pipelines you have. You can manually run the pipeline also.

7. Do a real test

To do a real test of my pipeline, I added a comment to a file directly in GitHub and committed it. Seconds later, I saw the commit message show up in Buddy. I then verified that the comment was actually added to the file on the production server.

8. Add more actions to the pipeline

If you click the Actions button / tab, you’ll see all actions in the pipeline. You can add more actions that run in certain situations. In this example, I added an action to send myself an email if the pipeline fails. You can also add actions that rsync files to a server, optimize images, perform link checking, run a custom shell script, and much more.

9. Done

So that’s it. Super easy. Intuitive. Fast. I like it!

Here’s an easy way to draw a custom curve in Photoshop.

1. Click the Curvature Pen Tool

2. Click where you want inflection points

3. Drag an inflection point if you need to adjust the shape of the curve

4. Right-click on the curve click “Stroke Path”

5. Choose a tool, e.g. Brush

6. Click OK and see your curve drawn using the existing brush settings

Using a content delivery network (CDN) to host website assets such as images is a well-known best practice. But, most CDNs just host these files and serve them from their nearest edge location. Developers still need to crop, resize, and optimize images. Then you have non-technical people, e.g. some blog authors or PR people, who innocently upload an image to a site like WordPress and scale it down in size (width / height) without realizing that the image file size is still huge! Fortunately, there are image-specific CDNs that will host and optimize images for you. Below are some features of imagekit.io. I chose this image CDN because I like it so far and it’s free for up to 20 GB of bandwidth per month.

Note: web.dev, which is a Google Developers site, also encourages the use of an image CDN to host images.

Following are some features of ImageKit.io.

Automatic Image Optimization & Fast (< 50 ms) Display Time

Let’s say you have a very large image that is > 1 MB in size. This, of course, is way too large to serve as is. If you don’t know how to optimize images or just don’t feel like doing it, that’s fine because imagekit.io will do it for you. To test this, I uploaded a 1.7 MB, 1800x1232px PNG image of some grass with a transparent background to my Media Library in imagekit.io. The library shows a thumbnail of the image, the file size, and dimensions. Hovering over the image lets you copy the image URL.

Below is the imagekit-optimized image embedded in this web page.

In Google Chrome, the Network tab of the Inspector reveals that the delivered image was

• resized from 1800 px wide to 660 px wide
• converted from PNG to webp
• optimized from 1.7 MB down to 74.5 kB

I didn’t even have to open Photoshop, ImageOptim or some other image editor / optimizer!

This feature would definitely improve your website’s Lighthouse and PageSpeed scores.

Now, you might be wondering about image optimization processing time since images are optimized on demand. According to imagekit.io, images are displayed in less than 50 milliseconds globally and they have 6 processing regions backed by AWS CloudFront CDN. As you can see in the screenshot above, the Time column shows a delivery time of 40 ms.

Note: When I embedded the image in this WordPress page, WordPress copied the image and hosted it itself so the URL changed from

https://ik.imagekit.io/dumani/grass__zn7kxsnl4g.png?updatedAt=1632793760489

to

https://i0.wp.com/ik.imagekit.io/dumani/grass__zn7kxsnl4g.png?w=660&ssl=1

Deliver compressed images in the right format

This feature lets you deliver the smallest file based on the image content & device with optimal format selection. For example, the image above was uploaded to imagekit.io as a PNG but when I loaded it in this page in Google Chrome, imagekit.io detected that I was using Chrome and delivered a webp-formatted image. If I were using Safari, the delivered image would not be in webp format since Safari doesn’t support webp.

If an image has transparency, then imagekit.io will only convert it to a format that supports transparency, i.e. png, webp, avif. If a PNG image does not contain any transparency, then it becomes a candidate for a JPEG. If a PNG file without transparency is smaller in file size than a JPG, then imagekit.io will still deliver a PNG. Learn more

No need to move images

If you have a ton of website images on your web server, AWS S3 or elsewhere, there’s no need to move the images to imagekit.io. You can specify the existing location of the images as an origin in imagekit.io. Learn more

URL-based Image Transformations

This feature allows you to edit an image just by changing the URL a bit. For example, the following URLs are to the same source image but the delivered image sizes or compression quality are different.

Change image width

• https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg
• https://ik.imagekit.io/demo/tr:w-200/medium_cafe_B1iTdD0C.jpg

• “tr” means “transform”
• “w-200” means “width = 200px”

Change image width for high-dpr (retina) devices

• https://ik.imagekit.io/ikmedia/bucket.png?tr=w-500,dpr-2
• https://ik.imagekit.io/ikmedia/bucket.png?tr=w-200,dpr-2

The dpr is useful for devices like the iPhone or high-end Android devices. A dpr value of 2 is the equivalent of a 2x image (retina). In the examples below, since the dpr is set to 2, then the output image width is actually 2x (twice) the width specified in the URL.

“dpr-2” means “device pixel ratio = 2”

Change image compression quality

You can also change the image quality by simply changing the q value. This is a handy feature for people who have a picky Director of Brand and Creative who often complains that images are blurry or pixelated. Instead of resaving the image at a higher quality and republishing the image, you can just change a parameter in the image URL.

• https://ik.imagekit.io/demo/tr:q-90/medium_cafe_B1iTdD0C.jpg
• https://ik.imagekit.io/demo/tr:q-10/medium_cafe_B1iTdD0C.jpg

“q-90” means “quality = 90%”

There are many more transformations including width, height, aspect ratio, crop, quality, format, blue, grayscale, progressive image, trim edges, border, rotate, radius, etc. Learn more

Digital Asset Management

With imagekit.io, you get a media library where you can upload, organize and distribute image assets. You can create folders and even paste an image to upload it rather than browser for it. You can easily upload entire folders as well. Right-clicking on an image thumbnail shows many image options.

You can easily browse images as well.

Copy ready-to-use URLs

If you need to share an image with someone, e.g. by email, chat, etc, or if you need to insert an image in a blog post or a landing page, you can easily get an optimized image URL. Just upload (or paste) an image into imagekit.io, then click on the image thumbnail to get the optimized image URL.

Search for images

Easily find an image by keyword and many other filters.

Performance Monitoring

You can add URLs that you want imagekit.io to monitor for performance. ImageKit.io will crawl all images at the URL and determine if any images could be optimized and how much savings could be achieved. For example, in the screenshot below, the home page of pepperfry.com could save 1.2 MB. If you click the Fix it link, you will see a detailed report of which images could be optimized and in what way.

Set up a barebones WordPress site

You can just accept the default values (unless the defaults are asking you to pay for an upgrade).

Change the theme to the Twenty Fifteen

In the WordPress dashboard, go to Appearance > Themes > Add Themes and search for “Twenty Fifteen”.

Create a child theme of the Twenty Fifteen theme

style.css

Create a folder called mychildtheme or whatever you want to call it.

In the mychildtheme folder, create a style.css file with the following content:

The style.css file tells WordPress to load the Parent Theme’s files after the Child. It will override any styles in the Parent Theme’s style.css file that have the same selectors.

Template: Very Important! This is the folder name of the parent theme. If this variable is not correct the Child Theme will not work.

functions.php

In the mychildtheme folder, create a functions.php file with the following content:

This code tells your theme to call the style.css file and the parent CSS file.

screenshot.png

In the mychildtheme folder, create a screenshot.png file. A theme’s screenshot is the thumbnail image that shows up under Appearance > Themes in the WordPress Dashboard. The recommended image size is 880×660. The screenshot will only be shown as 387×290, but the larger image allows for high-resolution viewing on HiDPI displays.

Upload your child theme

Upload the mychildtheme folder to wp-content/themes.

Learn more about creating child themes

Activate your child theme

In the WordPress admin, go to Appearance > Themes in the Dashboard. You should see your theme listed. Click to activate it. In the screenshot below, my theme’s screenshot thumbnail is a picture of a cat.

Edit templates

Any PHP file in your mychildtheme folder will override the same file in the parent theme. For this site, I created some PHP templates so my child theme folder looks like this.

Download all files as a compressed zip file, unzip it, and upload each file to your mychildtheme folder.

Add background images

Search Google Images for large background images. Upload them to your WordPress Admin via the Media page. Make a list of URLs based on what you see for each uploaded image in WordPress.

Add JavaScript to randomly pick a background image

To add custom JavaScript, I just installed the “Simple Custom CSS and JS plugin” . Copy the code below , update the URLs to be the backyard images you uploaded to WP-Admin, then paste the code.

Whenever you update CSS or JS, make sure to flush the cache to see your changes.

The instructions below are for migrating a WordPress site on GoDaddy’s Managed WordPress service to a GoDaddy Linux Shared Web Hosting server that uses cPanel. Nevertheless, the instructions still work elsewhere.

Step 1: Back Up (Download) Your Site’s Files

To easiest way to download all your site’s files is to archive (zip / tar) all files into one large file and then download it. You can use a free FTP / SFTP tool like WinSCP to do this or Godaddy’s File Manager or cPanel’s File Manager. Just connect to the server, select all files, right click and choose “Archive and Download”. A file named archive.tar.gz will be downloaded.

If you are unable to archive all files due to the connection timing out, you can SSH into the server and archive the files from the command line. On Windows 10, you can open Windows Powershell, SSH into the server, and run the command tar -zcvf all.tar.gz *.

When downloading the archive, you may want to connect over ethernet instead of wifi to increase speeds. When I did this, I was downloading at around 23 MB/s.

You can also download files from the command line using the following SCP command if you are on Linux or MacOS.

scp [email protected]:foobar.txt /local/dir

Step 2: Back Up (Export) Your Site’s Database

The easiest way to do this is by connecting to your MySQL database using PHPMyAdmin. Then, click the Export tab, ensure SQL is selected, check the “Save as file” checkbox, and then click the Go button. The database will then be downloaded.

Step 3: Upload Your Site’s Files

On this step, you can use the same tool as in step 1, e.g. WinSCP. If you are going to host the migrated site on GoDaddy’s Shared Linux server, you can just create a new folder on the destination server, e.g. at /home/javanigus/public_html/mysite.com/ where mysite.com is the name of your site.

Make sure to upload the archive (one large file) archive.tar.gz. Don’t unarchive it locally and then upload a million separate files. After you upload the file, you can unarchive it. If you’re using GoDaddy, you can use cPanel’s File Manager to select the archive.tar.gz and extract it.

When you’re done extracting the archive, you can delete the archive.tar.gz file.

Step 4: Import (Upload) Your Site’s Database

For this step, you’ll need to create a new database and a database user who has full permissions. If you use cPanel, you can easily to this step from the control panel.

• 1. Create a database (e.g. mysite_db)
• 2. Create a database user (mysite_db_user)
• 3. Add user to the database
• 4. Assign permissions to the user

Now that you have a database, you can connect to it using PHPMyAdmin, select the database, click the Import tab, choose your database SQL file from step 2, leave all other defaults, and click the Go button. Your database tables and records will all be created.

Step 5: Edit Your Site’s wp-config.php File

In the step, you can use an FTP client to download, edit, and upload your site’s wp-config.php file. If you can cPanel, you can also use its File Manager to edit the file in the browser. You’ll need to edit the values for 4 variables:

In many cases, like for GoDaddy’s Linux Shared Hosting service, the value for DB_HOST is “localhost”.

Step 6: Add Domain and/or Change Your DNS

You can update the DNS records for the domain to use values pointing to the new host. After DNS has propagated, you should see the same site but being served from the new host instead of the old one. At this point, you can delete the old site.

If your new host is GoDaddy’s Shared Linux hosting using cPanel, you can use cPanel to create a new domain with a root folder path that matches where you uploaded the site’s files in step 3 above. When you do that, if your domain is also hosted with GoDaddy, then GoDaddy will auto-update the DNS for that domain automatically. You could then delete your old site.

Let’s say you want to make this gray sofa become a yellow sofa.

Here’s how to do it in Photoshop.

1. Select the object

Use the object selection tool and create a selection that is larger than the object itself. Photoshop will then shrink the selection to just the object.

As you can above, Photoshop selected the sofa but missed a part of the left leg. Since we only want to color the fabric and not the wood frame, remove the wood frame from the selection, e.g. using the rectangular marquee tool in Remove mode. Now, only the fabric is selected.

2. Create a new group

Click the Create a new group icon to create a new group.

3. Add layer mask

Click the Add layer mask icon to add a layer mask

4. Add Solid Color

Click the “Create new fill or adjustment layer” icon and choose “Solid Color”

5. Choose a color

In the popup color picker, choose a color.

6. Change blending mode

Click the Blending Mode dropdown and select “Color”.

The resulting image will look like this.

7. Adjust brightness

Click the “Create new fill or adjustment layer” icon and choose “Levels”

The Levels layer will appear below the Color Fill layer so drag the Color Fill layer above the Levels layer.

8. Adjust Levels

Drag the markers to adjust the brightness.

For example, when I drag the white marker to the left to the right end of the curve, the brightness increases.

Many people just need to create a simple website. There are many online website builders that offer this including Google Sites. However, what if you also need to simply password-protect some pages. WordPress.com makes this very easy. Following are steps on how to create a clear, no-frills website using WordPress.

1. WordPress.com

Go to https://wordpress.com/ and create an account. You can choose all of the free options and pick any theme.

2. Simple Theme

There are many free themes to choose from. But, if you want the most basic and intuitive theme, click on Appearance > Themes > search for the “Twenty Fifteen” theme and activate it.

3. Create Pages

Click to “customize” the theme and then choose “Menus” > Primary Menu. There will be two pages by default: Home and Blog. If you are not creating a blog, you can delete the Blog page. Then, click “Add items” > Add New Page” and add as many pages as you like. You will then need to drag the pages from the right column to the menu in the left column.

4. Edit Pages

While still in the Customize view, you can preview the site in the right column and click on the various menu links you just created. For each page, you can click the “Edit” link which will take you to the page editor view.

5. Paste Images

The nice thing about the page editor is you can just paste images where you want them and WordPress will upload the images for you. There’s no need to have an image file on your computer and then browse to it to upload it.

6. Password-protect Pages (Optional)

If you want to password protect some pages, then in the right column of the page editor view, click Document > Public > Password Protected and type in a password.

Once you publish your site, password-protected pages will appear as follows:

Once you enter the password, you’ll have access to the page’s content.

7. Publish

Now, you can click the “Publish” button to publish new page and the entire site. The site will be accessible at XXXX.wordpress.com where XXXX is customizable. You can also pay to buy a custom domain and link it to your new site.