Tuesday, September 3, 2013

Sending email from your app

Let’s say that your app needs to have the ability to send an email, “New order has arrived” kind of email.
Let me introduce you “Fluent Email” – a nice library for making your life easy when sending emails for your app.
Fluent Email is available in the nearest nugget server so go ahead and install this package.
Before we send the email we need to configure our email smpt server in our configuration file:
  <system.net>
  <mailSettings>
    <smtp>
      <network enableSsl="true" host="smtp.gmail.com" port="587" userName="nerush.dennis@gmail.com" password="*****" defaultCredentials="false" />
    </smtp>
  </mailSettings>
  </system.net>
All the above values are different when using different smpt servers. If you want gmail to be your email server then you have to specify the port as 587 and set enableSsl to true.

The API

Email.From (myEmail)
     .To(sendToEmail)
     .Subject("New order has arrived!")
     .Body("The order details are…")  
     .Send();

Pretty straight forward.

If you are not willing to wait until the email is being sent you can use the Sendsync method:
Email.From (myEmail)
     .To(sendToEmail)
     .Subject("New order has arrived!")
     .Body("The order details are…")  
     .Sendsync(MailDeliveredCallback);
  
You can specify the “from” email value in the config file:
<system.net>
  <mailSettings>
    <smtp from=”Nerush.dennis@gmail.com”>

And then you can use the “FromDefault” method:
Email.FromDefault()
     .To(sendToEmail)
     .Subject("New order has arrived!")
     .Body("The order details are…")  
     .Send();

Templates

Another cool feature is the templates. Let’s say that you want to send a nice email to your users which has not only simple text but a table, a picture and some more stuff. You can create an HTML template and use it for your mail:

Template.cshtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body dir="rtl">
    <h1>New user has signed in for the website!</h1>
    <p>New user’s name:<b>@Model.Name</b>
        <br/>
        The new user email: <b>@Model.Email</b>
        <br/>
        <u>
The message text:
        </u>
        @Model.Text
    </p>
    <br/>
    <p>Have a great day!</p>
</body>
</html>

Notice the @Model? Those are parameters that you can pass for the template from the API:

Email.FromDefault()
     .To(sendToEmail)
     .Subject("New user has signed in!")
     .UsingTemplate(tempalte, new {Name = message.Name,
       Email = message.Email,
       Text = message.Text})

     .Send();

Culture support

In the last commits of the project Eyal Luxenburg added another cool feature for the library – the ability to use a template based on the current culture. The method is called – UsingCultureTemplateFromFile. This is the methods signature:
UsingCultureTemplateFromFile<T>(string filename, T model, CultureInfo culture = null, bool isHtml = true)

If you specify a culture it will try to load the template file which has the matching culture extension (same way as with the resource files). Specifying the He-IL culture will force fluent email to look for a template file that has the culture extension: template.he-IL.cshtml. This way you can create email templates for all the languages that your app supports.

Email.FromDefault()
     .To(sendToEmail)
     .Subject("See you in the next post")
           .UsingCultureTemplateFromFile(template, emailModel, hebrewCulture)
     .Send();





Wednesday, April 24, 2013

HTML 5 – full guide: What is HTML 5?


I want to focus on the new stuff that most of you are not familiar with so the intro will be pretty short.

HTML5 is the latest version of that markup language which includes new features and improvements to existing ones. It’s been designed to run on any platform (as long as the browser supports it), it’s compatible with older browsers and no IE 6 is not old – it’s ancient!
The purpose of this upgrade is to redefine existing markup elements and create new ones to allow the web designers build clean and clear markups and use common functionalities instead of rewriting them over and over again. Furthermore HTML5 allows to add audio and video elements the same way you add an image (using the <img> tag), it enables advanced drawing capabilities using the <canvas> tag and many more.

Page structure

 
 This is the old html page structure.












This is the new html5 page structure.

Look at the <DOCTYPE> tag. This tag simply tells the browser what kind of document this is. The old version also tells what HTML version the document is using.
HTML5 <DOCTYPE> simply tells the browser that the document is an HTML file even without mentioning the version because the browsers are supposed to support all HTML versions.  It’s not  a huge change but that’s what HTML5 is all about – making the page cleaner and clear as much as possible.







The script tag reminds me the “var” keyword in C#. No more redundant declaration like “type=javascript”, just open the <script> tag and add the source of the script. The browser will parse the section and treat it as javascript based on the script file included. The <style> tag acts the same.

New elements

So far for the intro. From now on I’ll be reviewing the new and improved HTML5 markup elements. In this post I’ll review the header, footer, nav and aside tags.
Why did the creators of HTML5 choose these elements? Before building the new markups the creators searched the web to find the elements that are most commonly used. They searched the id and the class attributes (<div id=”header”/class=”footer”) and here are the results.


Header

The first of the new elements is the header element which represents the header of our page (where the logo goes), however header is not restricted to appear just once in a page – it can represent any header of content inside the page.
How do you know when to use it? Every time you’ve used <div id=”header”> or when you have content that can be considered as a header.



The header of the youtube page

Footer

The footer element is the section that is usually the end of some content like share buttons, copyrights and etc. Same as header the footer element can appear more than once in a single page.











This is a part of a youtube page. The views count and the date is the footer of the video content but not the end of the whole page.

Nav

The nav element represents a group of navigation links like a menu.
It’s not recommended to use nav on every group of links like the links in the copyright section (footer?) or group of links like the facebook chat friends. Only links that are responsible for navigation inside your application should be wrapped with the nav element.



Facebook menu – group of navigation links

Aside

The aside element is a part of the page that is separated of the main content. Its content can stand on its own in every page but has to be part of a bigger content. Same as all the other elements that I’ve mentioned before, the aside doesn’t have any styling functions – it can be “on the side” of the page, under the header or even above it like a banner on the very top of the page.











The “popular on youtube” is not the main content of the page, it’s a group of links (nav?) that is perfect on the side of the page.

All the elements I've covered so far don't add new functionalists, using them only makes your web pages cleaner and more readable for other developers (one day someone else will have to maintain your application) by creating meaningful separation of your content.

That’s it for the stuff that most of you know. In my next post I’ll show you the less known elements like the article, section, mark, meter, time and progress elements. 

Sunday, April 21, 2013

HTML 5 – The full guide


I’m currently reading a really good book  – “HTML 5 and CSS 3 for the real world” by Alexis Goldstein, Louis Lazaris & Estelle Weyl.

This book covers all the new elements that HTML 5 brings with it. Reading it made me realize how little I actually knew about the topic and frankly it’s not surprising since there’s a lot to know.
In the next posts I’ll introduce all the new elements, their usages, supported browsers and best practices based on the mentioned book and different articles.

Stay tuned.

Thursday, April 11, 2013

Things to check when you are buying a new laptop

I'm not talking about checking the RAM and that kind of stuff.
Check the KEYBOARD!!!

No one will write in the specs section "The laptop's keyboard is missing the enter key". Well my new laptop does have the enter key however it's missing the Home, End, Page Down, Page Up buttons! They are combined with the arrow keys and the func button - not cool!
The enter button is not missing but it's really small.
The break button is missing.
The worst part is that the mouse's right click button (the one near the left ctrl button) is missing!!! 














Check your KEYBOARD!!!