Best UI fonts for web design :)

How to create an interface that will involve users and encourage reading? User Designer can create a project according to the best user experience standards (UX), but if the user interface (UI) is not attractive, all other activities may prove ineffective.

One of the ways to care for UI is to choose the right fonts. In this article, we will present a few of them, which we find the most attractive. Their advantage is that they are recommended by Google Material Design. They are also available in Google Fonts, which means that they do not overload applications unnecessarily.

Roboto

Currently, this is one of the most popular fonts and is actively promoted by Google itself. This font gives the impression of being very geometric and friendly to the recipient. In addition, it appears to be very readable and “light”. In case you’d like to designing a web application, this front is worth considering.

Lato

It greatly works, when it comes to printed materials and business graphics. Lato is a typeface pattern that was designed in 2010 and very received a lot of sympathizers in a relatively short time. Lato belongs to the group of the most popular fonts.

Open sans

This font is well known to all of those, who deal with web design on a daily basis. Also it suits quite well both printed materials and TV commercials.

Montserrat

Montserrat is a font characterized by a very geometric style. It gives a wide range of use. It will be a good choice both in business projects and those “lighter”, less official ones. In addition, it perfectly matches the headlines and attracts the recipient’s attention.

Playfair Display

This font can be perfectly used in titles and headings. It has a high height and short falls. Moreover, it is used by well-known brands, such as BMW or Vogue.

Proxima Nova

Proxima Nova is a font that combines modern proportions with a geometric dimension. It can be found on many websites, where it is used most of the time. It is recommended to use 12-16px for main content and 24-30px for headers.

Read also:

The best sites for UX design’s inspirations

TOP UX influencers to follow on Twitter

Why UI/UX design is important in an IT projects? (interview)

Top 10 UX influencers to follow on Twitter :)

A UX Designer plays an important role in IT projects development. This specialist is responsible for product design, which will be perceived as functional and usable from the user’s perspective. In order to keep up with current trends related to user experience, it is worth following influencers on twitter. Who exactly? We have prepared a list of top 10 UX influencers specially for you.

1. Luke Wroblewski – 220k followers

Luke is an internationally digital product designer and Product Director at Google. In addition to many articles about digital product design and strategy he is the author of three popular Web design books (Mobile First, Web Form Design & Site-Seeing: A Visual Approach to Web Usability). He regularly posts on Twitter.

2. Patrick Neeman – 106k followers

Very active in various places on the internet. On twitter he shares an attractive content concerning trends and curiosities connected with UX. Actually Neeman is a Director of User Experience at Icertis.

3. Don Normaan – 63k followers

He introduces himself as a design thinker, company advisor and professor. Don Normaan is an author of the book “Design of Everyday Things and Revised and Expanded”. In 2010, Norman was recognized by Business Week magazine as one of the 27 most influential designers in the world.

4. Steve Krug – 62k followers

Krug has written a well-known book ‘Don’t make me think’, which rises the topics of web usability and human-computer interaction. Krug is involved in conducting workshops during which he gives trainings in field of usability testing and implementation of usability strategy.

5. Steve Schoger – 45k followers

This is a very active twitter character associated with UX design. Schoger provides quite often useful content that serves the recipients as both advice and inspiration. Steve talks of himself as of a multidisciplinary designer from Kitchener where he runs Duke Street Studio, an independent design and illustration studio.

6. Pablo Stanley – 26k followers

He is a designer for InVision Studio Platform and co-founder of Carbon Health. He leads design workshops and shares design tutorials on YouTube. He has also his own podcast in Spanish. He strikes as a very active Twitter user, often interacting with other Internet users.

7. Irene Au – 25k followers

Au is a former Head of Design at Google, Yahoo and Udacity. She has extensive experience in cooperation with large companies in the world. Irene is an operating partner at Khosla Ventures, working with portfolio companies to make their design and UX great.

8. Olof Schybergson – 12k followers

He is co-founder and CEO at Fjørd. Olof has worked in digital for more than 20 years, having a range experience in UX design. As CEO of Fjørd, Schybergson is responsible for driving Fjord’s global design vision and direction.

9. David Teodorescu – 18k followers

Senior Product Designer at Fitbit. He is twitting tips and articles on user experience and design. Teodorescu underlines that in his operating he focuses on product thinking, interaction design and visual design. He is really a specialist to follow.

10. Alla Kholmatova – 7k followers

She is specialized in user experience, design leadership and design systems. She works as a Head of Design at green energy startup Bulb Energy. On her twitter account, you’ll find a lot of design-related content.

The best sites for UX design’s inspiration :)

Interesting and inspiring websites are one of the most important sources of knowledge for all the people involved in UX design. Keeping up to date with current novelties and trends is the responsibility of a good UX designer. Currently, the network can offer a lot of interesting sites devoted to this subject. We have decided to choose a few of them and present their specificity closer.

UX Magazine

It is the best place for all the people, who are real geek of user experience. This page is created by a free community, which resource explores all the facets of an experience design. Shared graphics are a great way to get inspiration and develop your own projects. It is worth noting that, apart from various types of graphics, there is a section with industry-specific articles that allows UX users to keep up with all the latest news.

Design Shack

Every day, a lot of people use this blog – agency employees or specialists involved in the professional design of web sites are among them. Design Shack offers an access to a vide source of knowledge, which consists of such sections as inspirations, layouts, mobile and others.

Smashing Magazine’s UX Design Category

Here you will find content in the form of articles that present current industry news related to web, mobile or software. This is a good source of knowledge, as the articles are rich with valuable information provided by experts with experiences in UX design.

UX movement

It is a blog with articles presenting the most important trends and news related to UX design. There in no time you can verify your own idea for the project or supplement it with inspirational ideas proposed by the authors of the texts.

UX Myths

Quite a specific, but really interesting and useful website. Its premise is to refute all myths and errors associated with UX design. There are dozens of common beliefs that experts consider to be incorrect.

DesignModo UX

A place devoted to UX elements that allow you to keep such projects as aesthetic, business or retaining elements related to the psychology of a recipient. This is certainly a good source of knowledge for both beginners and more experienced ones. Like with on the other websites mentioned above, on DesignModo UX, expert articles make the most important part of the content.

GRAPHIC DESIGN TRENDS – SUMMARY 2018 :)

2018 has brought a lot of novelties into the graphic design. Designers who are willing to attract customer’s interest have decided to proceed towards innovation. A few returns to what was popular a few years ago have gained their share of interest as well. As a part of a short summary, we have chosen the most interesting Graphic Design Trends in 2018.

GIFs and animations

More and more applications or websites are using GIFs and animations. This aims to facilitate communication with a recipient and help them to take the desired action. In many cases, using GIFs and animations helps to regulate customer’s behavior. In addition, they positively influence the reception of the presented messages.

Authentic

Authentic advertising increases the credibility of the message. It is easier to catch the attention of the recipient who sees the real illustration. Therefore, in 2018 images showing feelings and action have been willingly used. Possessed photographs available on stock platforms have become much less attractive.

Depth

Shadows in the last months have again reached popularity. Skillful usage allows you to get a depth effect creating a visual hierarchy and prompting a recipient to perform specific moves. The depth effect is often used to highlight the key elements and to show the recipient what is the most important in a provided facility.

Responsive logos

That trend has changed the approach of many companies to the graphic creations of their own brands. There has been a clear departure from complicated projects in favor of simple and legible logos. They are adapted to a content quick view on various devices. Interestingly, the logotype can take the form of even a small symbol. This trend is related to the development of mobile devices that require a differentiated graphic approach.

Custom graphic art and artist illustration

Creating custom illustrations, often artistic ones, is another effective method to catch the attention of the recipient. Unconventionality and personalization of the brand through an illustration has become a deliberate act of the graphic artist. This trend allows designers to freely express their creativity.

Gradients

Though very popular a few years ago, over time they were replaced by a flat design. Currently, the gradients have regained the designers’ approval again, but in a slightly different form this time. First of all, they are combined with the flat design features. Moreover, strong gradients are not used as it was before. It is recommended to use delicate and gentle transitions, providing an accessible interface for the recipient.

If you want more about graphic design trends, we recommend the interview with our Product Designer. You can read here about the specific role of UI/UX design, its role in IT project, cooperation with developers and predictions for 2019 year.

UX DESIGN TRENDS. HOW TO CREATE USER FRIENDLY PRODUCTS? :)

The process of designing a friendly product within UX Design draws its focus on creating useful and functional solutions that will meet the users’ needs. The idea is to make the product as intuitive as possible.Trends related to UX Design are subjects to constant modifications and need to study user’s behavior and preferences. It is important that the product has the highest chance of getting the recipient’s attention. It gives a chance that they may return to using it or perform some interaction in the future. So what should you do to keep the highest UX Design standards? This is the list to check.

1. Simplified navigation

When it comes to making a choice – the less – the better, as an average user will make up their mind much faster. Therefore, the possibility of selecting specific categories (eg. within search engines) should be narrowed down in order to simplify the process of decision making. To set an example: it is assumed that no more than seven subpages should be placed in the menu section, as user’s eyes won’t be able to cover a larger number. Thus, the first seconds are the most important.

2. Video content

A short and interesting video is more likely to grab the viewer’s attention rather than the best photo. Video format affects the imagination of users and draws attention more effectively. In addition, it reflects the sense of the message in much accurate way and allows to present more information in one place. Video brings more value and that makes it more important from the recipient’s perspective.

3. Empty spaces

Information abundance and options available on accessing a given page or application prevent a user a full understanding of how to proceed. The answer to this problem is to minimize and focus attention on a single element. Due to this, making decision becomes much easier. Google.com can serve an example.

4. Chatbots

Using chatbots increases a chance of interaction and responsiveness in communication with the client. Through a short conversation with a robot, a user can quickly get the required information and thus save their time.

5. Opening subpages in separate tabs

Opening a link in a new tab is a risky solution as a user loses possibility to return to the base page via the “back” option. Which, in turn, may provoke a user to close all cards. Therefore, it’s better to omit any redirects to any new cards.

Conclusion:

UX Design’s success is sometimes determined by the smallest details that may affect the overall perception of the product by its user. The best option is follow the latest trends and know what’s good for the recipient. A well-planned and functional interface is also a high-quality product.

 

TEACHING RAILS :)

The Calculations

First, few words about the course itself. Before it even began, our students were given a “prework” assignment – which contained instuctions and exercises to be completed before the course. Their tasks included installing Linux, familiarizing themselves with a terminal and some basics of HTML, CSS and Git.

Over the next four months we met every two weeks and step by step, we were discovering The Awesome World of Ruby et al. The course covered Ruby language, Ruby on Rails, Javascript and some popular tools for RoR applications like Devise, Pundit, Sidekiq or Carriewave.

Every student also had a mentor, who was responsible for motivating students and checking their work inbetween meetings.

The Plan of Attack

As a teacher, I came prepared with 3 years of experience with Ruby on Rails, 10 years of experience with programming in general and some presentations with issues and exercises to do.

Apart from a short course in Linux management I had done before, I didn’t have any experience with teaching. As for the students, I only knew there were going to be ten of them and that they come from very different backgrounds – for some of them it’s their first brush with programming, while others tried to learn C or Ruby on their own before enrolling in the course.

I decided to make two resolutions – I will be patient and I will explain everything if needed (no “we already covered it”). First resolution has stood the test of time, but the second – quite obviously – didn’t. I decided to not do any special preparation regarding the things I was going to teach – I work with Ruby/Rails every day and I’m feeling pretty confident in my skills in that area. At most, I read the presentations I had.

The Challenge

One of the first things that became absolutely clear for me just after the start of the course – you can’t explain everything. It’s a very sad realisation for someone like me, who likes to dig in and discover how things work, but in the limited time of one meeting there is only so much you can teach and that can be remembered by students. Turns out you can be a very decent Ruby programmer without knowing exactly how are Arrays actually represented in memory or how exactly Devise works.

Lessons were taking place on Saturdays and Sundays from 9am to 5pm. It’s important to realise that teaching is pretty exhausting work – apart from explaining the material, you also need to always be ready to answer related (or not so related) questions and solve various problems that your students have.

Coffee is your friend, but the most crucial is the aforementioned patience. For people who have not been coding before, concepts that are obvious for programmers – like loops, types or even variables – need to be learned and it’s not an instant process. If you have been programming for XX years, you consider math easy, can list all known programming paradigms in the middle of a night, it might be hard to place yourself in a shoes of a person who isn’t really sure on which side of equal sign does the name of the variable go. But it’s vital that you do it. Basic concepts like variables, loops or arrays become so natural that it’s hard to comprehend how can somebody not understand them right away, but they are harder than they seem to “us programmers”.

An additional difficulty, especially in the beginning of the course, was explaining those concepts so that they are well understood. In my opinion it’s not possible to learn Rails without learning Ruby – although I know that some would argue it’s not the case. It’s true that Rails have its own patterns and a lot of things can be remembered rather than learned in the beginning. However, I think that in order to become conscient RoR developer, a moderate understanding of Ruby, OOP or SQL is a must. Teaching people to program is quite different than teaching Rails – while with Rails there is a lot you can expect to just be accepted or believed (nobody needs to know how callbacks work in the beginning – only what they can do), programming concepts should be explained in more detail.

Engaging The Force

So, how does one do that?

Patiently.

It probably seems like I’m repeating myself all the time, but I can’t stress enough how important patience is. Even my most motivated students were known to make a syntax error here and there – it’s part of normal learning process and there isn’t really anything to do for a teacher other than to show what the error is and how to fix it. In time, they will learn to fix them on their own, but this will take way more than one or two errors.

Another thing to note is that Ruby is not as easy as it seems. If you started learning Ruby with knowledge of C/Java/Python, everything probably seemed so clean and nice and simple. Try to think about it though, and you’ll notice:

  1. What’s with the parentheses? Should I use them? Shouldn’t I?
  2. What’s that self thing? Sometimes I have to use it (eg. attr_writerself.variable = ...), sometimes I don’t (attr_readervariable) and sometimes I can’t! (private def some_methodself.some_method will throw an error)
  3. Blocks. I bet that even some experienced programmers (of different languages) would need a moment more than expected to understand #inject

Apart from simple fixing the errors, there is the issue of actually tranferring your understanding of things to your students. To do this, you will need a lot of flexibility. Some students were satisfied with Array being just an ordered list of elements. Others needed more visual analogy, like a shelf with numbered places on which you can put things. I found myself explaining the same things multiple times in different ways – which is quite challenging exercise!

But, as I said before, you can’t explain everything. When I was explaining relations in Rails, it was more of a “that’s how you do it, and it allows you to do that and that. You want that, it’s awesome”. Fortunately nobody asked me how this works – I don’t think that junior developers need to know about reflections.

Situational Positioning

Due to the format of our course (meetings on every other weekend and long breaks) we had to ensure that periods between those weekends are productive for our students – without them practicing in that time the course would not work at all.

Some of my coworkers agreed to be mentors for students in the course. Mentors’ work was to verify exercises that were assigned during the weekend meetings and help with issues that were arising while completing them. Students were communicating with mentors via Slack.

I was a mentor for two of my students. It was significantly different form of teaching – and full of its own pitfalls. One thing I realised a bit too late is that a good programmer must be independent – they should at least try to solve problems on their own before asking for help. And being available on Slack all the time not only took a lot of my time, but also didn’t inspire such independence.

Don’t get me wrong – a lot of a questions I was asked as a mentor were valid and answering them was expending knowledge of the students. It’s very easy to go into “teacher mode” though – and explaining again all the issues from weekend meetings. From today’s perspective I think a mentor’s role is to overview, supply useful links and ask some questions that might help find the solution. Occasional explaining might happen, but it shouldn’t be a majority of it.

The Use of Intelligence

Every student is different. One of the bigger difficulties was to adjust the pace of the course to fit best for all of the students. Due to the varying backgrounds and general level of ease in accepting new ideas between students it’s almost impossible task.

Our timeframe was 9 meetings – times 2 days times 8 hours gave us 144 hours to go from 0 to Ruby-hero. It was paramount to do whole syllabus in this time – which by itself enforced a pretty quick pace. First three meetings were all about Ruby – then one meeting for SQL, then RoR and one meeting for JS in between.

As a teacher, I always had to know who more or less understands part of the material I was presenting. Sometimes it was enough to ask if this is understood, sometimes I did little tests. For example, I asked all of my students to send me their own definitions of Ruby concepts, like class, self, method, variable etc, on Slack. If some issue was particulary unclear, I would go back and try to explain it again.

Illusion and Reality

To summarize, teaching was an even more difficult endeavor than I thought it to be. It can also be very rewarding. Nonetheless, it’s hard work and it’s effects of it depend not on the teacher alone – the student’s own effort is even more important in their learning. This makes teaching very different than programming, where you usually can own all successes and failures. It’s important to remember this difference.

It also forces you to think about issues you don’t usually think about – explaining things also gives you a better understanding of them. In that way teaching can also make you a better programmer.

 

HOW TO DOCKER LESSON LEARNED :)

Introduction

Ever since I noticed that the application we prepared has expanded significantly, I have decided to find a completely new method for automation of the process of its launching. It was important for me to find a solution which would make it possible to activate new features in isolation.

Discovering a simpler method of process automation would be a significant improvement of my work as well as the work of my entire team. I thought “Why not use Docker?”

During the preparation stage, I created two setups: one for the front-end application, and the other for API. Below you can see a presentation of what I’ve learned during the development process.

The first problem

I want to have a cloned repository in the container, so I added an ssh key via the ADD command in Dockerfile:

1
ADD ~/.ssh/testowy

And bam! The file is not found. Why?

Let’s assume that we have the following folder structure:

1
2
3
4
5
6
7
docker/
|-- stuff/
| |-- test.txt
|-- Dockerfile
server/
|-- data
| |-- setup.yml

Run command build in the login-queue folder and you can only add files from the local folder and its local subfolders, e.g. stuff.

If you want to add the server folder, you’ll receive a message: “unable to prepare context”

Dockerignore

Ever wondered why the image takes so long to build? Maybe you didn’t use .dockerignore, to ignore files which are not necessary in the image. The .git folder should be removed automatically as well as any temporary files.

Order of commands in Dockerfile

Docker saves each line form Dockerfile and after building each line is saved as a layer. It is very important not to change the order of particular commands too often.

1
2
3
4
5
6
7
8
9
10
11
12
FROM ubuntu
RUN apt-get install -y software-properties-common python
RUN add-apt-repository ppa:chris-lea/node.js
RUN echo "deb http://us.archive.ubuntu.com/ubuntu/ precise universe" >> /etc/apt/sources.list
RUN apt-get update
RUN apt-get install -y nodejs
RUN apt-get install -y nodejs=0.6.12~dfsg1-1ubuntu1
RUN mkdir /var/www

ADD app.js /var/www/app.js

CMD ["/usr/bin/node", "/var/www/app.js"]

For example, if you change the last line in Dockerfile, all previous lines will be downloaded from the cache while the last line will be modified. When you replace line No. 4, then all lines starting from Line 4 to the end, will be modified. For this reason it is worth to place commands which will not change, at the beginning of the file.

Copying files to image

It’s worth considering what a given image will be used for. If you need it to launch a service once, just copy the code content directly to the image:

1
COPY . /workdir

Unfortunately, this makes it impossible to edit files and every time you want to edit your code, you’ll have to build the image again.

If you’re using MacOS and want to use the built image for development, you have to approach this matter in a slightly different way. If you will use volumes then you have to be prepared that this is an extremely slow solution (e.g. copying a file from the host to the container is done with the speed of 4.5 MB/s, while copying internally in the container with speed 10-20x higher). Luckily, as you can see at link, the problem has been known and its solution is the key issue for the team responsible for developing Docker for Mac.

How can you use Docker for development in this situation?

You can use it for external services, e.g. Redis/PSQL/Elasticsearch or use ready solutions, which offer rsync: https://github.com/brikis98/docker-osx-dev

To sum up

If you have a big team and wish to test a new feature, docker will be the ideal tool! Nevertheless, would I use it for a production launch of a server? I’m not fully convinced yet…

Additionally, I recommend a few outstanding articles:

 

HI, I’M PORO :)

It’s nice to meet you!

Many people are learning Ruby by starting with Rails framework and, unfortunately, this is the worst possible way of learning this language. Don’t get me wrong: Rails is great, it helps you to build web applications quickly and efficiently without having to get into many technical details. They provide a lot of “Rails magic” that makes things simply work. And for a newbie programmer this is really great, because the most pleasant moment of the process is when you can say “it’s alive!”, and see that all parts fit together and people use your app. We like to be “creators” 🙂 But there is one thing that distinguishes good programmers from the average: the good ones understand how the tools they use work. And by “understanding your tools” I don’t mean knowing all the methods and modules provided by a framework, but understanding how it works, understanding how the “Rails magic” happens. Only then you can feel comfortable with using objects and programming with Rails. The foundation of the object-oriented programming, and the secret weapon which makes the complicated Rails application easier, is the already mentioned in the title PORO, that is Plain Old Ruby Object.

What really lies beneath this name? What is this great secret weapon? It is a simple Ruby class that does not inherit from anything. Yes, just that, and so much.

1
2
3
class AwesomePoro
end

How can I help you?

You are continuously developing your application and adding new functionalities as the number of users and their expectations are growing. You get to the point where you encounter more and more dark places of extremely twisted logic, the places which are avoided like the plague by even the bravest developers. The more such places, the more difficult to manage and develop the application. A standard example is the action of registering a new user, which triggers a whole group of other actions associated with this event:

  • checking the IP address in a spam database,
  • sending an email to the new user,
  • adding a bonus to an account of a recommending user,
  • creating accounts in related services,
  • and many more…

A sample code responsible for user registration might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
class RegistrationController < ApplicationController
  def create
    user = User.new(registration_params)
    if user.valid? && ip_valid?(registration_ip)
      user.save!
      user.add_bonuses
      user.synchronize_related_accounts
      user.send_email
    end
  end
end

Okay, you’ve got it coded, everything works, but… is all of this code really okay? Maybe we could write it better? First of all, it breaks the basic principle of programming – Single Responsibility, so surely we could write it better. But how? This is where the already mentioned PORO comes to help you. It’s enough to separate a class RegistrationService, which will be responsible for only one thing: notifying all the related services. By services we will consider the individual actions which we have already singled out above. In the same controller all you need to do is create an object RegistrationService and call on it the “fire!” method. The code has become much clearer, our controller is taking up less space, and each of the newly created classes is now responsible for only one action, so we can easily replace them should a need arise.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class RegistrationService
  def fire!(params)
    user = User.new(params)
    if user.valid? && ip_validator.valid?(registration_ip)
      user.save!
      after_registered_events(user)
    end
    user
  end

  private

  def after_registered_events(user)
    BonusesCreator.new.fire!(user)
    AccountsSynchronizator.fire!(user)
    EmailSender.fire!(user)
  end

  def ip_validator
    @ip_validator ||= IpValidator.new
  end
end

class RegistrationController < ApplicationController
  def create
    user = RegistrationService.new.fire!(registration_params)
  end
end

However Plain Old Ruby Object may prove useful not only for controllers. Imagine that the application you are creating uses a monthly billing system. The exact day of creating such a billing is not important to us, we only need to know that it concerns a specific month and year. Of course you can set the day for the first day of each month and store this information in the object of the “Date” class, but neither is it a true information, nor do you need it in your application. By using PORO you can create a class “MonthOfYear”, the objects of which will store the exact information you need. Moreover, when applying in it the module “Comparable”, it will be possible to iterate and to compare its objects, just like when you are using the Date class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class MonthOfYear
  include Comparable

  attr_reader :year, :month

  def initialize(month, year)
    raise ArgumentError unless month.between?(1, 12)
    @year, @month = year, month
  end

  def <=>(other)
    [year, month] <=> [other.year, other.month]
  end
end

Introduce me to Rails.

In the Rails world, we are used to the fact that each class is a model, a view or a controller. They also have their precise location in the directory structure, so where can you put our little PORO army? Consider a few options.
The first thought that comes to mind is: if the created classes are neither models, nor views nor controllers, we should put them all in the “/lib” directory. Theoretically, it is a good idea, however if all of your PORO files will land in one directory, and the application will be large, this directory will quickly become a dark place which you fear to open. Therefore, undoubtedly, it is not a good idea.

1
2
3
4
5
6
7
8
9
AwesomeProject
├──app
│  ├─controllers
│  ├─models
│  └─views
│
└─lib
  └─services
      #all poro here

You can also name some of your classes non-ActiveRecord Models and put them in the “app/models” directory, and name the ones which are responsible for handling other classes the services and put them in the “app/services” directory. This is a pretty good solution, but it has one drawback: when creating a new PORO, each time you will have to decide every whether it is more of a model or a service. This way, you may reach a situation where you have two dark places in your application, only smaller ones.
There is yet a third approach, namely: using namespaced classes and modules. All you need to do is create a directory which has the same name as a controller or a model, and put all PORO files used by the given controller or model inside.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
AwesomeProject
├──app
│  ├─controllers
│  │ ├─registration_controller
│  │ │ └─registration_service.rb
│  │ └─registration_controller.rb
│  ├─models
│  │ ├─settlement
│  │ │ └─month_of_year.rb
│  │ └─settlement.rb
│  └─views
│
└─lib



Thanks to this arrangement, when using it, you don’t have to precede the name of a class with a namespace. You have gained shorter code and more logically organized directory structure.

Check me out!

It is a pleasant surprise that when using PORO, the unit tests of your application are faster and easier to write and later on more likely to be understood by others. As each class is now responsible for only one thing, you can recognize the boundary conditions sooner, and easily add appropriate test scenarios to them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
describe MonthOfYear do
  subject { MonthOfYear.new(11, 2015) }

  it { should be_kind_of Comparable }

  describe "creating new instance" do
    it "initializes with correct year and month" do
      expect { described_class.new(10, 2015) }.to_not raise_error
    end

    it "raises error when given month is incorrect" do
      expect { described_class.new(0, 2015)  }.to raise_error(ArgumentError)
      expect { described_class.new(13, 2015) }.to raise_error(ArgumentError)
    end
  end
end

I hope we’ll meet again!

The examples we presented clearly show that using PORO improves readability of applications and makes them more modular, and, in consequence, easier to manage and expand. Embracing the principle of the Single Responsibility facilitates the exchange of particular classes if necessary, and doing so without interfering with other elements. It also makes testing them a simpler and faster procedure. Moreover, this way keeping Rails models and controllers short is much easier, and we all know that they tend to get unnecessarily big in the process of development.

 

HOW DID WE HACK COFFEEMAKER AND HAD FUN WITH IT? :)

Introduction

On the Internet you can read a lot about interesting Internet of Things (IoT) projects, based on Arduino and Raspberry Pi. Also in our heads there were many ideas for electronic projects, which could make our lives easier, be useful and interesting.class_selector

In the end, together with Radek, we decided, that we will complete “a certain” project. In the beginning we faced a question what to start with. It seemed that Arduino is the solution for everything. A multitude of modules, shields and extensions gave a (false?) impression that nothing stood in the way of becoming the next Elon Musk and sending rockets into space.

We decided to start from the beginning, that is from basic electronic work done after hours. In my case, it meant revising and adding a bit to the knowledge gained in my school years. And so we went through courses in electronics, read books and watched videos on the YouTube channels dealing with this subject. We immediately begun to translate theory into practice by completing small projects. Later came the time for Arduino and playing with modules. When getting to know the Atmega microprocessor, we came upon a popular, though very enigmatically described, WI-FI module ESP8266.

Having already basic knowledge of and skills in Arduino, modules and ESP8266, we decided to do something bigger. After brainstorming, the most acclaimed project was the one counting amount of coffees made by a coffeemaker and placing that number (daily) on our new website.

Research

We started with searching for similar projects. It quickly became clear that we cannot count on having the job done for us. Although we found several references to projects involving modifying coffeemakers in some way, most often there was given no specific information as to how it was done. Therefore, we were left to act on our own.

The next step was to find the best way to collect data on number of coffees made. When pursuing interest in IoT (Internet of Things) projects we came upon Thingspeak service that offers an easy way of collecting data and presenting it on charts. In addition, it enables exporting data to popular formats i.e. JSON, XML. Sounds great!

We also started to play with ESP8266 which at times turned into a nightmare and frustration: unclear information about connections, problems with power supply reliability, and with connecting to WI-FI network. After about a week, numerous (more or less successful) attempts to create “something” on the ESP we began to meddle with coffee maker. At first, not knowing where to start, we tried to understand how a coffee maker works and how does a signal from a button make it begin to make coffee. After a few hours spent “in the coffee maker” we created first wiring diagram. It turned out that the front panel with buttons sends information in the form of different voltages to ADC of microprocessor, and that we can “intercept” these signals.

Prototype

We built a prototype on a breadboard, on which we had ESP-12 (ESP version with ADC, that is with a converter or analog-to-digital), voltage regulator (lowering the voltage to required 3.3V), a few resistors and capacitors for, among other, ensuring ESP operations are stable and correct, and buzzer as debugger. We wrote the first software in LUA (for NodeMCU) and plugged it to a coffee maker, and our prototype works! After pressing the “make coffee” or “make double coffee” you can hear a short beep followed by a long beep saying that the information about made coffee was sent to ThingSpeak.

We still had to add some “processing” of a signal. Using voltage divider on resistors to distinguish two additional buttons (ECO button and a button activating pressure pump for frothing milk), which send signals on the same path as coffee size choice is sent. And then something went wrong. When measuring current, and then voltage, Radek didn’t switch plugs and a knob on the meter, which resulted in the coffee maker stopping to work. That was a short-circuit. Fortunately for us, it turned out that it was only a fuse soldered on the board of the controller of the machine. Phew.

The production project

The time has come to move items from the breadboard to universal port, add port for communication with the UART (for uploading software), signaling status on the LED (connecting to WI-FI and confirming sending data to ThingSpeak). And, of course, to improve software in LUA. In addition, using the React shares in ThingSpeak and IFTTT, we set notifications on Hipchat, sent by our bot Elmo and telling whether the device works. At the end, using data export in ThingSpeak, we managed data in JSON to display an information about amount of made coffees and amount of drunk caffeine on our website.

Conclusions

We are very pleased with the effects of the counter operations and with the manner of its implementation. It was our first project of this type, where we did not take a ready project from the Internet but made it step by step. In this case, we had to hack coffee maker on our own and take proper actions. Not to mention how much we have learned.

We are already new projects budding in our heads, and in the near future we will surely share their implementation. After the “success” of our counter, more people from the company expressed their willingness to participate in future projects – which makes us very happy and motivates us to deepen our knowledge of electronics.

Watch a movie!

Gallery


Prototyping and measurement.


Uploading new soft and testing


Soldering.


Pre-production testing.


Final and ready to deploy!



Counter on home page.
See how many coffee we drink today!


Coffee counter stats at ThingSpeak.

 

CODEST HAS NEW IDENTIFICATION!!! :)

Hello there! We are happy to announce that we changed our look. The new logotype and identification materials are brand (!) new representation of proceeding the changes that has been going on for a little while.
We have moved into our beautiful new office, now there is a lot of space to work in. It’s bright, it’s spacious, it’s beautiful and functional!