Categories
Web Development

Two Ways to Make a Twitter Bot

In recent years, bots have become controversial on Twitter. They’re pointed out as responsible for creating fake support to political groups and manipulated trends in this social network. In other cases, bots are used to spread spam. 

If a user wants to be anonymous or doesn’t want to share its profile photo, also it’s pointed out as a bot. However, bots can have other purposes and be useful or funny accounts. 

Some ideas for creating a bot

Yes, spam and harassment are not the only or best use for bots. Here, some ideas that you can pick for making your own bot on Twitter.

Users can ask to @WhatTheFare how much will a taxi fare be, mixing up Uber and Twitter API (unfortunately, this project is not working anymore).

Other bots can be highly creative as @Mothgenerator which tweets an imaginary moth created with JavaScript.

And other bots share public images took by satellites as @discovr_epic.

Setting your Twitter account as a developer

The first step for making a bot is setting an account as a developer. 

  1. Just go to developer.twitter.com 
  2. Select a user or create a new one
  3. Add details (is it personal use or for an organization)
  4. Explain why do you want to create a bot
  5. Accept terms of use

Create a Twitter App

Once in a developer account, create a Twitter App. In this step, you will

  1. Select an App name
  2. Give an Application description
  3. Add a website URL
  4. Explain the purpose of the Application
  5. Also, you can add other non-mandatory details such as privacy policy URL, call-back URL, and terms of service URL.

Now, you can choose a development environment for creating a Twitter bot. Here, three options.

 First way: Twitter Bot with Tweepy

Tweepy is a Python package with a set of classes and methods that represents Twitter’s models and API endpoints. Install Tweepy with Python package manager PIP.

  1. Import the tweepy package
  2. Set the authentication credentials
  3. Create a new tweepy.API object
  4. Use the api object to call the Twitter API
import tweepy

# Authenticate to Twitter
auth = tweepy.OAuthHandler("CONSUMER_KEY", "CONSUMER_SECRET")
auth.set_access_token("ACCESS_TOKEN", "ACCESS_TOKEN_SECRET")

# Create API object
api = tweepy.API(auth)

# Create a tweet
api.update_status("Hello Tweepy")

Check how to use Tweepy here

https://realpython.com/twitter-bot-python-tweepy/import tweepy

# Authenticate to Twitter
auth = tweepy.OAuthHandler("CONSUMER_KEY", "CONSUMER_SECRET")
auth.set_access_token("ACCESS_TOKEN", "ACCESS_TOKEN_SECRET")

# Create API object
api = tweepy.API(auth)

# Create a tweet
api.update_status("Hello Tweepy")

Check how to use Tweepy here

https://realpython.com/twitter-bot-python-tweepy/

Check how to use Tweepy here

Second way: Gem Twitter in Ruby

In Ruby, you can use the gem Twitter for creating a bot.

gem install twitter

require 'twitter'

client = Twitter::REST::Client.new do |config|
 config.consumer_key = "YOUR_CONSUMER_KEY"
 config.consumer_secret = "YOUR_CONSUMER_SECRET"
 config.access_token = "YOUR_ACCESS_TOKEN"
 config.access_token_secret = "YOUR_ACCESS_SECRET"
end

Check the documentation of the Twitter gem here

Deploy a Twitter bot

Once you have written the code of your bot, you can deploy it in a cloud server, like Docker, Heroku, or AWS. There some rules that you should know:

  1. If you tweet so often, the bot can be banned between 5 to 15 minutes for using the API.
  2. Automatic replies to keywords are not allowed anymore

Check here some Open-Source projects of Twitter Bots, so you can get inspiration.

Categories
Web Development

Developers from Latin America: Are you ready for the e-commerce boom?

In Latin America, jobs are in danger due to the crisis caused by COVID-19. However, the situation for web developers is quite different.

In early October 2019, an ILO report estimated that about 34 million jobs had already been lost due to the crisis caused by COVID-19. Likewise, revenues have contracted by 19.3%, a figure that exceeds the world average. Women and young people are the segments most affected by the situation.

However, these figures are far from affecting e-commerce, which this year has accelerated its expansion in the region, and about this fact, we have several signs.

E-commerce expands in Latin America

In Q3 Amazón opened several new warehouses in Mexico, near the country’s largest metropolitan centers (Guadalajara, Monterrey, and the State of Mexico) with an investment of 100 million dollars. MercadoLibre did the same in the second-largest economy in the region, with two distribution and storage centers.

At the beginning of last month, MercadoLibre also opened distribution centers in Chile. The largest Latin American company has partnered with the Chilean company Red Megacentro to build and lease a distribution center that will have 100,000 M2 of extension.

Perhaps the creation of logistics centers is not the best indicator of growth in the sector, but the data provided by the venture capital firm Atlantico are, which pointed out that in just ten weeks between March and May of this year, the e-Commerce grew more than in the last ten years.

From traditional companies to small businesses in Latin America, they have been forced to migrate quickly to electronic commerce to survive the social distancing measures that limit their income from direct sales. The Walmart Foundation together with the Proempleo Foundation launched its #ReemprendeDigital course to provide training to Mexican entrepreneurs and SMEs that they need to make their way into electronic commerce and digitize their businesses.

The Most Wanted Skills in Web Developers in 2020

This urgent business needs to rapidly adopt new technologies also expands the job market for web developers. But what knowledge are developers looking for in this new landscape?

Linkedin Global Senior Mangar for End User Services, Ashi Sheth, highlighted these five fastest-growing skills in the information technology sector: Cybersecurity, Network Engineering, Analytical Skills, SCRUM, and Information Security. Scott Carey from Infoworld, mentions the rise in demand for React, as well as the search for Full-Stack Developers companies, who must master the Front-End (HTML / CSS) and the Back-End (Node, React, Python, Ruby, etc).

For data analysis, tools like Apache Kafka or Spark, languages ​​like Python and R, or skills in Machine Learning and Artificial Intelligence are highly appreciated.

Categories
Web Development

Django or RoR? What is the best framework?

Ruby on Rails (RoR) and Django are two of the most popular frameworks for web-app development today. In terms of efficiency, speed, and community support, they are very similar.

Both developers and managers can be wondering what is the best option. The answer will depend on their priorities, as each framework excels in different areas. However, the similarities outweigh the differences. 

A comparison between Ruby on Rails and Django.

How are Django and RoR alike?

Django and Rails have many similarities. For example, both frameworks use object-oriented languages ​​(Python in the case of Django, and Ruby in the case of RoR) that have broad community support thanks to the fact that they are open source. Thanks to this, there is extensive documentation that is easy to consult.

RoR and Django already have a long history in web development, so both platforms are quite mature. RoR was released in 2003 and released as open-source in 2004. Meanwhile, Django was released in 2005 and has enjoyed wide popularity ever since.

Django and RoR also share the MVC architecture (Model, View, Controller). Although these differ a bit in format, they are minor details, but they retain the same structure to order the controls, models, and views.

In terms of development principles, they both share the Don’t Repeat Yourself (DRY) principle.

How does RoR beat Django?

A common myth: Django is better than RoR because it uses Python, and Python performs better than Ruby.

Sometimes it is common to hear that Django is a better option because Python has a better performance. However, the difference between the two languages ​​is almost unnoticeable.

If your priority is to develop an application that responds to thousands of users at the same time, then neither of these frameworks is your option, since configuring Python and Ruby to handle that many requests require more effort.

In comparisons made between RoR and Django in terms of speed and performance, it turns out that Rails is 0.7% faster than Django. RoR achieves this small difference thanks to its repository and plugins created to improve its performance.

For quality control, RoR offers better support for testing applications, with its built-in testing environment.

Read also: How to create tests in Ruby on Rails? (Part 1)

How does Django beat RoR?

In terms of stability, Python offers a more conventional approach, which is why it wins in this area. However, RoR offers acceptable stability, leaving room for creativity and innovation.

Django offers far less hassle for installation than RoR. For the RoR installation, the developer needs to understand first how to use bundle and gems to install the web-app packages.

Django also has NASA’s seal of guarantee for security; that has adopted the framework. Django offers protection against SQL injections, among other things, although RoR is not that far behind.

When it comes to templates for HTML, Django wins by allowing developers to create them with minimal HTML skills, while views in Rails tend to be more complicated.

For some companies, Django using Python is a key point to prefer it over Rails. Thanks to the simple syntax of Python, many developers know how to use it, and it is easier to find talent who can adopt Django without much trouble.

Categories
Web Development

How to create tests in Ruby on Rails? (Part 1)

Knowing how to create tests is one of the most appreciated skills in web development. However, testing can be a tedious job when you’re starting as a developer. How can you know if you’ve done enough tests? How do you know if your tests are failing because of you’re methods or due to your tests themselves?

For me, it has been a painful path to learn to test. I recognize the importance of the task. Each time that I’m advancing in a project, I want to be sure that each new method that I wrote it’s working as expected. But as I’m still a newbie, then I found that my tests are failing because I’m not writing good tests, not because my methods are failing.

Test-Driven Development: To test or not to test?

There’s not any dilemma: test ever. However, the question is when to test. Test-Driven Development is good practice for developers and every developer should learn to do TDD code as soon as possible. But it can be a nasty piece of work both newbies as experimented developers.

TDD is highly recommended as it’s highly criticized. Many developers compared it with communism: good in theory, but it doesn’t work. Or at least it doesn’t work for themselves.

I’ve experimented with that feeling in a project that I was developing for learning purposes. It was a web-app based on Ruby on Rails (RoR). I was new in Ruby, as on RoR, as on web-development. In resume, a complete newbie. And I read about how wonderful was TDD. So, I tried.

And all my tests failed.

The main problem was that I was learning to write tests. If I wanted to know if my tests were working, I needed to write some code and check if the code pass. And then, I should figure out if the tests were failing due to problems in my methods or problems in my tests.

My advice: if you’re learning how to do tests, don’t try TDD until you are sure how to test.

Saying this, here are some useful material to learn testing a web-app created with RoR.

Choice your testing framework

If you start a new Ruby on Rails application with the scaffold, you will have files ready to use to test your app. RoR cames with a Test::Unit support. However, few people use that framework.

Most of the people prefer RSpec. Install it in your web-app easily adding

gem 'rspec-rails'

in your Gemfile. Then, run

$ bundle install 

This will add RSpec to your web-app. The next step creates the files. This can be done with

$ rails generate rspec:install

If you see this message in the terminal, you’re doing everything right:

Running via Spring preloader in process 9219
      create .rspec
      create spec
      create spec/spec_helper.rb
      create spec/rails_helper.rb

Create your test models with

$ rails g rspec:model yourmodelname

This will give you the following output

Running via Spring preloader in process 10099
create spec/models/user_spec.rb

In the new file, you have a template for creating your tests.

Write your tests! You can start writing your validation and scope tests. Let’s use a validation test as an example.

RSpec.describe User, type: model do
context 'validations tests' do
it 'ensures first name presence' do
user = User.new(last_name: 'Last', email: 'sample@gmail.com').save
expect(user).to eq(false)
end
end
end

We define the context, then we describe what we’re testing (presence of the first name). As the first name is absent, the variable “user” should be false.

More examples in the next article!

Categories
Web Development

Learn about algorithms with these videos

One point that distinguishes a novice programmer from a professional one is their knowledge of algorithms. This topic is usually forgotten by self-taught programmers, although it is vital to find the best solutions for the most common problems when programming.

This selection of videos offer a broad introduction to the topic of algorithms and will serve both to review the most basic topics and to have them as a reference during learning.

What is an algorithm?

“Algorithm” is a word of Arabic origin widely used in both mathematics and computer science. Perhaps the press has endowed the word with a mystical halo, where it speaks of the dangers of delegating tasks to algorithms, or how algorithms decide the information we see on a daily basis.

However, the definition of “algorithm” is quite mundane. This word refers to the steps one must take to solve a problem. Under this concept, a cooking recipe, or even a magical ritual can be considered as algorithms.

In this video, David J. Milan offers a brief explanation of what an algorithm is and how this concept is used in computer science.

Learn the Big-O notation

There are different ways to solve the problem. For example, if we have dirty dishes (input), to remove dirt from all the dishes (desired output), we can either soap them all first and then rinse them, or we can soap them and rinse them one by one. But what is the most efficient solution?

Big-O notation is a way to calculate which algorithm is more efficient. In this video by Michael Sambol.

Categories
IT Development Web Development

Semantic UI or Bootstrap? Discover the pros and cons of each framework

Among the multiple frameworks currently available to web developers, Boostrap remains the guild’s favorite. However, now, various frameworks compete for the love of front-end developers, and some, like Semantic-UI, have made their first steps and have more and more followers.

Let’s start by learning a little about the history and characteristics of Bootstrap and Semantic UI, and then review the pros and cons of each.

What is Bootstrap?

Bootstrap is the framework behind several of the popular websites such as Netflix, Espn.com, and CNN.com. This tool allows web developers to create projects that, without it, could take several days or weeks.

Developed by Mark Otto and Jacob Thornton at Twitter offices, Bootstrap sought to save time for web designers on the social network while ensuring that the website maintained a similar style across all sites.

The Bootstrap Community

Currently, this framework has one of the largest and most active communities. At the time of this writing, there are close to a hundred thousand questions on StackOverflow tagged as twitter-bootstrap, of which over 70% are resolved. About the latest version of Bootstrap (Bootstrap 4), there are 20 thousand questions, 85% of them fixed.

In addition to the essential help of the StackOverflow community, Bootstrap maintains communication with the developers through its official blog, Twitter account, and Slack and IRC chats on Freenode.

In short, Bootstrap is the most popular framework. But also Windows and the QWERTY keyboard are the most popular in their respective areas and, for that reason, they are not the best. Let’s see below some of its strengths.

Pros of Bootstrap as a framework

To retain the title of the most popular framework, you must do at least one or two things well. If not, the developer community will either quickly find other solutions or develop them themselves.

These are some of the advantages that the developers point out about Bootstrap:

  1. Fewer cross-platform errors. An advantage of having a large community is that it is easier to detect a mistake and correct it. The web design solutions offered by Bootstrap work in most browsers.
  2. A consistent framework that considers most compatibility issues. The design looks great in your latest version of Chrome, but not in your client’s Internet Explorer 7. With Bootstrap, it is possible to avoid most of these problems.
  3. Light and customizable. Whether you use it externally or within your project, Bootstrap optimizes resources and allows you to make your design changes.
  4. Responsive styles and structures. This feature is one of the favorites by developers, who must take it more seriously than they do web pages for multiple platforms. With Bootstrap, it is possible to make responsive sites from scratch.
  5. JavaScript plugins that use jQuery. Making dynamic sites is easier even for front-end developers with little JavaScript experience.
  6. Well documented support and an active community. We mentioned it before, but it’s worth mentioning again. If there is a problem with Bootstrap, someone probably already has a solution.
  7. Hundreds of free and professional templates, WordPress themes, and plugins. Another consequence of having an active community is the large number of free resources that exist made with the framework.
  8. A grid system easy to implement. This Bootstrap feature has now been improved in version 4 thanks to the incorporation of flexbox.

Cons of Bootstrap

But if Bootstrap were perfect, there would be no room for other frameworks like Foundation, Bulma, or Semantic UI, which will be discussed later.

These are some of the Bootstrap features that can cause a headache:

  1. Departing from Bootstrap’s predefined layout can be a pain. To make changes to the base design of the framework, you will probably have to overwrite styles or rewrite some files, which can take as long as having done the project from scratch.
  2. Departing from Bootstrap’s predefined layout can be a pain. To make changes to the base design of the framework, you will probably have to overwrite styles or rewrite some files, which can take as long as having done the project from scratch.
  3. You will need to take extra steps to customize a site. If not, you run the risk of all sites looking the same.
  4. Styles can be very bulky, causing a lot of unnecessary output for HTML.
  5. Since JavaScript is tied to JQuery, there may be many plugins that will not be used.
  6. Unpleasant HTML. The large number of classes that are sometimes necessary can make the HTML used not very pleasant to review later. Also, the name of the classes can be less intuitive than Semantic UI.

Where can I learn to use Bootstrap?

In English, you will find a lot of info and tutorials for using Bootstrap. One of my favorite sites is w3schools, which has tutorials for both Bootstrap 3 and Bootstrap 4. It is best to learn how to use version four as Bootstrap 3 will soon be discontinued.

What is Semantic UI?

Semantic UI is a framework for CSS, like Bootstrap. Full-stack developer Jack Lukic created this framework based on natural language principles, becoming one of the leading JavaScript projects on GitHub.

Semantic UI has a small but very loyal and enthusiastic community. In a short time, it managed to overgrow. In 2015, the community had already created more than 3,000 themes for the framework, in addition to more than 50 components for the user interface, and carried out 3,800 commits on GitHub.

Semantic UI Pros

  1. Very easy to use. This reason is one of the main ones for developers. Semantic UI is very intuitive. Do you want three columns? Type “three columns.” You want a dropdown. Type “dropdown”.
  2. Less time to design a page. Naming Semantic UI classes with meaningful names not only make the learning curve shorter but also makes developing projects more intuitive and faster.
  1. Wide variety of themes available. Layout variety is a weak point of Bootstrap and a strong point for Semantic UI. You can probably find a theme for the projects you are developing.

Cons of Semantic UI

  1. Less browser compatibility. Semantic UI does not support Internet Explorer 7, which Bootstrap does. Being an old version, this is probably not a significant problem.
  2. Less responsive design. Unlike the previous point, this can be a bigger problem, considering that web designers are increasingly forced to think about a wide variety of devices. We will have to wait for development to grow to find better solutions to these issues.
  3. Smaller community. On GitHub, Bootstrap has more than 50,000 followers, while Semantic UI does not reach 1,000. Meanwhile, on StackOverflow, there are only 2,500 questions about Semantic UI, with about 25% of the questions unsolved.
  4. Few recent updates. Perhaps this is the most worrying point about Semantic UI, and that caused concern among its followers just over a year ago. The development of Semantic UI seemed to be abandoned for a long time, more than a year passed without any commit between 2018 and 2019. This situation caused the same community to create some forks for Semantic UI, as in the case of Fomantic-UI. However, developers commented last year that the new version was taking longer, but was almost ready.

Part of the delay Semantic UI has shown was due to differences between Jack Lukic and Levi Thomason, one of the main collaborators in the project, about the necessary changes. Thomason considers CSS in JS to be the future of web development and insisted on leading the project in that direction.

Currently, Semantic UI is still in development and now with other forks as an alternative for those who do not fully agree with the changes of the main collaborators. On its website, the framework has detailed documentation, and there are already some materials to learn how to use it in English, like this video:

Which is better: Bootstrap or Semantic UI?

This cliche question merits a cliche answer: it depends on the project. If a unique design is not the main thing, you have time to spare, and you prefer to have a lot of resources available online to solve problems, Bootstrap may be the most reliable alternative. On the other hand, Semantic UI can be an alternative worth trying for a project that needs to be completed in a short time, and that requires unique design, but keep in mind that the fact that the community is still small can cause trouble if you get stuck somewhere.

Categories
IT Development Web Development

CSS Layouts: Know why Flexbox and Grid are getting popular

For some people with many years on web development, float positioning was a default option for creating a CSS Layout. But nowadays, web developers have more options and fewer bugs with Flexbox or CSS Grid.

Creating CSS Layouts with Flexbox and CSS Grids is super easy. However, the learning curve could be the first blocker for many web developers. So, many of them still trust the unreliable floats, the unflexible positioned elements, or the complex Bootstrap.

A brief layout’s story

Websites have changed a lot in the last decades. They started as static pages without any format. Now, you can find an utterly interactive webpage with a lot of users creating content at the same time. 

Websites have advanced because web-development has done. In the early years, Web-developers figured out how to create layouts using tables; a practice punished nowadays by search-engines and semantic web advocates. 

Float and position properties became a better solution for CSS Layouts for a while. Float property started like a valuable way to give webpages a magazine look-a-like feeling. So, developers can arrange an image and let the text flow around it, or they can create boxes with particular box info aside from the main article. 

After a while, web-developers realized that they also could use float property for building more dynamic and responsive layouts. However, developing CSS layouts wasn’t the first aim of the float property. So, sometimes it can be a real headache when trying to design a responsive site, or it couldn’t be the most elegant solution when you need to specify to clear in each element after a float.

In recent years, two new CSS modules have arrived to revolutionize the way that we create CSS Layouts: Flexbox and CSS Grid. These CSS techniques allow web-developers to build more complex and responsive design layouts that work in many browsers.

Know the Grid

Since October 2017, all major browsers -Chrome, Firefox, Safari, and Edge- offer support on CSS Grid Layout without vendors prefixes. Now, web-developers have a powerful two-dimension tool for developing CSS layouts in less time and with fewer problems.

For some people, Grid offers “the most powerful layout system available in CSS.” Like a two-dimensional system, developers can set columns and rows up. 

How easy is using a Grid Layout in CSS? It’s incredibly easy. The first step is creating a Grid container element. It could be a “main” or “aside” element, or a div with a particular class. For example:

.my-first-grid {
  display: grid;

Then, specify how many columns and rows will the Grid have:

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 20px);

The last lines mean four columns of the same proportion and four rows of 20 pixels each one. So, your code will look like this:

.my-first-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 20px);
}

Then, place the child elements of the grid-column and grid-row:

.my-first-child-element {
  grid-column: 1/2;
  grid-row: 2/3;
}

That means “place these class on the first column and the second row.”

You can find more detailed documentation about Grid in A complete guide to Grid or play this game meanwhile mastering the basic concepts.

Think inside the Flexbox

The Flexible Box Layout or Flexbox is a module aiming to distribute space or aligning items inside a container in the easiest way possible. Currently, it’s a W3C Recommendation with its last update in November 2018. 

A crucial difference between Flexbox and Grid it’s that Flexbox is a one-dimension system. Creating columns and rows in flexbox isn’t possible, but that’s a core part of its flexibility. Web-developers can order items and manage the space between them, even without knowing the size of the container.

This feature is convenient nowadays when web-developers need to design websites that users will retrieve in a wide variety of devices, like smartphones, laptops, or tablets.

Flexibility is an asset, and Flexbox gives that.

For displaying Flexbox, you select Flexbox in the display property of a container:

my-first-flexbox-container {
	display: flexbox;
}

Pretty easy, isn’t it? Yes, but beginners will need to learn some basic things about flexbox to take full advantage of this tool.

First, the default axis is horizontal-based and goes from left to right. If there’re four elements inside a container, they will order in this way by default:

Image from Mozilla Developer´s page.

For changing the order of the elements, add flex-direction property. For changing the initial position of the items, add justify-content property. For example, for ordering items like a column in the center, the code would be:

my-first-flexbox-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Master the basic concepts of Flexbox with A complete Guide to Flexbox and get fun playing this game.

Which is better: Flexbox, or Grid?

Both Grid and Flexbox can be used for building responsive design and complex layouts, but they are different techniques, and, like every web project, one is better than the other depending on what do you want to achieve.  

Flexbox is a simple, reliable, and fast solution for small-layouts and the elements of an application. Meanwhile, Grid is a more reliable technique for big-scale layouts.