DSP Project Report #3

Spring has arrived. Days getting warmer, the sun is shining, birds are singing. I’m not changing the profile of my blog to poetic, but these things are distracting me more and more.

Last week I had couple moments when quitting from contest went through my mind. It’s quite tempting, but I want to hold out to the end.

Fortunately, some progress has been made at FinanceGrinder project. Recently I’ve implemented adding new withdrawals functionality. It is quite simple for now, and similar to adding categories, but it will grow in later time.

Date Picker

Adding withdrawal form has 3 fields: Date, Amount, and User. The last one will be filled automatically in the background when logging in will be implemented.

I would like to focus on a Date field. I started with a simple text field, but typing date in the proper format by hand isn’t convenient. Next I changed it toHTMLs   <input type=”date” /> . It rendered nicely.

Date picker
HTML Date picker in Chrome.

I was able to switch date from a popup or set date using up and down buttons. But it works only on Chrome. Firefox, are you kidding me?! Come on, don’t be delayed. So I decided to use component provided by MaterializeCSS. It’s dead simple to implement.

in view file:

in javascript file:

 

After reloading page, we have a very nice popup with the readable picker. The most important thing for me is that it will behave in the same way on every modern browser.

That’s all for now. Not much, but commits are dropping constantly like raindrops from the roof on a rainy day. And poetry again…

7 programmer sins

Let me paraphrase a popular sentence from Bible:

Let any programmer who is without sin be the first to throw a keyboard.

I’m sure that many keyboards would be thrown because many of us consider himself to be infallible and bulletproof. But is it right? Most of us don’t even realize our weaknesses and sins, but they are made every day.

Take a short moment to look at the list of programmer sins and take some longer time to consider them.


The following list of programmer sins was originally presented by Andrzej Staniszewski at conference Kariera IT in Gdańsk. Thank you, Andrzej for pointing this for us!

Each sin below is presented in following way:

0. Sin →  Solution

Short description.


7 programmer sins

1. I was thinking  →  I asked/consulted

Have you ever been working on some task given from e. g. your boss, for a long time, let’s say 3 days? And have sleepless nights thinking: „How this should be done?” And when boss saw your finished work, just said: „It’s completely wrong. You misunderstood me, I was thinking about something else!” I’m sure you have experienced the such or similar situation. And after all, you thought: „If I only ask for details…”

2. Individualist  →  Team

Quite similar to above. It is always better to consult team. Your teammate’s fresh point of view can improve your idea or bring new solutions. Don’t be such introvert, talk to other people.

3. Pride/confidence  →  Humility

Let’s assume you are working in your workplace for 20 years. You are good professional, very much appreciated by boss and coworkers. No one can do your job better than you. But you aren’t all-knowing person. Now you need to some task related to the area, which you are not familiar with. You know by chance, that there is some junior in your company, which specialize in that area. And now the scariest part – you should hide your pride into (big, for sure) box for a while and ask him for help, or although for advice.

4. Shame  →  Team, that I am part of

A good team should mobilize, not block. You can’t feel shame to express your opinions or to asking questions. Even for trivial things.

5. Rush  →  Well thought out

If you aren’t programmer from yesterday, you probably have at least one hotfix in your „portfolio”. You know that it will take revenge some day, in the worst possible moment. Take your time, think about solution three times, go for a 5-minute walk, return, think about it one more time. Now you are ready to do what you have to.

6. Works on my computer  →  Tested

Yeah, this one is a classic. Sometimes it is a result of our confidence (look at point 3). Any further comment is not needed.

7. Habits  →  Openness

People nature is to be afraid of everything new. New situations require from us learning new things and changing habits. The Very common approach is sticking with a weak job for years because of fear of stress generated by changing employer. Habits are basically not bad, but try to have only best of them. Always be open to new experiences.

Should I care?

How many of these sins apply to you? I’m sure at least one. Now, when you are aware of them, try to introduce the suggested solutions. I assure you that you’ll see the difference in a while. Your work will be easier, your coworkers, bosses, and clients will appreciate it.

Maybe you know some other programmer sins? If so, please share them in comments.

DSP Project Report #2

It’s time to report my progress on the FinanceGrinder project. I’ve declared to publish reports weekly, so this one should be the third, but not much happened since last one. I didn’t have enough time to develop my application as much as I would like to. The day is too short…
It doesn’t mean that I didn’t do anything, some small progress has been made.
I have added a basic layout for application, for now, it is simple, standard MaterializeCSS layout: navbar with app name and menu, footer, and content between them.

FinanceGrinder - list of expenditure categories
FinanceGrinder – list of expenditure categories

Also, I’ve split the list of categories to distinguish incomes and expenses. Materialize provides a nice solution [link] for this.

TRANSACTIONS

When the categories are in place, I could finally create the most important table – transactions. This model will be responsible for orchestrating all incomes, withdrawals and later transactions between accounts.

FinanceGrinder - list of transactions
FinanceGrinder – list of transactions

For now, it’s just viewing the list of transactions. My next goal is to implement CRUD for them.

MVP

My intention is to build Minimal Viable Product with basic functionalities, publish demo and gather feedback from users. At first stage, the application can be ugly but should be efficient. I don’t want to build shiny GUI at the moment, I want to focus on main functionalities. I also would like to publish open demo as quick as it is possible.

Follow me on Twitter, Facebook or GitHub to stay up to date! 🙂

New abilities of HTML

Even if you only browsing the Internet, not creating sites, you probably heard of HTML. For some time webmasters are using new major version – HTML 5, which brought many features. Now they can do more thanks to HTML 5.1

What is HTML 5.1?

It stands for Hypertext Markup Language, other words – set of tags used to build a website. Recently W3C has started to officially recommend new version – HTML 5.1. W3C (World Wide Web Consortium) is an organization that defines standards for building websites. Its new recommendation is quite obliging for web developers, it means that HTML 5.1 can be (and should) their fundamental choice when it comes to creating a web page.

HTML 5.1 except organizing some matters, introduces some set of new features, which you should interest about.

Custom context menu

Thanks to MENU and MENUITEM elements you can add your own options to context menu triggered by right mouse button. Unfortunately, for now, it works only in Firefox.

See the Pen HTML 5.1 menu example by WebGrinder (@webgrinder) on CodePen.

Showing and hiding

The ability to showing and hiding elements after a click is one of most interesting features of HTML 5.1. Of course, you can say that this isn’t new functionality – you can achieve it easily using JavaScript/jQuery. All trick is that now you can do this without any scripts. Just wrap an element with DETAILS and SUMMARY tags, and start toggling in the browser.

See the Pen HTML 5.1 details and summary demo by WebGrinder (@webgrinder) on CodePen.

New INPUT types

Since couple years new input types can be inserted into forms. HTML 5.1 introduces new control types, allows to easily select. Unfortunately, for now, it works only in Chrome.

See the Pen HTML 5.1 week, month and datetime inputs by WebGrinder (@webgrinder) on CodePen.

It should look like that:

PICTURE element

Very useful feature is a new PICTURE element. Using it allows decrease problems with responsive images. Long story short, you can set different versions of an image for different devices. You can ex. render a small picture on the mobile phone, and bigger on a device with larger screen. Thanks to that, the user avoids wasting his transfer.

These are only a few new features that HTML 5.1 brings. I encourage you to try them out and start using when all browsers will start to fully support them.

It seems that this article it a little bit overdue because at 13-03-2017 HTML 5.2 appeared. I’ll probably take a look at it in my spare time and post a short note on the blog.

Stay tuned!

All recommendation details are available on https://www.w3.org/TR/html51.

CodePens used in this article were created by SitePoint.

DSP Project Report #1. To React, or not to React?

In a previous post, I have declared constant reporting my work o the application, that I am building for Get Noticed (Daj Się Poznać – DSP) contest.

Couple words of introduction for those, who didn’t read my previous posts. I am building a web app for expenses registration and home budgeting. It’s called Finance Grinder and progress can be followed on GitHub.

So let’s start.

Basics

I decided that I don’t want to dive into quite new main technology because I wouldn’t have enough time to learn it, write blog posts and code. And unfortunately, I was right. Despite I am using Ruby on Rails, which I know pretty much, coding takes me a lot of time. It happens so because I want to build front-end using ReactJS.

Ruby on Rails is quite straightforward. It prefers convention over configuration, so you can start developing a new project in minutes. I have described it in this post.

Otherwise, it is with React. Especially when it comes to tailoring it with Rails. You can integrate them in couple ways:

  • by adding gem react-rails (the simplest way)
  • by copying React library file to your project directory (nah, it smells a little bit)
  • by using Webpack
Hello, React!

I was using React before, but it was just a couple of small components to try it out. I didn’t want to put much effort into, so I’ve just added gem. It is really simple. You just need to add gem 'react_rails'  in Gemfile, run bundle , refresh page in browser and React is at your service.

But this is not the best way.

Downloading and copying React source code into project directory also isn’t good practice.

Recently I’ve read a good article on Netguru’s blog. It sais that if you appreciate maintainability and flexibility, you should integrate React using Webpack. I partially agree with that. I’ve even tried their gem react_webpack_rails. But after I saw what amount of code it has generated and how much npm install  has downloaded, I’ve thought that is kind of overkill for my project. Especially at this stage of development. For now, I want to keep things as simple as they can be and focus on coding.

So if you want to be a modern web developer you should use cutting edge modern tools, such as Webpack? This is how it looks. But for sure? I personally don’t think so. For now, I’ll stick to react-rails gem, maybe someday I will need to introduce Webpack.

On the horizon is also a new version of Rails – 5.1 (link). It will introduce Yarn for JavaScript dependency management and Webpack through webpacker gem. I am looking forward to this update, it’s in beta now.

Long way to go

For the afterword, I should admit that projects stage is not as advanced as I would want to. I’ve spent some time reading about React, but it is not wasted time. Now I have to keep up.

Give Finance Grinder a shiny star and stay tuned!

Starting a new Ruby on Rails project

In this post, I will shortly describe how to jumpstart Ruby on Rails based project. I am building a project called Finance Grinder and I’ll show you steps, that needs to be done to create new app. Also, I will describe gems (libraries), that I’ve chosen to use in my app.

How to start with Ruby on Rails
Ruby (programming language) with its most popular framework Rails don’t require many complicated steps, to start working with. You also don’t need to download gigabytes of software to install.
The Internet is full of detailed articles, tutorials, and videos about starting with RoR, so I will mention the most important, and show how I did it.
Step 1. Choose operating system
 You might be a little bit surprised of starting with that, but this is important. When you spend some time working with rails projects, you will know why.
Before ruby and rails installation you’ll need to the give effort to choose proper operating system. The best choice will be Linux or MacOS. Why not Windows? Well, it is true that all packages necessary to start can be installed on Windows (http://rubyinstaller.org), but sooner or later, I’m sure you’ll experience problems so frustrating, that you’ll switch to other OS. Therefore, better immediately install Linux on the separate partition or on a virtual machine.
I recommend Ubuntu. Maybe it is not the fastest, but most popular distribution.
Step 2. Installation of Ruby Version Manager

Before you’ll install ruby I recommend you to install Ruby Version Manager (RVM). This is a command-line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems. That’s a fair description from their site. To install it just run in the command line:

Step 3. Installation of Ruby On Rails
Now you can easily install the most important packages. First, you need to start with Ruby, so run a command:

RVM will download ruby, and install it. When the installation is completed you can verify it by running ruby -v. You should receive a version of installed ruby. Before rails installation, you need to select ruby in RVM and point namespace (RVM call it gemset) to install all gems (yes, rails also is a gem). You can grant your specific name to gemset. I will name it by name of my project (finance_grinder).

Now RVM knows where to store all libraries for your project, so install most important of them – rails:

This command will install Rails framework with its dependencies, so it will take a while. Once it will be finished check if it went correctly by running rails -v . It should return a number of newest version, for today it’s 5.0.2.
Before you fire up a new project, you need to install Bundler. It is a tool to manage, track and install exact versions of gems that are needed. Bundler  is some sort equivalent to Composer for PHP or npm for Node.js.

Step 4. Creating new, SHINY Rails project
Rails comes with a very handy package of generators, one of them is new project command:

After hitting the enter button, rails will generate all files for the project, ready to start. Automatically bundler will install all dependencies.

That’s it, your project is ready to be developed, you can even run it now:


Once the server is started, open browser and go to localhost:3000. You should see starting image:

Yay! You're on Rails!

Step 5. Installing favorite gems
This is not a necessary part to proceed with your project. I will install gems, which I like most, and remove preinstalled some from the project. You can see these modifications in my project repository: https://github.com/sampi60/finance_grinder.
Changes I’ve made:
  • Change database engine. Replace ‘sqlite3’ by ‘pg’. Some setup with PostgreSQL is also needed, but I will not cover it in this post.
  • Replace ‘byebug’ by ‘pry’. I just like it more, but it has the same main functionalities.
  • Use ‘rspec’ instead built in UnitTest for tests. Also add awesome gems such as: ‘rails-controller-testing’, ‘factory_girl_rails’, ‘faker’, ‘shoulda-matchers’ and ‘capybara’. These are ones of most used gems by rails developers, so I encourage you to get familiar with them and give them a try.
  • ‘better_errors’ – to see clearly what I’ve broken 🙂
  • ‘binding_of_caller’ instead ‘web-console’ to play with application on error screen
  • Add powerful ‘devise’ gem to deal with users authentication.
  • Add MaterialiceCSS framework. This is an experiment, I’ve never used it, but I always wanted to.

After each change in ‘Gemfile’ file you need to run bundle install  or just bundle  command to install new gem and make update ‘Gemfile.lock’ file.

That’s it for now. I have some favorite gems for other purposes. I will probably add them during development, or I will give a try to equivalent ones, or maybe try to build my own solutions. Will see.

Project status

Unfortunately, until now I haven’t done anything except this because I wanted to describe the process of installing environment and running new rails project. My actual goal is to catch up with code, so I rather wouldn’t cover any commit so closely.

I will try to report Finance Grinder status at every beginning of a week, announce what I did, and what I will focus on during next 7 days. I hope that such exact plan allow me to work efficiently if only I will have time.

 

Stay tuned, see what will happen, and don’t hesitate to leave some feedback!

How to plan web application?

Let’s say you want to build a house. Not just a small doghouse, but the real house for you and your family. What will be your first steps? Will you get up, run to building store, get some bricks, and start to build? I’m sure you won’t. You’ll rather plan it. And this plan will be very detailed. Building an application is long-term, and often very expensive process, so it must be planned well. Planning is not very enjoyable part of all process, but it can simplify the next part – application development.

How to start a start?

So, as you may have guessed, the first thing I do when building a new application is to make a plan. You should also do it before you write any line of code.

1. Well-defined goals allows simple realization

When you have to accomplish some task, isn’t it simpler when you know exactly what needs to be done? After defining a detailed list of goals for the app, developing it gets much easier.
We will begin by defining what we need to get when the project will be done. It has to be main, basic goals of the app. Next, they should be shredded into smaller adjectives, which consists of small steps. Then, completing steps, adjectives and main goals will lead us to get finished product.

2. Defining objectives

To elaborate list of actionable steps, allowing to start working on the app, we should define broad goals and divide them into smaller steps.

As I wrote in the previous post, I will be building an app for managing the home budget. In the case of my app, main goals look like this:

1. managing expenses

2. defining budget

So, would you like your boss to tell you: “Implement managing expenses.”. Will you be happy to do that? I bet you wouldn’t know how to even start. That’s why this adjective should be split into smaller parts:

1. managing expenses
  a. create expense
     – choose category
  b. show list of expenses
  c. edit expense

d. delete expense

Now, if you hear “Implement deleting expense!”, I’m sure you will know how to start. Life is getting much easier, and the world is getting prettier, isn’t it? 🙂

Start small, grow later

Another approach, that I am a big fan of, is Start small, grow later. The features of the app should be small and specific. This allows you to implement them fast and release MVP (Minimum Viable Product). At this stage, the app is in initial version and allows for only basic things. It also helps a lot with gathering first feedback from users, and apply them in further development.

Think like manager

Most of the programmers are happiest when they only need to code, and don’t worry about anything else. I caught myself beeing one of them, but I am gradually trying to change it, and start to think in other categories. When you are talking with the client about the project, and gathering his requirements, you can’t immediately start thinking about implementation. Have you ever been thinking about where to add a new column to the database when the client said that he wants to have an opportunity to make a discount on the product in his online shop? That is a mistake. You should be thinking about value for the client, which that functionality can bring. Maybe sometime you will invent and propose a better solution?

A Programmer is for thinking, not only for typing code.

Everyone should remember this sentence. Both programmers and clients. I will leave you with this thought, Think about it, at least this is your job…

I will leave you with this thought, Think about it, at least this is your job…

Finance Grinder – about project

As I wrote in the previous post I am participating in Daj Się Poznać 2017 (link) contest. One of the conditions is developing open source project. I decided to build a web app for writing down expenses and managing a home budget.
Why build expenses/budgeting app?
Can’t you just use Excel spreadsheet? Someone may ask. I am using one right now, and the longer I’m doing so, I’m experiencing more restrictions, and would like to automate it much more. Currently, I’m using quite advanced Excel file created by Michal Szafranski from jakoszczedzacpieniadze.pl.
It allows defining a list of groups and categories of expenses, which is used in all spreadsheets (each spreadsheet represents one month). Also allows to plan a budget for each category, next you need only to fill in proper rows with amounts, and smart formulas will take care of relevant calculations. At the beginning of home budget journey it can be enough for basic purposes, but, for example, if you want to compare summary data between months or years, it is not that quick and easy. Moreover, if you aren’t familiar with Excel, your data can be lost or formulas can be broken very fast.
So I decided to build yet another budgeting app
Yes, there are some applications for such purposes. One of most popular is online YNAB, polish Kontomierz.pl, or widely used Microsoft Money. Each has many advantages but is not without drawbacks. Some are paid for basic version, some, like Microsoft Money, are not maintained from a long time. I will not build perfect service, but I’ll try to conclude basic functionalities in a simple form. Functionalities, which I would like to use.
For the beginning:
  • registration with a social account, ex. facebook, google
  • writing down expenses
  • monthly summary
  • yearly summary
  • reports for the particular expense category
  • defining budgets for categories
  • reports for a budget realization
How many of these will I complete during the contest? Will see. I know, however, that if I start, and make some amount of work, I will develop this project after the contest ends.
Therefore, how it will look like?
I decided to use technology, which I am familiar with, and love, and also technology, that I don’t know much, but love too. I’m thinking of respectively Ruby on Rails and ReactJS. During the project, I hope tolearn some new things related to programming and build an application, which will be useful not only for me. I encourage you to use it and try to control your expenses.

 

Source code can be found on GitHub: https://github.com/sampi60/finance_grinder

I will try to launch live version as soon as it’ll be possible, to let you see how it works, track changes, and find bugs 😉

Any feedback is welcome. Ping me in a comment or look at the Contact page.

Stay tuned!

Ready, steady, go!

Welcome to my blog!

A short time ago I thought that there is a space in the internet for another programming blog, but I had common fears, ex. do I have something interesting to say? Will anyone want to read it? Will I have time for it? We will see.

For a long time blog was only an idea to fulfill in unspecified future but in the beginning of 2017, I read about contest Daj Się Poznać proposed by Maciej Aniserowicz from devstyle.pl. The main idea of this contest are: code, write blog posts about it and get noticed!. Then I said “Hey, this can nicely motivate me to learn something new and go out with my thoughts. Let’s do it!”.

So unexpectedly the web has gained new place where one person will express himself and (probably) almost no one will read it.

What can I lose? Maybe some money spent on buying a domain and hosting, and time for choosing WordPress theme, but general possible profits are incomparable:

  1. Blogging can cure my inner introvert and defeat the fear of expressing myself.
  2. Writing in English will help me to expand my vocabulary.
  3. Writing is good for organizing knowledge, and deepen the subject.
  4. A good blog can help in building personal brand and career.
  5. Starting a side-project will develop my coding skills.
  6. Maybe someone will find my blog as helpful.

These thingsare very valuable for me, I will be pleased to achieve only a few of them. I treat this blog as an investment in myself, I hope that enthusiasm and energy put in will get back with double power.

Thanks for reading my first post. It wasn’t that hard to write it, but I hope another will be easier. I’m ver excited to see what will it be for couple months or years. Will you cross this adventure with me? I encourage you to read further posts, consider them, and leave some feedback. Thanks!