5 nifty JavaScript tricks that you may not know

I like the first one the most from this post, so I am posting it here, but the others are cool too. 

1. A compact string comparision

Let’s say you want to check if a string value is present in a set of strings. You obviously go for a ifstatement as below.

if(fruit === 'apple' || fruit === 'banana' || fruit === 'chikoo'){
    doMagic();
}

Here’s a compact version of above code:

if({apple:1,banana:1,chikoo:1}[fruit]){
    doMagic();
}

This trick works well only if you have a small set of strings to compare.

http://veerasundar.com/blog/2014/09/five-nifty-javascript-tricks/

Posted in JavsScript | Comments Off on 5 nifty JavaScript tricks that you may not know

How to Create a Basic jQuery Plugin

This is one of the best “to the point” jQuery plugin tutorials I have seen.

http://learn.jquery.com/plugins/basic-plugin-creation/

Posted in JavsScript, jQuery | Comments Off on How to Create a Basic jQuery Plugin

8 simple CSS hover effects

Very cool and easy modern CSS effects:

http://www.developerdrive.com/2015/01/8-simple-css-hover-effects/

Posted in CSS3, HTML/CSS | Comments Off on 8 simple CSS hover effects

More form input cleaning – Validating Sanitizing and Escaping User Data

This article is somewhat specific to WordPress, but the principals are universal.

https://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data

Posted in PHP/MySQL, WordPress | Comments Off on More form input cleaning – Validating Sanitizing and Escaping User Data

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

All from css-tricks:

There are times when a really long string of text can overflow the container of a layout.

For example:

URL’s don’t typically have spaces in them, so they are often culprits.
Here’s a big snippet with all the CSS players involved:

.dont-break-out {

/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

}

https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Posted in HTML/CSS, Web Dev | Comments Off on Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

Serious Form Security with PHP from CSS-Tricks

I great PHP article on for security. Besides stripping tags and CAPTCHA type checks, it also using a token matching system and creating a white list, and hack log. 

https://css-tricks.com/serious-form-security/

Posted in PHP/MySQL | Tagged , , , | Comments Off on Serious Form Security with PHP from CSS-Tricks

HTML dev – Android Gmail App sucks

Not exactly sure what this does, but it could help with some spacing issues.

<table style="display: block">
  <tr style="display: block; white-space: nowrap;"><td style="display: inline-block;">
    <img>
  </td><td style="display: inline-block;">
    <img>
  </td></tr>
</table>
Posted in Email Dev | Comments Off on HTML dev – Android Gmail App sucks

6 Practical Examples For Building Parallax Websites

http://tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/

Posted in JavsScript, jQuery, Parallax | Comments Off on 6 Practical Examples For Building Parallax Websites

Angular tutorials

www.fromdev.com/2015/06/angular-js-tutorials-pdf.html

Posted in Angular | Comments Off on Angular tutorials

15 Advanced Security Tips To Make Your WordPress Site Bulletproof

Very important WordPress security tips.

https://www.corephp.com/blog/15-advanced-security-tips-to-make-your-wordpress-site-bulletproof/

Posted in WordPress | Tagged , | Comments Off on 15 Advanced Security Tips To Make Your WordPress Site Bulletproof

ExactTarget AMPscript Base64 Encode

VAR @email, @encodedEmail, @DecodedEmail
SET @email = emailaddr
SET @encodedEmail = Base64Encode(@email)
SET @DecodedEmail = Base64Decode(@encodedEmail)

Email: %%= v(@email) =%%
Encoded Email: %%= v(@encodedEmail) =%%
Decoded Email: %%= v(@DecodedEmail) =%%
Posted in AmpScript, Email Dev, ExactTarget | Tagged , , , , | Comments Off on ExactTarget AMPscript Base64 Encode

I have not personally been able to make this work, but I’ve only tried on one client email, so I’m keeping this code handy for the future.

The text below is taken directly from freshinbox.com. I’m not trying to pretend it’s mine, but I want to save it here in case the blog post goes away.

A Quick Fix

However I noticed some emails such Brookstone were 640px wide yet did not trigger Gmail’s font size changes. After more sleuthing, I found out that if the white-space: nowrap style is applied to text and if increasing the text size would cause the email width to be widened beyond the window width (causing the email to look really bad), that Gmail somehow senses it and backs off on applying the font size change.

After some experimentation I came up with a snippet of code that would prevent Gmail from applying the font size change to your email. If Gmail’s font size change causes your email to look particularly broken, you might want to try putting this code at the bottom of your email above the closing body tag to prevent the font size changes until you get a chance to make design changes.

If your email is 700px or wider, add 5 or 6 more dashes and spaces to prevent Gmail from bumping the fonts on the iPad. If you have a long email, you might consider putting this snippet closer to the top and adding line-height:0px so it minimizes the vertical whitespace.

Update May 8 2015:
Alex Williams (@alexcwilliams) discovered that Google (of all companies) uses a similar snippet but uses non-breaking space (&nbsp;) instead of ‘-’ for their Analytics newsletter, which is an improvement from the one above since it doesn’t require you to mess with font colors:

Explanation:

  • The white-space:nowrap with the dashed line creates a line about 500px across that when bumped up in size will exceed 700px causing the Gmail app to not apply the font change.
  • The display:none style causes non-Gmail clients to hide the block (Gmail ignores display:none). When the email is viewed in say, a non-Gmail mobile client, it won’t affect your responsive layout.
  • The font is set to white so the dashes are not displayed when viewed in Gmail. If you have a different color background, set it to your background color.

As always, after making any changes, test! 🙂

http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails/

Posted in Email Dev | Tagged , , , , | Comments Off on

7 Essential JavaScript Functions

More mad knowledge from David Walsh.

http://davidwalsh.name/essential-javascript-functions

Posted in JavsScript | Tagged , , , , , , , | Comments Off on 7 Essential JavaScript Functions

Link not working when behind a stacked DIV?

You have a div stacked on another div, and the div below has links that aren’t clickable because of the div on top. Even if the div on top has a transparent background.

Try this:

pointer-events: none;
Important note: if the font DIV has links in it, they will not work.

Posted in HTML/CSS, Web Dev | Tagged , , , , | Comments Off on Link not working when behind a stacked DIV?

http://davidwalsh.name/regular-expressions-rest

Great article for the RegExp challenged out there.

Of course it’s by David Walsh.

http://davidwalsh.name/regular-expressions-rest

Posted in Regular Expressions | Comments Off on http://davidwalsh.name/regular-expressions-rest

CSS3 Animations – @keyframes

This post rounds up 10 articles that explain how to use this cool CSS3 feature, each with examples and demos.

http://line25.com/articles/useful-links-for-learning-css-keyframes-animation

Posted in CSS3, HTML/CSS | Comments Off on CSS3 Animations – @keyframes

Email subject lines – special characters

For people who are on PCs using Outlook, that icon with the two beer glasses does not render, but many other icons do. I don’t have a complete list of which ones do and which ones don’t, but I’ve tried most of these, and they seem to work:

http://172.25.200.134/special-characters/

Posted in Email Dev | Comments Off on Email subject lines – special characters

ExactTarget AMPscript – Content Syndication – external content and stuff

What ExactTarget calls “Content syndication” is merely external content pulled into the email. It’s like includes PHP or a “Content Scrape” in Silverpop.

It’s pretty simple, except when it comes to dynamic content in the link itself, or in the external content.
http://help.exacttarget.com/en-US/documentation/exacttarget/content/content_syndication/

Posted in AmpScript, Email Dev, ExactTarget, Uncategorized | Comments Off on ExactTarget AMPscript – Content Syndication – external content and stuff

Embed PHP Code in CSS files

Embed PHP Code in CSS files.

Have you been embedding CSS Styles into PHP files just for the sake of making the styles dynamic?
Ever wished to add PHP codes in CSS files itself.

Here is a simple trick which will do the magic.

Create a .htaccess file in your project directory preferably inside the directory where CSS files are stored. Open .htaccess file and add following line

AddType application/x-httpd-php .css

 

Now you can include php codes in CSS files. Here is a small example

#container {
background: <?php echo $userColour; ?>;
}

www.blog.rahulprasad.com/embed-php-in-css

Posted in PHP/MySQL | Comments Off on Embed PHP Code in CSS files

Find WordPress database info

In the root folder of the site, look for a file called wp-config.php.

Posted in WordPress | Tagged , , , , , , | Comments Off on Find WordPress database info

line break in code adds white space between elements.

line break in code adds white space between elements, specifically inline-block elements. 

One fix is to add display:flex to the parent element. This doesn’t seem to work for Safari.

Another fix is to add font-size: 0 to the parent element. This still didn’t work for Safari.

There’s some very hacky fixes, like adding negative margins, or adding comments.

Posted in HTML/CSS, HTML5 | Comments Off on line break in code adds white space between elements.

Use preventDefault() to stop a link from trying to open URL

This comes into play when using anchor links to trigger JS functions. For example, you might have a link that jumps you to a section of the same page, but the click even also triggers some other functions, like animating the scroll down to a section. 

If you have a link like this: <a href=”#about”>About Us</a>

And you want the page to scroll down to the “About Us” section of the page, you want to disable the link and just have the JS do all the work. If you don’t use “preventDefault” the page will try to go to the link. Sometimes it just causes a quick flash before the JS kicks in, or it will mess with the actually scroll position.

Prevent a link from opening the URL:

$(“a”).click(function(event){
    event.preventDefault();
});
Posted in JavsScript, jQuery | Tagged , , , | Comments Off on Use preventDefault() to stop a link from trying to open URL

Visited link color in HTML emails

I did I very small amount of testing, but I was specifically trying to changed the default visited link color in Outlook 2007. The default color is the awefull purple that used to be all over the place on web pages back in the day.

For some email clients, you can simple put those styles in the <head> just like you would for a web page, but we know some email clients ignore this. Gmail is one of those, but it’s a moot point as they don’t change the link color anyway.

/* unvisited link */
a:link {color: #333;}

/* visited link */
a:visited {color: #6F0;}

/* mouse over link */
a:hover {color: #FF00FF;}

/* selected link */
a:active {color: #6F0;}

This does and did work for me in Outlook 07, but the problem was that it’s global style and not links in my email were the same color and on the same background color. I tried creating a class with specific link styles, but it didn’t seem to work.

One way I found to force the link to stay a certain color is to add the color style to the <a> tag, and then wrap the link text with an <em>. I’m not sure why this works in Outlook 07, but it does.

<a href="http://targetbase.com" style="color: #000000;"><em style="font-style: normal;">Targetbase.com</em></a>
Posted in Email Dev | Tagged , , , | Comments Off on Visited link color in HTML emails

Create a child theme

This info came mostly from 

http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial and some of my own experiences.

Create a new folder for your child theme. /parenttheme-child/ is the convention.

Within your new theme folder, create a file called style.css and fill in the information as outlined below.

/*
 Theme Name:     [Parent theme name] Child Theme
 Theme URI:      http://www.Kick-Ass.com/gallery/[Parent theme folder name]/
 Description:    [Your Child Theme]
 Author:         Kick-Ass Themes
 Author URI:     http://www.Kick-Ass.com
 Template:       [Parent theme folder name]
 Version:        1.0.0
*/
 
@import url("../[Parent theme folder name]/style.css");
 
/* =Theme customization starts here
------------------------------------------------------- */

Posted in WordPress | Comments Off on Create a child theme

Swap columns – change order of DIVs

Here’s the scenario. You have a two column layout. Maybe you have some copy on the left and a hero image on the right. This works great for desktops, and for mobile you want to stack the columns, but it reads better to have the hero image on top with the copy below for mobile.

jQuery to the rescue.

You could just create two separate blocks of content, one for desktop and one for mobile, and just hide/show the content depending screen size, but let’s be efficient and only have the content in one place in our code.

Here’s my HTML.

 <div class="left_col">
Left Column Content
</div>
<div class="right_col">
Right Column content
</div>

Here’s my CSS:

.left_col, .right_col {border:1px solid gray;width:50%;padding:30px;}
.left_col {float:left;}.right_col {float:right;}

/* remove floats, expand & center DIVs for mobile */
@media only screen and (max-width: 800px) { .left_col, .right_col {float:none;width:90%;margin:0 auto;} }

And here’s my JS/jQuery:

function swap_order(div1,div2)
{
if($(window).width() < 800)
{
$(div1).insertAfter(div2);
}
};

swap_order('.left_col','.right_col');// call the function

$(window).resize(function() { // call the function when window is resized
swap_order('.left_col','.right_col');
})
Posted in jQuery | Tagged , , , | Comments Off on Swap columns – change order of DIVs

55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

Good stuff:

http://www.1stwebdesigner.com/53-jquery-tutorials-resources-tips-and-tricks-ultimate-collection/

Posted in jQuery | Comments Off on 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection

40 Resources Every Designer Should Know

Awesome collection of design resources.

40 Resources Every Designer Should Know

 

Posted in Design, Web Dev | Comments Off on 40 Resources Every Designer Should Know

Jquery – click hover animate

$(“.hover”).hover(function(){
$(this).animate({
fontSize:’20px’,
opacity:’0.5′
});
},function(){
$(this).animate({
fontSize:’16px’,
opacity:’1′
});
});

$(“.click”).click(function(){
$(‘.click’).animate({
fontSize:’20px’,
opacity:’0.5′
});
}););

Posted in jQuery | Tagged , , , | Comments Off on Jquery – click hover animate

Replace WordPress logo on login page

You can either replace the image, or edit the CSS.

wp-admin / css / login.min.css

There might be an easier way than this. I spend 5 min doing this, and no research, so there might be a built in function for this. I would understand if there weren’t though.

I commented out the existing lines.

.login h1 a {
/*
background-image: url(../images/w-logo-blue.png?ver=20131202);
background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
*/
background-image: url(../images/myLogo.png);
background-image: none, url(../images/myLogo.png);

Posted in WordPress | Comments Off on Replace WordPress logo on login page

Silverpop adds nbsp after copy in text ruleset

I have a client who has two brands that have a different style guide for each, and one says “e-mail” and the other says “email”.

So, I set up a ruleset to check a field that tells me which brand, and then inserts either “e-mail” or “email”.

Since the data will be pure text, and created the ruleset in the text version, and then just used it in both the HTML and Text. The problem was that the ruleset added a space after the copy (e-mail/email). This wasn’t a big deal in the HTML as it just ignored the extra space, but the text version showed this extra space.

The way I got around it was to create the ruleset in the text version, and then use the ruleset for both HTML and Text. For some reason the HTML version of the ruleset did not add the space.

????

Posted in Email Dev | Tagged , | Comments Off on Silverpop adds nbsp after copy in text ruleset

Logo inspiration

LogoPond.com
http://logopond.com/

LogoFaves.com
http://logofaves.com/

www.awwwards.com/99-creative-logo-designs-for-inspiration.html
http://www.awwwards.com/99-creative-logo-designs-for-inspiration.html

Posted in Logo Inspiration | Comments Off on Logo inspiration

Line height (line-height) issue in Outlook 2010

Line height (line-height) issue in Outlook 2010

Add mso-line-height-rule:exactly just before your line-height declaration.

< td style=“mso-line-height-rule:exactly; line-height:50px;>

This fix ONLY works on block elements. So trying to achieve the same effect inside a font or span tag will not work. Since this is a Microsoft only CSS property, it should not interfere with any other email client.

The above from a post by Geoff Phillips on www.emailonacid.com, 9-12-2013

Posted in Email Dev | Tagged , , | Comments Off on Line height (line-height) issue in Outlook 2010

Email: Weird border showing up around TD on mobile devices

Weird border showing up around TD on mobile devices. It was either a border or a 1px space showing up around table cells. It was only mobile devices. I was seeing it on iPads and my Android phone.

 

The table cells had a background color assigned, as the container table had a different background color. The fix was to eliminate the background color on the table cell, but since the container had a different background color than the color these particular table cells needed, I created a new table just for this section. I stacked It under the existing table.

Posted in Email Dev | Tagged , , , , | Comments Off on Email: Weird border showing up around TD on mobile devices

CSS Even and Odd Rules

STATUS

Warning: at the time of writing (February 2003), the major browsers don’t yet support the ‘nth-child’ selector (introduced in November 2001) and only very few support the COL element.

EVEN AND ODD RULES

One way to improve the readability of large tables is to color alternating rows. For example, the table below has a light gray background for the even rows and white for the odd ones. The rules for that are extremely simple:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Month ’94 ’95 ’96 ’97 ’98 ’99 ’00 ’01 ’02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords ‘even’ and ‘odd’ are just convenient shorthands. For example, for a long list you could do this:

li:nth-child(5n+3) {font-weight: bold}

This says that every 5th list item is bold, starting with the 3rd one. In other words, the items numbered 3, 8, 13, 18, 23, etc., will be bold.

EVEN AND ODD COLUMNS

The same works for table columns, too, but then there has to be an element in the document that corresponds to the column. HTML provides COL for that. The table has to start with one COL for every column:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL can be used for other things than style, but in this case all we need is that the COL elements are present.) The following rules give the first column a yellow background, and then every other column starting from column 3 a gray one:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Month ’94 ’95 ’96 ’97 ’98 ’99 ’00 ’01 ’02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

The background of rows (TR) is drawn in front of the background of columns (COL), so if you want to be sure that the background of the columns is visible, you should not set a background on the rows.

http://www.w3.org/Style/Examples/007/evenodd.en.html

Posted in HTML/CSS | Tagged , , | Comments Off on CSS Even and Odd Rules

Making Custom CSS3 Video Players With HTML5 and Javascript

http://www.inserthtml.com/2013/03/custom-html5-video-player

Posted in HTML5 Video | Comments Off on Making Custom CSS3 Video Players With HTML5 and Javascript

The Command Line Crash Course

Super fast course in using the command line.

http://cli.learncodethehardway.org/book/

Posted in Command Line | Tagged , , | Comments Off on The Command Line Crash Course

ExactTarget AMPscript: Issue with links not working when URL is pulled from data

Here’s the scenario. We had links where the URL was populated from the data. The field was called “URL”, and it contained URLs without the http://.

So, my code looked like this:

<a href="http://%%URL%%">%%URL%%</a>

Pretty straight forward.

Well, the data extension that was used for the email send, would get updated after the blast.  What we found out is the when someone clicks on the link from their email they received, it talks back to the data extension to get that URL. So, if the DE was updated with a different URL, or no URL, the link didn’t work anymore. Not good.

So, ExactTarget suggested using AMPscript to fix this. The fix was using the RedirectTo function. I was instructed to fist assign the URL field to a variable, and then wrap the variable in the RedirectTo function.

My code now looked like this:

%%[ Set @url = URL ]%%

<a href="http://%%=RedirectTo(@url)=%%">%%=v(@url)=%%</a>

This worked, and all was good.

I started another project that also used a URL from the data, and the data was going to be frequently updated, so I used this same approach. But, it didn’t work anymore. This was bad.

The link would not redirect. It would get hung up on the tracking URL and stop there. I called ExactTarget and they opened a case and worked on a fix. After called back a couple of days later, I new fix for the fix was discovered. For some reason, having the http:// hard coded in the HTML was not letting it redirect.

My new, and final code, looked like this:

Set @url = URL
Set @complete_url = Concat("http://",@url) <a href="%%=RedirectTo(@complete_url)=%%"> v(@url)=%%</a>

It was really frustration, but I enjoy working with AMPscript, so every challenge results in learning, and a greater understanding of the code, and the system.

Posted in AmpScript, Email Dev, ExactTarget | Comments Off on ExactTarget AMPscript: Issue with links not working when URL is pulled from data

HTML5 Techniques for Optimizing Mobile Performance

This article discusses the bare minimum of what it takes to create a mobile HTML5 web app.

http://www.html5rocks.com/en/mobile/optimization-and-performance/

Posted in CSS3, JavsScript, Mobile | Comments Off on HTML5 Techniques for Optimizing Mobile Performance

CSS background cover and contain

This will fill the background with the image. Some parts of the image may be hidden

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-image: url(../images/fish.jpg);

This will show all of the background image. Unless the images is the same dimensions of the window, it will not cover the entire bg.

-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-image: url(../images/fish.jpg););

Posted in CSS3, HTML/CSS | Tagged , | Comments Off on CSS background cover and contain

Sidebar Transitions – cool CSS nav transitions

http://tympanus.net/Development/SidebarTransitions/

Posted in CSS3, HTML/CSS, HTML5 | Comments Off on Sidebar Transitions – cool CSS nav transitions

Another great Litmus article: Using HTML5 and CSS3 in Email

Using HTML5 and CSS3 in Email

https://litmus.com/blog/a-bulletproof-guide-to-using-html5-and-css3-in-email?utm_campaign=bestpractices_HTML5CSS3?utm_source=twitter&utm_medium=social

Posted in Email Dev | Comments Off on Another great Litmus article: Using HTML5 and CSS3 in Email

Another Outlook 07, 13 hack. Sheesshhh – no comments in hidden mobile content

For responsive, progressive, expansive, explosive emails, you sometimes have mobile only content that you want to hide for desktop email clients.

For most reasonable email clients, you can add some inline styles to hide the content.

width:0;display:none;visibility:hidden, etc. etc.

This usually works, but for Outlook 2007 and 2013 you have to wrap the content in some stupid proprietary conditional comment BS. 

But, withing that hidden content, DO NOT INCLUDE ANY HTML COMMENTS. If you add comments withing the hidden block, Outlook thinks you’re closing the conditional comment, and it will show the content after the comment.

<!--[if !mso 9]><!-->
<div style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">

Some mobile content

Do not include any HTML comment here.

<!-- Here is a comment -->

This content will show in Outlook 07 and 13 even though it is withing the conditional comment block that should hide it.
</div>
<!--<![endif]-->
Posted in Email Dev | Comments Off on Another Outlook 07, 13 hack. Sheesshhh – no comments in hidden mobile content

Hardware-Accelerated CSS

Great article on hardware acceleration and mobile web apps.

http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Posted in HTML/CSS, HTML5, Mobile | Comments Off on Hardware-Accelerated CSS

10 JQUERY SNIPPETS EVERY DESIGNER SHOULD KNOW

Pretty simple usable scripts. I’ve used a a few of these many times over and over (animate scroll, make two divs the same height, zebra stripe rows, etc.)

http://www.webdesignerdepot.com/2014/01/10-jquery-snippets-every-designer-should-know/

Posted in jQuery | Tagged , | Comments Off on 10 JQUERY SNIPPETS EVERY DESIGNER SHOULD KNOW

git – the simple guide

http://rogerdudler.github.io/git-guide/

Posted in Web Dev | Comments Off on git – the simple guide

Stop WP from adding

tags and other stuff

Add this to template page:

<?php remove_filter (‘the_content’, ‘wpautop’); ?>

Posted in Uncategorized, WordPress | Comments Off on Stop WP from adding

tags and other stuff

Mobile email development – hide TR as well as TD when hiding mobile content for desktop

When hiding mobile only content from desktop email clients, you need to use a rediculous list of styles to account for many of the email clients shotty CSS support.

border:0;
width:0;
overflow:hidden;
float:left;display:none;
max-height:0px;
visibility:hidden;

Not only that, you should wrap the content in IE conditional comments like so:
<!–[if !mso 9]><!–> ………… <!–<![endif]–>

This is because some versions of outlook ignore the CSS when you forward the email.

But, keep in mind that when you use tables and want to hide a <TD>, you add all the crazy CSS to it, but also add this to the <TR>, as in some email clients it still has a small gap when the <TR> is placed. 

Posted in Email Dev | Comments Off on Mobile email development – hide TR as well as TD when hiding mobile content for desktop