Chatbots: Are you a human or a bot?

Origins

Alan Turing, for more than one a God and from my point of view was the one who triggers this actual concept of machines. It was during 50’s when Turing postulate Turing Test. It was theoretical postulate only and as It’s own concept was lacking of variables we have now, nevertheless, It was one of first human being asking himself if we can determine if a machine is actually behaving as one or most like a human.

It was 1966 and a MIT professor called Joseph Weizenbaum, came up with ELIZA. This bot was able to start a conversation and simulate a Rogerian psychotherapy by most of the cases rephrasing client’s statements.

But everything changed with SmarterChild, why? basically because It changed a little bit the way a bot was perceive. Before, bots was for entertaining only, this bot was able to help you in different ways, like movies or appointments.

The older chatbots just compared patterns and that was everything, they build an answer based on patterns. Now, a bot can analyze data and elaborate an intelligent answer within learning included. This is where it gets interesting …

What is?

All chatbots are powered by NLP (Natural Language Processing), nevertheless, that only allow to us to understand/process inputs, the tricky part is when we answer to those questions, we need real big data.

In other words by it’s own conception, chatbots are useful without a good database where we can process and give an extra value to chatbots. A chatbot without big data is like an app that just show information, it just consumes memory and phone resources without a good unique value.

So, chatbots have use machine learning to process users inputs, this learning can be supervised or unsupervised, everything resumes un patterns which are processed by neuronal networks, which can detect patterns and learn from this. But machine learning is a topic we can go though later.

At the time we tech/feed that chatbot data, more valuable it becomes. Let’s say you have a e-commerce company, with a good chatbot, you can get reports really easily by asking something like:

  • What is my projection in the next 2 years ?
  • What has been my revenue this month ?
  • What is the most buyed item ?
  • Give me the email of our most recurrent buyer.

To answer that question a chatbot will have to go and processed some big data. That’s the importance of a database well fed.

A human is totally able to do what a chatbot is capable to do, at the end of the day, we want to make our lives easier, don’t we? Who wants to perform a search for hours when you can only ask for something.

Future of Marketing

Why?

  • Navigation Assistant
  • Automatic Responses
  • Reactive Communication
  • Recommendations
  • Receive Orders
  • Visit Registration
  • Clients Monitoring
  • Engagement beyond clicks

What are the benefits of chatbots overall

  • Reduction of operating costs and moderation.
  • Increase in response rate
  • Support 24/7
  • Telemarketing savings.
  • Increase in service during peak hours.
  • Automation and simplification of sales
  • Improvement of the customer experience (CX)

Musts

Having a chatbot is a continuous work (like everything in this life), but there is always some rules you have to consider if you want to have a good and realistic chatbot.

It has to sound familiar, like a human been, you can see this approach like easy/difficult, but It’s very important, people have to feel like they are talking with a real person, so, an identity and personality (artificial) for a chatbot is crucial. So, Does it have to be funny, introverted, friendly ? Your choice.

You have to give people reasons to comeback and use your bot again, create a necessity. That’s why it’s important to create a familiar environment.

To continuous improvement on your chatbot you must check logs and look for user needs, and make your chatbot learning faster.

It’s important to create all basics for your bot, it’s like to create a building, you first have to put all the foundations.

Before start a chatbot

  • Objetive

Make a realistic scope of your bot, so, you can have a metrics and check how is your bot going on.

  • Personality

Give to you bot a personality, just like we talked before, It’ll be nice people talk about you bot with specific characteristics and a differentiator from others.

  • Solution

What your bot will solve for your end users. It as to be a key differentiator for your clients.

  • Lifecycle

The most important part. What is the workflow of your bot, what is the beginning and what’s the end.

As you see all those points depend on each other, so It’s important to have all of them well described and decided. Then you are ready to start your bot.

I’m a developer

If you are a developer like me, and you want to start digging into this obscure world, there are some tools that right now does the NLP for you:

  • Cloud Natural Language API — Google
  • Cognitive Services APIs — Microsoft
  • Watson Conversation — IBM

Free for all (for now):

  • API.AI — Google
  • Wit.ai — Facebook

Those tools can help you to create a cool chatbot. At 4Geeks we have used API.AI to play with our Google Home. It’s easy and funny.

So, as you can see there is a list of benefits and and todo-list before start with you chatbot, but, the most important part of this is to have a cool chatbot with excellent data and a well defined goal. I argue you to comment and contribute by adding more and more info.

If you are asking if there is something more and more deep I want to invite you to be in touch, cause later, I will talk about how to create a Neurologic Network with Python to create the basics of a custom bot with self learning.

Where do I start with Go?

If you remember a few weeks ago I was talking a bit about Go, you can watch the video here and I told you about some of Go’s many features.

To start remember that is Go: Go is a lovely little programming language designed by smart people you can trust and continuously improved by a large and growing open-source community.

Go is meant to be simple, but sometimes the conventions can be a little hard to grasp. I’d like to show you how I start all of my Go projects.

Setting up your environment

The first step is, of course, to install Go. You can use the binary distribution for your operating system from the official site. If you use Homebrew on Mac, brew install go works well. When you’re done, this should work:

$ go version

Once installed, the only other thing to do is to set your GOPATH. This is the root directory that will hold all of your Go code and built artifacts. The Go tooling will create 3 subdirectories in your GOPATH: bin, pkg, and src. Some people set it to something like $HOME/go, but I prefer plain $HOME. Make sure it gets exported to your environment. If you use bash, something like this should work:

$ echo 'export GOPATH=$HOME' >> $HOME/.profile

$ source $HOME/.profile

$ go env | grep GOPATH

GOPATH="/Users/kenneth"

If you’re using Windows, don’t forget to add a GOPATH environment variable. With that done, we’re ready to create our first Go application.

In Our first app, we create a file with extension.go in any text editor

$ touch demo.go

Every application in go is commanded by a

package main 

Every Go application is made up of packages and, using a Java reference, programs use the main package as the default.

import (
"fmt"
)

As I mentioned at the start of the tutorial, Go has a rather large standard library. To access that functionality, you need to import the specific packages you need.

Here, I’ve imported one:  fmt. If it seems foreign, it really shouldn’t. In PHP and C you’d use includes (or requires), in Python you’d use imports and in Ruby you’d use require.

func main() {

fmt.Println(“Hello  World”);

}

I’ve called the fmt.Println method, which invokes the fmt package that is the data in and out library.

 

Compiling The Code

Unlike PHP, Ruby, Python etc, Go is a compiled language. So from your project directory, in my case

$ go run demo.go

go run, the only thing it command does is run our file, if we want to compile our demo.go must run go build demo.go

 

Easy, right?

In Conclusion

We’ve created ‘hello world’  in small steps and using only the Go standard library. Our code can be fetched and deployed on nearly any server architecture. The resulting binary is self-contained and fast. And, most importantly, the code is straightforward to read and reason about. It can easily be maintained and extended, as necessary. I believe all of these properties are a function of Go’s steady and philosophic devotion to simplicity.

 

If you’d like more information check out the following:

Books

A selection of books about Go.

 

Tutorials

 

Starting and changing mindset with Elixir

What is elixir?

Created in 2012 Elixir is functional and dynamic language, which make a real option if we want to create a web application. Since, Elixir runs under Erlang virtual machine (BEAM), which make it really stable and mature.
Created by José Valim, who is a Ruby on Rails enthusiastic and had helped the community a lot. So, he took the the best of Rails and merge it with the efficiency of Elixir + Erlang.

Elixir is special for high availability systems .

Functional

The first two meanings we have to forget are objects and classes. It’s all about functions that operate and transform data, pure functions. But, We can not rely on Elixir being a pure functional language.

Dynamic

Elixir variables don’t need to be declared as an specifics data type, It checks at runtime.

Inmutable

Data structure won’t change. For example:

# Uses the match operator to give a true on function
name = “Han Solo”

# It creates a total new value for the new variable
name = “Luke Skywalker”

Concurrency

This is something that Elixir can sell without any help, It’s a big feature here. Since, Elixir runs under BEAM, concurrency is much easier. Code running simultaneously, Thanks Erlang !

Reliability

Elixir is a young language, but It runs on Erlang VM, which is pretty old and a reliable system, one of he most around the globe.

Easy to read and write

By taking some Ruby stuff, Elixir decided to go with the syntax, which is good for us. The code is easy to read and o write.

Modules or classes ?

As I mentioned before classes are not considered in Elixir, every function is stored and handled in a modules, as their namespace.
defmodule HelloModule do
 def say_hi do
 IO.puts "Hello World !"
 end
end

Structs

This is a map where we set up a set of keys and their default values. It’s defined in the module.
 
defmodule User do
  defstruct name: "John", roles: []
end
 
iex> %User{name: "Han", roles: [:pilot, :shooter]}
User{name: "Steve", roles: [:pilot, :shooter]}

Strings

A string a basically a sequence of bytes, UTF-8 encoded binary. Elixir provides to us a set of functions to interact with our strings.

Lenght.

length/1
It returns the number of bytes in our string.
iex> String.length "Walter White"
12

Replace

replace/3
It returns a new string, It receives three parameters, the string to be changed, the pattern to be replaced and the replacement string.
iex> String.replace("Seed","e","i")"Siid"

Duplicate

duplicate/2
It returns a specific string duplicated the number of times seted
iex> String.duplicat("Hello",3)"Hello Hello Hello "

Split

split/2
Ir returns a list based on the patter of split.
iex> String.split("Hello, I'm Bond, James Bond", ",")["Hello", " I'm Bond", " James Bond"]

Collections

List

A simple collection of values, where there can be any type of data.
 
iex> ["String", 12.3 , :atom]["String", 12.3, :atom]

List Concatenation

++/2
 
iex> ["Luke", "Leia"] ++ ["Han"]
["Luke", "Leia", "Han"]

List Subtraction

–/2
 
iex> ["String", 12.3 , :atom] -- [:atom]
["String", 12.3]

Head / Tail

Heads is the first element of our list and the tail is te remaining elements on the list.
 
iex> hd ["Head", 222, :tail]
"Head"
 
iex> tl ["Head", 222, :tail]
[222, :tail]

Keyword Lists

It’s an associative list composed by two tuples, where the key have to be an atom data type, they are ordered and keys can be given more than once.
 
iex> [foo: "bar", hello: "world"]
[foo: "bar", hello: "world"]
 
iex> list = [{:a, 1}, {:b, 2}]
[a: 1, b: 2]
 
iex> list ++ [{:c, 3}]
[a: 1, b: 2, c: 3]

Maps

Maps are more flexible compare to keyword lists, keys can be any value, included variables and maps keys doesn’t follow any kind of ordering.
 
iex> key = :one

iex> list = %{key => 1, :two => 2, "three" => 3, 4 => 4}
%{:one => 1, :two => 2, "three" => 3, 4 => 4}

# Get an specific value from a given key.
iex> Map.get(list, key)
1

# Add a tuple to the current list.
iex> Map.put(list, :five, 5)
%{:one => 1, :two => 2, "three" => 3, 4 => 4, :five => 5}

# Return the map on list format. 
iex> Map.to_list(list)
[{4, 4}, {:atom, 1}, {:five, 5}, {:two, 2}, {"three", 3}]

Enum

It is a set of algorithms to be used over collections. In this section we will just show some of them. You can check all of them over here.

All

all?/2
We supply a fn(x) where will be run for all items on our collection. Will return true if all invocations returns true, with just one that returns false the entire method will return false.
 
iex> Enum.all?([1,2,3], fn(number) -> number < 5 end )
true
 
iex> Enum.all?([1,2,3], fn(number) -> number < 2 end )
false

Any

any?/2
We supply a fn(x) where will be run for all items on our collection. Will return true if at list one invocation returns true, otherwise will return false.
 
iex> Enum.any?([1,2,3], fn(number) -> number < 2 end )
true
 
iex> Enum.any?([1,2,3], fn(number) -> number == 5 end )
false

Chunk By

chunk_by/2
Specially if we need to group our collections based in a given function.
 
iex> Enum.chunk_by(["one", "two", "three", "four", "five"], fn(x) -> String.length(x) end)
[["one", "two"], ["three"], ["four", "five"]]

Each

each/2
Invokes the given function for each item on the collection. It returns an atom :ok
 
iex> Enum.each(["one", "two", "three"], fn(x) -> IO.puts(x) end)
one
two
three
:ok

Map

map/2
Invokes the given function for each item on the collection. It returns a new collection with new values.
 
iex> Enum.map(["one", "two"], fn(x) -> String.upcase(x) end)
["ONE", "TWO"]

Member

member?/2
Checks if an item exists in a collection.
 
iex>  Enum.member?(["one", "two", "three"], "three")
true

Reject

reject/2
Return a new collection of items that returns false from the given fn(x).
 
iex> Enum.reject([1,2,3,4,5,6], fn(x) -> Integer.is_even(x) end)
[1, 3, 5]

Sort

sort/2
It sorts the collection by the given fn(x).
 
iex> Enum.sort([%{:val => 2}, %{:val => 3}, %{:val => 1}], fn(x, y) -> x[:val] > y[:val] end)
[%{val: 3}, %{val: 2}, %{val: 1}]

Unique By

unique_by/2
Remove all duplicated into our collection
 
iex> Enum.uniq([1, 2, 3, 2, 1]) 
[1, 2, 3]

Pipe Operator

The pipe operator |> passes the result of an expression as the first parameter of another expression.

When I was using elixir by the first time this operator called my attention immediately. Since functional programming is about sending data and transforming it thought functions it can get really messy, but the pipe operator is something to help us on that job.

Our problem:

# Return the final value of a product
formated_price(taxes(commision(product_value(), 0.01), 0.13))

Some OO solution:
prod_val = product_value()
prod_commision = commision(prod_val, 0.01)
prod_taxes = taxes(prod_commision, 0.13)
prod_final_value = formated_price(prod_taxes)
prod_final_value

Our Elixir Solution:

product_value()
|> commision(0.01)
|> taxes(0.13)
|> formated_price()
As you can see every return value of a function is passed as the first parameter of the following function. It makes our code really easy to read.

Pattern Matching. Isn’t it just assignment?

This is a deep functionality in Elixir. To understand this a little bit more I have to say that = operator doesn’t necessarily means “assign something to a variable”, instead it really means “match the left hand side to the right hand side”. It turns the whole expression into a equation.
 
iex> x = 1
1
 
iex> 1 = x
1
 
iex>  2 = x
** (MatchError) no match of right hand side value: 1

Useful approaches

Pattern matching becomes really useful when we use it with tuples, functions or recursion.

# We want to assign to match value with te number 2
iex> {:ok, value} = {:ok, 2}
{:ok, 2}
 
iex> value
2
# If the atom value :ok doesn't match It will return a fail

iex> {:ok, value} = {:none, 2}
** (MatchError) no match of right hand side value: {:none, 2}
It seems really cool, but check this, something more functional

defmodule Greet do
  def say_hi(tuple) do
    case tuple do
      {:morning, name} ->
        "Morning #{name} !"
      {:evening, name} ->
        "Good evening #{name} !"
      _ ->
        "Default Hi !!"
    end
  end
end
 
iex> Greet.say_hi({:morning, "Luke"})
"Morning Luke !"
 
iex> Greet.say_hi({:morning, "Han"})
"Morning Han !"
 
iex> Greet.say_hi({:defaut, "Nobody"})
"Default Hi !!"
Finally, the more useful approach to me is by using Pattern Matching on functions definitions:

defmodule Greet do
  def say_hi(:morning, name) do
    "Morning #{name} !"
  end
  def say_hi(:evening, name) do
    "Good Evening #{name} !"
  end
  def say_hi(name) do
    "Default Hi #{name} !"
  end
end

iex> Greet.say_hi(:morning, "Luke")
"Morning Luke !"
 
iex> Greet.say_hi(:morning, "Han")
"Morning Han !"
 
iex> Greet.say_hi("Leila")
"Default Hi Leila !"

Conclusion

To me, having a Ruby on Rails background, Elixir seems pretty nice and I’m looking forward go deeper and deeper into this language. This entrance is part of an introduction We did in 4geeks, you can check the full video:

Introducing the Geek Hour, 2nd season.

Hey guys! It’s been a while since we start the Geek Hour, today, I’m so happy to announce that, some years later, we releasing our Geek Hour again. We have learned so much during this time, so, we think, it’s the best moment to share all knowledge gain with the community.

The Geek Hour is an online show about technologybusiness and marketing, for free. Our idea is to share and create discussion.

If you want to be part of this release, we invite you to subscribe to the YouTube channel. All sessions will be recorded and published in there.

Since our goal is to create discussions we are happy to receive questions and feedback after each session. It would be great if you attend live to answer your questions.

We are putting together more and more sessions, which will be presented each month.

The first show will be on next Aug 31, 2017, and we will talk about Elixir.

Please, check out the schedule page, and share with your colleagues the next show. See you around!

 

How Important Is Take Care of the Company Culture

At the beginnings, 4Geeks started working 100% from home. Maybe was a mistake. Maybe was part of the process. And that was very difficult to grow. Lesson learned. Are your company right here?

The point is that some months ago to moved to a new office. A bit bigger. Big tables and great snacks, bla, bla. And, you know, the 4Geeks face changed a 100%. That’s exactly what your company need to do to strong their company culture.

But, why is important the company culture?

Because of the long-term vision. Public confidence. Easy to hire top talent.

So, now we are also focus on the team member’s happiness. If they are OK, the projects are OK. Clients happy. Company is OK. This is a win-win situation.

Culture is not about high salaries.

Bonuses are important in the software industry, because everything is changing very fast. So, software companies need to be sure they are a good option to get top talent.

Some “bonuses” that the team are getting are today are:

  1. Beer Friday.
  2. Snacks at the office every single day.
  3. Close communication
  4. Work from home, some days a month.
  5. Attend to tech meetups

By the way, we are planning to host monthly technical meetups here at the office. Invite some geeks from another companies and build a strong geek community across the city. I will publish a new blog post about this. Stay tunned.

If you are running a company, no matter the industry, please try to think what your employees maybe thinks and feels. Your responsability is grow every day.

Take a look at this video about our last Beer Friday. Hope you can enjoy as we did 🙂

Email Validation: A Critical Success Factor in Email Marketing

Businesses and consumers alike rely on emails for information and as a primary communication channel. As a result, email marketing is a high priority for businesses of all types and sizes.

Despite the creation of comprehensive email strategies, very few companies include email validation as a weapon in their arsenal. Dead-end email accounts slowly clog up your contact lists, wasting time and dollars as you send messages that are doomed to bounce back. Without this essential tool, even a masterfully crafted email marketing program can fall flat.

Focus on the audience that wants your emails.

Numerous statistics substantiate the reason why marketers are investing so much in email marketing. For example, The Radicati Group states that the total number of global email accounts is expected to exceed 4.9 billion by the end of 2017. Among those email users, 57 percent spend between 10 and 60 minutes reviewing marketing emails each week, as reported by ChoozOn.

With all this in mind, it’s no wonder that 81 percent of B2B marketers use email newsletters for content marketing, according to Content Marketing Institute. But what happens when people leave companies or make changes to their personal email addresses?

Poor list quality can quickly accumulate as these email accounts are abandoned by their owners. Similarly, many companies rely on gathering email addresses at the point of sale or from a mobile device. When entering verifying information on a mobile, typos can be made by the email owner that are only discovered later, when marketing emails go undelivered.

These issues leave you struggling to reach your primary targets. An updated email list is critical to making the most of the return on investment that email marketing offers. According to Andrew Blazewicz, co-founder of the email validation service Email Checker, “Webmasters and internet marketers send thousands of emails to their clients and potential customers every day. Emails bouncing back means a reduced Sender Score, which is a rating between zero and 100 that identifies your sender reputation and shows how other mailbox providers view your IP address.”

Blazewicz explains the importance of these Sender Scores to an email marketing campaign’s success. “It is similar to a credit score when testing creditworthiness. Instead, it tests deliverability worthiness. A high Sender Score means the majority of email campaign messages will reach the inboxes. In contrast, a low Sender Score means messages will end up in recipients’ junk folders or be blocked by the mailbox provider.”

Realizing the benefits of email validation.

Email verification, or email validation, is a potential solution to the epidemic of inaccurate or abandoned email addresses. Email verification can step in to keep your connections current with loyal subscribers or interested prospects for better email marketing results.

Using an email validation process includes real-time verification of subscribers on your email list, both as they enter the email and in batch form with your existing list. It’s ideal for ensuring accuracy for both new and long-established email lists.

When you send an email campaign to thousands of email addresses, imagine how much a more accurate list will benefit your marketing program.

1. Saving money and improving ROI.

The biggest benefit is the amount of money you can save through reduced marketing costs. Every message that is sent represents dollars spent, so each marketing message that travels to nonexistent or inaccurate email addresses equates to dollars down the drain.

With a more accurate, validated list, you’ll likely report an overall higher return on investment for your efforts — after all, your campaign statistics will no longer come back lower than expected. When management starts to see significant results from your email efforts, those results can translate to more dollars directed toward future email marketing campaigns.

2. Actionable data insights and segmentation.

Along with poor campaign statistics, an inaccurate email list won’t provide actionable data insights that can offer direction for future engagement strategies or content themes. That information is vital for your return on investment, and a chorus of bounced emails provides nothing but noise.

A validated email list will tell you who’s an active user and who has used your company’s services or products in the past, among many other insights. This provides a way to further segment your email marketing strategy. You can send separate messaging to each group, incentivizing group members to return or offering them updates related to their recent purchases.

3. Enhanced reputation.

If your bounce rate increases and email providers start banning you from their services, your reputation as a business will be on the line. No one wants his brand to have “spammer” associated with it. Therefore, email validation can go a long way toward maintaining your status as a reputable brand with your Email Service Provider (ESP), Internet Service Provider (ISP) and target audience.

While we all want to handle emails properly and change our information when we need to, the reality is that marketing subscriptions often fall through the cracks. Your audience members won’t always remember or take the time to report to you when their addresses change.

That’s why you need an email validation tactic in your email marketing strategy to stay relevant and reap the many benefits of an email marketing campaign — otherwise, your message is just falling on deaf ears.

Source: Entrepreneur.com

A new 4Geeks website is up

Hey guys. I’m so happy to show you the new 4Geeks website. We improved some important design points, and added new services. That’s the good part.

This look change comes with new 4Geeks era, focused 100% in customers final results. We want to impact millions. I’m pretty sure that you will hear us constantly. We also want to hear you.
Our team is growing. Same our mindset and responsibility. So, some new services are VR/AR, Voice Service (business integrations with Google Home or Amazon Alexa), Paid Media and Inbound Marketing.

We love share knowledge and valued content with the community. To win, our philosophy is to give.

We put our heart on every project that we worked on. We never lose. We learn. Our mindset is always winner, and we want to win again together with you by making you bigger and stronger.

Tech lovers. Website is running in the Google Cloud Platform. By the way, now all the 4Geeks website is encrypted, so to browse on it now is safer. 
I have tons of new ideas. My role is go for it. Step by step. Let’s go out from the comfort zone and let’s make real HUGE ideas. 
If you have any free time, please visit the website and let me know your feedback.

(Q&A) 4Geeks Payments, sesion #1

Hoy fue la primer sesión de preguntas y respuestas aquí en la oficina, acerca de 4Geeks Payments, y aquí les tenemos la grabación del video, por si no pudiste verlo en vivo, o por si quieres verlo nuevamente.



De verdad que estamos muy contentos de poder ayudar a muchos proyectos interesantes en Costa Rica, a ser global lo más rápido posible.

Posiblemente esta no sea la primer sesión, así que síguenos en redes sociales para que sepas lo último.

Si aún no te has dado de alta en 4Geeks Payments y empezar a usar el sistema de pruebas, aplica aquí.

Goodbye to jQuery as dependency on Rails

One of the most popular Javascript libraries was used as a dependency on Rails and has a lot to do with the opinions of its creator who believes that most of the front-end needs could be met using a library like jQuery.

Why did Rails use it?

This library was used for some “rails-ujs” functionality which is a dependency of Rails to perform some basic actions without the need to refresh the browser.

In Rails 5.1, “rails-ujs” was rewritten using pure Javascript, so the dependency on jQuery no longer makes sense.

Unlike projects with previous versions the application.js file no longer needs:

//= require jquery
//= require jquery_ujs

And replaces it with

//= require rails-ujs

Of course, if we consider that jQuery is sufficient for our needs of Javascript the only thing we have to do is add it to the Gemfile and proceed as if nothing had happened or use the new rails package manager:

Install yarn on Mac:

brew install yarn

Add jQuery to Rails project, run the command from Rails home directory:

yarn add jquery

Add:

//= require jquery/dist/jquery

in application.js. It will look like:

//= require rails-ujs 
//= require turbolinks
//= require jquery/dist/jquery
//= require_tree .
Let’s look at some of the most common events:

For this case create a div with 4 elements a

<h1>List</h1> 
<div id="items">
<a href="" id="item1">Item 1</a>
<a href="" id="item2">Item 2</a>
<a href="" id="item3">Item 3</a>
<a href="" id="item4">Item 4</a>
</div>

Selecting elements

// jQuery version
$("#items")

// Javascript version
document.querySelector("#items") // returns the first matching element
document.querySelectorAll("#items a") // returns an array of elements

document.getElementById("items") // returns a single element

document.getElementsByTagName("a") // returns an array of elements

document.querySelector("#items").querySelectorAll("a") // returns an array of sub-elements from the first query

Adding Event Listeners

// jQuery version
$("a").on("click", function(event) {
event.preventDefault()
console.log("clicked")
})

// Javascript version
document.querySelectorAll.forEach(function(item) {
item.addEventListener("click", function(event) {
event.preventDefault()
console.log("clicked")
})
})

Hiding Elements

// jQuery version
$("#items").hide()
$("#items").show()

// Javascript version
document.querySelector("#items").style.display = 'none'
document.querySelector("#items").style.display = ''

Appending an element

// jQuery version
$("#items").append("<a href="" id="item5">Item 5</a>")

// Javascript version
node = document.createRange().createContextualFragment("<a href="" id="item5">Item 5</a>")
document.querySelector("#items").appendChild(node)

Retrieving Attributes and Data Attributes

// jQuery version
$("element").attr("attribute")
$("element").data("id")

// Javascript version
document.querySelector("element").getAttribute("attribute")
JSON.parse(document.querySelector("element").getAttribute("data-id"))
// or
JSON.parse(document.querySelector("element").dataset.id)

AJAX requests

// jQuery version
$.ajax({
url: "https://storage.googleapis.com/forgeeks-web.appspot.com/items.json",
type: "GET",
success: function(data) {
console.log(data)
}
})

// Javascript version (with Rails UJS)
// This automatically includes your CSRF token for non-GET requests as well
Rails.ajax({
url: "https://storage.googleapis.com/forgeeks-web.appspot.com/items.json",
type: "GET",
success: function(data) {
console.log(data)
}
})

Document Event Handlers

// jQuery version
$(document).on("turbolinks:load", function() {
// initialize code
})

// Javascript version
document.addEventListener("turbolinks:load", function() {
// initialize code
})

// Javascript version (with Rails UJS)
// This automatically includes your CSRF token for non-GET requests as well
Rails.ajax({
url: "https://storage.googleapis.com/forgeeks-web.appspot.com/items.json",
type: "GET",
success: function(data) {
console.log(data)
}
})

In conclusion 

The native functions of JavaScript are very powerful, since they run at a level lower than the one of JavaScript and that gives them greater speed when analyzing the nodes of a web and select them in the correct way.

So it’s easy to say that to a large extent Rails looks to be a faster framework.

Introducing 4Geeks Payments

We are so happy to introduce you 4Geeks Payments, and API to process debit and credit cards. Our development team has been working so hard on last months.

This service is in BETA, so we are allowing only a limited number of companies in Costa Rica. If you are interested, please go to this page and apply by filling the form. We are working hard to allow new countries, so please follow us on Facebook.

Right now 4Geeks Payments API only works with Costa Rican companies, but it can charge money from global credit or debit cards

  • Simple (manual) charges or subscriptions model (recurrently).
  • 5.5% + $0.30 per successful transaction. No contracts. No hidden fees.
  • Support 24/7

We feel this service can improve the local entrepreneur vision, by putting on your hands the best tools to going global faster.

Spread the word. Share this post on your wall.