Last summer we had to convert a huge code base from Javascript to Typescript. During this transition I learned a lot about the differences and similarities of the two. I developed an idea about what makes a good use case for Typescript and when it doesn’t make sense to use it.
Use cases for Typescript
1. Code size: When the source code is huge and more than one person works on the project, a type system can help avoid the obvious errors. This is specially true for SPAs. When someone can change code that potentially breaks another one’s code, it’s generally good to have some sort of safety mechanism. The TS transpiler reveals the obvious mistakes and is kinda smart (but can’t eliminate the need for debugging of course). If the source code is not huge, it probably doesn’t make sense to make it longer by adding type annotations. I have converted 180+ files from JS to TS and in most cases it added roughly 30% to the code size. 2. Previous baggage: if you or the majority of the team come from a strongly typed language like C# and does’t really want to go JS all the way, TS is a good alternative. Even though I recommend learning Javascript for good, there’s nothing preventing you from using Typescript without knowing Javascript. In fact Typescript is made by the same guy who made C# so the syntaxes are similar. In my company we had a team of C# developers who were coding a sophisticated desktop application in C#/WPF (which is front end in the desktop world) and then they were tasked to join my web project as full stack. So it was relatively a shorter path for them to learn Typescript for front end and leverage their C# knowledge for the backend. 3. As a replacement for Babel: The old Microsoft used to take something that is standard (for example Java) and add proprietary non-standard stuff to it (for example J++) and try to force developers pick one. Typescript is exactly the same thing to Javascript (after another try in 1996 divertingJScript from Javascript). Anyway, since ES6 is basically a subset of Typescript and the Typescript transpiler generates ES5 code, it’s practically possible to transpile ES6 code to ES5 (just as Babel) using the typescript transpiler. Though it’s not a strong use case IMHO. Typescript’s transpiler generates pretty readable ES5 code as output and that was one of the reasons Angular 2 team chose TS over Google’s own Dart language. 4. Promoted by lib/Framework: If you are using Angular 2 or another library that makes it particularly interesting to use Typescript, go for it. Just know that even though Typescript can use all Javascript libraries out of the box, if you want good syntax errors, you need to add the type definitions for those libraries externally. Fortunately the nice guys atDefinitelyTyped have made a community driven repo and tooling for that. But that is one extra step when you’re setting up your project (side note: for the JSX fans I should mention TSX).
When you’re better off without Typescript?
1. Extra transpilation tax: There are no plans to support Typescript natively in the browsers (Chrome did some experiment but cancelled later). This means you will always have to transpile your TS code before running it on the browser. For the standard ES6 it’s a whole different story. When ES6 is supported by most browsers, the current ES6 to ES5 transpilation would be unnecessary. ES6 is the biggest change in the language and I suspect most people would settle there, but those who want to try the experimental features of the next version of the language will transpile anyway. You just modify the file and refresh the browser. That’s all — no “watching” or “transpiling on demand” or build system is necessary. If you choose TS, you probably end up doing some extra book keeping for the keeping the type definitions for Javascript library/frameworks up to date (using Definitely typed or writing your own type annotations). That’s something you wouldn’t do for pure JS projects. 2. Weird debugging edge cases: Sourcemaps make it easier to debug Typescript, but the status quo is not perfect and there are really annoying/confusing edge cases that the browser thinks you are running a certain line of code but you are not. Also there are some problems debugging the `this` keyword and properties attached to it (hint: `_this`works in most cases). That is because Sourcemaps currently don’t have a good support for variables (but that might change in the future). 3. Performance penalty: in our project we had 9000+ lines of ES5 Javascript that delivered pure horse power for a WebGL component but we kept it that way. Typescript transpiler (just like Babel), has features and generates code that no matter how good the transpiler is, can’t surpass the optimisations of a good programmer. So we decided to keep it in plain ES5 for ease of debug and deployment (no transpilation whatsoever). That being said, the performance penalty probably is negligible compared to benefits of a type system and more modern syntax for most projects, but there are cases that milliseconds and microseconds matter and in those cases transpilation of any kind is not recommended (even Babel, CoffeeScript, Dart, etc.). That being said, Typescript doesn’t add any extra code for runtime type checking. All the type checking happens at transpile time and the type annotations are removed in the generated Javascript code. 4. Agility: it’s quicker to set up something in Javascript. The lack of type system makes it super agile and easy to change stuff. Sure you can break things easily but if you know what you’re doing, Javascript is more flexible. Remember one of the main use cases for using a type system is to make it hard to break stuff. If Typescript is Windows, Javascript is Linux. In JS land you don’t get the “helper wheels” of a type system and you’re assumed to know what you’re doing but you can ride faster and maneuver easier. Particularly if you’re in the prototyping phase, don’t waste your time with Typescript because JS is simply more agile and flexible. That being said, if you use a typed language, it might be quicker to write/modify code in an IDE because the type system makes it easier to determine syntax. Source: https://medium.com
Adrian Ababei / Mar 28'2016
WAI-ARIA or simply ARIA is a set of attributes which can be added to various HTML elements. These attributes are used to communicate property semantics, state and role to assistive technology through the accessibility APIs which are implemented in browsers.
W3C HTML specifications provide information regarding which ARIA attributes can be used on each HTML element.
Developer (un)friendly information
WAI-ARIA’s 3.2.7 section specifies certain requirements but these are not web developer friendly.
These requirements take the form of two large tables which include features with constraints – if you can use an ARIA attribute, the element is not listed. The reason behind this is that the purpose of this information is to be read by conformance checker implements and browsers, not developers.
ARIA attributes can also be used on a particular element – in the past one would have to go to the ARIA section and then go through the tables to find the desired attribute or element in order to locate its ARIA rules.
Developer friendly information
W3C HTML specifications have recently been updated to include ARIA information as well, which until then was absent. Each introduction section of each element definition now features ARIA information such as property attributes or allowed ARIA roles. This means that developers can find the information they need with ease, without having to search for it in the spec.
If an element can have roles set to it, it’s stated in the intro – a button element intro for example includes all possible ARIA role values and indicates the default role of the element, which does not need to be set manually. Each role is also liked to a description within ARIA’s reference section of the HTML spec which also includes a list of allowed aria attributes for each role value with other links to properties states and roles.
The idea behind this is to help developers get all the information they need in order to produce accessible things with HTML.
Adrian Ababei / Mar 27'2016
In just 10 short years the microblogging platform revolutionized how the world communicates by using just short 140-character snippets. Twitter became practically omnipresent in just 10 short years but it wasn’t a smooth ride. Twitter built a platform that’s useful for everyone – celebrities, politicians, marketers, designers and writers. Let’s take a look at some of Twitter’s key moments in history.
Twitter’s First Tweet
Jack Dorsey, the current Twitter CEO sent his first tweet on the 21th of March 2006, back when the company was simply known as “twittr”. Jack’s 2006 tweet started a snowball effect and soon enough twitter became one of the most popular social networks in the entire world, catering to people from all walks of life.
Twitter’s Logo Makeover
The Twitter bird is one of Twitter’s most iconic aspects. The simple yet expressive logo is immediately recognized and appreciated by users. That being said, the logo has changed a lot since 2006: Initially the bird used to be blue with a light-blue underbelly and a white patch instead of where the eye should be. The company then decided to make it look more cartoonish, giving the bird eyebrows and feet. Perhaps it was a bit too cartoonish because the company then decided that the feed should be removed and the birds colour should be changed as well. The next change saw the bird losing its eye and gaining a darker blue colour complete with its own little wing shape. Twitter’s current version is also the most minimal: a simple blue bird silhouette with no feet, eyes or hair.
Twitter goes public
Success can be measured in many things but success for a small tech company is definitely measured by going public on the NYSE. Twitter went public in 2013 and at the time it was the most hyped tech IPO since Facebook. Since then the company’s stock price went down dramatically and now it’s well under $26 a share – the initial IPO price. Only time will tell if Twitter’s CEO will be able to go back to their glory days.
Twitter’s Homepage Makeover
All tech companies undergo many design changes over the years – twitter is no different. Twitter’s current homepage features plenty of white space, card based design and a central column. Back in 2007 the homepage had an aquamarine border and a larger service description. By 2008 the homepage switched to landscape orientation and eliminated random user feed updates entirely. Between 2009 and 2011 the interface became more and more minimalized and forms became more highlighted.
Twitter’s future?
What will happen in the next 10 years of Twitter’s life? We don’t know. Most likely it won’t turn into another MySpace even though it’s currently struggling to make a profit and find its own identity in a market dominated by Facebook and Linkedin.
Adrian Ababei / Mar 26'2016
Most web development start-ups have the same problem – What programming language to pick? Which language should we specialize in? Technology selection can be a real drag, especially when dealing with larger teams of specialists with different favourites in mind. Here’s food for thought: do successful companies become successful because of the technology they used or the technology itself becomes popular because it’s used by a successful company?
Currently, PHP is not a popular choice for web development start-ups – most web development teams opt for Django or Ruby on Rails but in recent years PHP technology has evolved substantially - even to the point of becoming a direct rival for Ruby on Rails or Django.
PHP is actually an incredible tool for web development start-ups – it offers all the functionality of RoR at a much lower cost. PHP is great for web development projects which involve multiple components and rely on multiple tech solutions. Here is a list of reasons why PHP is a great tool for web development start-ups:
PHP allows fast web development
PHP is actually one of the fastest programming languages which you can use to code, deploy and execute. The whole language was designed on finding the fastest and shortest solutions to any web development problems. Apart from that, PHP’s lovely community has been moving it towards modular design.
PHP frameworks offer libraries and bundles which are ready to use, mouldable and easily configurable. If you’re interested in using PHP for web development you should definitely check out the Sonata Project for the Symfony framework – it offers ecommerce tools, content management features, technical utilities and admin bundles which in turn enable web development companies to lower their work load and shorten their path to the finished product.
PHP is cost effective
Web development companies won’t have any trouble with finding replacements for their team members, hiring new members or project stuffing. PHP developers are much cheaper than developers specialized in other programming languages – this can lead to a more affordable and competitive finished product. Certain very useful tools are free for use with PHP – these include integration tools like Deployer, Phing Project, Capifony, the PHPUnit framework and the Composer dependency manager.
Programming quality
PHP offers plenty of educational materials and best practices materials regarding common or complex programming tasks. While some may voice criticism of PHP unpredictability and inconsistency it’s good to remind users that these are problems of the past. The newest versions of PHP offer great frameworks such as Symfony and Laravel and great efforts have been made to define precise basic coding standards and guidelines.
Conclusions
PHP is a great tool for any web development start up, given its guidelines, processes and conventions. A solid team with plenty of experience will get your start up going in no time!
Adrian Ababei / Mar 25'2016
Google confirmed this morning it’s now testing a new way to sign into your Google account without having to type in a password. Instead, those who have been invited to try this new method of logging in authenticate by responding to a notification sent to their smartphone. The idea is similar to Yahoo’s recently launched “Account Key,” which also offers a password-free means of signing in involving a push notification sent to your phone that then opens an app where you approve the log-in. Passwords are often the weakest parts when it comes to securing users’ accounts, as many don’t use complex passwords or they reuse the same password across services. Two-factor authentication – like using a USB stick with a secret token or entering in a code sent via text method to your phone – can help to increase security, but many users also find this to be a hassle as it introduces an additional step to the login process. This new password-free login option, on the other hand, is about speeding up logins by offering a different way of signing in altogether. You only have to enter your email address when you’re signing into your Google account. Afterward, a notification will appear on your phone asking you if you’re trying to sign in from another device. Approve the login by tapping “yes,” and you’re in. This would be especially useful for those who always have their phone nearby while using Google services on other devices, like their computer, as well as those who have long and complicated passwords that are difficult to type. It could also help to protect against phishing – something that Google addresses today through its Password Alert tool, too. The test was first reported by a Reddit user Rohit Paul, which was then spotted by the blogAndroid Police. According to Paul, he was sent an email invitation to join a test group being given access to try the new technology on their own devices. The group is called “Sign-In Experiments at Google,” and is found here on Google Groups. While the link to the group is public, you can’t view or participate without a direct invitation. A Google spokesperson confirmed that this is, indeed, a new experiment now underway, noting that: “We’ve invited a small group of users to help test a new way to sign-in to their Google accounts, no password required. ‘Pizza’, ‘password’ and ‘123456’—your days are numbered.” After accepting the invite and joining the group, the email explains that you’re then able to sign in without entering a password but you can continue to use your typed password if you choose. In addition, Google says it may choose to ask for your password as an additional security measure if it notices anything unusual about your current login attempt. (And it’s helpful to be able to use your password in case your phone is dead, or goes missing.) In the case your phone is lost or stolen, your screen lock or Touch ID on your smartphone will protect your private data, as the thief or unknown party will not be able to unlock your phone. Google also advises in the case of a lost device, you should sign into your account from another device and remove account access from the device you no longer have in your possession. Google tells testers they are able to turn off this new means of signing in at any time, and, as the email Paul received notes, testers can leave the trial group if they don’t want to offer Google their feedback about the sign-in process. We understand that only a small number of users are being invited to test this new feature for the time being. Google did not comment on when it plans on expanding access to more testers or the broader public. The password-free sign in process works on both iOS and Android at present. Source: http://techcrunch.com
Adrian Ababei / Mar 22'2016
In the last few months Microsoft’s Edge browser has gained some popularity along with gains in usage and user share but it has a long way to go before becoming a competitor for Firefox or Chrome. Only a tiny minority of users use Window 10’s default browser for their surfing needs.
Is Microsoft Edge Becoming Popular?
Edge is the default browser for Windows 10 and interestingly enough it grew its user share in recent months. Net applications is a company that deals with vendor analytics – the company’s results state that Edge recently went up by five points, effectively gaining a share of 30.7% of users running Windows 10. Back in January the percentage was much lower, at 26%.
This is the first time since 2015 that Net Applications reported an increase in Edge’s usage for Windows 10 users. Before this sudden increase, Net Applications reported steady decline in use and usage for Windows 10’s default browser.
DAP's Report on Edge
DAP or the Digital Analytics Program also reported an increase in Edge’s usage but at a smaller percentage than that reported by Net Applications. DAP reported that only 24.9% of Windows 10 users actually use the Edge browser – this is just a five tenths of a percentage increase as compared to Net Application report of 5%.
Digital Analytics Program visits over 4000 websites on over 500 domains from the United States. Their report is based mostly on US users even though some visitors access these websites from other parts of the world.
StatCounter is another metrics company based in Ireland – StartCounter also reported an increase in Edge usage in the previous months. Edge’s share of Windows 10 users was set at 17.1, three tenths of a percentage increase from previous months. In the same time, Edge’s global usage share for Windows 10 users did not increase at all and stayed at 13.3%, data showed.
Safari Fares Much Better
Edge’s inability to attract Windows 10 users has stunned Microsoft as well – the majority of users usually rely on the OS default browser for their surfing needs but this is not the case for Windows. Mac users for example use the default Safari browser at a much higher percentage – two thirds of all OS X users use Safari on a daily basis.
The reason behind Windows 10’s default browser Edge is its incomplete functionality. Microsoft launched it without support for add ons and its appearance hasn’t improved from the old Internet Explorer which was never popular to begin with.
Adrian Ababei / Mar 18'2016
When it comes to landing page web design, people tend to make mistakes – a lot of mistakes. Some web designers go for a minimalistic approach and strip the landing page to its bare minimum – just a call to action button without any other distractions. Others opt for a more traditional landing page design with navigation menus, plenty of text and images. Good landing page web design implies removing anything that can lead your potential users from the page’s goal.
Try a landing page design with no navigation menu
Just 16% of landing pages are without a navigation menu – that’s quite alarming simply when you think about all the lost conversion opportunities. Numerous studies show that landing pages without any navigation menus fare much better than pages cluttered with links, videos and text. Although you may be tempted to keep certain links on your landing page try to keep in mind your landing page’s ultimate goal: having a high conversion rate.
Avoid stock images in your landing page design
Generic images and stock images in general can have a negative effect on your conversion rate simply because they look insincere or for the use of a better word fake-ish. Stock images fail to inspire any trust from your potential customers and your conversion rate will take a dive for it as credibility is one of the main engines that can drive conversion rates up.
Another great landing page design trick is placing images on top of your catchy page headline. Research shows that headlines placed under images are read by 10% more users – this can lead to a snowball effect as when users actually read a headline, they are inclined to continue reading down the page.
If done properly, your call to action is worth its weight in gold
One of the most important things on your page is the call to action – ironically, this is also the hardest thing to get right on a page. Think about your call to action’s colour – good colour contrast can help your users find and click your call to action. Another thing you should consider is size – yes, size does matter in landing page web design. Your call to action should be big enough to be easily readable by users but not gigantic. The button’s text should be persuasive, a mix of excitement and urgency all bottled up into one simple red or orange life-changing button.
Remove any other links or make them invisible
We already removed the navigation menu but you might still have a footer menu or a company logo. The ultimate goal here is to create a single-action environment that boosts your conversion rate. If you can’t remove links directly, make them invisible to the user – lower contrast, make the link text smaller, tone down anything that’s competing with the call to action for your user’s attention. Fewer distractions equal more conversions.
Too many choices spoil the broth
Consumers can get overwhelmed fairly quickly when faced with too many choices. Studies have shown that consumers tend to buy less when faced with a myriad of choices and that’s understandable. If you have 10 products on a page and you want to get the best one you should check all of them right? Who has time to compare 10 different products? Nobody – your visitors will leave your page thinking they will return some days later.
Landing page web design in a nutshell
When it comes to landing page web design, think of the one goal of your page – converting users. Everything else is redundant and should be removed swiftly and without regret.
Adrian Ababei / Mar 15'2016
Since jQuery’s initial release more than eight years ago, it has grown in popularity among web developers and clients alike – nowadays jQuery is considered to be the foundation of the modern Web. In these past eight years the cross platform library was bundled with countless developer tools, sites and of course, with JavaScript. Now it’s time for jQuery 3.0.
jQuery 3.0 is released
jQuery 3.0 was just released – this version of jQuery has been in planning since October 2014. jQuery 3.0 is a much faster, slimmer version of the old one with great attention given to compatibility. All the old IE workarounds have been removed and more powerful modern API’s were implemented.
Upgrading to jQuery 3.0 is easy
Upgrading to 3.0 is relatively easy and jQuery even released a neat little guide which you can follow. Not only that but with the use of jQuery’s Migrate 3.0 plugin you’ll be able to see any compatibility issues in your project or code.
The new jQuery 3.0 is slim
In the future you won’t really have to use AJAX, you’ll simply be able to use a standalone library that focuses on AJAX requests or a combination of class manipulation and CSS for web animations. The 3.0 version also features a slim version which removes all AJAX and effects modules – this version also excludes any deprecated code. Web developers are of course able to include or exclude any modules they want, thanks to the custom build API used by jQuery 3.0.
Since it’s a very fresh release, there are a few necessary tweaks which will be made in the following months – jQuery Mobile and UI currently have some issues.
Changes and features in 3.0
IE workarounds are removed
The old workarounds and hacks for IE9 got removed in order to make jQuery 3.0 sleeker and faster. If you still need support for IE 8 you’ll just have to use the 1.12 release because versions such as 2.0 don’t offer full support for older versions of Internet Explorer.
jQuery 3.0 runs in strict mode
Since most browsers supported by jQuery 3 also support strict mode the new release has been built with it in mind. Your personal code is not actually required to run in strict mode and you don’t need to rewrite your existing code if you want to migrate to version 3.0. Strict mode can work with non strict mode and vice-versa – the only exception is related to some versions of ASP.NET.
A new API for animations
The request AnimationFrame() API is now used for animations, thus making them much faster and smoother. jQuery 3.0’s new API is only used with browsers that fully support it – other browsers such as IE9 will use the older API in order to display animations.
Escaping strings with special meaning got easier
The jQuery.escapeSelector() method allows web developers to escape characters or string that have a different meaning in CSS in order to use them in a jQuery-selector. Example:
„If an element on that page has an id of „abc.def”, it cannot be selected with $(„#abc.def” ) because the selector is prased as „an element with id ‚abc’ that also has a class ‚def’. However, it can be selected with $(„#” + $.escapeSelector( „abc.def”) ).”
Class manipulation supports SVG
Although jQuery 3.0 doesn’t fully support SVG, the methods that manipulate CSS class names such as .hasClass() and .addClass() can be used for SVG documents. Web developers are now able to find and modify classes with jQuery in SVG then style these classes with CSS.
Deferred objects are also compatible with JS promises
JavaScript Promises are a special type of objects usually used for asynchronous computations – these have been standard in ECMAScript 6 and their features and behaviours are specified in the Promises/A+ standards.
In the new version of jQuery deferred objects are compatible with the Promises/A+ standards. Deferreds are also chainable objects, which means it’s possible to create callback queues.
With the new release of jQuery the asynchronous callback functions executions are changed – Promises allow web developers to write asynchronous code that is more similar in logic to synchronous code.
Adrian Ababei / Mar 11'2016
The World Wide Web Consortium (W3C) is putting cybersecurity on its radar. It has announced that it is launching a new working group designed to standardize Web authentication and provide a more secure and flexible solution to password-based logins.
“Every other week you see news of a password leak or data leak from another major site, and as a user of the Web, every place you go you are asked to log in with a username and password,” said Wendy Seltzer, technology and society domain lead for the W3C. “That is difficult to manage on the user side, and not the best we can do in security.”
The new Web Authentication Working Group will work on creating a Web-wide standard that provides strong authentication without relying on a password. According to the organization, even strong passwords are susceptible to phishing attacks, database breaches and other hack attacks.
“When strong authentication is easy to deploy, we make the Web safer for daily use, personal and commercial,” said Tim Berners-Lee, director of the W3C. “With the scope and frequency of attacks increasing, it is imperative for W3C to develop new standards and best practices for increased security on the Web.” The W3C’s work will be supplemented with the FIDO Alliance’s FIDO 2.0 Web APIs. According to Seltzer, FIDO has already had success developing its own multi-factor authentication, and its APIs will help the working group ensure standards-based strong authentication across all browsers and related infrastructure. “Our mission is to revolutionize authentication on the Web through the development and global adoption of technical specifications that supplants the world’s dependency on passwords with interoperable strong authentication,” said Brett McDowell, executive director of the FIDO Alliance.
“With W3C’s acceptance of the FIDO 2.0 submission, and the chartering of this new Web Authentication Working Group, we are well on our way to accomplishing that mission.” In addition, the working group will complement prior work on the Web Cryptography API and Web application security specifications. “We’ve seen much better authentication methods than passwords, yet too many websites still use password-based logins,” said Seltzer.
“Standard Web APIs will make consistent implementations work across the Web ecosystem. The new approach will replace passwords with more secure ways of logging into websites, such as using a USB key or activating a smartphone. Strong authentication is useful to any Web application that wants to maintain an ongoing relationship with users.” The Web Authentication Working Group’s first meeting will take place on March 4 in San Francisco.
Source: http://sdtimes.com
Adrian Ababei / Mar 09'2016