Install Secured Redis on Ubuntu Server 14.04, 16.04 LTS

Secure Redis Server

Redis is a secondary database that is useful for session storage as well as performing background jobs like sending emails, user notifications,..etc.

In this blog post you will learn how to install a stable & secured version of redis by the following steps:

1. Install stable version of Redis

To install Redis, first make sure the tcl package is installed.

sudo aptitude install build-essential tcl8.5

1.1 Check for the latest version of Redis and grab it into your /tmp directory.

cd /tmp wget
http://download.redis.io/releases/redis-stable.tar.gz

Now extract it.

tar xzf redis-stable.tar.gz

Then configure it and install it.

1.2 Installing the server

In the same directory you extracted the redis stable version, write in your terminal

cd redis-stable
make
make test
sudo make install

Then configure an instance and add it to your boot sequence

cd utils
sudo ./install_server.sh

Now test your installation:

sudo service redis_6379 start

Check it through its command line interface:

redis-cli

You now have Redis installed and running. The prompt will look like this:

redis 127.0.0.1:6379>

Type in ping, and the prompt should look like this:

redis 127.0.0.1:6379> ping
PONG

To set Redis to automatically start at boot, run:

sudo update-rc.d redis_6379 defaults

2. Secure the installed Redis

2.1 Binding to localhost

By default, Redis server is only accessible from localhost. However, if you followed the tutorial to set up a Redis master server, you updated the configuration file to allow connections from anywhere. This is not as secure as binding to localhost.

Open the Redis configuration file for editing:

sudo vim /etc/redis/6379.conf

Locate this line and make sure it is uncommented (remove the # if it exists):

# bind 127.0.0.1

2.2 Configuring Redis password

Configuring a Redis password enables one of its two built-in security feature – the auth command, which requires clients to authenticate to access the database. The password is configured directly in Redis’s configuration file, /etc/redis/6379.conf, which you should still have open from the previous step.

Scroll to the SECURITY section and look for a commented directive that reads:

# requirepass foobared

Uncomment it by removing the #, and change foobared to a very strong and very long value. Instead of foobared, make a more complex password using one of sha algorithm types like:

$: echo -n "yournormalstring" | openssl sha1
f44f60738a2ecbc060a7fe974371997137ac4e69

Store this key just in case. Then alter your redis conf file to be:

requirepass f44f60738a2ecbc060a7fe974371997137ac4e69

After setting the password, save the file, and restart Redis:

sudo service redis-server restart

To test that the password works, access the Redis command line and try to write ping, you will get this (error) NOAUTH Authentication required. Do not panic, it is normal as in the next example, until you get the OK acknowledgment:

$: redis-cli
redis 127.0.0.1:6379> ping
(error) NOAUTH Authentication required.
redis 127.0.0.1:6379> auth f44f60738a2ecbc060a7fe974371997137ac4e69
OK

N.B. Do not forget to alter your applications to use the new password accordingly.

Enjoy using a secure redis!

Troubleshoot

In case of any misbehaviour, you can remove the password from the conf file and shutdown redis manually, but you need to make the following:

  1. Comment the require password line in the redis conf file.
  2. Go to the redis console
$: redis-cli
redis 127.0.0.1:6379> auth f44f60738a2ecbc060a7fe974371997137ac4e69
OK
redis 127.0.0.1:6379> shutdown
redis 127.0.0.1:6379> quit
  1. start the redis service, and it is now without a password
sudo service redis_6379 start

 

Action Cable: Rails 5 Most Anticipated Features

CDMbA57p

Being a tech agency, we at robusta deal with a lot of apps with different kinds of business logic. From simple e-commerce apps to complex full-featured social networks. So being able to communicate with users is a vital feature that we have to incorporate in almost every project. We were looking for a simple solution to create chat modules in Rails apps. That was when we decided to give Action Cable a shot in one of our projects.

Action Cable

Action Cable is a simple framework that introduces WebSocket support to Rails apps. It provides a server-side as well as a client-side integration with WebSocket. DHH made a quick tutorial and a preview of Action Cable on his YouTube Channel.

WebSocket

WebSocket is a two-way TCP-based protocol. It works by opening a persistent connection between the server and the client. Both sides can use the connection for data exchange.

Drawbacks

When we decided to try ActionCable and WebSocket, we have looked for the
points where WebSocket falls behind. The main concern (still a small concern though) is that WebSocket is a relatively new protocol. Thus, older browsers lack WebSocket support. Thus, not all web browsers support WebSockets.

WebSocket Vs. Other Solutions

In our research, we had to find out the differences between WebSokcet and other solutions. Here’s a quick comparison between WebSocket and other well-known solutions.

AJAX

WebSocket protocol differs from HTTP known methods (Ajax or Polling) where the client (the browser) does not need to make a request for the data it needs to fetch.
In AJAX, the client sends a request to the server and gets an instant response from the server then the connection is closed as most HTTP requests.

Polling

Server polling resembles AJAX except that the connection is kept alive for some time until it times out and gets closed. The client requests for a new connection with the server again after a defined time.

WebRTC

WebRTC is different from the previous methods in the way the data is transmitted. In WebRTC, the data is exchanged between clients (no servers involved). On the other hand, WebSocket data exchange happens between a client and a server.

A Use Case

Here we will build a simple app to demonstrate the abilities of Action Cable. The app is somewhat similar to a Twitter replica. The app will have three main features: tweeting, messaging, and showing the online presence of registered users.

Setting up the app

We start by installing the latest version of Rails. As of this time, the latest version of Rails is 5.0.0.rc2. An important note before trying to install the latest version of Rails is that it requires Ruby 2.2.2+ to run. $ gem install rails -v 5.0.0.rc2. We then create a new app without a test framework using $ rails new TwitterCable -T --database=mysql. Now we need to create the database $ bundle exec rake db:create. Next step is writing code for our app.

Authenticating users

We setup devise for user authentication. We do that by adding gem 'devise' to the Gemfile and calling $ bundle install. Then we use Devise’s generator to install it. $ rails generate devise:install and $ rails generate devise User to create our user model. Last step is to migrate the database $ bundle exec rake db:migrate

The tweeting module

To keep our app as simple as possible, we’ll add only two attributes to our Tweet model $ rails g model Tweet content:string user_id:integer. Now we open Tweet model and add the association with User model.

  # app/models/tweet.rb
  class Tweet < ApplicationRecord
    belongs_to :user
  end

Now we need to setup the controller and the views:

  # app/controllers/tweets_controller.rb
  def index
    @tweets = Tweet.all.order("created_at DESC")
  end

  def create
    @tweet = current_user.tweets.create! tweet_params

    redirect_to tweets_path
  end

  private

  def tweet_params
    params.require(:tweet).permit(:content)
  end
  # config/routes.rb
  resources :tweets, only: [:index, :create]
  <!-- app/views/index.html.erb -->
  <div class="text-center">
    <h3>Recent Tweets</h3>
  </div>
  <br>
  <% if current_user %>
    <%= form_for Tweet.new do |f|%>
      <%= f.text_area :content, placeholder: 'New Tweet' %>
      <div class="right">
        <%= f.submit 'Add Tweet', class: 'button' %>
      </div>
    <% end %>
  <% end %>
  <br>
  <div class="text-center">
    <div id="tweets">
      <%= render @tweets %>
    </div>
  </div>
  <!--app/views/tweets/_tweet.html.erb -->
  <% cache tweet do %>
    <div class="tweet">
      <div class="callout">
        <h5><%= tweet.user.email %></h5>
        <p>
          <%= tweet.content %>
        </p>
      </div>
    </div>
  <% end %>

It’s time to try the app. In your browser, open localhost:3000/tweets. This is where we can create new tweets and each time we we will get redirected to the tweets index page.

Up until now, everything is normal as we would’ve seen in any CRUD application but things will change a bit when we start using Action Cable to handle rendering new tweets.

We can use Rails generator to create a new channel for our tweets $ rails g channel Tweet. This creates two new files app/channels/tweet_channel.rb and app/assets/javascripts/channels/tweet.js. The first file handles the connection on the server side while the other handles the client-side connections.

We have to mount Action Cable server in our routes file so that Action Cable can listen to WebSocket requests:

# config/routes.rb
mount ActionCable.server => '/cable'

# app/channels/tweet_channel.rb
...
def subscribed
  stream_from "tweet_channel"
end
...

We will use Coffeescript for its Ruby-like syntax and our convenience. Rename app/assets/javascripts/channels/tweet.js to tweet.coffee and add the following code to the file.

# app/assets/javascripts/channels/tweet.coffee
App.twitter = App.cable.subscriptions.create "TweetChannel",
  received: (data) ->
    $('#tweets').prepend data['tweet']
    $('[data-behavior~=tweet_field]').val('')
  # Called when there's incoming data on the websocket for this channel

We then modify the form by adding remote: true to prevent Rails from redirecting after submission.

<!-- app/views/index.html.erb -->
...
  <%= form_for Tweet.new, remote: true do |f|%>
  <% end %>
...

And we inform the controller to broadcast the new tweet html to the TweetChannel in the create action.

# app/controllers/tweets_controller.rb
...
def create
  @tweet = current_user.tweets.create! tweet_params
  ActionCable.server.broadcast "twitter_channel", tweet: render_tweet(@tweet)
  head :ok
end

private
...
def render_tweet tweet
  render(partial: 'tweets/tweet', locals: { tweet: tweet })
end

Now we try again to create a new tweet; the tweet will be immediately appended to the DOM of the tweets index page.

The messaging module

We start now by adding our models and filling them with methods and scopes that we will need in the next steps.

$ rails g model Conversation sender_id:integer:index recipient_id:integer:index
$ rails g model Message body:text conversation_id:integer:index user_id:integer:index

Check the
conversation model and the
message model on Github.

Next we add
conversations controller
and messages controller and we set up our
routes.

We also need to add our view templates and partials for conversations and messages controllers.
Check conversation views
and message views on Github.

The trick in the messages module is that we want to stream and subscribe to message channel based on the conversation id (a conversation is between two users).

We use Rails generator to create a new channel for our messages $ rails g channel Message. This creates two new files app/channels/message_channel.rb and app/assets/javascripts/channels/message.js. The first file handles the connection on the server-side while the other handles the client-side connections.

On the server side, we subscribe to message_channel_#{conversation_id}, so that each connection between any two users will be unique.

# app/channels/message_channel.rb
...
def subscribed
  stream_from "message_channel_#{params[:conversation_id]}"
end
...

On the client side, we will use Coffeescript for its Ruby-like syntax and our convenience. Rename app/assets/javascripts/channels/message.js to message.coffee and add the following code:

# app/assets/javascripts/channels/message.coffee
$ ->
  window.conversation_id = $('#conversation_id').attr('value')

    App.message = App.cable.subscriptions.create { channel: "MessageChannel", conversation_id: conversation_id },

      received: (data) ->
        $('#messages_' + conversation_id).append data['message']
        $('[data-behavior~=new_message_field]').val('')
      # Called when there's incoming data on the websocket for this channel

Here we set a global variable conversation_id whose value is obtained from the
DOM and passed in the params object to the MessageChannel on the server-side.
The received function is called when there is data sent from the server to
the client side. This is where we append the new message to messages_conversation_id
element in the conversations show template.

Here, we find the messages_conversation_id element which we append new messages to.

<!-- app/views/conversations/show.html.erb -->
...
<%= content_tag :div, id: "messages_#{@conversation.id}"  do %>
  <%= render @conversation.messages, conversation: @conversation %>
<% end %>
...

Inside the form, we add a hidden field that holds the current conversation_id
so that the client side of the message channel can send it to the
server-side channel.
Note that we add remote: true to prevent Rails from redirecting after the form submission.

  <!-- app/views/conversations/show.html.erb -->
  ...
  <%= form_for [@conversation, Message.new], remote: true do |f|%>
    <%= f.text_area :body, placeholder: 'New Nessage', 'data-behavior' => 'new_message_field' %>
    <%= f.hidden_field :conversation_id, value: params[:id], id: 'conversation_id' %>
    <%= f.submit 'Send', class: 'button' %>
  <% end %>

The difference in messages controller is that we broadcast our newly created
message to Action Cable server using the conversation_id of that message.

# app/controllers/messages_controller.rb
...
def create
  @message = @conversation.messages.create message_params
  ActionCable.server.broadcast "message_channel_#{@conversation.id}", message: render_message(@message)
end

private

def render_message(message)
  render(partial: 'messages/message', locals: { message: message })
end
...

The online presence module

In this part, we will show the currently logged-in users inside the conversations index page so when we click on any user, we could chat with them directly.
The different part here is that we need Redis to store our logged-in users because, in Action Cable, each page refresh is counted as a new subscription. Thus, each time a user refreshes the web page, a duplicate entry will be created for that user in the online users list.

We will setup Redis by uncommenting redis gem in the Gemfile. And then we will add an initializer file for Redis so we can use it in any part of our application.

# Gemfile
gem 'redis', '~> 3.0'

# config/initializers/redis.rb
$redis = Redis.new(:host => '0.0.0.0', :port => 6379)

We will use Redis sets to store the id of each subscribed user and to remove the ids of unsubscribed users. Then we will rerender the partial responsible for listing the logged-in users.

We start by generating a new channel $ rails g channel OnlineUsers and adding the code responsible for storing or removing user ids from Redis set and rendering the online_users partial.

# app/channels/online_users_channel.rb
class OnlineUsersChannel > ApplicationCable::Channel
  def subscribed
    stream_from "online_users_channel"
    $redis.sadd 'online', current_user.id
    ActionCable.server.broadcast "online_users_channel", users_html: render_online_users
  end

  def unsubscribed
    $redis.srem 'online', current_user.id
    ActionCable.server.broadcast "online_users_channel", users_html: render_online_users
  end

  private

  def render_online_users
    ApplicationController.renderer.render(partial: 'users/online_users')
  end
end

On the client-side part, we use jQuery to set the html() attribute of #onlineUsers element to the html received from the server-side channel that contains the newly rendered online_users partial.

# app/assets/channels/online_users.cofee
App.online_users = App.cable.subscriptions.create "OnlineUsersChannel",
  received: (data) ->
    $('#onlineUsers').html(data['users_html'])

We add _online_users partial under users views. Inside the partial, we loop thought our Redis set online and fetch each user.

Online Users

In conversations index page, we render the partial inside the #onlineUsers element.

  <!-- app/views/conversations/index.html.erb -->
  ...
  <div id="onlineUsers">
    <%= render partial: 'users/online_users'%>
  </div>
  ...

You can check the full source code on Robusta’s Github account.

Conlusion

Action Cable is an easy and simple solution to use. It introduces a fully integrated suite that works well with Ruby on Rails on both client and server sides. To use WebSockets or not is dependent on the use case.

Resources

Real-Time Rails: Implementing WebSockets in Rails 5 with Action Cable
WebSockets, caution required!
http://stackoverflow.com/questions/10028770/in-what-situations-would-ajax-long-short-polling-be-preferred-over-html5-websock

Customizing Sublime Text Editor for Faster Development

Welcome back to our second episode discussing Sublime Text Editor and how you can customize it depending on your preferences.

Sublime Interface

Blue Light Effect

Given our job as programmers, we keep staring at the screen more than 8 hours per day. The constant exposure to the screen’s bright (blue) light hurts the human eyes including some symptoms:

  • Slightly blurry vision
  • Difficulty focusing
  • Your eyes feel dry, irritated or tired
  • Headache
  • May cause permanent eye damage

Due to the previous reasons, I recommend using light text on dark background with huge contrast to increase focus, reading speed and avoid any eye strain symptoms.

Sublime Theme

Currently I am using a dark theme for Sublime called Seti_UI, you could download it easily from the package control panel as previously mentioned in our last episode and type in Seti_UI and then install it as mentioned in the User Preferences section by adding "theme": "Seti.sublime-theme",. You can customize the theme by using the theme options from the Seti_UI package documentation. You can see an example of the theme in Figure 1.

Set UI Theme
Figure 1: Set UI Theme

Syntax Highlighting

As for the code syntax highlighting, I am using a syntax color scheme called Brogrammer (yes with a B not a P 😀 ), where the the syntax provides large contrast between the light (white) text and dark (black) contrast. It was ranked one of the best themes of the year 2014 as mentioned in several posts including The Best Sublime Text 3 Themes of 2014. As shown in Figure 2, also, the bright red color of the keywords enhances the code readability, in addition to the highlighting the String in greenish color.

Brogrammer Syntax Highlighting
Figure 2: Brogrammer Syntax Highlighting

Development Preferences

Now for the coding part itself ;), as most of my development is using Ruby on Rails, I am using the setting of translating all the tabs into spaces and one tab press is equivalent to 2 spaces according to the Ruby and Rails community Style guides. For HAML, I am also using 2 spaces tab for correct indentation of the code fragments to evade any indentation error as HAML is sensitive to spaces. In addition, following the convention of adding an extra empty line and the end of each file on save is facilitated through a global configuration, and removing any trailing spaces in any line across the opened file on save is done automatically.

User Preferences File

Based on my personal experience and after loads of research and customizations, I am going to share my own personal user preferences file. Starting from Sublime text version 3, the users won’t be able to edit the already shipped sublime preferences; however, they can override them in their user preferences to avoid any loss of customization when upgrading sublime.
You can always check your customized user preferences by navigating to your top menu bar on OSX:

  1. Click on Sublime Text next to the Apple menu
  2. Hover on Preferences and choose Settings - User
  3. You will view all your preferences as a JSON object as follows
     {   //Theme customization 
         "theme": "Seti.sublime-theme",
         "Seti_SB_bright": true,
         "Seti_bold_slctdfile_labels": true,
         "Seti_no_scroll_icons": true,
         "Seti_orange_button": true,
         "Seti_orange_label": true,
         "Seti_pad_3": true,
         "Seti_sb_tree_miny": true,
         "Seti_tabs_small": true,
         "itg_sidebar_tree_small": true,
         "itg_small_tabs": true,
    
         //Code highlighting scheme
         "color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme",
    
         //Spell Checker use English-GB dictionary
         "dictionary": "Packages/Language - English/en_GB.dic",
    
         //Crucial Development Preferences 
         "ensure_newline_at_eof_on_save": true,
         "indent_guide_options":
         [
             "draw_normal",
             "draw_active"
         ],
         "tab_size": 2,
         "translate_tabs_to_spaces": true
    
         // General UI customization
         "font_options":
         [
             "no_round"
         ],
         "font_size": 14.7,
         "ignored_packages":
         [
             "Vintage"
         ],
    
         //Modified Sublime Interaction
         "overlay_scroll_bars": "enabled",
         "preview_on_click": true,
         "highlight_line": true,
         "highlight_modified_tabs": true,
     }
    
  4. After editing your preferences, click CMD\CRTL + s to save.
  5. In the optimal cases, you can restart sublime in order to make sure that all the configurations are loaded for the new theme and color scheme to take effect. Otherwise, the configurations are loaded after saving the preferences.

By reaching this point, we conclude the series of customizing Sublime Text Editor for faster development.

Sublime Text Editor Packages in Daily Development Tasks

Sublime Text Packages

In this article, we are going to discuss how the usage of Sublime text editor packages affects your development tasks. Many of us can write code on any text editor either pre-shipped with the operating system or downloaded from the Internet. We will begin by comparing the common text editors available nowadays; then we will explain how to install them and provide a list of the most popular packages and how to use them in your coding experience. Finally, we will discuss how the usage of Sublime text editor packages affects the daily development tasks of programmers.

Sublime Text Editor vs. RubyMine IDE

The most well-known editors or IDEs in ruby on rails development are TextMate, Sublime Text and RubyMine. This table demonstrates a comparison between Sublime Text Editor and RubyMine IDE (as TextMate product was discontinued):

Criteria Sublime Text RubyMine
Customizable YES PARTIALLY
Fuzzy Search YES NO
External Plugins YES (open source) LIMITED (JetBrains sources)
Booting Time Negligible (< 2s) Significant (> 30s)
Key Bindings Customizable Predefined sets
In-app Terminal Not present Built-in
Code Lint YES (External sources) Built-in
Notifications Not present Built-in
Price Free, License License only
Free OR USD $70 once and for all USD $ 199.00 /1st year, $ 159.00 /2nd year, $ 119.00 /3rd year onwards

Verdict:

We chose to use Sublime Text Editor for being highly customizable and because it provides the ability of fuzzy search where you type fragments of a folder and file name and it will suggest the best matching file lists. A significant number of external (3rd party) libraries or extensions to sublime can be installed to tailor it to your development needs.

Sublime Text
Sublime Text

Last but not least, it’s FREE version without any missing features 🙂

What Are Sublime Text Packages and What Are The Most Popular Ones

We will now discuss an overview on Sublime text packages and how to install them on your system.

Sublime text packages are external extensions for the text editor to add multiple features, themes and code style schemes and extend the default editor to cope with the developers needs and ease their life.

How to Install Sublime Package Control

In order to install the package control for Sublime, you need to do the following.

  1. Open the console of Sublime Text itself by clicking on CMD +`
  2. Then copy and paste the following:
     import urllib.request,os,hashlib;
     h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88';pf = 'Package Control.sublime-package';ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read();dh = hashlib.sha256(by).hexdigest();print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)   
    
  3. Restart sublime and viola! You can now install packages to your editor.

Here, we will discuss a number of sublime development packages that are used by most of the team members. The packages are categorized into several categories.

  • Category 1: Some packages that you need to install right away after installing Sublime.
  • Category 2: General Web Packages
  • Category 3: Specific Ruby on Rails packages.

Development packages you need to have

Here is a list of the need-to-have packages that will ease your development progress:

Packages Name Usage
BracketHighlighter provides the ability of highlighting the start and end of a code block
Clipboard Manager provides the ability of Copy & pasting many items and retrieve them from the generated copy and paste stack
Color Highlighter provides a color preview of with the color codes either rgba or hex next to the line number, mostly used in .(s)css files
ColorPicker provides advanced color picker either predefined colors, hex or rgba color codes
Emmet provides the ability of writing faster HTML codes using some snippets and abbreviations e.g. div.text-center > p.bold
Git provides the ability of extensive git control from sublime diff, blame, commit, etc…
GitGutter-edge highlights edited line numbers that were changed from the last commit in symbols
Gitignore provides gitignore templates predefined in a remote github repository to be used in your projects
Indent XML prettifies XML code syntax and indents it to increase readability
Local History enables local version control for files using timestamps
Pretty YAML indents YAML files for better readability
SideBarEnhancements provides more control on a project folder from inside of sublime editor e.g. new file, folder, renaming, etc…
Sublime-Text-2-BIDI a package to write bi-directional text in sublime, used mainly for RTL languages such as Arabic.
SublimeLinter lints many programming languages for errors such as ruby, java, etc…
TrailingSpaces removes trailsing spaces in any file, and it is better to be set to trim after save.

Web Packages

Packages Name Usage
Autoprefixer adds cross-browser CSS prefixes for a certain number of properties to ensure that all the properties behave the same across all modern web browsers
Bootstrap 3 Snippets provides most of Bootstrap styles as snippets to used directly in your code files
CSS Extended Completions provides CSS competitions for most, maybe all CSS properties and predefined values
jQuery provides autocompletion for JQuery functions and a brief description about the usage of each.

Ruby and Ruby on Rails packages

Packages Name Usage
Alignment eases the alignment of ruby syntax according to the style guide lines where all the = are aligned to the same column
BetterCoffeeScript adds CoffeeScript support to sublime including code completions and highlighting
Cucumber adds cucumber support for sublime including Gherkin syntax
Cucumber Step Finder eases the ability to search in cucumber Gherkin steps for navigation in all cucumber steps files
ERB Autocomplete eases the addition of ruby on rails HTMl templating language ERB to autocomplete the <%= %> tags
Haml adds the support of RubyHaml package to Sublime and speeds up the development with HAML using autocomplete and block comments
HTML2Haml converts HTML code to HAMl either whole file, selection or clipboard copied code.
SCSS provides better support for SASS (.scss) files in sublime editor

Impact on Development

The usage of Sublime packages has a significant positive impact on development tasks where it can do the following.

  • Increase the speed of developments
  • Ensure following of conventions and style guides for many programming languages
  • Ease the development flow with keyboard navigation without the use of a mouse/trackpad
  • Enter distraction-free environment of coding away from any notifications, emails or anything

After knowing why we chose sublime text, how to install external packages and what are the most popular packages used.

In the next episode, we will talk about configuring sublime text editor and some of the previously mentioned packages to facilitate your development life.