Posts

Sass

Remember in our first JavaScript Developer Toolkit article I've told that you would need to install Ruby. Today we'll see why and the reason is Sass . Sass is an extension of CSS3 that helps you creating better stylesheets with less effort. Sass frees you from repetition and gives you tools to be creative. Since you can implement changes much faster, you’ll be able to take your design in a more boldly manner. Your stylesheets will be able to keep pace with changes, all while producing standards-based CSS you can use in any environment. As mentioned already, the Sass processor is written in Ruby. However Ruby environment has to be only installed on the development environment, so it doesn't matter how you write your server side. You only deploy the generated CSS files to production environment. gem install sass Sass offers a lot of features such as variables, nesting, importing, mixins and many more. I'll cover the most important of them, but make sure to read ...

JavaScript Factory Patterns

Image
Since June has 5 Sundays in it, today I will write a bonus article :) Following our last week's article about Publish and Subscribe Pattern with Postal.js , I'd like to broaden the topic talking about design patterns . The design patterns from the Gang of Four book offer solutions to common problems related to the object-oriented software design. It has been in use for decades and implemented in all server side languages. It's time we use them with JavaScript and start to write some piece of decent code. I'll be writing a series of articles covering all of them. As in the book, we'll be starting with creational patterns  and cover both Abstract Factory and Factory Method patterns. Abstract classes and interfaces enforce consistent interfaces in derived classes. In JavaScript we must ensure this consistency ourselves by making sure that each 'concrete' object has the same interface definition (i.e. properties and methods) as the others. Abstr...

Python for Data Scientists - IPython

Image
Introduction Having learned some basic packages of Python, you probably started to wonder that working through the python console is not very productive. In R we have RStudio, of which we've already talked in first  articles . Good folks of Python community have developed an IPython - an interactive Python console and web environment. Installation As usual we are using python pip package manager to install the package: pip install ipython Usage Once the package is installed, you can launch the console version by simply typing it's name in the console: ipython Once the application is started, one can simply type python commands and observe the results. Though it doesn't look that far different from the ordinary python console, it provides auto-quoting, code completion, search of previously executed commands, output caching and many more. As I said previously, there are two modes of running the IPython - console and web. To launch the web interface, one...

Python for Data Scientists - Pandas

Image
Introduction Having learnt NumPy and SciPy in previous articles, let's discuss our next package, called pandas. Pandas provides rich data structures and functions designed to make working with structured data fast, easy, and expressive. It is, as you will see, one of the critical ingredients enabling Python to be a powerful and productive data analysis environment. Pandas combines the high performance array-computing features of NumPy with the flexible data manipulation capabilities of spreadsheets and relational databases (such as SQL), mingling DataFrame - a two-dimensional tabular, column-oriented data structure with both row and column labels. It provides sophisticated indexing functionality to make it easy to reshape, slice and dice, perform aggregations, and select subsets of data. For users of the R language for statistical computing, the DataFrame name will be familiar, as the object was named after the similar R data.frame object. However the functionality...

AngularJS E2E Testing with Protractor

In continuation to  AngularJS series , today we'll discuss e2e or end-to-end testing of AngularJS applications. If you've been following the blog for a while, you must have noticed my numerous stressing the importance of unit testing using Jasmine and Karma and automating JavaScript testing with Grunt.js . The only thing left behind was e2e testing, of which we would talk today using Protractor for AngularJS applications. What is E2E Testing? End-to-end testing is a methodology used to test, whether the flow of an application is performing as designed from start to finish. The purpose of carrying out end-to-end tests is to identify system dependencies and to ensure that the right information is passed between various system components and systems. In contrast to unit testing, which verifies the correct behaviour of various components separately, end-to-end testing verifies the entire flow of the application. From front end development perspective, it will be check...

Publish-Subscribe Pattern with Postal.js

Image
Last week we talked about testing JavaScript Testing with Jasmine  and today I'd like to continue our conversation about testing rather from different angle - separation of concerns . Once the code slips developers' fingers, it is hard to find time and strength to rewrite, it making it more testable. What works, may never be rewritten, sounds a bit like Iron island refrain  What is dead, may never die :) Hmm - sorry for that! Nearly all today's applications have some calls to somewhere to retrieve the data. Front side retrieves from the server. Server side retrieves from services or database. Some manipulate it, others just format it and present as it is. Take a look at the following examples: function someLogic() { $.get("ajax/test.html", function (data) { $(".result").html(data); }); } function someLogic() { dataManager.getClients(function (err, data) { if (!err) { doSomething(data); } }); } How can you test it? First of all th...

D3 Data Visualization Library

Data visualization is the study of the visual representation of data, meaning "information that has been abstracted in some schematic form, including attributes or variables for the units of information". In the end everything we do, needs to be somehow presented to the users. Fortunately, we humans are intensely visual creatures. Few of us can detect patterns among rows of numbers, but even young children can interpret bar charts, extracting meaning from those numbers’ visual representations. For that reason, data visualization is a powerful exercise and is the fastest way to communicate it to others. What is D3? D3 is a JavaScript library, which helps in manipulating documents based on data. It uses HTML, SVG and CSS to create visualizations. With D3.js, the complete capabilities of new-age browsers can be used without being constrained to a framework. Fundamentally, D3 is an elegant piece of software that facilitates generation and manipulation of web documents ...