AlloyUI 3 Released: Bye Bye YUI

Technical Blogs 2014年10月29日 按 Zeno Rocha Staff

Our latest official release (2.5.0) made in April introduced a lot improvements in terms of documentation and bug fixes. Since then we made public some few preview releases in June and July.
 
Now, we're happy to announce the release of AlloyUI 3.0.0 stable!
 
As always, this version can be found on the CDN or it can be downloaded as a .zip archive.
<script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Also the AlloyUI website has also been updated to reflect the changes in this release.

 

What's the big news?

As you may know, Yahoo! decided to stop new development on YUI and this affect us a lot.
 
This will be our last release using YUI, since we decided to switch to jQuery for future versions. But until that day arrives, we have some pretty excited news to share.
 
All modules have been improved to work well on mobile devices (AUI-1294), a big effort around accessibility has started (AUI-1347), all dependencies are now being fetched using Bower (AUI-1213), each module now lists its changelog in the HISTORY.md file (AUI-1273), a huge number of unit tests were added (AUI-1275), and the Rosetta Stone guide has been updated.
 
 

Bootstrap and YUI updated

Starting from our dependencies, YUI has been updated from version 3.16 to 3.18. Nothing really interesting here, just a bunch of bug fixes (go to their releases page for full changelog).

We finally updated Bootstrap from version 2.3.2 to 3.2.0 and this brings a lots of improvements. Grids have been changed to provide a mobile first approach, shadows have been dropped in favor to flat design, and image sprites have been replaced by font icons (go to their releases page for full changelog).

 

New modules introduced

Some new utilities have been added such as undo/redo, palette, surface (which originated SennaJS), and cancellable promises.

Also few pretty useful widgets have been implemented such as Affix, Alert, Color Picker, Dropdown, Scrollspy, and Menu. If you're curious about this, go to our website to read more details and play with the interactive demos.

 

Automated tasks switched from Grunt to Gulp

Some of you may be familiar with Gulp and some of you may not. Task runners are small applications that are used to automate many of the time consuming, boring tasks that you have to do while developing. 

When we moved from Ant to Grunt, we had a huge performance improvement. But we didn't stop there, we want to provide the most productive workflow possible for those who contribute to our project. Gulp is based on streams and this gives you more control over your flow and relieves you of temporary folders and files.

 

And more!

There were a total of 975 commits for this upcoming release by 24 contributors, you can check the detailed changelog by using the GitHub Comparison to version 2.5.0 or by checking our HISTORY.md files located in each module.

 

What's next?

We're already working in AlloyUI 4, which will ship with jQuery in 2015. This is something that many developers have been asking for a long time and we are excited to work on that as well.

In the meanwhile, enjoy all the benefits that AlloyUI 3 provides to you and have fun!

What I learned in 2 years at Liferay

Company Blogs 2014年7月8日 按 Zeno Rocha Staff

Seems like yesterday when I decided to move from this huge company based in Rio to this not-so-well-known company based in LA. That was not an easy decision, but I’m glad I made it.

Now, two years after that day, here I am to share some of the things I learned.

 

Passion is the most important skill

Hiring is a very delicate topic in every tech company nowadays. As developers we’re usually doing more stuff than we should do. And we all know how hard is to find talented people, specially if you’re very selective with who you hire.

I had the opportunity to interview some people and it’s interesting to find out that those who got the job are not always the most skilled developers or designers. They simply demonstrated more passion about what they were doing.

After all, we think that learning technical skills is much easier than changing how someone feel about doing their work.

 

 

There’s life beyond the software community

As an open source company we care a lot about the software community. We go to conferences all the time. We push code to GitHub like there’s no tomorrow. We essentially live this whole atmosphere all the time.

This is a very nice thing, but when you go deep into a particular community you may end up forgetting that there are other communities out there. Communities with much bigger problems to solve. Communities that could use your help somehow.

By leading Liferay’s EVP (Employee Volunteer Program) committee in Latin America along with Cleydyr, we’re able to collect more than 700 kg (1543 pounds) of food in less than 24 hours to help poor families in the state of Pernambuco, Brazil.

Being part of initiatives like that is just incredible.

 

 

The mentoring cascade

The way I see, Brian Chan, the company founder, grew the engineering teams with an amazing mentoring cascade model.

It’s really hard to describe how it works because it’s a kind of mentoring that goes beyond code review. We spend a huge amount of time teaching other people.

Brian mentored Nate, Nate mentored Eduardo and a bunch other guys, Eduardo mentored me and a bunch of other guys too, now I’m mentoring Henrique, Thiago and so on.

The cool thing is that I’m just one leaf of that tree, there are many other leaves like that spread all over the world.

 

 

People before profit

Last year I went to Europe for couple presentations and ended up in a hospital in Madrid for 3 weeks. I got there alone and had many troubles to communicate since I don’t speak Spanish very well and they didn’t understand English or Portuguese at all.

Fortunately, many of my coworkers from the Spain office went there to visit me. They were all very friendly, trying to entertain me all the time. They even brought my Macbook and a 3G USB modem, so I could “escape” from that situation using a computer (interesting fact: the dracula theme was created in that hospital).

During the second week there, I had to leave my room for 15 seconds and when I got back my computer and tablet were stolen.

The only way I had to communicate with my family was gone. I was totally devastated.

Again Liferay was very kind to me. They brought me a new computer, some DVDs to watch, and most importantly they flew my sister all the way from Rio to Madrid just to be there with me.

Those were, by far, the worst 3 weeks of my life. But I learned so much from it. Specially ‘cause those are the moments that you truly get to know those around you.

Any other company could be angry because I wasn’t working for a long time, worried about the hospital bill or simply didn’t care at all. But not Liferay. They did much more than I could expect and for that I'll be always grateful.

 

Thanks you guys, it’s been two wonderful years :)

Making a Difference Online and Offline

General Blogs 2014年6月16日 按 Zeno Rocha Staff

Couple months ago Cleydyr and I were invited to be part of Liferay's EVP (Employee Volunteer Program) committee in Latin America.

We couldn't say no to this amazing program and we're now very happy to announce our first initiative.

It all started on a regular Monday (05/26) at 10:30am when Cleydyr showed me the website of the Farol52 ONG and we noticed this campaign called "1.000 kg of food in 10 days" to help poor families in the state of Pernambuco. Every year this region of Brazil suffers a lot because of long periods without any rain.

We knew that gathering this huge ammount of food in few days was a really hard challenge so we decided to help. At 12pm we got everybody together to explain the campaign. If each person could help with some little ammount of money through the EVP program we could still buy lots of food.

Everybody loved the idea and in less than 2 hours we had already collected R$ 3.160,00 ($1414.18)But we still needed to move fast in order to meet the deadline.

In the afternoon, we ordered 100 baskets of food, 7 kg (15 pounds) each. And in the following day (05/27), more than 700 kg (1543 pounds) of food were delivered to the Liferay Recife office.

On Friday (05/29), a day before the collection ended, our amazing staff helped with transportation to the collection point.
 
 
And we also managed to find some time to record, edit, and publish a video on Youtube to tell a little bit more about this initiative and to invite other companies to do the same kind of donation.
 
 
On Saturday (05/30), the campaign has ended with 2392 kg (5273 pounds) of food and R$ 2.755,92 ($1233.35) in cash donations collected. About 30% of all food collected thanks to Liferay employees.
 
 
We're proud to work in a company like Liferay. A company that cares about the community and gives the opportunity for its employees to make a difference in other people's lifes.
 
Thanks everybody who participated in this campaign :)

AlloyUI 2.5.0 Released

General Blogs 2014年4月16日 按 Zeno Rocha Staff

 
We are happy to announce the release of AlloyUI 2.5.0! This release can be found on the CDN and via a downloadable .zip archive.
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Also the AlloyUI website has also been updated to reflect the changes in this release.

 

What's new?

It's been 6 months since 2.0.0 so, as you can imagine, lots of things changed since then.

About our dependencies, YUI has been updated from 3.11.0 to 3.16.0 (go to their releases page for changelog). I know you are all excited for Bootstrap 3.0.0, but I must say that we're still using Bootstrap 2.3.2 in this version. You'll need to await for AlloyUI 3 to use Bootstrap 3, but don't worry it will be available sooner than you think (go to master branch to see the work in progress). 

One of the things that we really improved in this release is the API Docs. Since last year we've been working hard to document all classes, attributes and methods. We're now really close from finishing this task (AUI-1048) and you can see the result online at alloyui.com/api.

Lastly, a big refactoring was also done in the entire code base regarding constants. Old browsers (IE) doesn't handle memory for strings in a good way, that's why we used constants for memory optimization which, nowadays, is not a big deal anymore (AUI-1163).

 

Button

  • We fixed a bug that duplicates icon due to labelHTML attribute added by YUI 3.15.0 (AUI-1211);
  • We fixed a bug in the Search Button Cancel when an input was removed from and placed back in DOM (AUI-1161).
 

Carousel

  • A new attribute was introduced to allow you pause the Carousel when mouse is over it (AUI-1192).
 

Collection

  • We fixed a bug where the map hashcode for object could conflict with string hashcode (AUI-1172).
 

Color Picker

  • We fixed a bug when adjusting the value via the slider. The newly selected color didn't get reflected in the results view. In addition, the background color of the slider was being set to colors with a value of less than 100 (AUI-1083);
  • We fixed a bug when user opens the palette for choosing custom color and types something in the HEX value text field, the view updates, but on closing the palette, the value was not being updated (AUI-1091).
 

DataTable

  • We fixed a bug when user edits a selectbox's data and creates an empty option or empty value, it couldn't be saved. Options with empty option-text or value were deleted (AUI-1194);
  • We fixed a bug when user edits a selectbox's data and try to add a new option, it failed. Nothing happened, just an error in the console (AUI-1195).
 

DataType

  • We fixed a bug when the mask which is triggered by an input text box contains "{{%b %e %m}}" and values below 10 were selected, the date which is output was incorrect (AUI-1027).
 

DatePicker

  • We fixed a bug when date disappears from input textbox when choosing the minimumDate (AUI-1177).
     

Diagram Builder

  • We fixed a bug when the browser window are scrollable and you drag a node to bottom of viewport and scroll in the same moment the node moved down to out of viewport (AUI-1203);
  • We fixed a bug when browser redirected page when trying to delete the selected connector (AUI-1191);
  • We fixed a bug where nodes couldn't be deleted (AUI-1111).
 

Event

  • We fixed a bug in the event-input condition for new loader (AUI-1217);
  • We fixed a bug where event-input could not support propertychange properly and cannot detect backspaces on IE9 (AUI-749).
 

Form Builder

  • We fixed a bug when a field defined with hidden attributes was cloned, the cloned field would show these hidden attributes (AUI-1208);
  • We fixed a bug when renaming a field label to contain an HTML tag caused the tag to be inserted in the DOM (AUI-1130);
  • We fixed a bug when correlating input sizes with similar inputs in other places (AUI-1124);
  • We fixed a bug when the option value of an element was changed and the predefined value refers to that value, the radio field would not have a value selected by default (AUI-1034).
 

Image Viewer

  • We fixed a bug when long file names extended beyond viewer (AUI-1175);
  • We fixed a bug when some elements were not visible when the user scrolls down on a page. The position of the elements were inconsistent, some are fixed, others are absolute (AUI-1106).
 

Modal

  • We fixed a bug when listeners after visibleChange were not executed with modal.destroyOnHide enabled (AUI-1107).
 

Pagination

  • We added an option to skip to first or last page (AUI-1264).
 

Palette

  • We fixed a bug when setting objects as items were not working properly (AUI-1033).
 

Popover

  • We decoupled animation logic from tooltip-base to a new widget called Widget Transition (AUI-1162);
  • We fixed a bug when popover would not center align after its first visible toggle (AUI-1096).
 

Rating

  • We fixed a bug when the rate average is a float number was not rounded (corresponding the rounding rules) just the decimal value would be removed (eg.: 1.5 -> 1). So the display of the rate was incorrect (AUI-1250);
  • We fixed a bug that was not allowing the user to navigate via the items using keyboard, nor to press Enter to vote (AUI-1132).
 

Scheduler

  • We updated the Scheduler View Table to show abbreviated weekday names (AUI-1085).
 

Toggler

  • We fixed a bug when absolutely positing elements that end up in an accordian would overflow from their container when sliding (AUI-1105).
 

Tooltip

  • We decoupled animation logic from tooltip-base to a new widget called Widget Transition (AUI-1162);
  • We updated tooltip to stay open when hovering over help box (AUI-1092).
 

Tree

  • We fixed a bug when TreeNode does not show "Load More Results" link (AUI-1156);
  • We fixed a bug when Tree hitarea icon were not changed when treeview was generated from markup (AUI-1141);
  • We fixed a bug when TreeNodeTask should have a state for when one of its children was unchecked (AUI-1138);
  • We fixed a bug when Treeview showed hit-place for dropping when dropping was forbidden (AUI-1114);
  • We added an option to prevent selecting all child nodes in radio and task (AUI-1044).
 

Widget

  • We enabled to use a function as value to widget position (AUI-1178);
  • We fixed a bug when the value of cssClass attribute always came from the config, ignoring the value assigned (AUI-1237);
  • We enabled to use a single value to set show and hide delay on transition (AUI-1179);
  • We decoupled animation logic from tooltip-base to a new widget called Widget Transition (AUI-1162);
 
 

Additional details

There were a total of 280 commits for this upcoming release by 21 contributors. You can check out all the details of this release candidate via the GitHub Comparison to 2.0.0.

Welcome our 6 new contributors: Bruno Coelho (@brunocoelho), István Tóbiás (@istvan-tobias)Maira Bello (@mairatma), Pablo Carvalho (@pablocp), Thiago Rocha (@thiago-rocha), and Travis Cory (@travisc5).

 

Say goodbye to Yogi Alloy

General Blogs 2014年2月25日 按 Zeno Rocha Staff

When we first started AlloyUI 2.0 development we realized that we needed a better build tool for the project. Although Ant could do the job, it was not as fast and easy as NodeJS's solutions. So we decided to switch and rewrite all our automated tasks.

At that time, YUI was using Yogi to automate tasks via command line and as usual we decided to follow their path since our projects share a very similar architecture.

In December 26, 2012 Eduardo Lundgren made the first commit in this new project called Yogi Alloy that provided some common tasks for AlloyUI, Alloy Bootstrap, AlloyUI.com and Alloy API Docs development, since then more than 250 commits have been made.

As time passed by, we realized that we were creating a new task-runner in JavaScript and there were plenty other projects that we could build on top of, specially Grunt the most popular one with lots of plugins.

In July 23, 2013 we released the last version of Yogi Alloy and started focusing our work in Grunt tasks instead. All tasks were ported following similar APIs, new ones have been added, and now it's time to say goodbye to Yogi Alloy.

Our plans is to remove the project from GitHub and NPM in March 20, 2014. So if you're still using Yogi Alloy please try AlloyUI's Grunt tasks instead.

If you have any questions please leave a comment.

AlloyUI Presentation Agenda

General Blogs 2013年8月6日 按 Zeno Rocha Staff

We're very happy to announce several talks focused on the AlloyUI project at Liferay official events. If you're coming to any of those conferences below, enjoy that time to get in touch with our team members!

 

Liferay Developer Conference (Berlin, Germany)

On October, 9-10 will happen the Liferay Developer Conference, the first of its kind. It's going to be specifically targeted at developers and IT technical staff, so be prepared to dive deep, get your hands dirty, and to have a lot of fun! 

Day 1 - Neil Griffin will show how to integrate JSF components with AlloyUI using Liferay Faces Alloy project at 10:00am and Zeno Rocha will be giving the closing keynote about Liferay's 6.2 UI revolution.

Day 2 - Iliyan Peychev will introduce AutoComplete for Velocity and FreeMarker languages at 10:00am, Nate Cavanaugh will talk about responsive web design at 11:00am and Zeno Rocha will give another talk about AlloyUI 2.0 at 11:40am.

More information: liferay.com/web/devcon2013

 

Liferay Symposium Spain (Madrid, Spain)

A week later Liferay's fourth annual Symposium in Spain will be held in Madrid. Iliyan Peychev and Zeno Rocha will be there to represent the AlloyUI team.

More information: liferay.com/web/spain2013

 

Liferay Symposium North America (San Francisco, USA)

From Europe to North America. Join Eduardo Lundgren and Jonathan Mak in a 3-hour workshop that will happen on Sunday, 20th October at 3:00pm about how to use AlloyUI 1.7 on portlet developmentBesides that Nathan Cavanaugh will talk about AutoComplete for Velocity and FreeMarker languages on Monday, 21nd October at 4:10pm. Finally on Tuesday, 22nd October, Nathan will present how Mobile Web Development works in Liferay at 9:50am and Zeno Rocha will be speaking about AlloyUI 2.0  at 10:50am. 

More information: liferay.com/web/northamerica2013

Let's build a better documentation for AlloyUI?

General Blogs 2013年5月31日 按 Zeno Rocha Staff

When I first met the AlloyUI project was a little bit hard to understand all the functionalities it provides without looking to the source code. Then we made a new website that shows how can you use each component with some code snippets.

That was great, but how can you check which are the configuration options available for each component? For instance, you know that there are options like contentBox, height and width on Carousel, but they are not the only one, there are plenty more configurations that you could use.

That's why we have the API Docs, that is generated based on the source code, pretty similar to JavaDoc. The only problem was: most part of the source code doesn't have documentation at all, so the API Docs became outdated :(

We had to change that, so after a couple days of hard work we added the necessary markup for documentation on all attributes, properties and methods. So now we are able to document, we just need to actually explain how each part of the code works.

 

Current Status

At this moment, there's a total of 109 JavaScript files on AlloyUI core.

  • 29 are documented;
  • 64 needs to be documented;
  • 16 can't be documented.

To track what files are documented or not, we made public this status list on Github. If you want to join us on this quest to make AlloyUI better, make sure to check this list to find out what needs to be done.

 

Contributing

Let's say you want to help and just discovered that aui-autocomplete.js needs documentation. If you navigate through the code you'll see a lot of attributes, properties or methods that doesn't have description yet, for example:

All you need to do is understand what that piece of code stands for, explain it and send a pull request :)

 

Bonus

Additionally, if you have Yogi Alloy installed and want to check how the documentation will look in the website, you can run ya api-watch to generate the API Docs locally and watch for any changes.

 

New Theme

Together with all those new things, we're also introducing today a new theme for API Docs! Forget the old one:

And start using the new one today!

Conclusion

This task can't be done by a single person, there's a lot of code to document and we need your help. Here, at Liferay Brazil, we started this thing called Daily Docs, so everyday at 5pm an alarm rings and we need to stop everything to spend 10 minutes improving the documentation of a certain component. Those kind of initiatives could be very helpful, so if you care about this project, please join us :)

AlloyUI and the importance of CDN

Company Blogs 2013年3月4日 按 Zeno Rocha Staff

Some weeks ago we announced the preview release of AlloyUI 2.0. One of the cool things about it is that now we have a pretty new CDN (Content Delivery Network). So instead of downloading AlloyUI to use in your local environment, you just to need copy and paste this line of code and start using it.

	<script src="http://cdn.alloyui.com/2.0.0pr2/aui/aui-min.js"></script>

But it was only available for AlloyUI 2.0, which is not integrated with Liferay yet, then Liferay community wouldn't benefit from it.

That's why today we have some news to share, all versions of AlloyUI are now available on CDN to use in production or to download as a zip file \o/

PS: Check this table if you don't know which version is being used by Liferay.

 

Why it's so important to use a file hosted on a CDN?

Basically for performance improvements, we'll dig into some of them.

 

Decrease latency

Let's say you are in China and your server is in Los Angeles. When you load a file the browsers sends a HTTP request that will go across the globe until reach your server and, as you can see, it takes time.

However if this file is hosted on a CDN it will be distributed across many different servers in the world. So when you make a request, it will look for the nearest server, which decreases latency time a lot.

Wikipedia: (Left) Traditional scheme of distribution - (Right) CDN scheme of distribution

 

More parallel downloads

Browsers can't handle too many parallel downloads per domain.

That's why hosting files in different domains is a good performance tip.

 

Cache

Let's say you visited a website that uses AlloyUI hosted on CDN, as soon as you load it your browser will automatically cache it in your machine. Then if you visit another website that uses AlloyUI too, you don't need to download all those files again because you already have cached them.

 

What's the real benefit?

Let's try those performance improvements in real life. My experiment will load the exact same file using a CDN and don't using it.

Didn't use CDN:

When you load this file, that is not hosted on a CDN with a 10mb internet connection, you take 1.27 seconds with 404ms of latency.

Use CDN:

But when you load this file, that is now hosted on a CDN with the same internet connection, you take 314ms with 155ms of latency.

That's a 75% decrease and this is only one file!

Now imagine a lot of modules and its dependencies being loaded, it will cause a significant difference.

 

Conclusion

And that's all folks! If you have any questions please comment below :)

I'm the #50 most active contributor on Github, so what?

Company Blogs 2013年1月9日 按 Zeno Rocha Staff

OctoParty

Today, Paul Miller released a nice list of the ”Most active GitHub users”.

People started to talk about it and suddenly I received a lot of congratulations messages for being the #50 most active contributor on Github.

I was pretty happy because this is a chance to show how Liferay employees are strong in the open source community. But I was mostly surprised, since there’s almost 2 million users on Github and even because Linus Torvalds, creator of Linux, was behind me!

That was pretty nice for my ego, but let me explain what this ranking means for me.

Quantity != Quality

The first thing is, I’m not better than anyone.

Just because I made 100 commits more than Linus, it doesn’t make me a better contributor than him. Actually I could do 10,000 commits more than him and I would still not being a better contributor.

The only thing that these numbers shows is: those people on the list put a lot of effort on open source using Github.

And this is true, I've been working hard on the new AlloyUI and many other projects out there.

People just don’t get “commits”

We all have a lot of tasks to do daily, so how to deal with them using Git?

Let’s say you have a task called “Redesign my blog”.

Some people start coding it, making a lot of changes and when it’s finished: git add . && git commit -m "Redesigned my blog".

This is so wrong. What happens if you want to revert just a single improvement that was not so good there? You’ll need to revert the whole commit.

That’s why you have to break your tasks into sub tasks. It seems like a basic thing, but people just don’t do it.

1st place

If I had to guess who’s going to be in the top of this list, that would be TJ (@visionmedia).

He’s doing an incredible job in the NodeJS community, so congratulations man, you deserve it :)

显示 9 结果。
Items 20
的 1