Monthly Archives: 2013-4

Debug SMTP server one-liner

Posted on by
10

If you are doing web development there is often need to emulate and intercept outgoing email. Email delivery is handled by SMTP protocol. Production and staging server have fixed SMTP servers available in their network. However, this is not often the case for your development laptop, especially if you tend to do development in different networks (places).

Python comes with simple smtpd module which allows you to run a simple SMTP server easily. When doing email debugging, smtpd has extreme useful DebuggingServer feature making it dump all relayed email to stdout instead of relaying them forward for email delivery. This approach is compatible on all platforms: Windows, OSX and Linux.

Non-root way to run debugging SMTP server. You need to change the SMTP server details in your application settings to localhost:1025:

python -m smtpd -n -c DebuggingServer localhost:1025

If you want to bind SMTP port 25 you need to run this as a root:

sudo python -m smtpd -n -c DebuggingServer localhost:25

Now, when your application sends email it is printed to terminal running debugging smtpd:

---------- MESSAGE FOLLOWS ----------
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Subject: [example.com] Confirm your email
From: test@example.com
To: mikko@example.com
Date: Fri, 26 Apr 2013 07:20:34 -0000
Message-ID: <20130426072034.83439.2762@Kohr-Ah.local>
X-Peer: 127.0.0.1

Test output from smtpd
------------ END MESSAGE ------------

Alternative you can go for a full stack solution and install Postfix with external authenticating mail server.

 

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Charming social media icons with Font Awesome and CSS3

Posted on by
5

In this blog post I’ll show you how to create and style social media icons (Facebook, Twitter, Google Plus, etc.) easily for your site using Font Awesome font icons.

Font Awesome provides an iconset as a TrueType font, meaning that you can render and manipulate icons as you would manipulate text with CSS. Each letter corresponds one icon – think Microsoft Windows Wingdings fonts. Icon set is large and the theme is webby, so you’ll find an icon for all your website needs.

Font Awesome goes down well with popular Twitter Bootstrap CSS & JS library as it has  compatible HTML5 markup and icon naming conventions, though it can be used separately too.

Screen Shot 2013-04-22 at 9.53.26 PM

Update: heard that there is might be an issue with Microsoft Windows and Google Chrome to render these icons. I am seeing if there is a workaround for that and what triggers the condition. Font Awesome has subpixel hinting and should be pixel perfect at 14 px. I’ll post more info when I have time to further take a look on this issue.

1. Why to use it?

Approach presented here is simply superior to any other approach.

Pros

  • Colors can be adjusted with CSS3, with gradients and all that bling bling
  • Scalable graphics
  • High DPI (“retina”) compatible
  • Simple HTML markup: just <i class=”icon icon-foo”></i>. No CSS sprite preprocessing or other workflow complications needed.
  • Can be animated with CSS3 transitions
  • Easily match the link text color for monotone icons
  • FontAwesome can be served from CDN – no need to drop any files on your hosting as bootstrapcdn.com content delivery network hosts the files for you
  • Works with legacy browsers (IE7+)

Cons

  • These icons might not be exactly in the line with the brand guidelines of the service. But these guidelines are mostly guidelining, feel free to ignore them like the other 100000+ websites out there do.
  • Pixel pushing artists become sad
  • Does not work outside browser context: email, RSS

2. Example

Below you see a live <iframe> example. The example tries to be straightforward: you could further make icons look better by e.g. fine-tuning border style and using gradients instead of plain color backgrounds.

See source code on Github.

Source code: HTML (for the latest version please see Github)

  <!doctype html>
  <html>

    <head>

        <!-- Load Bootstrap and FontAwesome CDN'ed from bootstrapcdn.com -->
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />

        <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />

        <link href="style.css" rel="stylesheet" />

    </head>
    <body>

        <div class= "container">

            <h1><i></i>FontAwesome and CSS social icons example<i></i></h1>

            <p>Social media icons created FontAwesome and styled with CSS3. Example is 100% image free, scalable and high DPI compatible.</p>

            <div id="social-bar">
                <a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
                    <i></i>
                    <span>Facebook</span>
                </a>
                <a href="https://twitter.com/moo9000">
                    <i></i>
                    <span>Twitter</span>
                </a>
                <a href="https://plus.google.com/103323677227728078543/">
                    <i></i>
                    <span>Google Plus</span>
                </a>
                <a href="http://opensourcehacker.com/">
                    <i></i>
                    <span>Blog</span>
                </a>
            </div>

        </div>

        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

    </body>
</html>

Source code: CSS (for the latest version please see Github)

.container {
    width: 620px;
}

h1 {
    font-size: 25px;
}

h1 .icon:first-child {
    margin-right: 0.5em;
}

h1 .icon:last-child {
    margin-left: 0.5em;
}

/* Create square icons, white logo on colored background */

#social-bar .icon {
    color: white;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    min-width: 27px;
    line-height: 27px;
    text-align: center;
}

#social-bar a {
    margin-right: 5px;
    padding: 5px; /* Increase hit rectangle for touch devices */
}

#social-bar a:first-child {
    padding-left: 0;
}

/* Set icon color related to the service */

#social-bar a span {
    margin-left: 5px;
}

#social-bar .icon-rss {
    background: #e5842f;
}

#social-bar .icon-facebook {
    background: #3B5998;
}

#social-bar .icon-twitter {
    background: #00ACED;
}

#social-bar .icon-google-plus {
    background: #E14107;
}

/* Don't underline icon etc. */
#social-bar a:hover {
    text-decoration: none;
}

#social-bar a:hover span {
    text-decoration: underline;
    color: #333333; /* Match icon highlight color */
}

/* Animate mouse hover */
#social-bar a .icon {
   transition: background 0.5s;
}

#social-bar a:hover .icon {
    background: #333333;
    transition: background 0.5s;
}

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+