Why to Sublime Text?

In my day-to-day work, I am using Sublime Text as my main text editor. It is simple, lightweight but very powerful. It increases my productivity and helps to quickly achieve desired goals. I encourage you to take a couple minutes and read about its features, get familiar with useful tricks, that I am using the most.

Please give it a closer look. Instead just „scan” the article by headings, download Sublime from sublimetext.com and install it. Maybe you’ll also find it useful.

take a shortcut

When is writing code most effective? When you are not touching mouse. Using only keyboard to operate text editor is way faster than moving a mouse cursor and switching options from nested menus. It is only required to get familiar with couple commands and shortcuts unlocking easily manipulation of code and files. Sublime Text comes with a bunch of handy ones.

Ctrl + P

Quick Goto anything. To try it out in the best way, open folder with some project (File | Open Folder…). Once the project is opened, hit Ctrl + P. A small popup will appear. Start typing name of the file you want to open.

Ctrl + P

Sublime will immediately find it in opened folder. You can also include parts of a path in the search pattern. So given  wochaplicont will lead to file within a proper directory.

Moreover, you can append pattern with:

  • #   – search within the file
  • @   – jump to method definition
  • :   – go to line number

When the work with a file is finished, Ctrl + W  closes it, just like in browsers. Ctrl + Shift + W Also  reopens.

 

Ctrl + D

D  is one of most erased keys on my keyboard 🙂 I’m using this function all the time. It marks selected string within opened file.

Ctrl + D

 

Ctrl + Shift + L

Tired of making the same changes line after line by your hand? Just select these lines, hit Ctrl + Shift + L. Now you have separate text cursors at the end of each line and work in many lines just like it would be one.

Ctrl + Shift + L

 

Ctrl + Shift + P

This shortcut opens Command Palette. It gives you access to less frequently used functionalities. Also, a popup is opening, similar to Ctrl + P  one, but this one searches for commands available in Sublime Text itself and installed additional packages. No more crawling menu with mouse and searching for hidden functionality. One of widely used here is Set Syntax command. Sublime automatically sets proper syntax for most popular file extensions, but for less known needs a little help.

Ctrl + Shift + P and ‘ssrub’

 

Ctrl + Tab

Great while working with two files. Even if many more files are opened, Ctrl + Tab toggles between two, recently viewed.

 

Other useful keys:

  • Ctrl + /  – toggle comment
  • Ctrl + [ | Ctrl + ]  – decrease | increase indentation
  • Ctrl + Shift + K  – delete line
  • F12  – when triggered for selected variable/method/class jumps to its definition
  • F9  – sorts all lines in ascending order
Packages

Sublime Text can do a lot but can do more if you want. When basic functionalities are not enough, you can install additional packages. Simply browse them at packagecontrol.io and install easily through command Command Palette ( Ctrl + Shift + P, type install, hit Enter, find the desired package, Enter again, and that’s it). The installation process should be described in the documentation of every extension at packagecontrol.io. If you haven’t found a suitable package, feel free to create your own.

Look for my next post about Sublime Text, I will describe my favorite packages.

 

As you can see, Sublime Text can indeed improve your work. Are you using it yet? If so, please leave a comment and let me know what are your favorite funcionalities. Or download Sublime today. Just give it a try, and don’t forget to use all goods it brings.

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!