Quick Javascript Tips 1: Easiest way to get enter key event with jQuery.

Rafael Melo — Thu, 01 Feb 2018 01:40:28 +0000

This the first of a series of quick tips that I’m using on the day-to-day coding with Javascript.

This one is about something really not cool that is getting the enter key event.

Let’s assume you have to build a search bar at the top of a website.

To make a search the user should press enter or click on the search button. That sounds easy. Since I’m using jQuery it’s something like this.

$('input').on('keypress', (event)=> {
        if(event.which === 13){
            //Do Something
        }
});

That basically says: when the user types on the input, if the key he pressed has the code 13 (usually the enter key) do something.

If you test it on chrome it’ll work just fine. But when you test on an Android device, hell will come to earth: every key has code 229!

Every key has code 229!!

But don't despair! Here’s the thing: 229 is the key event that the browser emits when it’s processing what the user typed, and that happens a lot on Android because of auto-correct.

Because the auto-correct is processing the event to foresee what the user is typing, this piece of code won’t work because it’s always getting code 229 instead of each of the Key’s individual code... That’s not cool.

But to overcome this you can do the most native option with the widest support of every browser.

Wrap your search bar in a form tag.

Really simple and easy.

Just put everything inside a form tag...


<form>
    <input type="text">
    <button type="submit">
    Search!
    </button>
</form>

...and deal with the submit event to do what you want!

$('form').on('submit', (event)=>{
    event.preventDefault();
    // Do what you want here
    // In this case get input value
    // Do a search
    // Redirect to results page
});

Don’t forget to preventDefault(), so the page won’t refresh since it’s the native behavior. Also remember to put the button inside the form, so it will submit your data!

That’s it. This my first attempt to teach something so I hope I was able to tell it in a clear way.

See you in Quick Tip 2.

Here’s 3 things that made my app third place in an international student competition

Rafael Melo — Tue, 12 Dec 2017 23:24:28 +0000

I won third place at IEEEmadC 2017 (Mobile Applications Development Contest) among equally great 40+ apps developed by students all around the world. It was a amazing experience that made me open my mind to new ways of seeing things and to my skills as a developer.

Here are three things that I believe made my app be chosen among so many interesting and really good applications from students all over the globe and that I'm sure can make your app do it too.

1. Choose an idea that is useful for your own life and for others around you.

The first phase of the contest was the idea phase. More than 200 groups submitted amazing ideas and I was one of them. But just like most people, I had many ideas that I thought were great, how could I choose just one and focus on that?

Here in my city we have many beautiful beaches and we are mainly known as a touristic city of Brazil. But most of the year our beaches are polluted because the majority of our rivers received sewer waters for a long time and as every river ends up on the ocean, the beaches became dirty. The bright side is that the beaches are perfectly suitable on the summer, but when it rains and mostly on other seasons every beach becomes unsuitable with sewer water.

Some people just ignore this fact and keep going to the beach risking getting many diseases from the high level of Escherichia coli in the waters. Others just avoid the beach and loses one of the most amazing things our city provides, (we have really beautiful warm beaches), and there are some people that just don’t know about that, mostly tourists from other countries. Something common about these three kind of people is that most of them doesn’t know that our government measures the level of Escherichia coli in our beaches and post it on the internet weekly.

When I discovered that the idea just popped: an app that returned that information to the public, making the knowledge of clean beaches more open to populaton and tourists.

That’s the idea I knew would not only help me but others as well.

When the first phase ended I received an email telling me that my idea was one among of 40+ of the selected. It was an exciting sensation: I was about to compete with more than 40 groups of people from around the world and all I had was an idea.

2. Choose your tools wisely and go for what you already know.

The second phase was development and my idea had to become an app in three months, I didn’t have a group and I had to choose how I would build my app.

The first thing I thought was that since it’s a mobile application competition I should build my app with Java for Android or Swift for iOS. But I didn’t know any of them the only thing I had was sparse knowledge from what I studied in some classes of Java and I never really did anything with swift. I was tempted to learn one of them for the competition but I had a really short time. So I took the smart decision: to use what I already know. I’m a web developer intern and my main language is javascript so I decided to use a hybrid platform built on cordova. And it worked. On the first two months I had built almost everything from the front end and some of the back end just using javascript. The fact that I was confortable with the language helped me in every aspect.

I know that running from something new sounds awful for developers like us, but I believe it’s about knowing the right time to discover something new and the right time to use what you are comfortable with. A teacher once told me that most of people fails at some objectives because at the most crutial time they decide to try something new instead of what they already know. In the end of the competition I was glad that I listened to those words.

3. Your app is for humans not machines: don’t underestimate design.

My app was almost complete, and I decided to ask my friends what they thought about it. Most of them didn’t liked, and I was less than one month from the competition deadline.

With all of my front completed and most of my back end done, I started to show people my app and asked what they thought of it. To my surprise they didn’t like. It was - in their words - ‘ugly’ and they couldn’t understand how to use it. I was frustrated: I built an app that I thought was good, but if people couldn’t understand how to use it and they didn’t like it, it was worth almost nothing...

First Version of the app

So I took the decision to study a little about design – something I thought my entire life that was unnecessary and superfluous – and use what I learn to improve my app so people can be interested to use it. Since I never had classes in my university about design, the internet was my best friend and I started my journey on something I never studied before.

Design is a universe of it’s own. There are so many fields and theories that you can’t possible learn everything in a such short amount of time. So I decided to focus on two things, user experience and color theory. After some study and a lot of trial and error, I’ve finally reached something that people started to compliment: it wasn't ugly anymore and everyone could understand how to use it.

Final version

It blew my mind.

To me that was the part that changed my way of seeing things. Design is something really important and it should be taken seriously, after all it’s about how users interact with what we create, and users are the most important piece to every system. Without users there is no application. This competition changed forever my idea about design, and it’s something I will carry with me on every project I’m a part of.

At the end of the judging phase, I received another email, this time telling me that my app had won the third place, the Computer Society Special Award. I was really happy, because not only I felt like my efforts leaded me to something great, but because I was one person when I entered the competition, and I was another completely different person when it ended.

These are the three things that I think made my app become third place at IEEEmadC 2017. What really made the judges like my app only they will know, but I do believe that these three things made a difference and I wanted to share it with people. This experience changed a lot of things for me, and I hope I was able to share this feeling.

I would like to thank IEEE for the opportunity and for making so many students come together to build great things, to all the judges for the hard part in choosing only three among so many good apps and to my girlfriend and friends that helped me so much with the design part.

See all the winners

DEV Community: Rafael Melo

Quick Javascript Tips 1: Easiest way to get enter key event with jQuery.

Here’s 3 things that made my app third place in an international student competition

1. Choose an idea that is useful for your own life and for others around you.

2. Choose your tools wisely and go for what you already know.

3. Your app is for humans not machines: don’t underestimate design.