If you are creating a wordpress theme with some jquery then you should not load your own version of jquery. WordPress comes with an up to date version which is loaded in the “no conflicts mode”.
if you use the $ sign just wrap your code in this:
jQuery(document).ready(function($) { // $() will work as an alias for jQuery() inside of this function });
You can find just about everything on the web to help you with your designs. Some we use for insparation, some for saving some precious minutes.
Here is a great little website to save some time when creating dummy content for a page.
A quick random string function
1 2 3 4 5 6 7 8 9 | function genRandomString($length) { $characters = '0123456789abcdefghijklmnopqrstuvwxyz'; $string = ''; for ($p = 0; $p < $length; $p++) { $string .= $characters[mt_rand(0, strlen($characters))]; } return $string; } |
Here is a list of some of the new HTML5 Tags
<article> Defines an article.
<aside> Defines content aside from the page content
<canvas> Defines graphics
<command> Defines a command button
<datalist> Defines a list of options for input values
<details> Defines details of a document
<figcaption> Defines the caption of a figure
<figure> Defines a group of media content
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<nav> Defines navigation section
<progress> Defines progress of a task of any kind
<section> Defines a section
<summary> Defines the header of a “detail” element
<time> Defines a date/time
<wbr> Defines a possible line-break
Media Elements
<audio> Defines sound content
<video> Defines a video
<source> Defines media resources
<embed> Defines interactive content or plugins
Media Queries is a great new addition to CSS. It is used to change you site depending on certain circumstances. One great way of using it is to change the layout of your site depending on the screen sizes. Check out mediaqueri.es for some insperation.
Most people automatically think of the great possibilities for mobile devices, but it is also a great feature for someone with a big monitor. Just think of all the space that normally goes to waste!
So how does it work? Well really easily actually. Lets image for the sake of simplicity that you want different h1 styles for different screen sizes. All you have do is specify the screen size and then inside the media query tag just put you normal css code.
Oh, before I get to the media query code: another useful bit of code for getting rid of the zooming on mobile devices you are optimizing for is this.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Just paste it in the header section. I have not experienced any difficulties with it on a normal PC/Laptop.
So on to the media query:
@media screen and (max-width: 1024px){ #your-div-id h1{color:#CCC} #your-div-id h2{color:#CC0} } @media screen and (max-width: 800px){ #your-div-id h1{color:#C00} #your-div-id h2{color:#C33} }
For your convenience I have prepared a few media queries for common screen sizes to copy and paste
@media screen and (max-width: 1920px){} @media screen and (max-width: 1680px){} @media screen and (max-width: 1600px){} @media screen and (max-width: 1440px){} @media screen and (max-width: 1366px){} @media screen and (max-width: 1280px){} @media screen and (max-width: 1152px){} @media screen and (max-width: 1024px){} @media screen and (max-width: 800px){} @media screen and (max-width: 640px){} @media screen and (max-width: 480px){} @media screen and (max-width: 400px){} @media screen and (max-width: 320px){}
Backing up the filesystem from a remote machine is easier than most people think. In the proccess you might as well backup your mysql datbase as well.
Terminologies that I will use
The server with the files you want to back up : live-server
The server you want to back-up to : backup-server
Assumptions
You have SSH access to the remote server
Your username for the live-server is USERNAME
OK so lets get going
1.Settting up the passwordless SSH login
Log into your live-server via the terminal (I use putty for this) and type
ssh-keygen -t dsa
This will produce a line saying something like “Generating public/private dsa key pair.” followed by “Enter file in which to save the key: (.ssh/id_dsa)”.
Press enter. It will then ask for a passphrase and to repeat the passphrase. Leave this blank by just pressing enter twice.
It will create a directory called .ssh and 2 files inside id_dsa and id_dsa.pub. NEVER let your id_dsa file get public. That will give free reign to your site. To help prevent this type
cd .ssh and chmod 600 id_dsa
You public keys are now created. The next step it to copy the id_dsa.pub file to the backup-server. To do this type
scp id_dsa.pub USERNAME@live-server:
(note the “:” ) and enter the password for the live-server. This copies the id_dsa.pub file to the live-server. Now log into the live-server by typing
ssh live-server -l USERNAME
There should be an id_dsa.pub in your home directory. You should append it to the last line of the file authorized_keys2 in your .ssh/ directory. Dont worry if you dont have an authorized_keys2 fíle, just type:
cat id_dsa.pub >> ./.ssh/authorized_keys2
The public key is now set up. To test if it works type
logoutYou are now back on the backup-server. Now type
ssh live-server -l USERNAME
You should have logged into the live-server without having to type your password.
The steps without the explanations
backup-server: ssh-keygen -t dsa backup-server: cd .ssh backup-server: chmod 600 id_dsa backup-server: scp id_dsa.pub USERNAME@live-server: backup-server: ssh live-server -l USERNAME live-server : cat id_dsa.pub >> ./.ssh/authorized_keys2 live-server : logout backup-server: ssh live-server -l USERNAME
2. The backup script
I sometimes run the backup-script from a php file using the shell_exec() command. This gives me the flexibilty to to do some other things at the same time. For example I can make 7 folders and make a weeks backup. Or run the DB backup at the same time. That bit is up to you. Anyway here is the steps.
I assume that you want to make the backup in a folder called backupdir. So in the root on the backup-server type
mkdir backupdirNow the actuell sync command. This will start the backup! If you want to run this from a shell script put it into the script file. If you want to run it form a php file save it in the with the shell_exec()
rsync -avz -e ssh USERNAME@live-server:/full/path/to/dir/ /full/path/backupdir/
If you don’t know the /full/path/ you can also type pwd (means “print working directory”)
If you want to backup your DB at the same type use the following. It can also go into shell_exec()
ssh USERNAME@liveserver 'mysqldump -q -u DB_USER --password=DB_PASS DB_NAME -h DB_HOST' > /full/path/backupdir/backup.sql
3. Automation
Now you just need to automate it with crontab, but that is not disscussed in this tutorial.
Here a few links to get started:
A brilliant little plugin to use in wordpress for syntax highlighting is WP-Syntax.
All you have to do is install the plugin and the add
<pre lang="html"></pre>
around the code you want to highlight.
Want to show line numbers show you can explain your code, or do you already have html entities escaped… No problem
1 | <pre lang="html" line="1" escaped="true" ></pre> |
With the rise of CSS3 it is now possible to add different fonts to your website. Instead of just using one of the web-safe fonts which we have come to love you can now embed any open-type font ( .otf ), and it is really easy.
First you have to define your font using @font-face like so
@font-face { font-family: FontName; src: url('fonts/FontName.otf'); }
and then you just use it like any other font for example
font-family:FontName, Arial, Verdana, Helvetica, sans-serif;
One thing to remember though is to check if you are allowed to embed the font.
