4elements, Amsterdam, Holland

  1. Subsequent costing.

    I think that every Freelancer or Web Design Company experienced the following story.  The story is what happened to me and since than I provide my potential  new clients with a custom made checklist.

    A potential new client calls me and we made an appointment to meet. With my up-to-date portfolio I went to the client and the meeting went great, I asked the right questions and if needed explained my questions to them.

    Back at the office it was time to write my quotation, I always start writhing my quotation the same day while I don’t like to keep a client waiting too longs. It took me two days, it’s a big assignment and all needed to be perfect.

    Next the design. A complex website, member section, payment options and so on. It took me 5 days to finish 3 Photoshop pages of the new website. I always design 3 pages and include it in the quotation, if they sign the quotation I’ll design the rest.

    Quotation and design where handed over within the agreed timeframe, 2 weeks, and we walked through the quote and design. The Client loved it, the quote was okay, within their budget and they ask if it was possible to respond within 2 weeks, of course I agreed. Especially while it was a big project, the quote was over $20.000. After the 2 weeks we met again, they had some changes to the website and I re-wrote the quote. This continued several times, ending up with a quote of $25.000 and ready to roll.
     

    I remember it clearly, it was on a sunny Wednesday morning, the day my potential new client would become my client and sign. So I went over as promised and than it hit me.

    Client: “Well, we’re sorry to tell you but we found an other company that could do the same for just $1.000”

    I was speechless!

    Whatever I tried, lowering my quotation to $1.000 was absolutely not reasonable or possible, the client made his decision. So after several weeks, maybe months, hard work for this potential new client ended in loosing the client.

    6+ months later I spoke with the client just to see how everything was going, I knew when their deadline was. Website was still not done and won’t be, “Why” Was my question? Well, the company, that took my new client, didn’t mention that the $1.000 was a kind of start fee and that all other work would be Subsequent costing. $50.000 later the website was half finished and absolutely not ready for any, near future, launch.

    Final words of the, lost, client where: “We had to go with you, than we would never had this problem”, he was right…

    The point I want to make with this story.

    As client: always ask if the total price is a fixed price, without Subsequent costing. (Until some point of course, while some non calculated extra adjustments will have their price. Use an extra quote for that to be safe.)

    ​Attached to this blog, a checklist for clients who are ready for a new website or website re-design. What information do you need to know and have before talking to a web designer / company / freelancer.

    Download checklist
    We share this article with our sister company, designscan.me, get insight in your website

     

    0 Comments

    Leave a comment › Posted in: Daily

    1. The Beginners Guide to WooCommerce: Email Settings Part 1

      Until now in this series of tutorials I have explained the settings and configurations which can help online store owners to set up up their eCommerce website with a few clicks. Today's article is about email settings. The entire process, from placing an order for an item to the checkout, leads to the final step where WooCommerce generates an email which notifies you about any customer's activity on your store and notifies the customer about the order/purchase. 

      Generating order emails which are perfectly suitable for your online store in the form of colors and details is an important step. WooCommerce helps online store owners by providing easy to configure Emails Settings. Let's configure these emails.

      Emails in WooCommerce     

      Emails Settings in WooCommerce

      The tab right next to the Accounts is for the Emails, and this is the last setting which you will have to configure in the Settings section of WooCommerce. You can enter the section for the Emails tab via the following path: WooCommerce > Settings > Emails.

      Email Options

      Email Options

      Right after you enter this section, you will find yourself in the sub-page for Email Options. You see several other sub-pages, and I'll be covering all of them. For now let's get started with the settings in the Email Options.

      1. Email Sender Options

      Settings in this part will directly affect the sender's emails. Here you can edit the name and email address.

      Name and Email address configuration

      The figure above shows two different sender settings, which are:

      • "From" Name: Enter the name with which you want your customer to be notified by an email.
      • "From" Email Address: The mailing ID which will be used to send emails to your customers.

      So, whenever any customer buys any product or places an order, an email will be sent from the store which will carry these two fields of name and email address.

      2. Email Template

      Email Template section

      A custom email design with colors similar to your store is always a better choice. This section for Email Template allows you to create an email template for store emails.

      To view the demo email, browse the link Click here to preview your email template. This is the default email template which WooCommerce sets for you at the time of plugin installation. In accordance with the colors of your online store website, you must choose the colors of this email template.

      Sample HTML Email Template

      Let's edit this template!

      Header Image 

      Header Image field

      The first field is for the addition of a Header Image. Now what is a Header Image? As its name explains, this is the image which can be displayed right at the top of your email. This image can be your store logo or may be about your current promotions or discount sale. The addition of such images will make your emails more attractive, plus you can brand your store more effectively.

      If you want to add a header image in your emails then simply upload an image and copy and paste the URL of that image from the media library into this text box. 

      How to Upload the Header Image?

      You can upload it in a few clicks. Follow the steps mentioned below:

      • In your site's dashboard go to Media > Library > Add New.
      • Upload an image file from your PC.
      • Click Edit or open the image file and copy the value or URL text box and paste it into the text box of Header Image inside the WooCommerce Emails Tab.
      Email template with Header Image added

      Save the changes, and now if you visit the demo email template, that particular image will appear right at the top of your email (see the above fig.).

      Email Footer Text

      Email Footer Text field

      Email Footer Text controls what text will be displayed at the end of your email, or more precisely in the footer of your email. WooCommerce sets a default description for you according to your store, but you can change it as per your desire. 

      Email footer with default lorem ipsum text

      The last four options are for styling your email template with various colors. These colors can be set by entering their hex values. By default some color values are there, which you can change very easily by simply clicking every hex value and choosing a desired color from the color box. 

      Colour options for email template

      These color options are explained in detail below:

      Base Color

      Email template with base color of blue
      Email template with base color of pink

      This is the background color for the email's heading. The default value is #557da1. Change it to the primary color of your site. For example, if we change our base color to #d1236e then the email template will have a pinkish header. 

      Background Color

      Pale gray background color for email template

      This is the background color of your email template. Currently it is set as #f5f5f5 which is a shade of white. You can change it to a slightly grayish color to enhance the content inside.

      Email Body Background Color

      Email body background color
      This is the background color of the email's body. By default its value is #fdfdfd but if it's set to #b4c8d9 then you will see the changes as in the above screenshot. I'd recommend that you keep this color #fffff, i.e. white.

      Email Body Text Color

      Email with red body text

      This is the color in which your email's text will be displayed. Its default value is #505050. Let's change it to a value of #cc4141 for experimental purposes. 

      Once you are through with these options, click Save Changes.

      Finding Color Palettes

      It's important for your store's branding that you use a beautiful set of colors in your emails which resemble the store's theme. Being a designer I can share some of the best resources in this regard:

      In the next article I will discuss how WooCommerce helps you to edit some of the individual email templates, for example New Order Email, Processing Order Email, Completed Order Email, etc.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. The Tuts+ Guide to Template Tags: Series Finale

      Welcome to the series finale of "The Tuts+ Guide to Template Tags"! It's been a long but great journey, as I said it would be in the first part. And in this last post, we're going to review what we've learned and conclude the series.

      First Part

      In the first part of the series, we introduced the concept of "template tags" in WordPress: We saw:

      1. What template tags are
      2. Where they are
      3. How are the functions made
      4. How to use the functions

      As I stated a couple of times, template tags are one of the most important and one of the easiest WordPress concepts to learn about. It's only a matter of memorizing the functions and their parameters, just as we need to memorize many PHP functions while learning PHP.

      Middle Parts

      In the middle parts of the series, we reviewed almost 200 template tags, which are documented in the Codex. Of course, there are many more (maybe twice as more) template tags out there in the core of WordPress, and it would be another journey to review them.

      I split the template tags into categorized "batches" to make it easier to learn the template tags in each part. In the first batch, we reviewed template tags about "post data":

      1. We got and displayed the post content with get_the_content() and the_content().
      2. We got and displayed the post content for feeds with get_the_content_feed() and the_content_feed().
      3. We got and displayed the excerpt of the post with get_the_excerpt() and the_excerpt().
      4. We displayed the excerpt of the post for feeds with the_excerpt_rss().
      5. We got and displayed the post title with get_the_title() and the_title().
      6. We got and displayed the "escaped" post title with the_title_attribute().
      7. We displayed the post title for feeds with the_title_rss().
      8. We got and displayed the date of the post with get_the_date() and the_date().
      9. We got and displayed the date of the post in ISO 8601 format with the_date_xml().
      10. We got and displayed the time of the post with get_the_time() and the_time().
      11. We got and displayed the author's name with get_the_author() and the_author().
      12. We displayed all the meta data of the post with the_meta().
      13. We got and displayed the modification date of the post with get_the_modified_date() and the_modified_date().
      14. We got and displayed the modification time of the post with get_the_modified_time() and the_modified_time().
      15. We got and displayed the author who edited the current post with get_the_modified_author() and the_modified_author().
      16. We got and displayed a list of pages of paginated posts with wp_link_pages().

      In the second batch, we reviewed template tags about taxonomies and terms:

      1. We retrieved the description of a category with category_description().
      2. We retrieved the description of a tag with tag_description().
      3. We retrieved the description of a term with term_description().
      4. We got and displayed a page title for category archives with single_cat_title().
      5. We got and displayed a page title for tag archives with single_tag_title().
      6. We got and displayed a page title for term archives with single_term_title().
      7. We got and displayed the categories of the post with get_the_category_list() and the_category().
      8. We got and displayed the categories of the post for feeds with get_the_category_rss() and the_category_rss().
      9. We got and displayed the tags of a post with get_the_tag_list() and the_tags().
      10. We got and displayed the terms of a post with get_the_term_list() and the_terms().
      11. We displayed the taxonomies of a post with the_taxonomies().
      12. We got and displayed the "edit tag" link with get_edit_tag_link() and edit_tag_link().
      13. We got and displayed a list of categories with wp_list_categories().
      14. We got and displayed an HTML dropdown of categories with wp_dropdown_categories().
      15. We got and displayed the tag cloud with wp_tag_cloud().
      16. We retrieved a custom generated tag cloud with wp_generate_tag_cloud().

      In the third batch, we reviewed template tags about comments:

      1. We got and displayed the comment author's name with get_comment_author() and comment_author().
      2. We got and displayed the comment author's name for feeds with get_comment_author_rss() and comment_author_rss().
      3. We got and displayed the comment author's email address with get_comment_author_email() and comment_author_email().
      4. We got and displayed a link of the comment author's email address with get_comment_author_email_link() and comment_author_email_link().
      5. We got and displayed the URL of the commenter with get_comment_author_url() and comment_author_url().
      6. We got and displayed the link of the commenter (with author name as anchor text) with get_comment_author_link() and comment_author_link().
      7. We got and displayed the link of the commenter (with custom text) with get_comment_author_url_link() and comment_author_url_link().
      8. We got and displayed the IP address of the commenter with get_comment_author_ip() and comment_author_ip().
      9. We got and displayed the content of the comment with get_comment_text() and comment_text().
      10. We displayed the content of the comment for feeds with comment_text_rss().
      11. We got and displayed an excerpt of the comment with get_comment_excerpt() and comment_excerpt().
      12. We got and displayed the date of the comment with get_comment_date() and comment_date().
      13. We got and displayed the time of the comment with get_comment_time() and comment_time().
      14. We got and displayed the ID of the comment with get_comment_id() and comment_id().
      15. We displayed the type of the comment with comment_type().
      16. We retrieved the avatar of a user with get_avatar().

      In the fourth batch, we reviewed template tags about comments again, as there are a lot of comments-related template tags:

      1. We got and displayed a link to the "comments" section with get_comments_link() and comments_link().
      2. We got and displayed the list of comments with wp_list_comments().
      3. We got and displayed the number of comments with get_comments_number() and comments_number().
      4. We got and displayed automatic classes for each comment with get_comment_class() and comment_class().
      5. We displayed the comment form with comment_form().
      6. We displayed a title for the comment form with comment_form_title().
      7. We got and displayed the "reply to comment" link with get_comment_reply_link() and comment_reply_link().
      8. We got and displayed the hidden fields of the "reply to comment" form with get_comment_id_fields() and comment_id_fields().
      9. We got and displayed the "cancel reply" link with get_cancel_comment_reply_link() and cancel_comment_reply_link().
      10. We got and displayed the link for "next comments" with get_next_comments_link() and next_comments_link().
      11. We got and displayed the link for "previous comments" with get_previous_comments_link() and previous_comments_link().
      12. We retrieved pagination links for the comments with paginate_comments_links().
      13. We got and displayed the "edit comment" link with get_edit_comment_link() and edit_comment_link().
      14. We got and displayed the "comments feed" link with get_post_comments_feed_link() and post_comments_feed_link().
      15. We displayed a link of the "comments" popup with comments_popup_link().
      16. We displayed the "comments" popup script with comments_popup_script().

      In the fifth batch, we reviewed template tags about posts, pages and template parts:

      1. We got and displayed automatic classes for each post with get_post_class() and post_class().
      2. We got and displayed the permanent link of current post with get_permalink() and the_permalink().
      3. We got and displayed the post ID with get_the_id() and the_id().
      4. We got and displayed a page title for the post with single_post_title().
      5. We got and displayed the link of the next post with get_next_post_link() and next_post_link().
      6. We got and displayed the link of the previous post with get_previous_post_link() and previous_post_link().
      7. We retrieved the permalink of the page with get_page_link().
      8. We got and displayed the permalink of a post with get_post_permalink() and post_permalink().
      9. We got and displayed the shortlink of the post with wp_get_shortlink() and the_shortlink().
      10. We got and displayed the "edit post" link with get_edit_post_link() and edit_post_link().
      11. We retrieved the "delete post" link with get_delete_post_link().
      12. We displayed a permalink "anchor" for the current post with permalink_anchor().
      13. We made WordPress load the header template with get_header().
      14. We made WordPress load the footer template with get_footer().
      15. We made WordPress load the sidebar template with get_sidebar().
      16. We made WordPress load a template file with get_template_part().

      In the sixth batch, we reviewed template tags about authors and attachments:

      1. We retrieved the URL of the author's post archives with get_author_posts_url().
      2. We displayed a link to the author's post archives with the_author_posts_link().
      3. We got and displayed the author's website link with get_the_author_link() and the_author_link().
      4. We got and displayed the author's meta data with get_the_author_meta() and the_author_meta().
      5. We got and displayed the post count of the author with get_the_author_posts() and the_author_posts().
      6. We got and displayed the list of authors with wp_list_authors().
      7. We got and displayed an HTML dropdown of users with wp_dropdown_users().
      8. We got and displayed the featured image of the post with get_the_post_thumbnail() and the_post_thumbnail().
      9. We retrieved the ID of the post's featured image with get_post_thumbnail_id().
      10. We got and displayed the permalink of an attachment page with wp_get_attachment_link() and the_attachment_link().
      11. We retrieved the attachment image with wp_get_attachment_image().
      12. We retrieved the attachment image URL with wp_get_attachment_image_src().
      13. We retrieved the attachment image meta data with wp_get_attachment_metadata().
      14. We retrieved the next image of the same post with next_image_link().
      15. We retrieved the previous image of the same post with previous_image_link().

      In the seventh batch, we reviewed template tags about archives, search, login, logout, and registration:

      1. We retrieved the archive link with get_archives_link().
      2. We got and displayed the archive links with wp_get_archives().
      3. We got and displayed title for a post type archive with post_type_archive_title().
      4. We got and displayed a page title for monthly archives with single_month_title().
      5. We got and displayed the link for the "next posts" page with get_next_posts_link() and next_posts_link().
      6. We got and displayed the link for the "previous posts" page with get_previous_posts_link() and previous_posts_link().
      7. We got and displayed links for the "next & previous posts" pages with get_posts_nav_link() and posts_nav_link().
      8. We got and displayed the search form with get_search_form().
      9. We got and displayed the current search query with get_search_query() and the_search_query().
      10. We retrieved a permalink for a search query with get_search_link().
      11. We got and displayed a "register" or "dashboard" link with wp_register().
      12. We got and displayed the "log in" form with wp_login_form().
      13. We got and displayed the "log in/out" link with wp_loginout().
      14. We retrieved the "log in" URL with wp_login_url().
      15. We retrieved the "log out" URL with wp_logout_url().
      16. We retrieved the "lost password" URL with wp_lostpassword_url().

      And in the last batch, we reviewed template tags about bookmarks and other, "miscellaneous" template tags:

      1. We retrieved a list of all bookmarks with get_bookmarks().
      2. We got and displayed the list of bookmarks with wp_list_bookmarks().
      3. We retrieved bookmark data with get_bookmark().
      4. We retrieved a single bookmark field's data with get_bookmark_field().
      5. We got and displayed the "edit bookmark" link with get_edit_bookmark_link() and edit_bookmark_link().
      6. We got and displayed your site's information with get_bloginfo() and bloginfo().
      7. We got and displayed automatic <body> classes with get_body_class() and body_class().
      8. We got and displayed a navigation menu with wp_nav_menu().
      9. We got and displayed page titles with wp_title().
      10. We got and displayed the home URL with get_home_url() and home_url().
      11. We got and displayed the site URL with get_site_url() and site_url().
      12. We retrieved the current site's ID with get_current_blog_id().
      13. We got and displayed the URL of the admin panel with get_admin_url() and admin_url().
      14. We got and displayed the permalink of a feed type with get_feed_link() and the_feed_link().
      15. We made the string end with or without a trailing slash with user_trailingslashit().
      16. We retrieved number of days since the start of the week with calendar_week_mod().
      17. We got and displayed the calendar with get_calendar().

      Finale

      And here we are, at the end of the series. I hope you enjoyed the articles as much as I enjoyed writing them. If you have any questions, corrections or additions related to the series or the concept of "template tags" in WordPress, feel free to shoot a comment in the Comments section below.

      And if you liked this series, don't forget to share the posts with your friends. Goodbye!

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Easy Digital Downloads: Misc Settings, Part 1

      So far in this series, The Beginner's Guide to Easy Digital Downloads, I have discussed how to configure various settings of this plugin. I have covered the tabs for General, Payment Gateways, Emails, Styles, and Taxes. We are left with the last tab, for Misc (miscellaneous) settings, which is the topic of today's article.

      Misc Settings 

      The last tab which is next to Taxes is for the Misc Settings. Here you will find some additional options which can help you to set up a more functional digital store. If you do not configure this tab, EDD will still work perfectly. But if you want to enhance your site's features then you should configure the Misc tab.

      Easy Digital Downloads Misc Settings

      To access the Misc settings in EDD, follow this path: Downloads > Settings > Misc. Let's look at its options in detail.

      Enable Ajax

      Easy Digital Downloads Misc Settings

      The first option is a checkbox which is enabled as a default setting. This configuration allows AJAX (Asynchronous JavaScript and XML) to work on the front‑end.

      Enabling this option will perform functions like adding a product to the cart without reloading the page. This will ensure that all these steps are performed on a single web page. 

      On the contrary, if you disable this option, then the web page will be reloaded each time you add any product to the shopping cart.

      Redirect to Checkout

      Easy Digital Downloads Misc Settings

      The next option is also a checkbox which redirects customers immediately to the checkout page once they add any product in the cart. As a default setting this option is disabled. 

      In my opinion, you should go with the default setting, because if this option is enabled then there are chances that your customers will add only a single product to the cart at once. So this option can discourage people from purchasing multiple items, and you may experience a decrease in sales. 

      Enforce SSL on Checkout

      Easy Digital Downloads Misc Settings

      Enforce SSL on Checkout allows customers to be redirected to the SSL secured checkout page. 

      It is very important to ensure that there is SSL on your checkout page as people submit their personal details here. Customers don't want to buy products from sites where there is no SSL. So you should enable this option in EDD. But this option will only work if you have bought SSL and have configured it. Ask your hosting company for that.

      Easy Digital Downloads Misc Settings

      The above figure shows that the site for Easy Digital Downloads is SSL secured. The details of SSL are beyond the scope of this article.

      Disable Guest Checkout

      Easy Digital Downloads Misc Settings

      There are two types of customers: those who have logged in to your site, and those who have not logged in your site. The second type is called a Guest Customer. So this option caters to all such non-logged-in users. 

      If you enable this option, then guest customers will not be allowed to purchase items from your digital store. They can only view your store's items. As a default, this checkbox is disabled, which means that everyone is allowed to purchase items. But this way, the purchase history will only be stored for the logged-in customers. 

      In order to get a complete purchase history, it is necessary to enable this option and force customers to register with your site and be logged in to make a purchase.

      Easy Digital Downloads Misc Settings

      As an example, I have enabled this option. Now when I try to purchase an item, an error message is displayed on the screen like the one shown in the above figure.

      Show Register/Login Form?

      Easy Digital Downloads Misc Settings

      The next option is a drop-down menu which allows you to choose the appropriate Register/Login Forms for guest customers. There are four options here:

      • Registration and Login Forms
      • Registration Form Only
      • Login Form Only
      • None
      Easy Digital Downloads Misc Settings

      The default setting is None. However, if I select Registration and Login Forms, then non-logged-in users will see both these forms being displayed on the front-end. So new customers will be forced to register, and customers who already have an account can simply log in to purchase the product.

      Conclusion

      That's it for today. I have discussed the configuration of the first few options which you will find in the Misc settings tab. In my next article I will be discussing more options in this section. Till then if you have any queries you may post in the comments below.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. JavaScript Debugging Using Cross-Browser Source Maps

      As a JavaScript developer, I’m sure you’ve already been falling into this scenario: something goes wrong with the production version of your code, and debugging it directly from the production server is a nightmare simply because it has been minified or has been compiled from another language such as TypeScript or CoffeeScript.

      The good news? The latest versions of browsers can help you solve this problem by using source maps. In this tutorial, I’ll show you how to find source maps in all of the browsers and get the most out of those few minutes you have to debug.

      Wait, What Are Source Maps?

      According to the great Introduction to JavaScript Source Maps article, a source map is “a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files”.

      Please don’t hesitate to read Ryan Seddon’s article first, as it goes in great details on how a source map works. You’ll then learn that a source map uses an intermediate file that does the matching between the production version of your code and its original development state. The format of this file is described here: Source Map Revision 3 Proposal.

      Now to illustrate, I’m going to share the way we’re currently working while developing our WebGLBabylon.js open-source framework. It’s written in TypeScript. But the principles will remain the same if you’re using plain JavaScript compressed/minified or other languages such as CoffeeScript.

      Let’s now play with the source map magic directly in the browsers.

      The Demo Page We’re Going to Use

      Recently, I’ve been implementing the support of the Gamepad API in our gaming engine. Let’s use its code for this tutorial.

      In this article, I’m using the following browsers:

      Navigate to this URL: http://david.blob.core.windows.net/babylonjs/gamepad/index.html and you’ll obtain this page:

      GamePad test page

      Plug an Xbox 360 or Xbox One controller in the USB port of your machine. Press the A button to activate the gamepad and play with it:

      GamePad test page Common Properties

      But don’t worry, you won’t need a gamepad controller to follow this tutorial.

      Note: The TypeScript compiler is automatically generating the source map for you. If you’d like to generate a source map while generating your minified version of your code, I would recommend using UglifyJS2.

      For this article, I even mixed both. I’ve minified the JS generated by TypeScript and kept the source mapping intact using this command line:

      How to Debug With the Original Source Code

      Using Internet Explorer 11

      Once the GamePad test page has loaded, press F12 in IE11.

      You’ll see that the HTML source is referencing two JavaScript files: babylon.gamepads.js at the beginning of the page and testgamepad.min.js at the very end. The first file is coming from our framework on GitHub, and the second one is a simple sample showing how to consume it.

      Press on the Debugger button (or Control-3), and then press on the folder icon.

      You’ll see that IE11 offers two files to debug: babylon.gamepads.ts and testgamepad.min.js.

      Debugger screen in Internet Explorer

      Let’s start by reviewing the babylon.gamepads.ts case. Why does IE show it instead of the .js version being executed by the browser?

      This is thanks to the source map mechanism. At the end of the babylon.gamepads.js file, you can find this specific line:

      Open babylon.gamepads.js.map to understand how it works:

      By reading this JSON file, IE11 knows it should map “babylon.gamepads.ts” to “babylon.gamepads.js”. That’s why it directly offers to debug the TypeScript source instead of the compiled JS version.

      Open babylon.gamepad.ts in the IE11 F12 console and you’ll see something you've maybe never seen before, some TypeScript language:

      babylongamepadts in the IE11 F12 console showing TypeScript language

      You can debug it as you’re used to debugging your JS code, even if it’s the compiled JavaScript version currently being executed by the browser.

      Set a breakpoint on line 17 and press F5 in the browser window. You’ll be able to debug the TypeScript version of the constructor:

      Line 17 highlighted in the debugger

      Step up to line 20, mouse over this and expand it to check that gamepadEventSupported is set to true:

      Step up to line 20 mouse over this and expand it to check that gamepadEventSupported is set to true

      Using Chrome/Opera

      Load the same page: http://david.blob.core.windows.net/babylonjs/gamepad/index.html and press F12 in Chrome or Control-Shift-I in Opera.

      Chrome Developer Tools page

      Click on the configuration icon and make sure that the Enable JavaScript source maps option is enabled. It should be set by default:

      Enable JavaScript source maps option checked

      Chrome and Opera let you review the executed babylon.gamepads.js code, but if you try to set a breakpoint in the JavaScript version, it won’t display it. It will set it instead in the source code mapped to this version: babylon.gamepads.ts.

      For instance, try to set a breakpoint on line 18 of the babylon.gamepads.js JavaScript file and you’ll see it will be set on line 17 of the babylon.gamepads.ts TypeScript file instead:

      line 17 of the babylongamepadsts TypeScript file

      Of course, you can also set the appropriate breakpoints directly in the TypeScript source as seen with IE11 just before.

      Press F5 in the browser window hosting our demo page and you’ll be now able to debug my TypeScript code. Step up to line 20 and mouse over the this.gamepadEventSupported variable. It should display true:

      thisgamepadEventSupported variable displaying true

      Using Firefox

      Load the same page: http://david.blob.core.windows.net/babylonjs/gamepad/index.html and press Control-Shift-S to open the native debugger (don’t use F12/Firebug, because it doesn’t support source maps).

      Check that the Show Original Sources option is checked:

      Show Original Sources option checked

      Set a breakpoint as usual on line 17, and reload the page to break into the code. Firefox doesn’t support mouse hovering on the original source. Step up to line 20 and expand the this object instead in the right panel to check that gamepadEventSupported is set to true also.

      Line 20

      What About the Minified JavaScript File?

      Up to now, we’ve been debugging only the babylon.gamepads.js code using the babylon.gamepads.ts source. But what about this minified testgamepad.min.js JavaScript file?

      The first solution is to prettify the code. It works with IE11, Chrome, Opera and Firefox.

      In IE11, press the Pretty print button or press Control-Shift-P:

      Pretty print button in IE11

      In Chrome/Opera, press the {} button:

      In ChromeOpera press the  button

      In Firefox, press also the {} button:

      In Firefox press the  button

      This is much better, but still not as good as it was with the source map set. To be able to go a step further, we added a new feature in the August 2014 update of IE11. You can load a source map even if you’ve removed it from the .js file.

      Imagine you’d like to prevent anyone from easily debugging the production code of your web app using source map, but you still want to be able to do so? Just remove the sourceMappingURL line from your .js file.

      Using Internet Explorer 11, you can still use the source map by loading your local .map and associated source code. For that, right-click on the testgamepad.min.js tab and press Choose source map:

      right-click on the testgamepadminjs tab and press Choose source map

      Download them here: http://david.blob.core.windows.net/babylonjs/gamepad/testgamepad.zip.

      Unzip that in your preferred directory and navigate to it to choose the right .map file:

      Open map file dialog box

      And now the original source code can be debugged again:

      F12 debugger screen in IE

      Notice that the tab has been renamed to testgamepad.ts and that the first variables are now typed as we’re displaying some TypeScript.

      Cool, isn’t it?

      This article is part of the web dev tech series from Microsoft. We’re excited to share Microsoft Edge and the new EdgeHTML rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device @ http://dev.modern.ie/.

       

      0 Comments

      Leave a comment › Posted in: Daily

  • Page 1 of 83 pages  1 2 3 >  Last ›
  • Browse the Blog

    Syndicate

    governing-bruise