Press Review Inno #7


Mobility

 

Generic Protocols and Type Erasure in Swift

With Swift, you can define protocols by associating one or more generic types. These types are defined using the associatedtype” keyword. The name Generic Type” is a bit misused here. We should actually talk about a placeholder for a reserved type. Indeed, we will see that such protocols do not offer great flexibility of use when we consider them as generic.

Useful Information:

 

Web Development

Django 2.0 Release Candidate Now Available

By Kévin Barralon

The Django web framework just published the first release candidate of its upcoming 2.0 version. Django 2.0 is scheduled to be released on December 1st.

Don’t be fooled by the name – this new major release of Django will not bring any major significant changes to the framework. The changes in the latest version should be of the same scale as those found in past new releases.

Despite this, the most important change in the 2.0 release is its incompatibility with Python 2.7, the support for which is scheduled to last only until 2020. Django 2.0 will only support a minimum version of Python 3.4, and of course it is highly recommended to go directly to the most recent version of Python, which is presently 3.6.

URL Routing

In terms of new features, the new function django.urls.path() renders the URL routing syntax much simpler and easier to read. So, instead of having to write url(r'^articles/(?P[0-9]{4})/$', views.year_archive), you can write path('articles//', views.year_archive). This new syntax will also allow the view to receive the URL arguments with the proper type already defined (a whole number in the case of year above, instead of a string).

It is still not possible to add a constraint to the URL route directly (in this example, the fact that the year should only consist of four digits). The current function django.conf.urls.url() will be replaced by django.urls.re_path() which will keep the existing functionality of allowing regular expressions to be placed in the definition of the route.

The functiondjango.conf.urls.include() will also be directly available under django.urls. This will allow you to import your modules like from django.urls import include, path.

Other New Things

Helpful Links:

Deploying Entire Services with Docker Swarm and GitLab CI

by Jacob Cook

Here at Savoir-faire Linux, I work on the deployment infrastructure for many of our hosted services, and am constantly looking for ways to improve our DevOps practice. Currently the deployment pipeline is centered around the use of Ansible to manually provision a service inside a virtual machine and adjust as necessary. But in an effort to make builds and deployments faster and more stable for our developers, we are looking at new approaches, including the use of Docker builds pushed to a registry and subsequently deployed using a pipeline like GitLab CI.

One of the tools that can be used to deploy a micro-service architecture (created with docker-compose) is called Docker Swarm. Using a set of servers configured to act in a swarm, one can deploy a stack of containers in a simple pattern with only docker stack deploy. Docker will then automatically choose the appropriate servers in the swarm to deploy to, and handle networking between the services just as if you were using docker-compose on your local machine. Neat, huh?

The best part is that it plays nicely with our existing build system in GitLab CI. We can build, test, release and deploy across our infrastructure using GitLab CI and GitLab Container Registry. There are still pieces of the puzzle to work out but it represents a major leap forward in the simplification and stability of our DevOps practice.

Further Reading:

Press Review Inno #6

Design

Atomic Design

By Patrick Bracquart

Since the early days of the web, we talk about what goes into creating a Web “page”. This term shows how our vision of the web was informed since the 90s: it came from an architecture that was structured as a series of documents, like if they were printed pages of an encyclopedia.
However, for several years now, the multitude of available platforms in the Web ecosystem continues to grow and to become more complex. From the computer to the smartphone, and without forgetting the television or even smart watches, it has become clear that the concept behind the design and structure of Web pages is now obsolete.
There is a new methodology of design available that can take this into account. It is called Atomic Design, and the term was coined by Brad Frost. Thus, instead of thinking about content in the form of a page, each design element is created starting with its smallest component element (such as a call to action) and builds up to create something much bigger. We start from the atom to create the molecules, and these molecules come together in order to create a coherent and modular Web organism.

As each atom is placed individually in a library, Atomic Design saves a lot of time and makes for a more coherent and simplified end result.

Web Development

Makefiles, or How to Avoid Reinventing the Wheel

By Samuel Sirois

After having taken a break from frontend Web application development, I’ve recently jumped back into the field through two projects that I am working on. It represents a great opportunity to revisit my preconceived notions and old work habits, through a codebase that already exists and that is up-to-date with the latest stylish tools to use, ready after a simple git clone.

Wow, things do change quickly! (Even from the first line) From new versions of ECMAScript supported in modern Web clients – a panoply of pseudo-languages based on JavaScript – to the multitude of CSS pre-processors available… In addition to all these new automated build pipelines specifically created by and for JavaScript developers.

With all of these new shiny things, these automated build pipelines become essential to ensure that the minification, linking, compilation?!, of all of these files won’t cancel out the efficiency gains given by these tools which are now a necessity for the development of modern Web applications.

I still can’t keep myself from wondering if there hasn’t been a little bit of a lack of communication between those that have recently needed these complex tools in their projects (front-end developers) and those who have already faced these same requirements in the past and have discovered a solution (not the only one, mind you) to this problem, way back in the 70s!

I’ve never yet felt the need to use these new tools, as I already know Make, and having already been confronted with new, shiny, stylish solutions around the turn of the century, only to have taken some steps backward from something that already worked well. Indeed, I often insist on manually creating these Makefiles for projects I contribute to and I don’t hesitate to spend the time necessary to manage this tool.

Reinventing the wheel, i.e. to fall into the same traps and mistakes, or to really improve the situation? Here are a few interesting links to help you make your own opinions on the subject:

Contribution

From Contributions to Inno Hackfest

While evaluating the success of the afternoons we spend once per month on contributing to open source projects, we’ve decided to revise our formula a bit. Starting now, these afternoons will be held biweekly under the banner of “Hackfest”.

 Our First Few Hackfests

While working in small groups (and never alone), our SFLians have had the opportunity to learn about new technologies, to contribute to projects that they love or even to work on some new “side projects”.

In and amongst these contributions we find: initiations to the world of virtual reality (VR) through the creation of a dominos simulator using Unity and Oculus Rift; a workshop on blockchain technology and the connection with a concrete case study using the Ring software’s username database; the creation of a proof-of-concept client for a document-oriented database.

Upgrade Review

By Maxime Turcotte

The Drupal 8 migration report page, on which the modules that require migration are listed, was in sore need of a refresh in order to improve the user experience (UX). During our afternoon Hackfest, I wrote an initial patch that reuses certain design elements of the Drupal administration interface. Also, in adding just a few new descriptive icons, it is far easier to quickly find what requires our attention in this report.

 

Helpful Link:

Press Review Inno #5

Web Development

Node.js releases LTS of version 8.x

By Jacob Cook

The release schedule for Node.js provides for updates in long-term support (LTS) most every October, and this year will be no exception. Node.js offers developers a happy Halloween gift this year in transitioning its current version branch (8.x) to a stable LTS version. This means that features that have been at the cutting edge of development since early 2016 have finally been made available to users that require the stable and well-tested environment that an LTS version provides.
 

The new features in Node.js 8.x that have been eagerly awaited by developers include full support for async/await in Node.js core, updates to the V8 engine, an HTTP/2 implementation, a new version of NPM that allows for package version pinning with lockfiles, and much more.

Further reading :

Mobile

Firebase Dev Summit

The Firebase Dev Summit has just ended and several important announcements were made:
 
Following the purchase of Fabric by Google, Crashlytics will be integrated into the Firebase console. This new crash reporting system will benefit from access to other Firebase services, including Cloud Functions – which are the functions (lambdas) triggered when a Firebase internal trigger fires, or externally via a REST API call.

 

The added value of such an integration is in triggering a Cloud Function in response to some raised crashes. A crash in the main flow of the app could trigger an email to the entire team to speed up its resolution. A Cloud Function could also be used to create a task in a project management tool.
Google also announced that they are bringing machine learning to work with a new service, Predictions, which can categorize groups of users based on the way they use an application. Firebase can then present these groups with different offers or exclusive features to maintain their engagement.

 

Press Review Inno #4

Mobility

RxSwift 4.0.0 Final Version Released!

As mentioned in one of our last press reviews, we remain interested in and excited about new developments in the RxSwift project. The core developers pushing RxSwift forward have already released the fourth and most current version of it this past October 17 – i.e. RxSwift 4.0.0. You can find more information on its GitHub page here.

The version is available through various dependency management tools and GitHub. Just remember, the authors of RxSwift have always encouraged us to contribute to the project and, if you wish to do so, please follow these guidelines: About Contributing.

Android Studio v3.0

The new version of Android Studio is now available. Among the new features, we are most excited about: a new suite of tools allowing developers to profile their applications and more easily find performance issues, support for Kotlin, and a wide variety of new tools and assistants to make the use of Oreo APIs easier. 

If you are interested in learning more about the improvements and new features, please visit the
Android Developers Blog.


Netwoks and The Internet

The Internet, or How to Avoid Breaking What Is Working!

I try to avoid making the same old mistakes: i.e. breaking things that are already working or just avoid fighting against the tool itself  by regularly reminding myself of the Essence of the tools I use every day. 

Here are some articles that I find particularly pertinent regarding the “Essence” of the Internet, so that I can better avoid breaking things the next time I am asked to help put an existing Web application “in the cloud”!

Architecture and UI/UX Experiments at the DroidCon NYC 2017

Savoir-faire Linux’s Web & Mobile Development Team was at the DroidCon (@droidconNYC) in New  York on September 25th and 26th. DroidCon NYC is basically one of the biggest events on the planet fully dedicated to Android developers. During this two-day conference, more than 900 participants have been attending nearly 70 sessions on Android and its vibrant ecosystem. In this article, our team gives you an update on the presentations they have attended.


Sessions on Architecture

Model View Intent (MVI), Embracing Reactive UI’s

Our Web & Mobile Team! From the left to the right: Alexandre Lision, Hadrien De Sousa, and Thibault Wittemberg.

MVI is an application design pattern from the Cycle.js javascript library. It is based primarily on the concept of “Intents”, which represent the flow of user actions and the notion of “State”, which represents the immutable state of the application at a time T.

Intent streams are connected to the “State Reducers“. These reducers are simple functions whose purpose is to modify the state of the application step by step. The state is then displayed by the shape view of a “View State” (a pre-formatted state specifically for the view to display it).

This design pattern is therefore very much about functional reactive programming (or asynchronous dataflow programming). This is very close to Redux and highlights the interest of the immutability of the state (the mutability allows the sharing of reference on objects in memory, it is thus source of effects of uncontrolled edges) .

It also makes it possible to address the recurrent problem of managing the life cycle of the Activity / Fragment by introducing a cache of “State” on which the view will connect to each of its instantiations (in the case of a rotation for example) .

Reactive Clean Architecture

In this talk, the idea of “Clean Architecture” is based on a division of the application into 3 layers:

  • Presentation
  • Domain
  • Data

Reactive programming can help us in the communication between these layers that we present below.

Data layer

This layer exposes a “Repository” that provides public access to our data model and manages a “Reactive Store” that maintains the state of the application. Internally, this repository will rely on technical sub-layers such as network access, persistence and access to the file system.

Domain layer

This layer is based on a “Reactive Interactor” whose purpose is to manage user input. This Interactor subscribes to the “Reactive Store” in order to expose (by possibly filtering) the states intended for the upper layers (in particular the Presentation layer).

Presentation layer

This layer manages “ViewEntities” which represent the states of the application pre-formatted for the view. A “View Model” will be responsible for the mapping between the states from the “Reactive Store” (made available by the “Reactive Interactor”) and these “ViewEntities”.

In order to read more on this subject, you can consult the following article: Reactive Clean Architecture with Android Architecture Components

Opening Talk at .droidconNYC 2017

Advanced Networking with RX Java + Retrofit

While there are many useful example on how to use the “Retrofit” library, there is still need to better understand how it plays out in the context of complex cases such as the following:

  • Failure recovery,
  • The management of specific error codes,
  • Progress indicator display.

Here we provide you with some helpful tricks to address each of these cases.

The failure to recovery

  • Using the RxJava retryWhen operator.

Http errors

It may be interesting to apply the “share” operator on the observable Rx managing the requests (this makes it possible not to re-execute the request with each subscription). It is then possible to create as many subscriptions as there are error codes to manage, applying to each of its subscriptions a “filter” operator that will only pass the results with the error code to manage.

Progress indicator

The Rx stream managing the network request may someday set a “progress state” in the form of a “BehaviorSubject”. The Presenter (or ViewModel) can thus subscribe to the Observable resulting from this Subject and give rise to an update of the view.

An extra tip

It might be interesting to use RxLifeCycle combined with the MVP pattern to make it easier to manage rotations.

Kotlin

Full stack Kotlin

Kotlin is a well-known language to replace Java, especially as it proposes a more efficient syntax. Although associated with Android, it is also possible to use it in many other contexts such as: server application, native application, and Web application.

Back-end

Ktor is a library offered by Jetbrains (http://ktor.io). It allows to manage the Http layer and the WebSockets. It is therefore quite possible to develop a Rest API in Kotlin for example. Its operation is simple and passes by the instantiation of an embedded server (Jetty, Netty or Tomcat) then by the definition of routes. It is also quite possible to make him manage the static part of a website. Its main fault lies in its lack of documentation.

The following alternatives exist: Spring Boot / Javalin / Spark / Kara.

Front-end

It is also possible to write the front-end part (HTML and javascript) of a website in Kotlin with the help of the following APIs: kotlin.browser, kotlin.js, kotlinx.html. Please make sure to use the plugin “kotlin2js” instead of the plugin “kotlin”.

Native

Kotlin also allows you to write native code while having access to all the features of Kotlin 1.1.

We will be able, at the price of a compilation by type of platform, to run the same program on Mac OS, Linux, Android arm32/64, iOS and Windows. Of course, this does not concern user interfaces since each system has its particularities. In addition, one shall pay attention to correctly managing the memory in the manner of a C code. Furthermore, it is recommended to use the plugin “konan” instead of the plugin “kotlin”.

Build

Kobalt is a build system inspired by Gradle and Maven. It is written entirely in Kotlin and its compilation files are also valid Kotlin files, so it is possible to benefit from the code auto-completion features offered by IDEs. For more information, you can also access and read the Kobalt’s documentation –Kobalt: A modern, versatile build system.

Data Binding in a Kotlin World

Data binding as proposed by Google goes well with:

  • Dagger
  • RxJava
  • Kotlin
  • Architecture Components
  • Butterknife

It is, however, incompatible with:

  • Anko
  • Litho

It is possible to use an expression language directly in the XML layout (to do conditional processing, mathematical operators, etc.). This practice is not widespread since it breaks the principles of responsibility, namely write business code in the view part.


Sessions on the UI / UX Experience

View Performance Deep Dive

The Facebook teams have been trying to solve potential performance problems in rendering views, especially at the List view (ListViews, RecyclerViews …).

To do this, they made a 3-step comparison, measuring the rendering performance of the views with Google’s “Systrace” tool on a Nexus 5.

Step 1 : RecyclerView with ConstraintLayout

Each cell in the list is based on a layout type: “Constraint Layout“. The cells are relatively simple and contain only a text field, a button and an image. The performance analysis shows that the system omits some frames and therefore does not offer an optimal rendering.

Our feedback on the Constraint Layout in a recyclerView is brief; in fact, the wrap_content is sometimes misinterpreted on the height of ViewHolders which forces to use a fixed height.

Step 2: RecyclerView with Drawable

The idea here is not to build a view tree within a cell, but to draw it as a single Drawable.

The root view of the cell thus exposes its Canvas, on which we will come to draw our components. This technique requires a lot of code re-writing and does not take into account accessibility APIs or Touch events.

The measurement with Systrace shows us an obvious gain in rendering.

Step 3 : Litho

Litho is a library made available by Facebook. It relies on the declarative aspect of graphic components directly in the code, and not in XML layouts. Its primary goal is to reduce the rendering time of the view. For this, it is based on:

  • A finer division of the view tree (redraws only what is displayed),
  • An overall rendering of the view as a Drawable,
  • The rendering calculation in a “background thread”.

It also manages accessibility APIs and of course Touch events. Facebook is currently working on the integration of customs animations.

Facebook clearly shows us its intention to converge the concepts put forward in React.js with programming by Component and the use of Props and State. The internal Litho engine is responsible for mimicking the behavior of a virtual DOM. It is a competing vision of MVVM, MVP or MVI type modeling, where it will tend to use in addition to XML layouts a data binding (standard Binding of Android or RxBinding).

To obtain more information, you can read the Litho’s documentation — Litho: A declarative UI framework for Android.

Doze

Included from Android Marshmallow (API 26), Doze and App Standby are two components of energy saving. Doze is a system mode that restricts access to services, applications that use the CPU and the network extensively.

Since Android Oreo (API 26), these restrictions are even more severe and disable even implicit broadcasts (see, e.g. Implicit Broadcast Exceptions) and it is no longer possible to start a service in an application in the background.

To make it easier to migrate applications to include these new restrictions, Evernote has implemented the android-job library for creating deferred and background jobs.

The Resurgence of SQL

After a transition from mode and while many libraries of ORM can be abstracted, the SQL returns today with SQLDelight and Room.

Properly used, SQL allows you to execute the business directly in the database rather than in the code in order to gain performance.

SQLDelight

This library developed by Square generates Java models from SQL that allow to read and write in the database. SQL tables and declarations are written directly into .sq files interpreted by the library.

SQLDelight supports AutoValue but does not support Kotlin data class in its current version

Room

Room is a SQLite abstraction layer developed by Google for Android and is part of the Architecture Components such as LiveData and ViewModel.

This library generates SQL from Java using pre-processor annotation.

There are many examples of implementation of this library including Kotlin and there is more complete documentation for SQLDelight.

To obtain more information, you can consult the Documentation of Room here: Room Persistence Library

GraphQL on Android is here!

GraphQL

GraphQL is a query language for API development that aims to provide a complete description of the data that allows clients to query only what they need. GraphQL is developed by Facebook and is an answer to the problems encountered during the development of API Rest.

Apollo

Apollo-Android is a GraphQL client that generates Java templates from GraphQL queries written in a .graphql file. Generated classes are used to create network queries to the GraphQL API.

Apollo was written for the purpose of being fully compatible with the RxJava2 responsive programming library.

  • Apollo-Android is available on GitHub.

Upgrading to Moshi

Moshi is a parsing library of JSON to Java developed by Square who wants to be the successor of Gson considered inactive and heavy (1345 methods for Gson against 759 for Moshi).

The implementation of Moshi is relatively similar to that of Gson to facilitate the migration from one to the other. Some differences however:

  • Moshi has less default adapter for Java and Android platform types, forcing developers to write their own adapters,
  • For the sake of simplification, Moshi is less configurable (no naming strategy, versioning, etc.)
  • No JsonElement
  • Moshi uses the Okio bookseller for I/O and integrates perfectly with OKHttp

Moshi also supports Kotlin (moshi-kotlin) but is dependent in his current version of kotlin-reflect so size is very important for Android standards (11,500 methods).

  • Moshi is available on GitHub

Press Review Inno #3

Web Development

PyCon 2017

By Jacob Cook

PyCon Canada is soon upon us, and the national Python conference of record will be held in Montreal this year, from November 18th to the 21st.

As a software company well-anchored in the Python and Django communities in Montreal, Savoir-faire Linux will be sending a large contingent of employees to attend. The first two days of the conference include keynotes, talks and coding tutorials which cover some of the newest and most useful developments in the Python universe and in software development more generally. On Sunday the 19th at 11:50am (Abstract here), I will be addressing the conference and giving a talk on how to quickly create Django applications that utilize the dynamic front-end power of React. With a stellar speaking lineup announced and 70% of tickets already sold, this year’s PyCon Canada promises to be the biggest yet.

Free Software Projects and Communities

#Hacktoberfest or how a dormant Free Software project is now more active than ever

By Samuel Sirois

Istvan Szalaï and I are attempting to restart the development of a Free Software project that we started last summer but is presently inactive. This project is called RingMe.js. In order to motivate ourselves a bit more to make some contributions to the project, Istvan proposed that we create some issues in the project as opportunities for contributions to Hacktoberfest by DigitalOcean. What started out as simply being a use of “gamification” to motivate ourselves to put more effort into the project became a magnet to some small contributions by passing strangers that helped solve some pressing tasks, bugs and necessary improvements that were marked with the tag #Hacktoberfest. In fact, we were surprised to find that the contributors took time to propose quality code (Check out the code here: savoirfairelinux/ringme.js).

Why has this been such a success?

A few possibilities:

  • The tasks, bugs and new features are simple, precisely-worded and not overly broad in scope (thanks to Istvan);
  • JavaScript is considered a “sexy” programming language in 2017;
  • The codebase is sufficiently young and unique to be easy to understand for newcomers, and it’s also easy to propose coherent solutions;
  • The README, CONTRIBUTING and issue template files are present and well thought-out (thanks to Emmanuel);
  • The project maintainers (Istvan and I) try to respond to contribution requests and questions within a period of 48 hours;
  • #Hacktoberfest has become a popular Web development event within the open source community.

Thanks to:

Thanks to Istvan for having come up with the idea to mark our issues with #Hacktoberfest. Thanks to Jacob for having helped us effectively evaluate some pull requests due to his knowledge of the modern JavaScript ecosystem.  And thanks once again to all contributors to the project, including (at press time):

Mobility

Secret: Psss…  Have You Heard about Android View State Storing?

Who has never before had problems or encountered weird behaviors while trying to store/restore custom views on Android ? In this article Elye will explain how the system works and how one can avoid problems.

Read the Article: A must know secret about Android View State storing mechanism!

Press Review Inno #2

Translation by Jacob Cook

Mobility

FireStore: The New Real-time Database from Google

By Thibault Wittemberg

Mobile developers are often confronted with a recurring puzzle when they develop apps. It is the question of how best to manage data synchronization with a server back-end in both online and offline modes?

Google provides us with a new answer to this question with its FireStore service. This service is part of the Firebase suite and is currently in beta testing. It is presented as Google’s new preferred solution for real-time data storage. The solution is based on a document-oriented storage model (NoSQL), which means that we store collections of key/value data, like JSON objects.

FireStore can transparently manage the synchronization of data between multiple mobile devices in addition to the effortless handling of lost connections. This means that, in case of a network outage or disconnection, data remains locally accessible and updates to it will be performed transparently once the connection can be re-established. Below you can find two YouTube tutorials by Brian Advent. They show how easy the integration of FireStore can be in an example of messaging application.

Two FireStore SDK integration tutorials for iOS, by Brian Advent:

Also, you can access FireStore official documentation.

RxSwift 4, with Swift 4 Support, Announces the First Release Candidate Version

With each new release of the Swift programming language, developers work feverishly to update their libraries and support the latest version. This has definitely been the case for the developers behind RxSwift, who deployed the first release candidate of RxSwift 4 on October 8th.  This version is available via the different Swift package management solutions as well as on Github. The authors of RxSwift encourage open source contributions, for which you can find the rules in the repo.

Discovering the Architecture of Model-View-Intent

I thought I knew everything I needed to know about the MVI architecture, after all the name is fairly clear. For me, an Intent = new Intent(). With this, I initially believed it would fall into an architecture pattern based on Android Intents, and I was under the impression that a lot of spaghetti code would be required to replace RX by IntentReceivers/Broadcasters. This seemed like a big step back to me. However, during Droidcon NYC, my colleagues who were present were able to participate in a presentation on MVI where they gained invaluable and cool experiences.

I rolled up my sleeves and got to work in playing with MVI. First, I found this article by Hannes Dorfmann. It explains the advantages of MVI in a very didactic way. MVI addresses a problem that is often ignored by other patterns like MVVM or MVP: the state. By implementing a Reducer, we are able to manage the state changes of the application in a deterministic fashion.

Hannes Dorfmann proposes an implementation of MVI. However, it is written in Java and uses inheritance. The next step is to propose an implementation in Kotlin by composition/protocol.

How to Become a Contributor to WordPress? Baby Steps… To Big Dreams!

Are you passionate about the Web and Free Software Movement? Are you looking for an opportunity to play your part? Perhaps you’ve considered contributing to the WordPress project? This tutorial is for you! Our free software developers have contributed to the core of the application and now they’d love to introduce you to the development process of the most popular on-line publishing platform in the world. Cheer up and follow these steps to get started!

Subscribe
You can begin your journey by subscribing to a variety of platforms used by contributers. This helps you establish a connection with the community and remain in touch.

WordPress
Subscribing to WordPress is a must. WordPress.org serves, among other things, to document procedures and publish information related to its development platform. This will be your main reference, so subscribe and log in.

Once you are connected, we invite you to consult the section of the website concerning Development and to get to know the different teams and their missions. This is also a great opportunity to subscribe to various newsletters if you wish to follow a particular stream of development (marketing, modules, themes, documentation, etc.)

Slack
People discuss their contributions via the Slack collaborative communication platform. They hold meetings, disseminate information and help users reach their contribution objectives. On Slack, you will find all the influential developers in the WordPress community, it is the ideal place to ask them questions!

Please read the subscription documentation carefully. The procedure can sometimes be confusing. If you are having trouble signing in to your WordPress.org account, visit the subscription page and the new instructions will show up. You can then sign in using this link: https://wordpress.slack.com/.

Trac
Your last step before contributing! Check out the Trac ticket manager. Every change in WordPress is documented here. The main developers use this tool to approve and integrate changes to the core. To ensure effective, accurate and coordinated development, using documentation is mandatory. Now we can get started with developing for WordPress…

Following the Best Practices
Let the fun begin! Before writing code, you will need to integrate the project’s best practices and development standards. Some documents will be more useful to you than others. We suggest that you focus on these sections: Core Contributor Handbook, Best Practices, and Writing Patches. For PHP developers, you will also be interested in the PHP Coding Standards and Core API documentation.

The Environment
The majority of developers use Varying Vagrant Vagrants (VVV), which runs under all operating systems. VVV is an open source Vagrant configuration focused on WordPress development. It is mostly used to develop themes, modules, and plugins as well as for contributions to WordPress core. It may be a bit complex to install optional Vagrant modules, so if you are using a Linux environment, just make sure you have the “build-essential” and “libc6-dev” libraries before you get started. Feel free to work with other tools as well. VVV is not the only choice you have. But if you choose any other tools, please do not forget to report your developments on WordPress’ core code repository, to track the testing and progress of your contributions!

Here is an example of installing a development environment using VagrantPress and Git deployed with Ubuntu.

git clone https://github.com/vagrantpress/vagrantpress.git
cd vagrantpress
vagrant up
rm -fr tests
git clone git://develop.git.wordpress.org/ tests
vagrant provision

SVN and Git
You have probably noticed that the code repository uses SVN. If you wish to contribute to the heart, we strongly recommend using it. But there is no obligation, it is also possible to go through Git. You will find the documents you need to use for these two versioning systems in the following libraries: How to Use Subversion for developers, plugin, codex for SVN and Using Git for the second.

CSS and Javascript
WordPress compresses some resources. To enable you to work, you must disable this function in the “wp-config.php”. Add “define (‘SCRIPT_DEBUG’, true);”.

Code Validation
WordPress code standards are most likely different from those you are used to. A code format checker can provide great help. Use PHP_CodeSniffer with the WordPress Coding Standards. You can also read the WordPress style guidelines for detailed installation instructions.

Test-based Contribution
Did you know that you do not have to be a seasoned developer to contribute to WordPress? For example, testing is a good way to participate in development while learning. Trac lists the corrections to be tested. If you are starting out, work first on non-urgent corrections.

Baby Steps… To Big Dreams!
Yes, contributing to a free software project is indeed a huge investment of your time. Reading, setting things up, making configurations, downloading, etc.

However, once you’ve passed the first steps and made your first few contributions, you will officially be a free software contributor! Now take this chance to make your first baby steps and realize your big dream of becoming a free software developer!

 

Automated Interaction Testing For Major Web Browsers

To improve and accelerate Web sites and applications testing, developers often use a class of tools called “headless browsers”. These tools are used to test the behavior of web browsers automatically, without visualization.

The most popular headless browsers are currently PhantomJS for http://en.wikipedia.org/wiki/WebKit, the layout engine of Safari and Chrome, and SlimerJS for testing under Gecko, Firefox’s layout engine.

We can also use CasperJS to facilitate the creation of test scenarios with the PhantomJS JavaScript API. Here is a short demo on “Automating with PhantomJS and CasperJS” by Chris Hawkes:

 

Finally (drum roll please!), the development of a new tool for Trident – the layout engine of Internet Explorer – started on Github this fall. That is important to note because over 50% of desktops browsing the Web are still equipped with a version of Internet Explorer, from version 6 (4.92%) to version 10 (17 , 5%) inclusive. In fact, TrifleJS is another add-on to PhantomJS for the .NET Windows environment.

What does this mean for web developers?

With these tools we can now:

  • Create screenshot scripts to see our web projects rendering in each of these three layout engines;
  • Check all the links of a web project and make sure that there is no 30X/40X/50X errors (e.g. 300,404,501);
  • Create integration tests for complex forms with 10,000 field entries;
  • Create an army of robots grabbing all the images of cats on Imgur. 🙂

Please check this website again after the New Year if you’re interested. I will try to set up a short demonstration and post it in my next blog post.

Modernize your deployment practices with Vagrant

Vagrant LogoA recurring problem in the world of web development is the complexity associated with setting up a suitable environment for each new project. If we’re lucky, we have up-to-date textual information to perform that setup. Even in that shiny world where we’re lucky, the time required to follow those textual instructions vary depending on the technical skills of the developer. Even when those instructions are up-to-date, it’s not rare at all to routinely spend many hours trying to set this new environment up.

Here at SFL, we recently started integrating Vagrant to our projects in order to modernize our deployment methods and results so far are very encouraging.

What is Vagrant?

Vagrant is a command line library allowing to quickly create and provision virtual environments through VirtualBox. It allows, with one vagrant up command, to create a VM from scratch and automatically configure it to host your project. For the configuration part, it’s integrated with Puppet, which is good for us because that’s already what we used here at SFL to manage our machines.

Benefits

Environment setup speed. What used to be a more or less relevant set of textual instructions is now executable Puppet code. This means that a new developer being brought to a project has one single command to type:

fab deploy

and within minutes, the site is ready to be used locally.

Setup reliability. Gone are the times of textual instructions that fall into obsolescence and make new developers want to tear all their hair off (well, the hair tearing part is not entirely gone, but at least it’s not over environment setup anymore). If the Puppet code becomes incorrect over time, it’s very easy to spot immediately and correct it.

Homogenous deployment environments. There used to be a time when we developers had to describe to our sysadmins the production environment that we needed for a new project, and then they would do their best to understand what we meant and build it. Now, with Puppet, developers and sysadmins speak the same language. The same code that is used to build a local environment can be reliably used by sysadmins to replicate that environment elsewhere.

How to use it?

How you use Vagrant depends on the type of project you use it with. For example, our Django projects use a mix of Vagrant and Fabric to perform setup and deployment. The Puppet side takes care of “OS specific” setup (installing packages, configuring Apache, creating databases) and Fabric takes care of “Python code specific” setup (pushing the code to the environment, pip dependencies, South migrations).

I’ve published, on Github, a sample Vagrant-enabled Django project that looks a lot like what we do internally so you can easily experience the potential of that solution. If you have Git, VirtualBox, Vagrant and Fabric installed on your machine, you can run this project (from nothing) with these commands:

git clone https://github.com/savoirfairelinux/django-vagrant-demo
cd django-vagrant-demo/deploy
fab deploy

Then, you can visit http://demo-django.local:8080 and see the newly-deployed site.

The deploy script will ask for your sudo password because Vagrant and the Fabric script need to modify your /etc/hosts file to make demo-django.local to 127.0.0.1.