weLab

Hello! This is weLab, a blog about web & mobile development, work culture, user experience, entrepreneurship, and more. Mantained by the fine folks at weLaika. We recently created Wordless, an opinionated WP theme framework for the 21th century. Be sure to follow us for more updates about future open source projects and products.

[welab]

[TCS] Stay hungry, stay foolish.

Un titolo che evoca un bel discorso di Steve Jobs come spunto per dare uno sguardo alla storia di iOS, il sistema operativo che anima gli iPhone e gli iPad. Ci siamo soffermati specialmente su alcune caratteristiche più importanti del suo linguaggio primario: Objective-C.

I frequentatori della Torino Coding Society ora hanno le idee più chiare su come si dichiarano e implementano le classi, cosa sono le properties, le categories, la delegation e i protocols.

Le slide sono disponibili qui.

[welab]

Torino Coding Society: i prossimi appuntamenti

Ecco, a grande richiesta le date dei prossimi appuntamenti:

22 aprile:  Remote is not remote Lavorare ovunque con l'unica necessità di un pc e di una connessione. Limiti e vantaggi.

28 aprile: “Git” a life Uno sguardo d’insieme al più diffuso e completo sistema di controllo di versione.

12 maggio: User Experience: don’t make me think Un approccio di buon senso alla web usability e al design intelligente.

26 maggio: JQuery: write less, do more Scrivi di meno e produci di più con JQuery, il framework Javascript che semplifica la programmazione HTML.

9 giugno: AngularJS: HTML per supereroi Come rendere più semplici lo sviluppo e il testing grazie all’approccio MVC. Ogni incontro, rigorosamente, nell'accogliente sede del Tag. Iniziate ad organizzarvi, non negatevi l'opportunità di poter dire:"Io c'ero!"

A presto.

[welab]

[Never Back Down]

Lunedì 24 marzo al Torino Coding Society ci siamo nuovamente ritrovati, come sempre negli spazi del Tag, per parlare di progettazione web e delle problematiche che comporta. Niente codice questa volta, ma una riflessione su come la progettazione può contribuire al successo di progetti a media o alta complessità, in cui persone molto diverse per formazione, mentalità ed esperienza, si confrontano quotidianamente.

Abbiamo fatto il punto sulle figure coinvolte e su come adottare metodi agile nel concreto e lavorare in modo lean a partire dallo studio iniziale della user experience. Si è parlato anche di punti in comune e di grandi differenze fra developer e designer e di come mantenere una sana e costruttiva contrapposizione. Clienti e project manager hanno avuto il loro spazio, con pregi e difetti, ma soprattutto abbiamo fatto 8 buoni propositi per far funzionare meglio le cose. Li trovate tutti a questo link: https://speakerdeck.com/welaika/never-back-down

Prossimo, immancabile appuntamento del TCS, il 7 aprile con una serata di introduzione alle app iOS.

[welab]

[TCS] Androidize Me!

Lunedì 10 Marzo, presso l'ormai consueto TAG di Torino, abbiamo cambiato tema al *Torino Coding Society* e ci siamo tuffati per la prima volta nel mondo dello sviluppo mobile con un'introduzione a Android, il sistema operativo per smartphone e tablet di Google.

Abbiamo ripassato un po' di storia (e di gossip!) della nascita travagliata di Android, abbiamo cercato di orientarci all'interno del più eterogeneo scenario di sviluppo mobile, abbiamo parlato dei fondamenti di programmazione e di design che introducono allo sviluppo di applicazioni per Android.

In particolare gli accenti sono caduti sulle buone idee per uscire dalla forte mediocrità generale delle app Android e sulla capacità ed attenzione dei designer ad immaginare applicazioni che seguano le valide linee guida di Google, senza lasciarsi andare a sterili imitazioni della concorrenza.

Come sia potuto accadere che il relatore principale fosse un iOS developer...non ve lo so spiegare!

Qui le slide per ripassare o per chi si è perso la serata: https://speakerdeck.com/welaika/androidize-me

Presto su questi schermi qualche notizia sulla prossima serata del TSC, prevista il Lunedì 24 Marzo.

[welab]

[TCS] Wordpress in salsa Agile

Lunedì 24 febbraio al consueto appuntamento del Torino Coding Society presso la sede del Tag, i nostri esperti in materia, Filippo Gangi Dino e Alessandro Fazzi, hanno abilmente spiegato come, con il plugin Wordless e la gemma Wordmove, si possano accelerare i tempi di sviluppo su Wordpress.

Tra le varie discussioni è emerso un interessante e piacevole scambio di vedute tra la vecchia e la nuova generazione di sviluppatori.

Qui sotto trovate le slide della serata:

https://speakerdeck.com/welaika/agile-wordpress

Ci vediamo il 10 marzo per il prossimo appuntamento su Android!

[welab]

Torino Coding Society: i prossimi appuntamenti

Ciao a tutti, scommettiamo che eravate in apprensione per i prossimi appuntamenti! Eccoli qui:

24 febbraio: Wordpress in salsa Agile. Parleremo di Wordless e Wordmove, due nostre creazioni per facilitare e velocizzare lo sviluppo e il deploy.

10 marzo: Androidize me! Introduzione allo sviluppo della vostra prima app Android.

24 marzo: Never Back Down. Fasi della progettazione ICT, problemi che si riscontrano e possibili soluzioni.

7 aprile: Stay Hungry, Stay Foolish! Un'introduzione alle app iOS.

Gli incontri si terranno sempre nella sede del Talent Garden. Controllate le email, vi invieremo tutti gli aggiornamenti di volta in volta.  Vi aspettiamo!

[welab]

Let's rumble!

We(Laika) like challenges. That is why we took part for the third time to the Rails Rumble. 48 hours, hundreds of teams worldwide, one goal: build up the best web app as fast as possible. Our guys made two teams, one of which won the 9th place taking for the first year weLaika among the winners.

We designed two apps: http://evry.io/, winner of the ninth place, which will organize all your reminders in one easy-to-use, nice-looking and helpful place. Problems keeping track of your to do’s and sick of leaving post-it’s all over the place? Here’s what you need, here’s what you’ll love. Give it a try!

The second one, http://sizematte.rs/ will help you highlight what you’ve got. If you are a freelancer or a web agency, you want to know and show how big is your portfolio. Let’s gauge it! Sizematte.rs will rank all your sites and give them a score so you will make your own size matter. Show it off!

[welab]

On girls and software

If you’ve ever been to a software developing conference, one of the first things you will have noticed is that there are very few girls who design and write code.

I’ve always felt puzzled by this. In the western world, women study and work successfully in many scientific fields, but when it comes to IT their percentages drop.

In the United States only the 0.3% of female high school graduated choose to major in computer science in college. (source: Girls Who Code)

I believe this is just a cultural issue.

Each time that society doesn’t promote conditions that help everybody to reach their full potential at best, the society as a whole is weakened, not just the ones who are left behind.

That’s why weLaika enthusiastically joined the sponsors of Rails Girls’ Workshop in Milan: associations who work to promote computer science amongst young women deserve the support of everybody.

Parents should start making a difference and giving their daughters - as well as their sons - the motivation, the models, the instruments to enable them to get closer to a world they could love and also enrich.

Teachers should encourage their students not to be intimidated by programming. It should instead be thought of as a great gym for the human mind, like Latin or logical analysis. It’s something that must be offered to everybody.

Companies operating in the sector should make a commitment to actively hire women, instead of making them an unhappy minority; co-workers should treat them like equals, not like exotic animals.

Let’s think about it, and let’s start to change.

(In the picture, the first Barbie computer engineer - 2010. Source: flickr)

[welab]

Building your own Android app: first lesson

Through the years weLaika invested resources in order to specialize in the development of mobile applications, in Android and iOS ecosystems. The Android platform is definitely easier if you want to start programming in the mobile sector because it doesn’t force you have any specific operating system and the reference language, Java, is very well known in other sectors. The opportunities for developers in this market are large and that’s why this is the first post of a series that will explain how to develop from scratch a real app for Android, in particular a map of the fountains of your city. To start, make sure you have the latest version of the Java Developer Kit (JDK) installed (at least 1.6): You can check if you installed correctly by running the command in the console

javac -version

If you have not yet installed it or you have an old version, you can download it at http://www.oracle.com/technetwork/java/javase/downloads/index.html depending on your operating system; you must have at least the 1.6 version (JDK 6) to develop Android applications correctly.

On ubuntu and compatible operating systems, you can run by command-line

sudo apt-get install openjdk-7-jdk

If you want the official Oracle version, you need to add a PPA and install it

sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get install oracle-jdk7-installer

After installing the JDK, you need to install the IDE, the main software that will help you in all stages of development; even if in these months Google is releasing Android Studio based on IntelliJ, in this tutorial we will use Eclipse because it is stable and on the internet it will be easier to have a full and immediate support in case of problems.

Linux and Mac

For Eclipse you need the Standard version: you can download at http://www.eclipse.org/downloads/. Once you've downloaded the correct version for your OS and started it (just run the eclipse executable file), you have to configure your workshop (the folder where Eclipse will put your projects). On Ubuntu, the version on the repository is pretty old, so it’s better to download manually the lastest version from http://www.eclipse.org/downloads/?osType=linux, extract it in the /opt folder and create the link.

sudo mv eclipse-standard-kepler-R-linux-gtk.tar.gz /opt/ cd /opt sudo tar -xvf eclipse-standard-kepler-R-linux-gtk.tar.gz

And create in the folder /usr/share/applications/ the file eclipse.desktop with the following lines

[Desktop Entry] Name=Eclipse Type=Application Exec=/opt/eclipse/eclipse Terminal=false Icon=/opt/eclipse/icon.xpm Comment=Integrated Development Environment NoDisplay=false Categories=Development;IDE Name[en]=eclipse.desktop

Like a big puzzle, some pieces are still missing: you need to install and configure Android SDK and the ADT. The Android SDK is the software development kit for Android itself and it allows you to compile your applications so you can distribute them in that mobile ecosystem. You can get it at http://developer.android.com/sdk/index.html and you have to extract it into a folder. On an Ubuntu operating system, you can alternatively use the PPA to install it automatically: just run in command-line

sudo add-apt-repository ppa:upubuntu-com/devel sudo apt-get update sudo apt-get install android-sdk

After you have successfully installed the android sdk, you need to install the specific tools to the version of Android: run the android sdk and install the packages that it suggests to have

Now you need to install the plugin for Eclipse: in the Eclipse IDE choose “Install New Software...” from the “Help” menu.

You can add the repository for Android tools for Eclipse clicking on “Add” button and inserting the url https://dl-ssl.google.com/android/eclipse/

Select the tree “Developer Tools” and finish the installation.

The last step involves linking the previously installed sdk and Eclipse: in the preferences, set the right Android SDK path in “SDK Location” (if you installed it in Ubuntu using the PPA, the path is under your home in the “android-sdk-linux” folder, otherwise where you extracted it).

You need also to check  in “Java” > “Compiler” that Eclipse will compile using the 1.6 version.

Windows

On Windows, a quick solution is to install the bundle that includes everything you need (Eclipse and the Android components): you can download the package at http://developer.android.com/sdk/index.html

After downloading the bundle package for the version of your operating system, just start the program eclipse.exe present in the eclipse subdirectory.

If everything goes well, you should obtain a screen like the next one.

Conclusion

In this first lesson we have prepared the development tools for Android. In the next post there will be a simple explanation to create an app, an useful introduction before starting the development of the app.

[welab]

Word Press day @ Bologna 13/09/2013

Thrilled as one can be, we were on our way from Torino to Bologna on a train when the sun came up: it was a shiny dawn that gave a start to a day that was going to be very long. We didn’t really know what to expect from it, but it turned out to be interesting and catchy, for both newbies and hard-boiled coders.

From little tweaks to big smart solutions, we have all been able to have a close look at WordPress’ features. We have seen ways to develop quickly, or in safety, or via CLI, and in the afternoon it was our turn.

First lecture: WordLess. Our home-made framework makes your coding faster and easier using HAML, CoffeScript and SASS and standardizing the structure of every theme you make. A page of code written by WordLess can shrink up to half the size of a classic HTML/CSS/PHP WordPress' template. Why work harder when you can work smarter with better results?

  Our second lecture was about WordMove, another little gem of ours we made to facilitate and speed up the deploy processes over multiple environments. With just one command we are able to push and pull files and databases to and from the live server, the staging server and our local environment. It’s easy, it’s free!

  We love open source and all our projects are available at https://github.com/welaika.

[mukkoo]

Users to Csv: Wordpress plugin

[welab]

Another product weLaika branded is the little plugin called “Users to csv".

With this plugin you can export all users fields that you want (selecting it by checkbox) in CSV format.

Installation:

Download here and unzip in your plugins/ folder

Go to the dashboard in plugins section

Activate “Users to Csv"

Into the dashboard go to Users > Export to CSV for settings page

good work!

(source: mukkoo)

[mukkoo]

Short guide for Sublime Text 2 workflow

[welab]

You use Sublime Text 2 and want to improve your workflow? This short guide, made in weLaika, can help you. Download it for free here.

(source: mukkoo)

[mukkoo]

weLaika for Sublime Text 2

[welab]

We know that a lot of developers use daily Sublime Text 2 so we have decided to contribute at their, and our, workflow with two packages.

This two packages are dedicated to autocompletations, so useful coding your web projects.

The first is Wordless oriented and help you to put all the helpers in project.

You can download and contribute it on github github.com/welaika/Sublime-Text-2-Wordless also you can download it directly via Package Control into Sublime Text.

The second is compass oriented and help you to put all the compass and blueprint mixins in your sass project, you can download and contribute it on github github.com/welaika/Sublime-Text-2-Compass-Mixins.

So, good coding!

[welab]

WP tricks: posts to the future

In a recent WordPress work, I had to publish, with an external PHP script, a lot of posts with wp_insert_post() function. These posts had a non common feature: the ‘post_status’ was ‘publish’ and the ‘post_date’ was in the future.

Normally, in WordPress, the posts with a date in the future have ‘post_status’ ‘future’ but, in this case, I couldn’t set it because the wordpress query shows in the frontend only published posts.

So the problem is that they don’t appear in any query because the WordPress query shows only posts with present date or before.

The solution

Add in your functions.php in the theme folder, or in hooks.php if you use Wordless, this function:

function show_posts_to_the_future($where = '') { $cut = "AND post_date <= '". date('Y-m-d', strtotime('now')) ."'"; $where = str_replace($cut, "", $where); return $where; }

removing the “WHERE post_date” condition into the query. If you want a specific range in the future you can add this line:

$where .= " AND post_date < '" . date('Y-m-d', strtotime('+365 days')) . "'";

So you must override (in the same position) another function that launches the filter hooked by specific event:

function show_future($query) { add_filter('posts_where', 'show_posts_to_the_future'); }

For example, if you want to limit this query you can add an if condition before the add_filter. In my case it was only for backend and for a specific post_type:

if (is_admin() && ($query->query['post_type'] == 'book')){}

Now we must add an hook with an add_action(): add_action(‘pre_get_posts’, ‘show_future’);

This action hooks all queries. So you can view the Posts to the Future!

[welab]

New Wordless helpers

We use WordPress and we love Wordless, our framework. Here is a summary of a new set of Wordless helpers, that you'll find in the new version.

is_subpage($id) Implements WordPress Conditional Tags. Checks if the current page is a subpage and returns the parent post ID if true. if you pass a page ID as a parameter it can check if it is a subpage of a specific parent page.

is_valid_url($url) Checks if the string $url is a valid URL

resize_image($src, $width, $height) Resizes the specified image to the specified dimensions. The crop will be centered relatively to the image. If the file does not exist, it will be created and saved into the tmp folder. After the first creation, the cached file will be served when calling this function. $src: The path of the image to be resized. $width: The width at which the image will be cropped. $height: The height at which the image will be cropped. return string: The valid URL to the resized image.

get_post_attachments($post_id) Gets the attached files in a post ($post_id)

get_current_attachment() Gets the attached files in current post detect_user_agent() This function includes a PHP class (Mobile Detect - Version 2.5.2 - commit b5b8992dbe) to detect mobile devices and user agent details. To use it, simply call the function detect_user_agent() in your view and then call one of the avaible methods. Example: $detect->isMobile() More details here https://github.com/serbanghita/Mobile-Detect

truncate($text, $options = array()) --UPDATE-- Truncates the text to the specified length. $text: The text to be truncated. $options (optional): An array with options to be passed to the function. Available options: - length (default 30): the length at which truncate the text - omission (default '...'): the suffix string to be added to the truncate text - word_count (default FALSE): if it's TRUE the length is counted in words, if it's FALSE it's counted in characters - separator (default FALSE): the separator string used to trim the argument - html (default FALSE): sets if you want to preserve html in the string. If it's set to false remove ALL HTML tags. - allowed_tags (default array('b', 'i', 'em', 'strong')): if html is TRUE it preserves the allowed tags. If this parameter is set to 'all', the function will leave untouched the string. Return: The truncated text.

Good work!

[welab]

A matter of love

When it comes to music, it's always a matter of love. Some songs speak so perfectly about what we are and what we feel, that we are bound to them as if we were their authors. The iPod changed the way we listen to music. Its shuffle mode surprises us with the right song at the right time, and it often seems like magic. In those moments, you want to share your feelings with friends you care about the most, but sometimes it can be hard. You are probably hung in a crowded train and you are using your iPhone with just one hand. You want your friends to listen to the whole song you're listening to, and the best way to do this is by sharing the YouTube video on Facebook. This can be hard. You need to type, to scroll and a read a list on a small screen, to tap, and tap, and tap again. Or you can use [Love This Song!](http://lovethisong.com).  [Love This Song!](http://lovethisong.com) is an iPhone app that makes this all simpler and more beautiful. As soon as you open it, you see the videos of the song you're listening to. Each video is shown full screen, so you don't have to squint to read the title or to see the thumbnail. You can play the videos, and when you decide to share one of them, you just have to double tap the Love This Song! huge magenta button (patent pending) and you're done. If you feel like doing it, you can write a message and publish it with the video, by just tapping once the button. [Try it now](http://itunes.com/app/lovethissong): it's simple, it's beautiful, it's free.

[welab]

Wordless: less code, more WordPress

Since weLaika was born, one of our best efforts was focused on using WordPress, one of the most flexible and widely-adapted Content Management Systems. One of the main concerns we had with this otherwise fantastic framework was the quantity of code we had to constantly rewrite inside each single WordPress installation to allow our theme templates to work.

So we started to think about how we could optimize the process of bootstrapping the basic structure of our theme templates. And we started experimenting :)

At first, we created wp_haml_sass (wp_haml_sass).

The first attempt was still missing some development feature, was more complex to deploy and had a few amount of helpers. So we decided to spend some more development time on our framework.

The result of our work was Wordless.

What is Wordless?

Wordless is a WordPress plugin (how about that?) that allow programmers to write better code with new, shiny and improved working tools.

So what can I do with Wordless?

WordLess makes you write better code: better code means simpler, more functional and rational code. Thanks to the Rails framework, we had a clear idea of how to improve the code structure in our themes: we borrowed from Rails the folder structure and the concept of controlling the routing of the theme from just one router file.

WordLess brings along a set of improved working tools: you can write your views using pHAMLp (a PHP porting of HAML), your stylesheets with SASS and Compass and your javascript code with Coffeescript.

I bet you are very puzzled right now.

"WHAT ARE ALL THESE CRAZY STUFF? I WANT PURE HTML FOR MY VIEWS, PURE CSS FOR MY STYLESHEETS AND PURE JAVASCRIPT FOR MY JAVASCRIPT"

Well, there is no excuse from us. We just happen to like these things.

We find these tools terribly good for writing elegant, concise and maintainable code. They work well and do wonders for us. We think that you may like to learn something new and try them on.

That is all, we're not crazy hipsters: we just want to user the best tool for the job and we really find this stuff amazing. But if you feel like these tools do not fit your needs, you can always use plain PHP, CSS and JS in your Wordless theme. It's ok with us.

Does it actually work?

We currently use Wordless for all our client WordPress work. We know it's not (yet!) perfect but we also know that it dramatically improved our life as programmers.

To make it even more awesome, we filled Worldless with a tons of helpers (I mean like fifty or something!), we added preset code for hooks, custom post types, menus and thumbnails management in the Wordless theme generator. In the upcoming articles, we'll explain them in a much closer detail.

I'm not scared, how do I install this?

You can find all the documentation on the Github repo. Please report to us any question and bugs you may happen to bump into, we will be very much grateful.