Grunt: The JavaScript Task Runner
ChemDoodle Web Components | HTML5 Chemistry
JavaScript Code Smells
In the past I've given presentations, recorded videos, and written blog posts about fixing common JavaScript and jQuery bugs. This is a good skill to have, but what about working code? Fixing broken code is important, but have you ever gotten into the situation where your code works, but it doesn't feel quite right... maybe even smells? "A code smell is a surface indication that usually corresponds to a deeper problem in the system" --CodeSmell by Martin Fowler As we grow as developers we strive to write more maintainable code, but on our journey we often times don't know what that looks like yet. Your JavaScript may pass stardard JSHint rules, but that doesn't mean it's legit. Most developers can smell brittle and fragile code a mile away, but it takes time and training to combat against these smells. Video The following video was recorded this year at FluentConf. Types of Smells The following are the types of smells that I cover throughout the presentation. Slides
JavaScript Overview - JavaScript
This chapter introduces JavaScript and discusses some of its fundamental concepts. What is JavaScript? JavaScript is a cross-platform, object-oriented scripting language. Core JavaScript contains a core set of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Client-side JavaScript extends the core language by supplying objects to control a browser (Navigator or another web browser) and its Document Object Model (DOM). Through JavaScript's LiveConnect functionality, you can let Java and JavaScript code communicate with each other. Netscape invented JavaScript, and JavaScript was first used in Netscape browsers. JavaScript and Java JavaScript and Java are similar in some ways but fundamentally different in some others. JavaScript is a very free-form language compared to Java. Java is a class-based programming language designed for fast execution and type safety.
Angular Classy
Angular's controllers are super-simple which is fantastic for getting started (they're just functions). Because they are just functions, there's lots of different ways to write Angular controllers. This is powerful but can also lead to a lack of structure, especially when many people (with many different coding styles) are working on the same codebase. It can be helpful to have something a little more structured and prescriptive. The code to the right is a Classy controller for a simple Todo application. Hover your cursor over the code on the right for comments and explanations. Injecting Dependencies Angular veterans will know that if you want your Angular code to work with minifiers then you have to annotate your dependencies (i.e. list your dependencies twice), like so (without Classy): app.controller 'AppCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) -> ] app.controller('AppCtrl', ['$scope', '$location', '$http', function($scope, $location, $http) { }]); Methods FAQs
Object-based programming in C « State Space
Embedded developers abandon C++ in droves. According to the 2007 survey published in the ESD magazine, the C++ use declined by one-third compared to year before, which was offset by an equal rise in popularity of C—the only viable alternative in embedded. Even though the last year was most dramatic, the trend has been actually continuing for a number of years. This couldn’t go unnoticed by UML tool vendors, who desparately have been trying to cater to C programmers. For example, you can check out the DDJ article “UML for C Programmers” (which seems to be pretty exact re-print of the Embedded Systems Conference paper “UML for C-Based Embedded Systems“). I find this really disturbing. One would assume that the 21st-century software developers have objects in their bones and everyone knows how to program with objects in any language, including C. So here is how you implement a Point class in C (a Point that you can put on a screen): Moreover, you can as easily implement single inheritance.
Angular directives for Bootstrap
The $uibPosition service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc...). getRawNode(element) Takes a jQuery/jqLite element and converts it to a raw DOM element. parameters element(Type: object) - The element to convert. returns (Type: element) - A raw DOM element. parseStyle(element) Parses a numeric style value to a number. value(Type: string) - The style value to parse. (Type: number) - The numeric value of the style property. offsetParent(element) Gets the closest positioned ancestor. element(Type: element) - The element to get the offset parent for. (Type: element) - The closest positioned ancestor. scrollbarWidth(isBody) Calculates the browser scrollbar width and caches the result for future calls. isBody(Type: boolean, Default: false, optional) - Is the requested scrollbar width for the body/html element. (Type: number) - The width of the browser scrollbar. position(element, includeMargins)
21 Useful Workflow Tools for AngularJS Developers
These days, AngularJS is one of the most popular technologies around the web. It has simplified web application development to a great extent. Currently, it is a popular name buzzing in the community of developers and technology enthusiasts. AngularJS Frameworks 1) Ionic Ionic is an open-source, front-end framework for developing mobile applications with HTML, CSS and JavaScript. 2) Supersonic Supersonic is a front-end framework for developing data-driven hybrid apps and cool user interfaces for mobile devices. 3) LumX Lumx is a responsive front-end framework based on AngularJS and Google Material Design guidelines. 4) Radian Radian is an Angular JS framework ideal for working on multiple development projects. 5) Mobile Angular UI Mobile Angular UI is a front-end framework for building HTML5 mobile application with Bootstrap 3 and Angular JS. Also See: 15 Directives to Extend Your Angular.js Apps AngularJS Code Editors 6) Sublime Text 7) CodePen 8) JS Fiddle AngularJS IDEs 9) WebStorm 10) Aptana
Model pattern for Angular JS
A word of caution, don’t get fooled. Even though this guide starts rather simply with things you know and take for granted; that’s just an introduction or preparation of a context if you will… It soon progresses to hardcore ES6 goodness, you are searching for, so no worries! Angular before models Most of the old Angular JS tutorials on the internet (and also projects you encounter while working for the clients) are still using simple approach where the $http service is used directly in the controller and the data is then unwrapped and assigned to some $scope property so that it is usable in the html template. Storing data in controller’s $scope doesn't belong between recommended practices for some time now. The protomodel Some articles (e.g.: this & this) have proposed that $http request should be resolved directly in the service and then stored in some exposed (public) service’s variable. Syntax used in the following examples Simple model Fetching the data Using model in component Conclusion
