• Go DevMENTAL

    Windows 8 Certification Tips: The privacy statement

    • 7 Comments

    Windows StoreOne of the most common reasons Windows 8 apps fail certification is lack of a privacy statement, this blog explains when you need one and gives tips on how to do it.

    With the Developer Movement rewarding you for publishing your apps, you are probably all psyched to submit your app to the store. Here’s a little something to help you pass certification on the first try.

    Do I need a privacy policy for my app?

    Windows 8 Certification requirement 4.1.1 states

    “Your app must have a privacy policy if it collects personal information”

    Now most of us building apps read that and think, hey I’m not collecting anyone’s email address or phone numbers with my app so I don’t need a privacy statement. Then you submit your app for certification and it fails! Why?

    Personal information includes: Webcam snaps, Audio/Video recordings, Photos, Documents, Contacts, and so on. So if you are using the webcam to take pictures or creating a document that access contact information or users files you need a privacy statement.

    Personal information also includes: IP Addresses. That means if your app has the ‘internet client’ capability enabled in your app you are going to need a privacy statement. By the way, the default templates in Visual Studio include the ‘internet client’ capability, so unless you change the default manifest, you will need a privacy statement.

    What do I put in a privacy policy?

    According to Windows 8 certification requirement 4.1.1

    “In general, an acceptable privacy policy is one that:

    • Informs users of the information collected by your app
    • Informs users how that information is used, stored, secured and disclosed
    • Describes the controls that users have over the use and sharing of their information
    • Describes how they may access their information
    • Complies with applicable laws and regulations

    We do not provide a sample or a template for a privacy policy beyond that. Since the privacy policy is a document between you and the users of your app, you will have to write it and publish it on a website yourself.

    If you do not actually collect or store personal info from the users, say so in your privacy policy”

    Where do I have to put this privacy policy?

    You must provide the privacy policy (or a link to it) in the description page of the submission site and in your settings. Here’s a great post from Tim Heuer telling you how you can use a free Azure website to host your privacy policy!

    Where can I find some examples?

    Take a glance at the Windows 8 store and look at the description pages of some published apps. You can also go to the settings page of any installed apps you may have. If your app doesn’t collect personal information, you can probably write it yourself making it clear that you do not collect personal information. If your app does collect personal information you need to do your homework and find out the appropriate legal wording for your privacy policy.

    CTE Solutions is an app created by a training centre to help people find courses.

    “This application does not collect or share any personal information. Your IP address (and related data provided by the operating system when making a web request) may be logged by the Internet-based servers (controlled by CTE Solutions) that provide the data used by the application.”

    The Microsoft game Wordament which has you log in with a userid to play the game and posts high scores uses the Microsoft Online Privacy notice found here.

    PuzzleTouch Prime which is a jigsaw puzzle game that allows you to create puzzles from your own photos uses the privacy policy here

    Can I have a code example for adding it to settings?

    Sure, we all live for cut and paste. I found a nice C# example of how to add a privacy policy to your settings in a blog post at Expression Blend.com.

    This was helpful do you have more useful stuff for Windows 8 app developers?

    We have a windows 8 resources page where we continue to add content and blogs we think can help you here.

  • Go DevMENTAL

    Visual Studio Tips for HTML web or windows developers: ZenCoding

    • 3 Comments

    cadhtml5coaWhether its for HTML websites or Windows 8 apps, there are some nice features hidden in Visual Studio for HTML developers! Check out Zen Coding in Visual Studio 2012!

    If you do a lot of HTML and haven’t discovered Zen Coding, read on! If you already know ZenCoding and all you want to know is how do I get this in Visual Studio because you know and love it. Just go to vswebessentials.com, download web essentials and off you go.

    What is Zen Coding?

    Zen Coding is a series of shortcuts that will generate HTML code for you and save you a lot of typing. It’s actually open source and you can find the code on GitHub if you are interested. But all you really need to do is install vs web essentials and try it yourself! The rest of this blog shows you some great zen coding examples to save you time.

    Ideally you have Visual Studio open right now so you can install vs web essentials and try these examples out on an HTML page as your go through the post.

    Let’s start with something simple. Type

    div

    now hit the <Tab> key and you get

     <div></div>

    Nice eh? It always slows me down to type all the opening and closing tags.

    Okay now try this followed by the <Tab> key

    ul>li

    You get

            <ul>
                <li></li>
            </ul>

    Starting to see the potential? Imagine you wanted to build a table…

    table>tr>td

    becomes

      <table>
                <tr>
                    <td></td>
                </tr>
       </table>

    But wait, it gets better… because you can specify multiples, try this

    table>tr*5>td*3

    Now you get a table definition for 5 rows with 3 columns

        <table>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr><tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>

    You can even insert Lorem Ipsum text

    ul>li*5>lorem

    Becomes

    <ul>
             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit nisl </li>
             <li>Tincidunt integer eu augue augue nunc elit dolor,aliquam sit amet justo nunc tempor, metus vel.</li>
             <li>Placerat suscipit, orci nisl iaculis eros,metus a risus iaculis scelerisque eu ac ante.</li>
             <li>Fusce non varius purus aenean nec posuere, sollicitudin interdum turpis nunc eget.</li>
             <li>Sem nulla eu ultricies orci praesent id augue nec at mattis purus dignissim fringilla.</li>
    </ul>

    How about adding ids and attributes? “#” creates an id attribute, “.” creates a class attribute, so

    div#contentRegion.address

    becomes

     <div id="contentRegion" class="address"></div>

    There’s more, but rather than repeat it all here, I’ll refer you to a great blog post and examples courtesy of John Papa here. Zen coding allows you to create repetitive HTML code very quickly and efficiently and with vswebessentials you can do it with Visual Studio! 

    Don’t forget as a student, you shouldn’t settle for Express versions of software, you can get the same software the professionals use. Download Visual Studio Professional today for free at DreamSpark your one stop shop for software!

  • Go DevMENTAL

    Internationaliser son application Windows Phone – Pourquoi et Comment ?

    • 0 Comments

    Christian HissibiniDéveloppeur Windows Phone Christian Hissibini (Histech Solutions) partage comment il a crée des applications Windows Phone pour un public international.

    Cet post est aussi disponible en anglais/This post is also available in English

    Note de Susan: Au Canada, dans le cadre du Mouvement des développeurs, amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!

    Assez avec les notes de Susan, vas-y Christian

    Généralement, quand on se lance dans un projet de création d’application, que l’on parte d’une idée de génie ou d’une idée complètement loufoque, on espère secrètement que celle-ci devienne « The Next Big Thing » :)

    Objectif de Mission : « The Next Big Thing »

    Il s’agit ici de séduire le maximum d’utilisateurs… A ce propos, la plateforme Windows Phone nous offre la possibilité de rendre notre application disponible dans le monde entier ou de ne la restreindre qu’à certains pays.

    Mais pour garantir un taux de téléchargements et d’adoptions efficients, l’application se doit d’être conviviale et cela passe par la considération du public visé, de la culture, de la zone géographique et de la langue d’interface; d’où la pratique de l’internationalisation.

    C’est quoi Internationaliser une application ?

    Vous l’avez sans doute déjà deviné, internationaliser une application c’est l’adapter à d’autres langues, marchés, cultures et régions.
    Ici deux notions sont essentielles : Globalisation et Localisation.

    La Globalisation permet à l’application, pendant son fonctionnement, de considérer les paramètres de culture de l’utilisateur (format d’affichage de date, monnaie, etc.).

    La Localisation quant à elle permet à l’application de considérer la langue et les paramètres régionaux de l’utilisateur. Elle consiste entre autre à la traduction de texte, au choix de police (fonte), au sens de lecture, au choix des visuels adéquats, etc.

    Maintenant que nous avons meilleure connaissance du sujet, rappelons quelques avantages de l’internationalisation, histoire d’encourager les plus sceptiques.

    Quels sont les avantages de l’internationalisation ?

    • L’expérience utilisateur est de loin meilleure.
    • Elle permet de toucher un public plus important (on parle ici du monde entier).
    • On récolte forcément beaucoup plus de téléchargements.
    • Le taux d’adoption de l’application est beaucoup plus élevé.
    • Etc.

    Bref tout tourne autour de l’argument « The Next Big Thing » :). Tout ceci a forcément un impact positif sur les ventes dans les différents marchés et génère plus de trafic au sein de l’application.

    Convaincu ? Allons donc voir comment préparer notre application pour qu’elle soit prête pour la conquête du monde. J

    Comment préparer son application pour le marché international ?

    Intégrer la logique de l’internationalisation dès la phase de conception est très avantageux, mais même si vous partez d’un projet existant, soyez sans crainte car grâce à l’infrastructure .NET, l’intégration est super simple à mettre en œuvre. La globalisation et à la localisation deviennent vite un jeu d’enfant.

    1 – Globalisation d’une application Windows phone

    Comme nous l’avons dit tantôt, la globalisation permet à l’utilisateur de retrouver un environnement culturel qui lui est familier.
    Pour ce faire, nous avons recours à la classe CultureInfo. Celle-ci contient déjà les langues adéquates et les codes de pays. Par exemple, en-US pour anglais-Etats Unis ou fr-CA pour français-Canada (qui est différent de fr-FR pour français-France). L’instance est prête à être utilisée pour tous le formatage de chaînes locales (devise, date et heure).

    Exemple : Modification de la culture courante grâce à CultureInfo

    String cul; 
    
    cul = "fr-CA";
    
    CultureInfo newCulture = new CultureInfo(cul); 
    
    Thread.CurrentThread.CurrentCulture = newCulture;
    
    Thread.CurrentThread.CurrentUICulture = newCulture;
    

    Le site Web de MSDN propose dans sa documentation un tutoriel intitulé “How to build a globalized app for Windows Phone”.
    Vous y retrouverez les différents usages dont on a recourt dans la globalisation d’une application et aussi, un exemple d’application globalisée est disponible en téléchargement.

    2 – Localisation d’une application Windows Phone

    Note : Dans ce contexte, localisation signifie adaptation à un groupe linguistique... Donc, aucun lien avec le positionnement GPS...

    Ici aussi la plateforme nous simplifie les choses, car lorsque nous créons un nouveau projet Windows Phone, un dossier de ressources (Resources) est automatiquement ajouté à la solution. Ce dossier contient un fichier appelé AppResources.resx. Ce fichier contient les chaînes traduisibles.

    clip_image001

    Normalement, lorsqu’on clique sur ce fichier, un éditeur de ressources s’ouvre.

    clip_image002

    Comme nous le constatons, par défaut, ce fichier intègre des entrées telles que ResourceLanguage (qui représente la langue par défaut), ResourceFlowDirection (qui détermine le sens directionnel pour la lecture).

    Comment ajouter une nouvelle entrée au fichier de ressources ?

    Pour ajouter une nouvelle entrée, il suffit de cliquer sur une nouvelle ligne et ajouter le nom et la valeur. Il n’y a pas plus simple non!? J

    Bon, une petite illustration ne fera que grand bien

    clip_image004

    A présent que nous savons ajouter de nouvelles entrées dans le fichier de ressources, voyons comment faire pour que notre code vienne lire ces entrées.

    Comment lier le code aux entrées du fichier de ressources ?

    Cette liaison se fait aisément au niveau du XAML.

    En effet, il suffit de remplacer le texte codé en dur entre les guillemets des attributs par le nom attribué à la ressource correspondante.

    Un exemple vaut mieux qu’un long discours :

    Supposons que nous voulons intégrer cette citation « If you lie to the compiler, it will get its revenge. » de Henry Spencer qui devra être traduite plus tard.

    Sans localisation nous avons :

    <TextBlock Text="Si on ment à un compilateur, il prendra sa revanche." 
    Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

    - Avec localisation ça devient :

    <TextBlock Text="{Binding Path=LocalizedResources.CitationHenry, Source={StaticResource LocalizedStrings}}" 
    Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

    Dans cette dernière partie, nous avons fait savoir au TextBlock qu’il recevra sa valeur à partir de la ressource nommée CitationHenry, présente dans le fichier AppResources.resx

    Une nouvelle ligne devra donc être obligatoirement ajoutée au fichier de ressources

    clip_image006

    Les moins aveugles d’entre nous ont surement constaté que dans les commentaires générés initialement avec le fichier MainPage.xaml de notre solution, il existe une remarque concernant la localisation.

    <!-- REMARQUE CONCERNANT LA LOCALISATION :
    
    Pour localiser les chaînes affichées, copiez leurs valeurs dans les clés correctes
    
    du fichier de ressources linguistiquement neutre de l'application (AppResources.resx), puis
    
    remplacez le texte codé en dur entre les guillemets des attributs
    
    par la clause de liaison dont le chemin pointe vers ce nom de chaîne.
    
    Par exemple :
    
    Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
    
    Cette liaison pointe vers la ressource de chaîne du modèle appelée ApplicationTitle.
    
    L'ajout de langues prises en charge à l'onglet Propriétés du projet crée un
    
    fichier resx par langue qui peut restituer les valeurs traduites de vos
    
    chaînes d'interface utilisateur. La liaison dans ces exemples peut entraîner le retrait de la valeur des
    
    attributs du fichier .resx qui correspond à la valeur
    
    CurrentUICulture de l'application au moment de l'exécution.
    
    -->
    

    Comme quoi il est important de considérer les petits commentaires verts qui se retrouvent dans les fichiers générés automatiquement lors de la création d’un nouveau projet :)

    Dans l’exemple précédent, nous avons vu comment localiser du texte, mais alors qu’en est-il des images ?

    Localisation des images

    Dans la pratique, localiser une image a le même principe que localiser du texte. En fait, il suffit juste de mettre son URI en ressource comme suit :

    <Image Source="{Binding Path=LocalizedResources.ImageURI, Source={StaticResource LocalizedStrings}}"/>

    A présent que nous avons quelques notions sur la localisation des applications, il est temps de voir comment la rendre accessible au plus grand nombre et comme vous vous en doutiez bien, cela passe par la prise en charge multilingue.

    Comment ajouter de nouvelles langues à son application ?

    Ajouter une ou plusieurs nouvelles langues à son application revient à joindre des fichiers de ressources additionnels.

    A ma connaissance, il existe 2 méthodes :

    Méthode 1 : Manuelle


    Pour ce faire, il suffit d’ouvrir les propriétés de notre projet en effectuant un double-clic sur « Properties », ensuite à cocher les langues correspondantes dans le box « cultures prises en charge » et enfin à générer.
    Une fois les fichiers AppResources créés, il faudra juste les renseigner à l’aide des valeurs correspondantes.

    clip_image008

    Méthode 2 : A l’aide du kit de ressources pour application multilingue (Multilingual App Toolkit)

    Cette méthode est ma préférée :) Vous verrez pourquoi…

    Nous devons d’abord télécharger et installer le kit de ressources pour application multilingue. Qui en fait est une extension pour Visual Studio qui vient simplifier tout le processus de traduction.

    Dans la page de téléchargement, je vous conseille de choisir la version française.

    Une fois l’installation complétée, dans le menu de Visual Studio, sélectionnez Outils puis cliquez sur Activer le kit de ressources pour application multilingue.

    Dans l’explorateur de solution, faites un clic droit sur le fichier du projet et sélectionnez Ajouter des langues de traduction.

    Une fois la fenêtre ouverte, sélectionnez la langue désirée. Dans notre exemple allons commencer par offrir le rêve américain à notre application en choisissant Anglais (États-Unis) [en-US]

    clip_image009

    Après avoir cliqué sur le bouton OK, les fichiers ressources en anglais sont automatiquement générés.

    clip_image010

    Si vous cliquez sur ce nouveau fichier de ressources, vous remarquerez que toutes les entrées de votre premier fichier AppResources s’y retrouvent, mais sans aucune traduction.
    A ce niveau, nous avons le choix soit de traduire manuellement chaque entrée ou de passer par l’outil de traduction automatique fourni par le kit de ressources.

    clip_image011

    Il faut noter que la traduction n’est pas souvent parfaite, donc la faire vérifier serait fort utile et ça nous évitera aussi de tomber dans la confusion ou même de déclencher un scandale international J

    A présent que nous avons intégré une nouvelle langue à notre projet, il est temps de tester afin de pouvoir pousser un hourra de joie J

    Comment effectuer des tests ?

    On commence par générer notre solution.
    Ensuite on lance l’application sur l’émulateur (ou notre appareil).
    Enfin dans l’émulateur sélectionner Paramètres à Ensuite langue + région à Modifier la langue du téléphone en anglais (ou toute autre langue choisie pendant la localisation) puis cliquer (ou appuyer) sur Redémarrer le téléphone

    On relance l’application sur l’émulateur (ou notre appareil) et puis quoi ??? On vient de franchir un cap vers la conquête du monde !!! Souvenez-vous de l’objectif de notre mission : The Next Big Thing !!!

    Nous ne pouvons clore cette partie sans citer quelques bonnes pratiques qui nous aideront à réussir efficacement nos localisations.

    Bonnes pratiques pour la localisation

    • Séparer les ressources du code (permet de rendre le code indépendant de la langue et ainsi de supporter des encodages différents…).
    • Ne pas abuser de la localisation (Par exemple, on n’a pas besoin de localiser des balises…)
    • Prévoir des longueurs de chaîne plus grandes (la traduction d’un mot peut être plus longue…)
    • Localiser les phrases au lieu des mots séparément. (Aide à préserver le sens des phrases après traduction…)
    • S’assurer de lister les paramètres dans le bon ordre.
    • Utiliser des attributs uniques pour identifier les ressources
    • Choisir une approche appropriée de traduction.

    Pour plus de détails concernant ces bonnes pratiques, je vous invite à consulter la documentation de MSDN, à la section intitulée « Localization best practices for Windows Phone »

    Pour aller plus loin…

    Voici un rappel de la liste de ressources en ligne qui m’ont été utiles dans la pratique et aussi dans la rédaction de cet article. Elles vous aideront à aller plus loin sur le sujet :

    Conclusion

    Nous avons vu que l’internationalisation des applications Windows Phone comporte de gros avantages et, aussi qu’il est important d’intégrer cette logique dès la phase de conception et enfin, que sa mise en œuvre, à travers la globalisation et la localisation, est aussi simple qu’un jeu d’enfant.
    Si un aspect évoqué dans cet article ne vous semble pas assez clair, n’hésitez pas à poser vos questions.

    Bonne continuation vers «The Next Big Thing » :)

    P.S. N’oubliez pas, cette année au Canada, dans le cadre du Mouvement des développeurs, vous apprendrez sous la tutelle du Sensei du code et maîtriserez l’art de coder! Amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!

  • Go DevMENTAL

    How can a student in Canada get Windows 8 RTM and Visual Studio 2012?

    • 0 Comments

    Windows 8 Start ScreenHow can students in Canada get their hands on Windows 8 RTM and Visual Studio 2012 so they can start building cool apps?

    On August 1st the Windows team announced they had completed the release to manufacturing (RTM) of Windows 8. The blog announced that developers could download the final version on August 15th with an MSDN subscription. But what about students on Dreamspark? Well students at schools who have subscriptions to Dreamspark premium are in luck, as of August 25th they can start downloading Windows 8 as well!

    If you haven’t explored the joys of Dreamspark yet, let me get you started so you can download Windows 8 and more!

    • How do I log into Dreamspark?
    • How do I download the software?
    • What if I don’t have Dreamspark Premium?

    How do I log into Dreamspark?

    If you have Dreamspark premium your school will have some sort of portal where you can login, for example, these are the portals for Concordia and Carleton University.

    Tip: I found these by doing a Bing search for “Dreamspark”,  “MSDN”  and the university names. MSDN AA or MSDN Academic Alliance is the former name of Dreamspark Premium

    imageimage

    Somewhere on your school portal you will find a link to login or to go to the Software Library. You will be prompted for a username and password. This will be your university email and password. Do not include the domain name in the email (e.g. for SusanIbach@Carleton.ca my username would be SusanIbach.

    How do I download the software?

    After you log in you’ll be redirected to the Dreamspark webstore. Where you will see a list of all the cool software you can download.

    image

     

    If you want to develop Windows 8 apps, you will want Microsoft Windows 8 and Microsoft Visual Studio 2012, but go ahead and explore some of the other choices, this is a fun place to explore and try all sorts of great tools like Expression Studio for doing User Interface design, Visio to do your flowcharts and UML diagrams, or SQL Server so you can become a database guru!

    To get up and running with Windows 8, just select Windows 8 and you’ll be brought to a screen where you can choose whether you want the 32-bit or 64-bit versions, you can also choose whether you want the French or English edition.

    image

    Select Add to Cart for the version of the software you prefer, and then you go to the checkout

    image

    When you choose Check Out you are brought to the End User license Agreement. Do take time to read the restrictions, you will notice that under the No Commercial Use it does specifically say “You may however submit software programs that you create using the Student Subscription software to Microsoft app stores, including for revenue.” So yes you can use the software you download from Dreamspark to create apps and publish them on the Windows marketplace and you are compliant with the license agreement.

    You will be asked to complete order information including your name and email address, and the option of subscribing to stay up to date on the latest Microsoft events and promotions (not a bad idea, sometimes we have some pretty awesome promotions!)

    Finally you will get a window where you can choose to Start the Download of the software and you will get a product key to activate the software. You will be downloading an .ISO file, so you will need to burn it onto a CD, or find software that opens the .iso.

    Tip: Once you have installed Windows 8 on your laptop, you’ll be able to open .iso and .vhd files directly! One more reason to download and install Windows 8 !

    image

    What if I don’t have Dreamspark Premium?

    Is your school entitled to Dreamspark Premium?

    If your school does not have Dreamspark Premium and you are part of a technical program like Computer Science, Computer Engineering, or Information Technology, as examples, you should talk to your professor and see about getting your school subscribed to Dreamspark Premium, they can find the information on how to apply here.

    Does your school have Dreamspark Standard?

    If you have Dreamspark Standard, you can download Visual Studio, but you won’t be able to download the software for OS like Windows 8. So your best bet is to download Visual Studio and then download the Windows 8 90 day evaluation.

    I am a student but my school doesn’t have any sort of Dreamspark subscription at all!

    Just about any school can apply for Dreamspark Standard, so ask your teachers to look into applying here. But I realize not every school in Canada has Dreamspark (yet). So, you can email godevmental@microsoft.com and provide us with evidence that you are a student in Canada, and we can provide you with a code to access Dreamspark standard. This will get you lots of great software (like Visual Studio!) to help you get coding, but you won’t be able to download the OS software like Windows 8. That is reserved for Dreamspark Premium members. You can still download a 90 day trial of Windows 8 here.

  • Go DevMENTAL

    Visual Studio Tips: for JavaScript Coders try CoffeeScript

    • 0 Comments

    VisualStudioLogoFor those new to JavaScript (or those of us who are just lazy) CoffeeScript allows you to forget all those pesky semi colons and still create JavaScript for your websites or Windows apps and you can use it in Visual Studio!

    CoffeeScript is a neat little language that compiles into JavaScript, but you don’t have to remember all the little curly braces and semi colons. Using VS Web Essentials you can use CoffeeScript to create the JavaScript for your projects in Visual Studio.

    Find more Visual Studio tips go here.

    Don’t forget students can get Visual Studio Professional for free through DreamSpark!

    For those of you who already know CoffeeScript

    If you just want to know how to use it in Visual Studio right now:

    • Go download and install VS Web Essentials
    • Add a new Item to your project, pick CoffeeScript as the item type
    • Write your CoffeeScript code, when you build the project or Solution, it will create the JavaScript code.

    For those of you who haven’t seen CoffeeScript before

    Let’s get into a bit more detail.

    Let’s get a CoffeeScript file added to a Visual Studio project and try it out so you can see how it works.

    You need to install VS Web Essentials so you can try out CoffeeScript in Visual Studio. Download it here.

    Now Got to a Windows HTML/JavaScript project or to a website project and in Solution Explorer select Add | New Item

    Add New Item

     

    Now select CoffeeScript file from the item types

    Coffee Script file in Visual Studio

    Open your .coffee file in the Visual Studio Code editor and you should see something like this

    coffee script file in Visual Studio

    Now we are ready to play!

    We write the CoffeeScript in the pane on the left, and when we build the solution, the JavaScript will appear on the right.

    Let’s start with something really simple. Let’s declare a few variables.

    Write the code below in the left hand pane. CoffeeScript uses whitespace to delimit code, so you don’t need semicolons.

    firstName = "Gordie"
    lastName = "Howe"
    score = true

    Now from the menu, choose Build | Solution, after the Build you will see the following JavaScript on the right

      var firstName, lastName, score;
    
      firstName = "Gordie";
    
      lastName = "Howe";
    
      score = true;

    If you go to Solution Explorer and select Show All Files, and expand your CoffeeScript file, you can actually see that the build generated a .js and a minimized .js file for your CoffeeScript.

    Generated js from .coffee

    Now let’s see what else CoffeeScript can do. I find the syntax for If statements confusing because no two languages are quite the same, in CoffeeScript, you can just specify what you want to happen if a condition is true and the corresponding JavaScript if statement will be generated for you. For example the following CoffeeScript

    lastName = "Amazing" if score

    becomes the JavaScript

      if (score) {
        lastName = "Amazing";
      }

    You can also use indentation instead of curly braces {} for blocks of code in functions, if statements, switch statements and try/catch statements.

    For example the CoffeeScript

     

    if score 
        cheer()
        playhorn()

    becomes the JavaScript

      if (score) {
        cheer();
        playhorn();
      }

    You can even define a function by listing parameters in parentheses

    The following CoffeeScript

    fullName = (first,last) -> first + last

    becomes the JavaScript

      fullName = function(first, last) {
        return first + last;
      };

    Neat eh?

    If you are an experienced JavaScript coder, you may be thinking, it will take me so long to learn CoffeeScript syntax that it’s not worth it. But for a beginner coder who isn’t used to all those braces and semi-colons it’s a nice option. It’s also handy for those of us who are determined to save every keystroke we can when coding.

    I could give you more and more examples, but at this point, I would just be teaching you CoffeeScript, my goal with this post was to show you how to use it in Visual Studio. If you want to learn more about CoffeeScript syntax, visit coffeescript.org and have fun!

    NOTE: When I was using CoffeeScript in Visual Studio, I found that occasionally it would crash Visual Studio when I tried to copy the code from the JavaScript pane (which of course I was doing a lot when writing this blog post). As a simple work around, I just opened the generated JavaScript file and copied code from there and did not have any more problems

Page 5 of 82 (409 items) «34567»