https://jesselau.com/en/categories/website-programming/ Recent content in Website Programming on Hugo -- gohugo.io en Sat, 24 Nov 2018 00:26:15 +1300 https://jesselau.com/w3-simple-shortcodes-demo/ Sat, 24 Nov 2018 00:26:15 +1300 https://jesselau.com/w3-simple-shortcodes-demo/ I made the Hugo W3-Simple Theme based on W3.css from W3schools because I think W3.css is very powerful and fast CSS Framework. (It is much smaller than Bootstrap css) I just went to Miniwebtool Character Counter to compare both css. W3.css is just less than 20% of Bootstrap.min.css file size. I am not very familiar with Bootstrap.min.css. But I think W3.css is more than enough to build a blog-style website. So I made this project and will keep updating. Just finished some shortcodes functions. This article is about the demo of these shortcodes. Info Shortcodes We can easily display info with this code below on markdown file Code for info shortcodes {{< info >}} Blue often indicates a neutral informative change or action. {{</info >}} It will display default title with Information!: Info Blue often indicates a neutral informative change or action. https://jesselau.com/install-manticore-search-and-play-with-wordpress-database/ Wed, 03 Oct 2018 23:46:28 +0000 https://jesselau.com/install-manticore-search-and-play-with-wordpress-database/ A few days ago I found Manticore search, a fork of Sphinx search. I researched it and found an article. It is worth trying. Back up all the content of the existing server and start to increase the search function. Install Manticore Search First go to their website to download the latest version for this server system. This server uses Ubuntu 18.04. The latest version of the link can be easily found on the web page. The commands for downloading and installing at the current time are as follows: wget https://github.com/manticoresoftware/manticoresearch/releases/download/2.7.3/manticore_2.7.3-180926-d07c4d43-stemmer.bionic_amd64-bin.deb sudo dpkg -i manticore_2.7.3-180926-d07c4d43-stemmer.bionic_amd64-bin.deb According to its installation tutorial, you also need to install several LIBs. sudo apt-get install libmysqlclient20 libodbc1 libpq5 libexpat1 Then start this service sudo systemctl start manticore This service is also started when the server starts. sudo systemctl enable manticore Create a Manticore search test database https://jesselau.com/wordpress-plugin-find-and-replace-text/ Tue, 25 Sep 2018 21:42:58 +0000 https://jesselau.com/wordpress-plugin-find-and-replace-text/ The WordPress editor currently does not have "find n replace" function. This function is very useful for me, because I used to post the souce code just clicking Blockquote button. But each time I have to go back to the TEXT mode and add the <PRE> tag, otherwise some code will be converted to some special characters by WordPress editor, which is not good story for source code. Therefore, I need a batch find n replace function. I used better search and replace plugin to modify the database, but this tool is to replace all the data of the website, which is not very convenient for new posts. I plan to find another WordPress plugin but I can't find it. Maybe not too many people need this function. I can solve it if there is a problem. I have time and relevant experience to learn something new, although I have never made Wordress Plugin before, I am sure " https://jesselau.com/how-to-create-zoom-image-hover-effects-with-transparent-text-remove-adsense-auto-ads-from-homepage-in-extra-theme/ Sun, 23 Sep 2018 21:16:08 +0000 https://jesselau.com/how-to-create-zoom-image-hover-effects-with-transparent-text-remove-adsense-auto-ads-from-homepage-in-extra-theme/ After a day of renovation, I felt that the fullwidth slider on the front page didn't seem to be necessary, and it was not clear to say what my website was talking about. Using EXTRA's image module to add a picture is very simple, however, we can not add text on the image. So let's polish a dynamic effect with CSS. How to Create Zoom Image Hover Effects with Transparent Text Add a text module and write the code below <div class="zoomimg-container"> <img class="zoomimg" style="width: 100%;" src="https://jesselau.com/wp-content/uploads/2018/09/jesselaublog-1.jpg" /> <div class="zoomimg-content"> <h1>Welcome to Jesse Lau's Blog</h1> Website Programing, Internet Marketing, Forex Trading, Billiard, Darts And I Can Stand On One Leg For 30 Minutes With My Eyes Closed. ☺ </div> </div> Then add the following code to the CUSTOM CSS of EXTRA THEME OPTION: .zoomimg-container { position: relative; width: 100%; https://jesselau.com/renovate-the-website-with-extra-theme-solve-polylang-and-extra-incompatibility-issues-and-install-adsense-code-on-amp-page/ Sun, 23 Sep 2018 00:49:13 +0000 https://jesselau.com/renovate-the-website-with-extra-theme-solve-polylang-and-extra-incompatibility-issues-and-install-adsense-code-on-amp-page/ I visited the elegantthemes.com the day before yesterday and found that they had an additional theme besides DIVI. It is said to be developed for blog sites. The layout is similar to magazine layout, and the menu is more modern than DIVI. Ok, since my membership covers this theme, I decide use this EXTRA theme to "renovate" the site. WordPress's decoration is very convenient. After setting up with different themes, as long as you don't empty the database, you can return to the original DIVI interface at any time. Ok, let's take a look at the extra theme. He also embeds the Divi Builder visualization tool. Added a lot of typographic optimization for posts. Built-in feature for rating posts, supporting multiple authors. Ok, see how my home page is designed:   Featured posts Slider is inserted at the top, as long as each post comes with a high-quality image, the effect of this image slider is good. https://jesselau.com/cancel-redirects-to-solve-adsense-down-or-unavailable-problem-and-make-a-custom-404-page-to-make-website-more-user-friendly/ Wed, 19 Sep 2018 23:56:29 +0000 https://jesselau.com/cancel-redirects-to-solve-adsense-down-or-unavailable-problem-and-make-a-custom-404-page-to-make-website-more-user-friendly/ I submitted Adsense application 3 times before and I received the following letter shortly:   Unable to review your site: While reviewing jesselau.com, we found that your site was down or unavailable. If you applied through an AdSense host partner, such as YouTube or Blogger, your hosted site was not available or not found (removed) at the time of the review. This really made me confused. I have changed the server from London to Silicon Valley where Google headquarters is located. It was impossible to say "down or unavailable". I won’t guess this time. I went to the google forum and asked, and soon the enthusiasts answered, saying that my jesselau.com redirected to jesselau.com/en/. Google Adsense application robot does not support redirects. Go to the google adsense guide, really, there is a small line of text, does not support redirect. https://jesselau.com/how-to-display-read-more-links-on-divi-search-and-tag-pages/ Tue, 18 Sep 2018 00:26:52 +0000 https://jesselau.com/how-to-display-read-more-links-on-divi-search-and-tag-pages/ The Divi template is great, but his founder may also have a philosophy of "don't make the most of it." In some places, I suspect that it is a flaw that he deliberately left behind. For example, his search and tag pages, why not make a read more links by default. Go to their forum to find a solution. Find the index.php file in the divi directory and find 54 lines, change to:   truncate_post( 270 ); printf( ' <a href="%1$s" class="more-link" >%2$s</a>' , esc_url( get_permalink() ), esc_html__( 'read more', 'et_builder' ) ); Then upload it to the sub-template directory of divi: scp \path\index.php yourusername@yourwebsite.com:/home/yourusername ssh yourusername@yourwebsite.com sudo mv index.php /var/www/yourwebsite.com/wp-content/themes/divi-child/ Get it, now the search results and tag page also have a "read more" link.   https://jesselau.com/21-wordpress-plugins-activated-in-my-website/ Sun, 16 Sep 2018 01:20:23 +0000 https://jesselau.com/21-wordpress-plugins-activated-in-my-website/ Since the blog was restarted at the end of last month, 21 wordpress plugins have been installed and activated. 21 is a mysterious number, so I will take a look at it at this time. These plug-ins are all in the process of running the blog, suddenly throwing out some ideas or needs, found through google, although some have commercial functions, but this blog is currently running free features. Wordpress can be used as the most popular CMS (content management system) for no reason. There are countless themes and plugins for developers to choose, which has a virtuous circle. These 21 plugins can be divided into five categories. The first category: speed optimization class The second category: search engine optimization class The third category: user interface class The fourth category: user communication class The fifth category: management tools Ok, now let's talk about plugins one by one. https://jesselau.com/how-to-setup-fullwidth-video-background-with-divi-and-ffmpeg/ Sun, 16 Sep 2018 00:03:41 +0000 https://jesselau.com/how-to-setup-fullwidth-video-background-with-divi-and-ffmpeg/ Prepare to upload a small video as a background. I found a video on my mobile phone, taking a picture from New Zealand's famous Lake Tekapo to Wanaka. But there are some noises. This requires video processing software to remove the sound. Ok, let's install the free and powerful ffmpeg. Windows users can install a software Winff. Is a visual interface to the ffmpeg command line. I am using Ubuntu 18 now. Need to run the following command to install ffmpeg   sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-next sudo apt-get update sudo apt-get install ffmpeg Ok, ffmpeg is installed, the video file I just downloaded is 1.mp4 and I continue to run: ffmpeg -i \path\1.mp4 Find a few lines with stream information. Here is: Stream #0:0(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, mono, fltp, 95 kb/s (default) Metadata: creation_time : 2018-04-22T22:10:00. https://jesselau.com/optimize-wordpress-nginx-and-php-7-2-to-reduce-server-response-time/ Mon, 10 Sep 2018 06:09:40 +0000 https://jesselau.com/optimize-wordpress-nginx-and-php-7-2-to-reduce-server-response-time/ Yesterday my son made his first blog in life according to the Step-by-step Tutorial Show How to Build a Nice WordPress Blog with Perfect 100 Score of Google Pagespeed Insights and A Rating of SSL Certificate within 2 Hours I wrote earlier. Because the cost of the server is determined by his own way of making money, he is currently purchasing Vultr's cheapest server, $3.50 per month, 1 CPU, and only 512MB of the smallest server. WordPress is a very memory-intensive CMS system. It is estimated that 512MB will be not enough to run wordpress after adding several plug-ins and templates. The response time of the server may not meet the requirements of Google Speed ​​Insights. Just like my own blog, the initial speed is not slow, but after using DIVI and adding a lot of other plug-ins, the test results in Google Speed ​​Insights shows the server response time is more than 200ms. https://jesselau.com/wordpress-google-pagespeed-insights-ssl-certificate/ Sat, 08 Sep 2018 01:45:05 +0000 https://jesselau.com/wordpress-google-pagespeed-insights-ssl-certificate/ My 11-year-old son came back from school on Friday and saw my blog saying, "I want to make a blog too." The child’s thoughts and enthusiasm should be encouraged. So I decided to use another idle domain name fxdiary.com to go through the process step by step. Each step was recorded, and everybody can learn how to build a nice Wordpress blog with perfect 100 Score of Google Pagespeed Insights and A rating of SSL Certificate in 2 Hours. The best of all, you can save big money for just using $3.5/m VPS to make it. This tutorial is divided into 8 steps.There are quick links: 1. Purchase a domain name 2. Register the host 3. Set DNS to point the domain name to the server ip 4. Remote login to the host to set up a non-root superuser https://jesselau.com/excel-tips/ Sat, 10 May 2014 03:07:27 +0000 https://jesselau.com/excel-tips/ Just working for google merchant data. I have to insert some text to the whole cell. Record tips here.   1. B1 ="SOME TEXT BEFORE"&A1 2.Copy B1 to whole b1-b100 3. select paste back to a1 with just value.   I also have to find some text including "|" 1. B1 = MID(A1&"|",1,SEARCH("|",A1&"|")-1)   https://jesselau.com/missing-required-field-entry-title-updated-hcard-author-solution/ Tue, 29 Apr 2014 10:21:14 +0000 https://jesselau.com/missing-required-field-entry-title-updated-hcard-author-solution/ Today I met a problem when I was using google rich snippets testing tool to test one website youtubeexplorer.com Extracted structured data hatom-feed hatom-entry: entry-content: 90% YouTube Users Don't Know About This Trick Brand new free software helps you to find YouTube movies quickly. Download from CNET From 1 to 1974 YouTube Videos In One Click Who Else Wants... Error: Missing required field "entry-title". Error: Missing required field "updated". Error: Missing required hCard "author". It is because some wordpress themes don't support hatom-feed. But wordpress has a default post_class() function which automatically add .hentry class to a single page and front page. If your website don't have time or author information. You will encounter the problem. We want to make google like our websites so we should clear all the error information. I think hatom is not very useful in SEO. https://jesselau.com/how-to-optimize-mysql/ Fri, 08 Nov 2013 08:56:23 +0000 https://jesselau.com/how-to-optimize-mysql/ Today I found my websites were very slow. Log into linode system and I found MySQL is over 500% CPU usage. Just google it. and found a script. wget https://raw.github.com/major/MySQLTuner-perl/master/mysqltuner.pl use winscp to change the pl file to 777 use putty to telnet the server. Just run the pl. ./mysqltuner.pl The pl will display some setting suggestion. change ./etc/mysql/my.cnf Use the following command to optimize database tables mysqlcheck --optimize -A -u username -ppassword service mysql restart That's all. https://jesselau.com/how-to-run-metatrader-4-in-ubuntu-12-04-with-linode-server/ Sun, 28 Jul 2013 00:21:09 +0000 https://jesselau.com/how-to-run-metatrader-4-in-ubuntu-12-04-with-linode-server/ I decided to run metatrader in my linode server because Windows VPS is very expensive. After a few hours' work, I succeeded. Record here 1. Install wine on Ubuntu sudo add-apt-repository ppa:ubuntu-wine/ppa sudo apt-get update sudo apt-get install wine 2. copy files from windows system to Ubuntu system. Upload C:\windows\Fonts\*.* to /home/USERNAME/.wine/drive_c/windows/Fonts Upload C:\windows\system32\mfc*.* to /home/USERNAME/.wine/drive_c/windows/system32 3. Install gnome to my linode server. sudo apt-get install x-window-system-core sudo apt-get install gnome-core 4. Install vncserver sudo apt-get install vnc4server Then download a vnc clent application in windows system. I use UltraVNC Viewer 5. Make vncserver auto start with my linux server boot. Start gnome as well. Use winscp to make a new file on /etc/init.d/vncserver cp the following code to the file #!/bin/sh -e ### BEGIN INIT INFO # Provides: vncserver # Required-Start: networking # Default-Start: 3 4 5 # Default-Stop: 0 6 https://jesselau.com/linode-server-crashed-how-i-solved-it/ Sat, 20 Jul 2013 10:58:44 +0000 https://jesselau.com/linode-server-crashed-how-i-solved-it/ My linode server crashed yesterday. I am not familiar with linux system. Just google to solve the problem. 1. run "df -h" to see my disk image is almost not free space available. It is the reason that my websites often crashed. 2. apt-get install ncdu 3. ncdu to see which directory has the large files. 4. Find one cache folder is over 11G. Desided to delete it. 5. rm -rf command is very slow 6.So I tried another one: apt-get install rsync 7.mkdir empty directory. 8.run the command. rsync -a --delete empty/ cache/ 9. Done. Much quickier than rm. I get my free space back now:) https://jesselau.com/how-to-add-email-forwarding-in-linode-server/ Sun, 16 Jun 2013 08:28:39 +0000 https://jesselau.com/how-to-add-email-forwarding-in-linode-server/ Google and recode here. Install postfix apt-get update apt-get upgrade apt-get install postfix /etc/postfix/main.cf download and edit virtual_alias_maps = hash:/etc/postfix/virtual /etc/postfix/virtual jim@ducklington.org jim@gmail.com ted@ducklington.org ted@gmail.com postmap /etc/postfix/virtual to build database /etc/init.d/postfix reload https://jesselau.com/decode-utf8-string-function-in-delphipascal/ Mon, 29 Apr 2013 07:25:44 +0000 https://jesselau.com/decode-utf8-string-function-in-delphipascal/ function DecodeUtf8Str(const S: UTF8String): WideString; var lenSrc, lenDst : Integer; begin lenSrc := Length(S); if(lenSrc=0)then Exit; lenDst := MultiByteToWideChar(CP_UTF8, 0, Pointer(S), lenSrc, nil, 0); SetLength(Result, lenDst); MultiByteToWideChar(CP_UTF8, 0, Pointer(S), lenSrc, Pointer(Result), lenDst); end; https://jesselau.com/how-to-add-curl-to-linode-ubuntu/ Fri, 26 Apr 2013 00:05:07 +0000 https://jesselau.com/how-to-add-curl-to-linode-ubuntu/ Need to install a facebook login plugin. It said I should install curl. Record here. 1. Run winscp. download /etc/php5/apache2/php.ini 2. Add the following code to the php.ini extension=curl.so 3. Run putty and login. 4. apt-get install php5-curl 5. service apache2 restart 6. That is all. https://jesselau.com/how-to-add-new-website-in-linode-server/ Wed, 24 Apr 2013 09:32:42 +0000 https://jesselau.com/how-to-add-new-website-in-linode-server/ Just build new website. Record here 1. Login Linode. Setup the DNS 2. Go to Namecheap, change the DNS server to ns1.linode.com and ns2.linode.com 3. Open notepad, make a new virtual host file. like this ServerAdmin webmaster@example.net ServerName example.net ServerAlias www.example.net DocumentRoot /srv/www/example.net/public_html/ ErrorLog /srv/www/example.net/logs/error.log CustomLog /srv/www/example.net/logs/access.log combined 4. Open Winscp, connect with linode server. Upload virtual host file to /etc/apache2/sites-available/ 5. Use winscp to mkdir /srv/www/newwebsite.com/public_html and /logs directory. 6. Open Putty software. Telnet to linode server. Run the following: a2ensite newwebsite.com /etc/init.d/apache2 restart 7. That's all. https://jesselau.com/wrote-three-words-in-my-dream/ Sun, 13 Jan 2013 20:59:58 +0000 https://jesselau.com/wrote-three-words-in-my-dream/ I remember I wrote three Chinese words in my dream. Post here. I don't know how to say it in English. https://jesselau.com/how-to-disable-javascript-in-firefox-for-a-specific-website/ Sun, 30 Dec 2012 22:14:20 +0000 https://jesselau.com/how-to-disable-javascript-in-firefox-for-a-specific-website/ I used to try Google Chrome. It has some features I like. Chrome can set javascript enabled or disabled for a specific website. That is good function. Many novel websites have many javascript code to display Ads, off window, etc. Using disable javacript function will be safer and clearer. But Google Chrome cost more memory of my pc. I just wanted to return to Firefox. Just googled "how to disable javascript in Firefox for a specific website", found one plugin. Its name is yesscript. You can download it at https://addons.mozilla.org/en-us/firefox/addon/yesscript/ It is more than easy to use. After installing the plugin, you will find one icon in your Firefox status bar. One click to the icon in the status bar turns scripts on or off for the current website. https://jesselau.com/start-blogging-today/ Thu, 27 Dec 2012 22:44:13 +0000 https://jesselau.com/start-blogging-today/ Today's Plan: Logo upload Reading elegant themes tutorial then custmize categories and pages. Install some plugin That's all. JavaScript Example fruits[0] = "Banana"; fruits[1] = "Apple"; fruits[2] = "Mango"; fruits[3] = "Plum"; CSS Example body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; } HTML Example <!DOCTYPE html> <html> <title>HTML Tutorial</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>