<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.7.4">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2022-01-22T18:37:44+00:00</updated><id>/feed.xml</id><title type="html">Duty Blog</title><subtitle>We are writing about technology, productivity and how to build an awesome career in computer science.</subtitle><entry><title type="html">Bring your idea to life</title><link href="/2021/02/01/mvp.html" rel="alternate" type="text/html" title="Bring your idea to life" /><published>2021-02-01T04:00:00+00:00</published><updated>2021-02-01T04:00:00+00:00</updated><id>/2021/02/01/mvp</id><content type="html" xml:base="/2021/02/01/mvp.html">&lt;p&gt;Have you ever thought about starting a new business or maybe you had a product idea for a long time, but you haven’t started to work on it because the entire process looked too overwhelming?&lt;/p&gt;

&lt;p&gt;If you addressed some of these types of questions to yourself or you have faced these problems at least once, we are here to show you a way of solving them.&lt;/p&gt;

&lt;p&gt;First of all, building a new product or working on your idea should be fun and exciting. We have one quote from Milton Berle which can motivate you in this direction: “If opportunity doesn’t knock, build a door”. Every great and revolutionary business/start-up was once an idea inside someone’s head and then that idea came to life in small steps, until it became a reality. We are here to help you building that door. Let us give you a tip - the quickest way to grow your business, in the beginning, is by building an &lt;a href=&quot;https://mvp.dutyventures.com&quot;&gt;MVP (Minimum Viable Product)&lt;/a&gt;.&lt;/p&gt;

&lt;h2 id=&quot;why-start-with-an-mvp&quot;&gt;Why start with an MVP?&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;According to Eric Ries, the author of the book &lt;em&gt;Lean Startup methodology&lt;/em&gt;, “&lt;strong&gt;Minimum Viable Product&lt;/strong&gt; is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort.”&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Building an MVP will help the market validate your idea and it will say if your product is in demand or not.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;who-are-we&quot;&gt;Who are we?&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;We are a digital agency full of open-minded, passionate, and highly skilled people, experienced in building &lt;strong&gt;MVP&lt;/strong&gt;s.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;We want you to succeed&lt;/strong&gt;. We will focus on the vital features needed to test your product’s main assumptions - leaving unnecessary features behind, or saving them for later iterations.  We don’t want to help you build a full-featured product only to discover the market doesn’t want it, but if the MVP gets validated, we can build a strategy to scale your start-up&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;We already have some clients that worked with us in the early stages of their businesses and now we are working together to transform them into &lt;strong&gt;scalable products&lt;/strong&gt;.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;how-do-we-work&quot;&gt;How do we work?&lt;/h2&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;In the beginning, one of our product owners will work closely with you, understanding, analyzing, and translating your concept into some wireframes. That’s the first tangible step of your idea.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;After you are fully satisfied with the wireframes, our development team will start implementing the MVP. The nice part is that you will see the progress very fast because we are working in an Agile style (If you don’t know what that means, no worries, we offer one free consulting call and we can explain every small detail of the entire process, but until then, trust me, Agile is cool)&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Whether you need a website or a mobile application, you can count on us.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;https://archbee-doc-uploads.s3.amazonaws.com/5nlPv679Z3KzhG2Q7EUBm/9ce4Pcho582E65SLD7ku1_Screenshot%202021-01-19%20at%2012.46.10.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;If you haven’t decided if building an MVP is a good idea, we prepared a list of advantages for it:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;
    &lt;p&gt;It will save you money - building a new product can be expensive, but starting with an MVP will reduce your entire cost.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Verify market demand - you will have a clear analysis from the beginning and the users will validate the idea in its early stages.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;A better understanding of the users’ needs - whether or not your idea gets validated, you will know exactly what can be improved in the future&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Quicker Release &amp;amp; development with minimal risks - your idea will see the light of the day really fast, even if in a raw shape&lt;/p&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want some specific details about how we can help you or if you want a piece of advice from a technical person, please contact us directly and we are happy to jump on a call.&lt;/p&gt;

&lt;p&gt;Always on duty,&lt;/p&gt;

&lt;p&gt;Duty Labs team&lt;/p&gt;</content><author><name>Nicoleta Ungur</name></author><category term="blog" /><category term="dutylabs" /><category term="custom" /><category term="software" /><category term="ruby-on-rails" /><summary type="html">Have you ever thought about starting a new business or maybe you had a product idea for a long time, but you haven’t started to work on it because the entire process looked too overwhelming?</summary></entry><entry><title type="html">Duty Labs Awarded as Top Developer in Romania</title><link href="/2020/09/09/clutch-award.html" rel="alternate" type="text/html" title="Duty Labs Awarded as Top Developer in Romania" /><published>2020-09-09T07:03:45+00:00</published><updated>2020-09-09T07:03:45+00:00</updated><id>/2020/09/09/clutch-award</id><content type="html" xml:base="/2020/09/09/clutch-award.html">&lt;p&gt;&lt;img src=&quot;/assets/imgs/clutch-award.png&quot; alt=&quot;Intro Picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;At Duty Labs, our duty is to make sure you show up with the best “suite” of &lt;a href=&quot;https://markets.businessinsider.com/news/stocks/the-top-5-services-that-custom-software-development-companies-provide-according-to-a-new-report-1028601762&quot;&gt;software – tailored for your business needs&lt;/a&gt;. In the world where digitalization will play a very important role in every business, we thrive to help businesses keep up with the latest technologies. We provide premium web, mobile, and data analytics services by leveraging cutting edge technologies. With a vast experience in building online business from scratch, adding new features and creating automation pipelines for business processes, we use the right tool for every application.&lt;/p&gt;

&lt;p&gt;Clutch, a B2B market research firm lists &lt;a href=&quot;https://clutch.co/ro/developers/ecommerce&quot;&gt;verified reviews&lt;/a&gt; from past clients. Connecting service providers and buyers through data and verified research. Central to this process is client reviews. Int their unique process, analysts have spoken directly with many of our clients and learned more about the services we provided. With an overall 5.0 rating, we’ve seen strong results from Clutch’s extensive research. We are thrilled to be ranked among the top developers in 2020.&lt;/p&gt;

&lt;p&gt;Our clients’ participation made this award possible, and we want to thank them for their time and honest feedback. An excerpt from our recent review can be found below:&lt;/p&gt;

&lt;p&gt;“I don’t have anything bad to say about Duty Labs.” –President, Next Level Video&lt;/p&gt;

&lt;p&gt;We revamped a Ruby on Rails application for Next Level Video, who sells game footage from sports tournaments. The app allows participants to buy the footage right after playing.&lt;/p&gt;

&lt;p&gt;We are grateful for everyone who has been a part of our success. We look forward to collecting more reviews and growing our platform on Clutch.&lt;/p&gt;</content><author><name>Cosmin Rusu</name></author><category term="blog" /><category term="dutylabs" /><category term="custom" /><category term="software" /><category term="ruby-on-rails" /><summary type="html"></summary></entry><entry><title type="html">Implementing and deploying a Music Playlist Ruby on Rails app on Heroku</title><link href="/2020/08/27/implementing-and-deploying-a-playlist-ruby-on-rails-app-on-heroku.html" rel="alternate" type="text/html" title="Implementing and deploying a Music Playlist Ruby on Rails app on Heroku" /><published>2020-08-27T16:03:45+00:00</published><updated>2020-08-27T16:03:45+00:00</updated><id>/2020/08/27/implementing-and-deploying-a-playlist-ruby-on-rails-app-on-heroku</id><content type="html" xml:base="/2020/08/27/implementing-and-deploying-a-playlist-ruby-on-rails-app-on-heroku.html">&lt;p&gt;&lt;img src=&quot;/assets/ruby-on-rails-logo.png&quot; alt=&quot;Intro Picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Today I will show a quick and simple way to build a &lt;strong&gt;Ruby on Rails&lt;/strong&gt; project and deploying to &lt;strong&gt;Heroku&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;If you haven’t already installed ruby on your device you can install it using &lt;a href=&quot;https://github.com/rbenv/rbenv&quot;&gt;rbenv&lt;/a&gt;.
 You can use this for listing all the ruby version available and choose one:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; &lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rbenv &lt;span class=&quot;nb&quot;&gt;install&lt;/span&gt; &lt;span class=&quot;nt&quot;&gt;-l&lt;/span&gt;
 &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;For this project, we will use the latest Ruby version&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; &lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rbenv &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;2.7.1
 &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The first step is to ensure you have Ruby and Rails installed on your machine.
 You can check that using these commands:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;For Ruby&lt;/li&gt;
&lt;/ul&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;ruby &lt;span class=&quot;nt&quot;&gt;-v&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;&lt;img src=&quot;/assets/ruby_version.png&quot; alt=&quot;Ruby version picture&quot; /&gt;&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;For Rails&lt;/li&gt;
&lt;/ul&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails &lt;span class=&quot;nt&quot;&gt;-v&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;&lt;img src=&quot;/assets/rails_version.png&quot; alt=&quot;Rails version picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;After you have everything installed, create a new Ruby on Rails project using the following command:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails new &lt;span class=&quot;o&quot;&gt;[&lt;/span&gt;project-name] &lt;span class=&quot;nt&quot;&gt;-d&lt;/span&gt; postgresql&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;For this tutorial I will name the project “&lt;strong&gt;playlist-project&lt;/strong&gt;”, so I will use this command to generate the rails project:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails new playlist-project &lt;span class=&quot;nt&quot;&gt;-d&lt;/span&gt; postgresql&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The last part of the command, “&lt;strong&gt;-d postgresql&lt;/strong&gt;” is for installing PostgreSQL.
We use this database because is scalable, runs as a service and it fits much better with Heroku.
By default Ruby on Rails uses sqlite3 database, a small database ideal just for development.&lt;/p&gt;

&lt;p&gt;After running that command in your terminal, go to the root of your project using:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;playlist-project&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Before you start the server, run this command to create the database:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails db:create&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;And that’s it 🚀, you already have a functional Ruby on Rails project that can be viewed on your local machine by running:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails server&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;&lt;img src=&quot;/assets/start_server.png&quot; alt=&quot;Rails Server&quot; /&gt;
Your server listens to “&lt;strong&gt;localhost:3000&lt;/strong&gt;”, so by accessing that URL on your browser you will see a welcome page generated by rails.&lt;/p&gt;

&lt;p&gt;Next, we need a way to create, show, and delete a list of songs or videos for our playlist.&lt;/p&gt;

&lt;p&gt;Ruby on Rails is a MVC framework, so to do that first we need to add a new controller to our application using the following command:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails generate controller Playlist&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The methods defined here will be used later in the “View” part of the project.&lt;/p&gt;

&lt;p&gt;First, we will create the “new” method:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  def new
  end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The next step is to create a model for our playlist:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails generate model Playlist title:string song_link:string&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This will create a migration for adding a new table in the database with those two attributes and a model.
The model will be used to work with the database, insert, retrieve, or update elements from the database.
&lt;img src=&quot;/assets/migration_img.png&quot; alt=&quot;Migration Picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;After the migration is created we need to tell the database to load this migration&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;rails db:migrate&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The next move is to create a view for that “new” method.
In the “app/views” path we can see a directory created by that command used before, named “playlist”.
Here we need to create an html file with the name of the method we want to use, like “&lt;strong&gt;new.html.erb&lt;/strong&gt;”.&lt;/p&gt;

&lt;p&gt;In this view, we need to create a form for adding new entities for our playlist.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form_with scope: :playlist, url: playlist_index_path, &lt;span class=&quot;nb&quot;&gt;local&lt;/span&gt;: &lt;span class=&quot;nb&quot;&gt;true &lt;/span&gt;&lt;span class=&quot;k&quot;&gt;do&lt;/span&gt; |form| %&amp;gt;
  &amp;lt;p&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.label :title %&amp;gt;&amp;lt;br&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.text_field :title %&amp;gt;
  &amp;lt;/p&amp;gt;
 
  &amp;lt;p&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.label :song_link %&amp;gt;&amp;lt;br&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.text_area :song_link %&amp;gt;
  &amp;lt;/p&amp;gt;
 
  &amp;lt;p&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.submit %&amp;gt;
  &amp;lt;/p&amp;gt;
&amp;lt;% end %&amp;gt;

&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Back'&lt;/span&gt;, playlist_index_path %&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;And update the “new” method.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  def new
    @playlist &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; Playlist.new
  end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This is how your “&lt;strong&gt;new.html.erb&lt;/strong&gt;” page looks like:
&lt;img src=&quot;/assets/new_entity.png&quot; alt=&quot;Add new entity picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;After this we need to configure a route for our view.
To do that we need to go to “&lt;strong&gt;config/routes.rb&lt;/strong&gt;” and use this:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; resources :playlist&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This will ensure CRUD operations for our playlist, like create, read, update, and delete.&lt;/p&gt;

&lt;p&gt;Now we need to add another method in the playlist controller for saving the new entity in the database.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  def create
    @playlist &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; Playlist.new&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;playlist_params&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
 
    @playlist.save
    redirect_to @playlist
  end
 
  private

  def playlist_params
    params.require&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;:playlist&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;.permit&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;:title, :song_link&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
  end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;We will create a new method call “show” to display one record from the playlist.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  def show
    @playlist &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; Playlist.find&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;params[:id]&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
  end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;And creating a view file in the “app/views/playlist” path, named “show.html.erb”:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; 
 &amp;lt;p&amp;gt;
  &amp;lt;strong&amp;gt;Title:&amp;lt;/strong&amp;gt;
  &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; @playlist.title %&amp;gt;
&amp;lt;/p&amp;gt;
 
&amp;lt;p&amp;gt;
  &amp;lt;strong&amp;gt;Song Link:&amp;lt;/strong&amp;gt;
  &amp;lt;a &lt;span class=&quot;nv&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;&amp;lt;%= @playlist.song_link %&amp;gt;&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; @playlist.song_link %&amp;gt;&amp;lt;/a&amp;gt;
&amp;lt;/p&amp;gt;

&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Back'&lt;/span&gt;, playlist_index_path %&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Show page for one of the entities:
&lt;img src=&quot;/assets/show_entity.png&quot; alt=&quot;Showing Entity Picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;The previous method shows only one entity of the playlist, next we need to show all the entities using another method called “index”:
“&lt;strong&gt;app/controllers/playlist_controller.rb&lt;/strong&gt;”&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  def index
    @playlists &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; Playlist.all
  end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The most important part after adding a new method to the controller is to create the associated view.&lt;/p&gt;

&lt;p&gt;“&lt;strong&gt;app/views/playlist/index.html.erb&lt;/strong&gt;”&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;h1&amp;gt;Listing Playlist&amp;lt;/h1&amp;gt;
&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'New playlist entity'&lt;/span&gt;, new_playlist_path %&amp;gt;
&amp;lt;table&amp;gt;
  &amp;lt;&lt;span class=&quot;nb&quot;&gt;tr&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;th&amp;gt;Title&amp;lt;/th&amp;gt;
    &amp;lt;th&amp;gt;Options&amp;lt;/th&amp;gt;
    &amp;lt;th &lt;span class=&quot;nv&quot;&gt;colspan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;3&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/th&amp;gt;
  &amp;lt;/tr&amp;gt;
 
  &amp;lt;% @playlists.each &lt;span class=&quot;k&quot;&gt;do&lt;/span&gt; |entity| %&amp;gt;
    &amp;lt;&lt;span class=&quot;nb&quot;&gt;tr&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; entity.title %&amp;gt;&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Show'&lt;/span&gt;, playlist_path&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;entity&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; %&amp;gt;&amp;lt;/td&amp;gt;
    &amp;lt;/tr&amp;gt;
  &amp;lt;% end %&amp;gt;
&amp;lt;/table&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The index view will be the home page for our app.
To do that we need to configure the “root” in the “&lt;strong&gt;app/config/routes.rb&lt;/strong&gt;”:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  root &lt;span class=&quot;s1&quot;&gt;'playlist#index'&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;&lt;img src=&quot;/assets/routes_config.png&quot; alt=&quot;Routes config file&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Maybe you want to edit a specific entity of the playlist because of a mistype.
To do that, you need to create a new method in the playlist controller to handle this request.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  def edit
    @playlist &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; Playlist.find&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;params[:id]&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
  end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;And then, create a new view template:
“&lt;strong&gt;app/views/playlist/edit.html.erb&lt;/strong&gt;”&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;h1&amp;gt;Edit Article&amp;lt;/h1&amp;gt;
 
&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form_with&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;model: @playlist, &lt;span class=&quot;nb&quot;&gt;local&lt;/span&gt;: &lt;span class=&quot;nb&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;do&lt;/span&gt; |form| %&amp;gt;
  &amp;lt;p&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.label :title %&amp;gt;&amp;lt;br&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.text_field :title %&amp;gt;
  &amp;lt;/p&amp;gt;
 
  &amp;lt;p&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.label :song_link %&amp;gt;&amp;lt;br&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.text_area :song_link %&amp;gt;
  &amp;lt;/p&amp;gt;
 
  &amp;lt;p&amp;gt;
    &amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; form.submit %&amp;gt;
  &amp;lt;/p&amp;gt;
 
&amp;lt;% end %&amp;gt;
 
&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Back'&lt;/span&gt;, playlist_index_path %&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This is how “edit” page will look like
It is almost the same with the “new” page:
&lt;img src=&quot;/assets/edit_page.png&quot; alt=&quot;Edit page picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;That it’s not enough for editing an existing playlist entity.
We also need an “update” method in our controller.
The reason is that the previous “form_with” method point to the update action.
In “&lt;strong&gt;app/controllers/playlist_controller.rb&lt;/strong&gt;”&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;def update
  @playlist &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; Playlist.find&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;params[:id]&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
 
  &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; @playlist.update&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;playlist_params&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
    redirect_to @playlist
  &lt;span class=&quot;k&quot;&gt;else
    &lt;/span&gt;render &lt;span class=&quot;s1&quot;&gt;'edit'&lt;/span&gt;
  end
end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;To have access to this method, we need to include a link on the “index” page for all of the entities of the playlist.
In the “&lt;strong&gt;app/views/playlist/index.html.erb&lt;/strong&gt;” add this:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;table&amp;gt;
  &amp;lt;&lt;span class=&quot;nb&quot;&gt;tr&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;th&amp;gt;Title&amp;lt;/th&amp;gt;
    &amp;lt;th&amp;gt;Song Link&amp;lt;/th&amp;gt;
    &amp;lt;th &lt;span class=&quot;nv&quot;&gt;colspan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;2&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/th&amp;gt;
  &amp;lt;/tr&amp;gt;
 
  &amp;lt;% @playlists.each &lt;span class=&quot;k&quot;&gt;do&lt;/span&gt; |entity| %&amp;gt;
    &amp;lt;&lt;span class=&quot;nb&quot;&gt;tr&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; entity.title %&amp;gt;&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; entity.song_link %&amp;gt;&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Show'&lt;/span&gt;, playlist_path&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;entity&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; %&amp;gt;&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Edit'&lt;/span&gt;, edit_playlist_path&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;entity&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; %&amp;gt;&amp;lt;/td&amp;gt;
    &amp;lt;/tr&amp;gt;
  &amp;lt;% end %&amp;gt;
&amp;lt;/table&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;The last thing that we need for this CRUD application is the delete/destroy method.
In “&lt;strong&gt;app/controllers/playlist_controller.rb&lt;/strong&gt;”&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  def destroy
    @playlist &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; Playlist.find&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;params[:id]&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;
    @playlist.destroy
   
    redirect_to playlist_index_path
  end&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;And after update the “index.html.erb” file:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;h1&amp;gt;Listing Playlist&amp;lt;/h1&amp;gt;
&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'New playlist entity'&lt;/span&gt;, new_playlist_path %&amp;gt;
&amp;lt;table&amp;gt;
  &amp;lt;&lt;span class=&quot;nb&quot;&gt;tr&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;th&amp;gt;Title&amp;lt;/th&amp;gt;
    &amp;lt;th&amp;gt;Options&amp;lt;/th&amp;gt;
    &amp;lt;th &lt;span class=&quot;nv&quot;&gt;colspan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;3&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/th&amp;gt;
  &amp;lt;/tr&amp;gt;
 
  &amp;lt;% @playlists.each &lt;span class=&quot;k&quot;&gt;do&lt;/span&gt; |entity| %&amp;gt;
    &amp;lt;&lt;span class=&quot;nb&quot;&gt;tr&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; entity.title %&amp;gt;&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Show'&lt;/span&gt;, playlist_path&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;entity&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; %&amp;gt;&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Edit'&lt;/span&gt;, edit_playlist_path&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;entity&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; %&amp;gt;&amp;lt;/td&amp;gt;
      &amp;lt;td&amp;gt;&amp;lt;%&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; link_to &lt;span class=&quot;s1&quot;&gt;'Destroy'&lt;/span&gt;, playlist_path&lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;entity&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt;,
              method: :delete,
              data: &lt;span class=&quot;o&quot;&gt;{&lt;/span&gt; confirm: &lt;span class=&quot;s1&quot;&gt;'Are you sure?'&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;}&lt;/span&gt; %&amp;gt;&amp;lt;/td&amp;gt;
    &amp;lt;/tr&amp;gt;
  &amp;lt;% end %&amp;gt;
&amp;lt;/table&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;When you want to use the “Destroy” method, first you need to confirm that action and only after the entity will be deleted:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/destroy_method.png&quot; alt=&quot;Delete action picture&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;deploying-to-heroku&quot;&gt;Deploying to Heroku&lt;/h1&gt;

&lt;p&gt;The last step is to deploy our application on Heroku. 
In order to do that, you need to initialize and add your project to git:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git init
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git add &lt;span class=&quot;nb&quot;&gt;.&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git commit &lt;span class=&quot;nt&quot;&gt;-m&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;init&quot;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;To create a new Heroku application, run this:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;heroku create&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;To upload your newly created project to Heroku, you need to push all your files with:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git push heroku master&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Create a new database by running all the migrations to Heroku:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;heroku run rake db:migrate&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;You can now visit your app to Heroku dashboard.
By pressing the “Open app” button, it will start the application.
Or you can start it by using this command from your terminal:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;heroku open&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;That’s all, now you have a basic Ruby on Rails project deployed to Heroku.
Good job!🚀&lt;/p&gt;</content><author><name>Narcis Rusu</name></author><category term="blog" /><category term="heroku" /><category term="rails" /><category term="app" /><category term="deploy" /><category term="github" /><category term="ruby" /><summary type="html"></summary></entry><entry><title type="html">Using Bulma and Netlify to create and deploy a simple static website for Free</title><link href="/2020/08/27/using-bulma.html" rel="alternate" type="text/html" title="Using Bulma and Netlify to create and deploy a simple static website for Free" /><published>2020-08-27T07:03:45+00:00</published><updated>2020-08-27T07:03:45+00:00</updated><id>/2020/08/27/using-bulma</id><content type="html" xml:base="/2020/08/27/using-bulma.html">&lt;p&gt;&lt;img src=&quot;/assets/blogpost-bulma.png&quot; alt=&quot;Intro Picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;If you need to create a beautiful and Full Responsive &lt;strong&gt;website&lt;/strong&gt; where you want to post some articles or promote your online/offline services, you come to the right place and that’s because we all know how crucial it is to get your business to the next level by being present online.&lt;/p&gt;

&lt;p&gt;In this post we are going to learn how to create a simple static website using &lt;strong&gt;Bulma&lt;/strong&gt; and deploy it to &lt;strong&gt;Netlify&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;What do we want from a static website? To be simple, fast and practical! Now that we’ve settled these basic requirements let’s jump into and start working on it.&lt;/p&gt;

&lt;p&gt;For design, structure and responsiveness of the website we are going to use &lt;strong&gt;Bulma’s classes&lt;/strong&gt; to save a lot of time by not writing the CSS code. 
But, how’s Bulma going to help us do that? You’ll be surprised how easy and fun it can be!&lt;/p&gt;

&lt;p&gt;Let’s start building your website! For this I am going to create a simple website just to show you all the steps to have your website alive.&lt;/p&gt;

&lt;h2 id=&quot;the-project-first-website&quot;&gt;The project: First Website&lt;/h2&gt;

&lt;p&gt;We’re going to create an folder where inside we will have all the files related to the website.
Let’s name it: first-website. You can name it however you want.&lt;/p&gt;

&lt;p&gt;Inside the folder we create an index.html file where we are going to build the website.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/index-file.png&quot; alt=&quot;Index.html picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Now let’s go on &lt;strong&gt;&lt;a href=&quot;https://bulma.io/documentation/overview/start/&quot;&gt;Bulma&lt;/a&gt;&lt;/strong&gt; to get the starter template where is included everything we need to start. It should look like this.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;&lt;span class=&quot;o&quot;&gt;!&lt;/span&gt;DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
  &amp;lt;&lt;span class=&quot;nb&quot;&gt;head&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;meta &lt;span class=&quot;nv&quot;&gt;charset&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;utf-8&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;meta &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;viewport&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;width=device-width, initial-scale=1&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;title&amp;gt;Hello Bulma!&amp;lt;/title&amp;gt;
    &amp;lt;&lt;span class=&quot;nb&quot;&gt;link &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;stylesheet&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
  &amp;lt;section &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;section&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;container&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;h1 &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;title&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        Hello World
      &amp;lt;/h1&amp;gt;
      &amp;lt;p &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;subtitle&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        My first website with &amp;lt;strong&amp;gt;Bulma&amp;lt;/strong&amp;gt;!
      &amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/section&amp;gt;
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Let’s copy this and paste it to our index.html file.&lt;/p&gt;

&lt;p&gt;Open the index.html file with a broswer such Chrome, Safari, Opera, Mozilla and you’ll see your website alive, but for now its just locally. How nice is that, right?&lt;/p&gt;

&lt;p&gt;Now we need to start add sections like Navbar, Content, Contact, Footer etc.&lt;/p&gt;

&lt;p&gt;For that we’re going to use Bulma’s components, classes and elements from &lt;a href=&quot;https://bulma.io/documentation/&quot;&gt;here&lt;/a&gt;. Take your time to analize and read all about &lt;strong&gt;&lt;a href=&quot;https://bulma.io/&quot;&gt;Bulma!&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h3 id=&quot;1-navbar&quot;&gt;1. Navbar&lt;/h3&gt;

&lt;p&gt;The navbar code we’re going to take it from &lt;a href=&quot;https://bulma.io/documentation/components/navbar/&quot;&gt;Navbar&lt;/a&gt;.
It will look similar to this one. Add this code between the start tag &amp;lt;body&amp;gt; and close tag &amp;lt;/body&amp;gt; in &lt;strong&gt;index.html&lt;/strong&gt;&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  &amp;lt;nav &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navigation&quot;&lt;/span&gt; aria-label&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;main navigation&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-brand&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;a &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-item ml-5&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;https://dutylabs.ro&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &amp;lt;img &lt;span class=&quot;nv&quot;&gt;src&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;imgs/logo-dutylabs.png&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;image&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;/a&amp;gt;
  
      &amp;lt;a &lt;span class=&quot;nv&quot;&gt;role&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;button&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-burger burger&quot;&lt;/span&gt; aria-label&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;menu&quot;&lt;/span&gt; aria-expanded&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;false&quot;&lt;/span&gt;
        data-target&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbarBasicExample&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &amp;lt;span aria-hidden&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/span&amp;gt;
        &amp;lt;span aria-hidden&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/span&amp;gt;
        &amp;lt;span aria-hidden&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;true&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/span&amp;gt;
      &amp;lt;/a&amp;gt;
    &amp;lt;/div&amp;gt;
  
    &amp;lt;div &lt;span class=&quot;nb&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbarBasicExample&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-menu&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-end mr-5&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &amp;lt;a &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-item&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          Home
        &amp;lt;/a&amp;gt;
        &amp;lt;a &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-item&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          Works
        &amp;lt;/a&amp;gt;
        &amp;lt;a &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-item&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          About 
        &amp;lt;/a&amp;gt;
        &amp;lt;a &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-item&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
          Contact
        &amp;lt;/a&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/nav&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Now your website should look something like this.
As you notice, I changed the navbar. I deleted the More dropdown button and I added the most used menu sections you may find on websites: &lt;strong&gt;HOME&lt;/strong&gt;, &lt;strong&gt;WORKS&lt;/strong&gt;, &lt;strong&gt;ABOUT&lt;/strong&gt;, &lt;strong&gt;CONTACT&lt;/strong&gt;.
Here you can put whatever you want. It’s up to you!&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/navbar-added.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Let’s say we don’t like that the Menu starts right next to the logo and we want it to be on the left side of the website. How we do that without having to write CSS code? The answer is very simple.
We are going to use Bulma’s classes to set the Menu to the left part.&lt;/p&gt;

&lt;p&gt;Go to the index.html and change this class&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-start&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;
&lt;p&gt;into this&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;navbar-end&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt; &lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Now you should see your Navbar items aligned on the right side.&lt;/p&gt;

&lt;h3 id=&quot;2-content&quot;&gt;2. Content&lt;/h3&gt;

&lt;p&gt;By example, I added the &lt;a href=&quot;https://bulma.io/documentation/layout/hero/&quot;&gt;Hero section&lt;/a&gt; to welcome my visitors and let them know what it is about my website.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/hero-section-white.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;By default the Hero Section template it comes with white background and I want to change it. 
To do that, I went to this line&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; &amp;lt;section &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;hero&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;and I added this CSS class&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt; &amp;lt;section &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;hero has-background-success&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;And it turned out like this.
&lt;img src=&quot;/assets/first-section-1.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;That’s great! So easy to use Bulma classes to build up a website. Isn’t it?&lt;/p&gt;

&lt;p&gt;I want to add an illustration on the right side of the page because I don’t like the empty space from there.
For that I am going to use illustrations from &lt;a href=&quot;https://undraw.co/illustrations&quot;&gt;unDraw&lt;/a&gt;. They are Free to use.&lt;/p&gt;

&lt;p&gt;If you just go to add an &lt;img /&gt; tag, the picture will be under the text and we don’t want that.&lt;/p&gt;

&lt;p&gt;Before adding the image we have to split the Hero section in 2 columns.
For that we’re going to use the power of &lt;strong&gt;&lt;a href=&quot;&quot;&gt;Level&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now, it looks like this.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/hello-word-first-section.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;h3 id=&quot;3-contact&quot;&gt;3. Contact&lt;/h3&gt;

&lt;p&gt;We’ve learned how to add content on the website, let’s create another section where it goes the &lt;strong&gt;contact form&lt;/strong&gt; so people can send you an email asking for more info about your services. It’s very useful to have it on the website.&lt;/p&gt;

&lt;p&gt;I took the code from here &lt;a href=&quot;https://bulma.io/documentation/form/general/&quot;&gt;Bulma Form&lt;/a&gt;
Mine is a bit modified and simplier.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;form&amp;gt;
  &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;field&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;label &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;label has-text-primary-light&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;Name&amp;lt;/label&amp;gt;
    &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;control&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;input &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;input&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;placeholder&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Your Name&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;

  &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;field&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;label &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;label has-text-primary-light&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;Email&amp;lt;/label&amp;gt;
    &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;control has-icons-right&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;input &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;input&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;placeholder&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Email input&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;placeholder&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;example@domain.com&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;span &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;icon&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &amp;lt;i &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;fas fa-envelope&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/i&amp;gt;
      &amp;lt;/span&amp;gt;
      &amp;lt;span &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;icon is-small is-right&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
        &amp;lt;i &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;fas fa-exclamation-triangle&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/i&amp;gt;
      &amp;lt;/span&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
              
  &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;field&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;label &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;label has-text-primary-light&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;Message&amp;lt;/label&amp;gt;
    &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;control&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;input &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;textarea&quot;&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;message&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;placeholder&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Your Message&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/textarea&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
      
  &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;field is-grouped&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;control&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;input &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;button is-link is-info&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Send&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/input&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/form&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Great! Now that we added a contact form, we need to make one more important thing. Connect it to &lt;strong&gt;formspree.io&lt;/strong&gt; so we can get the emails. 
To do that we need to Sign Up on &lt;strong&gt;&lt;a href=&quot;https://formspree.io/&quot;&gt;Formspree.io&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now that you’re logged in, let’s add a New form&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/formspree.png&quot; alt=&quot;GitHub create repo&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Here you fill it with your info and click Create Form&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/new-formspree.png&quot; alt=&quot;GitHub create repo&quot; /&gt;&lt;/p&gt;

&lt;p&gt;You should see your custom address that you need to add it in your code.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/formspreeinfo.png&quot; alt=&quot;GitHub create repo&quot; /&gt;&lt;/p&gt;

&lt;p&gt;To do that, follow this:&lt;/p&gt;

&lt;p&gt;Add to the form line this following&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;form &lt;span class=&quot;nv&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;here goes your link from Formspree&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;method&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;POST&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;After that add this to each input tag: Name, Email and Message&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&amp;lt;input &lt;span class=&quot;nb&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;name&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;/input&amp;gt;
&amp;lt;input &lt;span class=&quot;nb&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;email&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;_replyto&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;input&amp;gt;
&amp;lt;input &lt;span class=&quot;nb&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;text&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;message&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;input&amp;gt;
&amp;lt;input &lt;span class=&quot;nb&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;submit&quot;&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;value&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;Send&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&amp;lt;input&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;Now go back to your website and fill a contact form to check if everything works well. 
You should get an email from Formspree to your email that you signed up with.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/formspree-valid.png&quot; alt=&quot;GitHub create repo&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Congratulations! You’ve sent your first email test from your website! How amazing is that?!&lt;/p&gt;

&lt;h3 id=&quot;4-footer&quot;&gt;4. Footer&lt;/h3&gt;

&lt;p&gt;On the Layout section, from Bulma’s website, we have a Footer template to start. This is a simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;  &amp;lt;footer &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;footer&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
    &amp;lt;div &lt;span class=&quot;nv&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;content has-text-centered&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
      &amp;lt;p&amp;gt;
        &amp;lt;strong&amp;gt;Bulma&amp;lt;/strong&amp;gt; by &amp;lt;a &lt;span class=&quot;nv&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;https://dutylabs.ro&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;Duty Labs&amp;lt;/a&amp;gt;. The &lt;span class=&quot;nb&quot;&gt;source &lt;/span&gt;code is licensed
        &amp;lt;a &lt;span class=&quot;nv&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;DutyLabs&amp;lt;/a&amp;gt;. The website content
        is licensed &amp;lt;a &lt;span class=&quot;nv&quot;&gt;href&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&quot;#&quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;CC BY Alex Rusu&amp;lt;/a&amp;gt;.
      &amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/footer&amp;gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;push-to-github&quot;&gt;Push to GitHub&lt;/h2&gt;

&lt;p&gt;Now it’s time to upload the project and make it available on GitHub so that Netlify knows where your website code lives.&lt;/p&gt;

&lt;h1 id=&quot;sign-up-to-github&quot;&gt;Sign up to GitHub&lt;/h1&gt;
&lt;p&gt;If you don’t have an account, please create yours now. &lt;a href=&quot;https://github.com/signup&quot;&gt;Sign up&lt;/a&gt; on GitHub.&lt;/p&gt;

&lt;h1 id=&quot;create-the-repo&quot;&gt;Create the repo&lt;/h1&gt;
&lt;p&gt;Next step is to &lt;a href=&quot;https://help.github.com/articles/create-a-repo/&quot;&gt;create a new repository&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/new-repo-on-git.png&quot; alt=&quot;GitHub create repo&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;push-your-code&quot;&gt;Push your code&lt;/h1&gt;

&lt;p&gt;Write this in your terminal inside your project directory.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git init
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git remote add origin https://github.com/&amp;lt;your-username&amp;gt;/&amp;lt;repo-name&amp;gt;.git
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git push &lt;span class=&quot;nt&quot;&gt;-u&lt;/span&gt; origin master&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;deploy-to-netlify&quot;&gt;Deploy to Netlify&lt;/h2&gt;

&lt;p&gt;We’re almost done. Now we have to deploy it on Netlify. We’re going to use
&lt;a href=&quot;netlify.com&quot;&gt;Netlify&lt;/a&gt;. Don’t worry, it’s Free!&lt;/p&gt;

&lt;p&gt;First, create your account on Netlify &lt;a href=&quot;https://app.netlify.com/signup&quot;&gt;Sign up&lt;/a&gt; on their platform.&lt;/p&gt;

&lt;h1 id=&quot;step-1&quot;&gt;Step 1&lt;/h1&gt;

&lt;p&gt;Once you’re logged in, go to your &lt;a href=&quot;https://app.netlify.com&quot;&gt;Netlify dashboar&lt;/a&gt; and &lt;strong&gt;create a new site from Git&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/netlify-add.png&quot; alt=&quot;Netlify first step&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;step-2&quot;&gt;Step 2&lt;/h1&gt;

&lt;p&gt;Choose GitHub from the list and choose the name of your repository that you just pushed on GitHub.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/netlify-step2.png&quot; alt=&quot;Netlify second step&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;step-3&quot;&gt;Step 3&lt;/h1&gt;

&lt;p&gt;Now that you connected the GitHub repository with Netlify, click on Deploy Site.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/deploy-site-netlify.png&quot; alt=&quot;Netlify third step&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;step-4&quot;&gt;Step 4&lt;/h1&gt;

&lt;p&gt;In few seconds, you should have a subdomain created by default on Netlify. 
You can go and change it by clicking on &lt;strong&gt;Domain Settings&lt;/strong&gt;. After that click on &lt;strong&gt;Add custom domain&lt;/strong&gt;, where you can introduce your preferential domain name. That’s it!&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/domain-settings.png&quot; alt=&quot;Netlify third step&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Now enjoy your website and share it with your friends!&lt;/p&gt;

&lt;p&gt;Here you find the project that I’ve showed you above by example, &lt;a href=&quot;https://github.com/RusuAlexPaul/first-website&quot;&gt;First-Website&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope it helped you this article and if you find it useful, feel free to share it! We will appreciate a lot.
Happy coding!&lt;/p&gt;</content><author><name>Alex Rusu</name></author><category term="blog" /><category term="bulma" /><category term="netlify" /><category term="deploy" /><category term="github" /><category term="html" /><category term="css" /><category term="static" /><category term="website" /><summary type="html"></summary></entry><entry><title type="html">Why you should work for a startup?</title><link href="/2018/06/18/why-you-should-work-for-a-startup.html" rel="alternate" type="text/html" title="Why you should work for a startup?" /><published>2018-06-18T16:03:45+00:00</published><updated>2018-06-18T16:03:45+00:00</updated><id>/2018/06/18/why-you-should-work-for-a-startup</id><content type="html" xml:base="/2018/06/18/why-you-should-work-for-a-startup.html">&lt;p&gt;It’s common for students or graduates to start working and begin their careers from an early stage. While some prefer only summer internships, some work part time or the other just wait to graduate in order to focus on their studies, the company they chose to work for can have a big impact on their future careers. Some junior positions have better long term values while other may not be so important on the long run.&lt;/p&gt;

&lt;p&gt;As a recent graduate who’s both interned at Google and Amazon, and worked part time at a startup, I’m going to tell you why I think it’s better to settle for a small startup at the beginning of your career.&lt;/p&gt;

&lt;h1 id=&quot;technology-stack&quot;&gt;Technology stack&lt;/h1&gt;

&lt;p&gt;This is crucial. In the end, these are all the tools you are going to use to solve different problems. As any problem can be solved in so many ways, using different tools, some can be very performant, while others are very old and stinky. I think this is the first thing you should consider when joining a company. In the dynamic market of IT where people are constantly changing jobs, you should ask yourself questions like ‘Is this technology going to survive in 5-10 years?’. Will this technology give me an advantage when moving to another company? How big is the community around this specific technology?
Roughly speaking, old and big companies use old technologies. This is obvious since they started with a technology and they have legacy code that would take too much time to rewrite. While starting new projects, every technology company choose their tools wisely, do you really think a company will use a technology that their employees are not familiar with? Think of chicken and egg problem.
StartUps usually tend to stick with the hottest technology stacks. While this can give you an advantage, make sure you do your research and make sure the technology will survive in the long term.&lt;/p&gt;

&lt;h1 id=&quot;impact&quot;&gt;Impact&lt;/h1&gt;

&lt;p&gt;This is simple. Think about the impact as being inversely proportional to the number of team members. Note: not to be confused with the total number of employees.&lt;/p&gt;

&lt;h1 id=&quot;salary&quot;&gt;Salary&lt;/h1&gt;

&lt;p&gt;Under the assumption that you are a recent graduate or student, you don’t react have much experience. Even if you do, the chances are that a small company is going to pay you more than your market price (the average price that a company is willing to pay you given your skills). The reason behind this is quite simple. A small company can be gone tomorrow, so they will try to give you more money in order to make up for the job security they cannot guarantee. Keep in mind that a small company sometimes have more strict deadline imposed by the investors or the executives. And since you are new to this field, make sure you understand that you stay longer at the office. That’s the second reasons a startup can give you more money. Some of them can even give you equity. While in the beginning they don’t mean much, on the long run there is still a chance to skyrocket.&lt;/p&gt;

&lt;h1 id=&quot;stress&quot;&gt;Stress&lt;/h1&gt;

&lt;p&gt;This is simple: the smaller the company, the bigger the stress. Think about it: if you are the only one in the company, you are in charge of all the things that can go wrong. If there are two of you, the reasonability splits, and so on. While the responsibility for each employees is not equal, chances are the less employees a company have, the more areas you need to be in charge of.&lt;/p&gt;

&lt;h1 id=&quot;perks&quot;&gt;Perks&lt;/h1&gt;

&lt;p&gt;This include: vacation days, food, snacks, drinks, health, dental and vision care and / or the alike. From.my experience, early stage startups offer a very limited set of these. But if you join a startup at their growth rate, you may be surprised if what perks can give them. Check out Airbnb’s office for example. It’s pretty cool.&lt;/p&gt;

&lt;h1 id=&quot;experience&quot;&gt;Experience&lt;/h1&gt;

&lt;p&gt;This is the last one I want to focus on. Chances are that if you are working at a startup, it is going to fail. It’s nothing personal, just statistics. If the startup is going to succeed, you will be very happy. If not, you still have valuable experience that every copmany is looking for.&lt;/p&gt;

&lt;h1 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h1&gt;

&lt;p&gt;In conclusion, I’d say it is usually better to work for a startup in the beginning of your career, as you will grow much faster compared to working at a big company.&lt;/p&gt;

&lt;h1 id=&quot;ps&quot;&gt;PS&lt;/h1&gt;

&lt;p&gt;Do you have a cool mobile idea? Perhaps a web site? Do you have an awesome disruptive idea? Drop us a line at contact@dutylabs.ro and we can help your idea come to life.&lt;/p&gt;</content><author><name>Cosmin Rusu</name></author><category term="blog" /><category term="startup" /><category term="work" /><category term="software" /><category term="engineering" /><category term="engineer" /><category term="career" /><category term="computer" /><category term="science" /><summary type="html">It’s common for students or graduates to start working and begin their careers from an early stage. While some prefer only summer internships, some work part time or the other just wait to graduate in order to focus on their studies, the company they chose to work for can have a big impact on their future careers. Some junior positions have better long term values while other may not be so important on the long run.</summary></entry><entry><title type="html">This Is How Google Rejected Me Just To Tell Me “Yes” The Year After</title><link href="/2018/06/14/this-is-how-google-rejected-me-just-to-tell-me-yes-the-year-after.html" rel="alternate" type="text/html" title="This Is How Google Rejected Me Just To Tell Me “Yes” The Year After" /><published>2018-06-14T16:03:45+00:00</published><updated>2018-06-14T16:03:45+00:00</updated><id>/2018/06/14/this-is-how-google-rejected-me-just-to-tell-me-yes-the-year-after</id><content type="html" xml:base="/2018/06/14/this-is-how-google-rejected-me-just-to-tell-me-yes-the-year-after.html">&lt;p&gt;Original post here:
&lt;a href=&quot;https://blog.pramp.com/this-is-how-google-rejected-me-just-to-tell-me-yes-the-year-after-d1c49dc53f88&quot;&gt;https://blog.pramp.com/this-is-how-google-rejected-me-just-to-tell-me-yes-the-year-after-d1c49dc53f88&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In Bo Bennett’s words: “A rejection is nothing more than a necessary step in the pursuit of success.” I had to memorize and remind myself of this, saying it over and over again after I received multiple rejections in a row. In fact, I was rejected by almost all the companies I applied to. To make a long story short, one year later, I’ve received internship offers from Amazon, Microsoft, and Google. With all these choices, I ended up selecting the latest one in Silicon Valley. This is what I did.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://cdn-images-1.medium.com/max/1440/1*uKP3bIyZBuM9s1OClknBCw.png&quot; alt=&quot;Intro Picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;I’m currently in my senior year at Babes-Bolyai University in Cluj-Napoca, working part-time as a freelancer, and in my spare time, I’m trying to bootstrap different startups, one at a time. For this reason, I started &lt;a href=&quot;https://dutylabs.ro&quot;&gt;https://dutylabs.ro&lt;/a&gt; - a software consultancy company mainly focused on machine learning, web development, and mobile apps. If you need help with one of your projects in this area, feel free to write us an email directly on the website.&lt;/p&gt;

&lt;p&gt;In my high school years, I was a competitive programmer, so when I started university, I was already familiar with general computer science concepts. However, it turned out that only knowing your algorithms and data structures is not the key ingredient to landing a job at Big 4 companies.&lt;/p&gt;

&lt;h1 id=&quot;maybe-it-was-my-lack-of-communication-and-friendliness-well-never-know&quot;&gt;Maybe it was my lack of communication and friendliness… We’ll never know.&lt;/h1&gt;
&lt;p&gt;The first interview that I had for a software engineer position was with Google. Not knowing what the interview experience is like is intimidating at first. I remember being very nervous but excited at the same time. The interview itself was very impressive. I met one engineer from the London’s office who was working on Google Shopping and an engineer from YouTube in Zurich. After the interviews, I was expecting a positive outcome since I managed to solve the coding problems and even had time in the end to ask my interviewer more questions about Google’s company culture and what a typical day looks like in the office. It turns out, that success was not the case; A rejection arrived in an email two weeks later.&lt;/p&gt;

&lt;p&gt;Google has a policy that they don’t provide any feedback regarding your interview performance. I guess I’ll never find out why I was rejected. I’m assuming that I must have appeared nervous, and I was still very young and inexperienced - I just entered university a couple of months before. I also knew that one area I lacked in was communication and friendliness.&lt;/p&gt;

&lt;p&gt;Among my friends that also applied, I was the only one that got rejected. It was a tough time. Looking back, I think I did a great job not letting this get me down, and instead focused my energy on continuing to improve my existing skills with the goal of making it next year.&lt;/p&gt;

&lt;p&gt;For those who are currently in my position, here is a simple algorithm you can follow to increase your chances of success for the next time you interview with a Big 4 company:&lt;/p&gt;

&lt;h1 id=&quot;dont-assume-that-if-you-didnt-get-it-the-first-time-you-wont-get-it-at-all&quot;&gt;Don’t assume that if you didn’t get it the first time you won’t get it at all.&lt;/h1&gt;
&lt;p&gt;This is a huge trap. I heard many stories from current Google employees that did not get the job their first time interviewing. All of them have something in common: they did not give up. Instead, you must learn from this experience, try to get feedback, and improve as much as you can. Google has a whole webpage of preparing for interview resources.&lt;/p&gt;

&lt;p&gt;There are many reasons why you may have been rejected. Maybe you were inexperienced; perhaps you simply did not connect to the interviewer, maybe they already reached the number of hires they wanted. There are so many maybes, and while some of them are things you can control, most of them are not, so don’t be too hard on yourself. Pick yourself up and try again.&lt;/p&gt;

&lt;h1 id=&quot;make-a-list-of-things-you-should-improve&quot;&gt;Make a list of things you should improve&lt;/h1&gt;
&lt;p&gt;This is crucial. Make a list of skills that you want to improve. It can be small or significant goals, depending on what you want to work on. For me, I knew I had to get more comfortable speaking in English (my native tongue is Romanian), be more friendly and open, and prepare a few sentences to describe myself - no bullshit really, but my honest achievements and aspirations.&lt;/p&gt;

&lt;h1 id=&quot;start-improving---practice-with-peers&quot;&gt;Start improving - Practice with peers&lt;/h1&gt;
&lt;p&gt;After you’ve realized your weak points, start working on them, one at a time. For example, I knew I had to improve my English and be completely comfortable talking to a stranger who could become a coworker or even a friend. That’s where Pramp helped me a lot. I remember I finished 3 sessions on Pramp, all with a different partner. Each session helped me to gain more confidence in my abilities.&lt;/p&gt;

&lt;p&gt;During my sessions on Pramp, I met a Microsoft engineer’s wife and so she was able to tell me more about Microsoft’s culture; I also met a cool guy from Santa Clara that I still keep in touch with (if you see this, I hope we’ll meet next summer). At the end of the interview session on Pramp, you can ask them to connect on LinkedIn, Facebook or whatever social platform you prefer. You can continue to help each other in your journey to landing a dream job even outside the Pramp session. And if you are searching for a job, you should definitely consider continuing to practice on Pramp, since once you get excellent feedback, the Pramp Team will reach out to you with job offers, and help you skip the resume and phone screening!&lt;/p&gt;

&lt;h1 id=&quot;improve-your-coding-skills&quot;&gt;Improve your coding skills&lt;/h1&gt;
&lt;p&gt;Interview coding is different than real life coding. You have to code on a whiteboard or a simple plain text editor. This presents opportunities to ask questions. You don’t remember what the name of the method that converts a string to an integer is? Talk to the interviewer and ask for help. They may not know the exact answer, but tell them what you decide. Remember, your code won’t be compiled, but you must make sure that your answer is very close to a code that compiles.&lt;/p&gt;

&lt;p&gt;There are also a lot of good books about interview problems. In particular, I find the following two to be useful: &lt;a href=&quot;https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850/ref=dp_ob_title_bk&quot;&gt;Cracking the coding interview&lt;/a&gt; and &lt;a href=&quot;https://www.amazon.com/Programming-Interviews-Exposed-Secrets-Landing/dp/1118261364&quot;&gt;Programming Interviews exposed&lt;/a&gt;. Choose one, and stick to it from start to finish. You can scan through the pages you are already familiar with, but make sure you understand every piece of advice and realize why it was worth mentioning.&lt;/p&gt;

&lt;h1 id=&quot;believe-in-yourself-and-be-prepared-for-the-worst-to-happen&quot;&gt;Believe in yourself and be prepared for the worst to happen&lt;/h1&gt;
&lt;p&gt;I know this next bit may sound incongruent. I’ve just told you how to ace the interview, and now I’m going to tell you to be prepared for the worst to happen. As I said,  there are so many factors out of your control.. Failure or obstacles during the interview should not stop you from focusing on proving you are the right candidate. Believe it! You should also be prepared to answer the question “Why do you believe you are the right person for the job?”&lt;/p&gt;

&lt;p&gt;The good thing is that as you apply to more companies, the probability of things out of your control happening will decrease - given that you worked hard and prepared yourself.&lt;/p&gt;

&lt;p&gt;The only offer that you get can be from your “second choice.” We all have a hierarchy of the companies that we would like to work for. The thing is that even if you land the second choice, it can be a classic case of “sometimes you get what you need.”  You may find out that the company is an excellent fit and you would not trade the experience.&lt;/p&gt;

&lt;h1 id=&quot;be-calculated&quot;&gt;Be calculated&lt;/h1&gt;
&lt;p&gt;The first offer I received after preparing myself for the next round of interviews was from Microsoft Dublin. The people were very friendly, they flew me in, rented a lovely 4-star hotel room for me and they even reimbursed me for tickets to the Zoo (thanks Microsoft!). However, at that time, I felt like I didn’t t fit into Microsoft’s culture and I really wanted to land an internship in the US.&lt;/p&gt;

&lt;p&gt;At the same time, I also passed the interviews with Google, but they were looking to do placements for potential projects, so there was no offer on the table. As Microsoft usually gives you only a couple of days to decide (I don’t think that putting pressure on you is going to push you to accept, but anyway), I decided to turn down their offer and hoped I would eventually get an offer from Google.&lt;/p&gt;

&lt;h1 id=&quot;dont-be-afraid-to-take-risks&quot;&gt;Don’t be afraid to take risks&lt;/h1&gt;
&lt;p&gt;It turned out that my dreams came true: last summer I joined Google Photos as an intern at their headquarters, in Mountain View, California. I loved the experience and looking back I think it was the best decision I made, even though at the time it felt really stupid (or at least that’s what my mom thought). Don’t be afraid to take risks. The thing is,  you are already taking risks applying to a company since there is always the possibility that you may end up being rejected.&lt;/p&gt;

&lt;p&gt;After you accept an offer, make the most of it. Email your next mentor, ask what resources you need to read before starting (although you are not required to, inquiring will show that you are excited and interested in how to bring the most to the table). On your first day, don’t code! Meet all your team members, make sure you ask them about their professional background and what their experience is. Just be friendly.&lt;/p&gt;

&lt;p&gt;I hope that these tips will work for you!
If you need more information or you’d like to chat, feel free to tweet me @&lt;a href=&quot;https://twitter.com/cr_rusucosmin&quot;&gt;cr_rusucosmin&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Some helpful resources for the ones who want to apply:&lt;/p&gt;

&lt;p&gt;[1] &lt;a href=&quot;https://careers.google.com/how-we-hire/&quot;&gt;https://careers.google.com/how-we-hire/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;[2] &lt;a href=&quot;https://careers.google.com/students/&quot;&gt;https://careers.google.com/students/&lt;/a&gt;&lt;/p&gt;

&lt;h1 id=&quot;ps&quot;&gt;PS&lt;/h1&gt;

&lt;p&gt;Do you have a cool mobile idea? Perhaps a web site? Do you have an awesome disruptive idea? Drop us a line at contact@dutylabs.ro and we can help your idea come to life.&lt;/p&gt;</content><author><name>Cosmin Rusu</name></author><category term="blog" /><category term="google" /><category term="internship" /><category term="pramp" /><category term="interview" /><category term="mountain" /><category term="view" /><category term="photos" /><category term="intern" /><category term="microsoft" /><category term="amazon" /><summary type="html">Original post here: https://blog.pramp.com/this-is-how-google-rejected-me-just-to-tell-me-yes-the-year-after-d1c49dc53f88</summary></entry><entry><title type="html">How to build and deploy a Jekyll blog in minutes</title><link href="/2018/04/12/how-to-build-and-deploy-a-jekyll-blog.html" rel="alternate" type="text/html" title="How to build and deploy a Jekyll blog in minutes" /><published>2018-04-12T16:03:45+00:00</published><updated>2018-04-12T16:03:45+00:00</updated><id>/2018/04/12/how-to-build-and-deploy-a-jekyll-blog</id><content type="html" xml:base="/2018/04/12/how-to-build-and-deploy-a-jekyll-blog.html">&lt;p&gt;&lt;img src=&quot;/assets/intro.jpg&quot; alt=&quot;Intro Picture&quot; /&gt;&lt;/p&gt;

&lt;p&gt;So you decided to start a blog for whatever (good) reason. I will teach you how you
can build and  &lt;strong&gt;deploy&lt;/strong&gt;  a site like this in only a few minutes.&lt;/p&gt;

&lt;p&gt;This website uses &lt;a href=&quot;https://jekyllrb.com/&quot;&gt;Jekyll&lt;/a&gt; which works like a translator.
This post actually follows the same steps I’ve used to create this website.
You provide Jekyll a couple of files written in &lt;a href=&quot;https://daringfireball.net/projects/markdown/&quot;&gt;Markdown&lt;/a&gt;
(or &lt;a href=&quot;https://www.promptworks.com/textile&quot;&gt;Textile&lt;/a&gt;) and Jekyll translates them to HTML. The generated
HTML can then be served and deployed to GitHub Pages or &lt;a href=&quot;https://netlify.com&quot;&gt;Netlify&lt;/a&gt;.&lt;/p&gt;

&lt;h2 id=&quot;prerequisites&quot;&gt;Prerequisites&lt;/h2&gt;
&lt;p&gt;First, make sure you have Ruby installed.
You can see instructions on how to install Ruby  &lt;a href=&quot;https://www.ruby-lang.org/en/documentation/installation/&quot;&gt;here&lt;/a&gt;.
If you have successfully installed Ruby you should be able to run &lt;code class=&quot;highlighter-rouge&quot;&gt;$ ruby --version&lt;/code&gt; in your terminal.
Now let’s install  &lt;strong&gt;Jekyll&lt;/strong&gt;:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;gem &lt;span class=&quot;nb&quot;&gt;install &lt;/span&gt;jekyll bundler&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;project&quot;&gt;Project&lt;/h2&gt;

&lt;p&gt;Now we will create the skeleton of our blog. We are going to let Jekyll do all the work for us.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;jekyll new dutyblog&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;This command generates a simple Jekyll website where you can add posts. The theme can be modified, but
that’s not the scope of our tutorial. If you want to further modify the theme of your blog, check out the
Jekyll &lt;a href=&quot;https://jekyllrb.com/docs/themes/&quot;&gt;documentation&lt;/a&gt;.&lt;/p&gt;

&lt;h2 id=&quot;run-locally&quot;&gt;Run locally&lt;/h2&gt;

&lt;p&gt;Now let’s see how this looks on our local machine. It’s important to make sure our website works locally before
deploying into production.&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;cd &lt;/span&gt;dutyblog
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;bundle &lt;span class=&quot;nb&quot;&gt;exec &lt;/span&gt;jekyll serve&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;After following the above steps, you should not be able to navigate to &lt;a href=&quot;localhost&quot;&gt;localhost:4000&lt;/a&gt; and successfully
see your website.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/jekyll-start.png&quot; alt=&quot;Jekyll starting website&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;customize&quot;&gt;Customize&lt;/h2&gt;

&lt;p&gt;Now let’s change the &lt;code class=&quot;highlighter-rouge&quot;&gt;_config.yml&lt;/code&gt; to make the blog more personal.&lt;/p&gt;

&lt;p&gt;Here’s mine after modifying it:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-yml&quot; data-lang=&quot;yml&quot;&gt;  &lt;span class=&quot;na&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;DutyLabs blog&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;email&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;contact@dutylabs.ro&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;description&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;My awesome description&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;baseurl&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;url&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&quot;&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;twitter_username&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;dutylabs&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;github_username&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt;  &lt;span class=&quot;s&quot;&gt;dutylabs&lt;/span&gt;
  &lt;span class=&quot;c1&quot;&gt;# Build settings&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;markdown&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;kramdown&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;theme&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;minima&lt;/span&gt;
  &lt;span class=&quot;na&quot;&gt;plugins&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;pi&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;jekyll-feed&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;push-to-github&quot;&gt;Push to GitHub&lt;/h2&gt;

&lt;p&gt;Before deploying the website, we need to make it available on GitHub so that Netlify knows where your website code lives.&lt;/p&gt;

&lt;h1 id=&quot;sign-up-to-github&quot;&gt;Sign up to GitHub&lt;/h1&gt;
&lt;p&gt;If you haven’t already, you should &lt;a href=&quot;https://github.com/signup&quot;&gt;Sign up&lt;/a&gt; on GitHub.
GitHub offers you unlimited public repositories. If you are more likely to create
stuff that you want to be completely private, although GitHub offers this feature with a monthly
subscription, you can also choose BitBuckets since it’s free for maximum 4 collaborators.&lt;/p&gt;

&lt;h1 id=&quot;create-the-repo&quot;&gt;Create the repo&lt;/h1&gt;
&lt;p&gt;Then, &lt;a href=&quot;https://help.github.com/articles/create-a-repo/&quot;&gt;create a new repository&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/new-repository.png&quot; alt=&quot;GitHub Sign up&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;push-your-code&quot;&gt;Push your code&lt;/h1&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git init
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git remote add origin https://github.com/&amp;lt;your-username&amp;gt;/&amp;lt;repo-name&amp;gt;.git
&lt;span class=&quot;nv&quot;&gt;$ &lt;/span&gt;git push &lt;span class=&quot;nt&quot;&gt;-u&lt;/span&gt; origin master&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;deploy&quot;&gt;Deploy&lt;/h2&gt;

&lt;p&gt;Now that we have a site up and running, let’s deploy it. We’re going to use
&lt;a href=&quot;netlify.com&quot;&gt;Netlify&lt;/a&gt; for this task (it’s free!).&lt;/p&gt;

&lt;p&gt;If you haven’t already, go ahead and &lt;a href=&quot;https://app.netlify.com/signup&quot;&gt;Sign up&lt;/a&gt; on their platform.&lt;/p&gt;

&lt;h1 id=&quot;step-1&quot;&gt;Step 1&lt;/h1&gt;

&lt;p&gt;Navigate to your Netlify dashboard  &lt;a href=&quot;netlify&quot;&gt;https://app.netlify.com&lt;/a&gt; and &lt;strong&gt;create a new site from Git&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/netlify-step1.png&quot; alt=&quot;Netlify first step&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;step-2&quot;&gt;Step 2&lt;/h1&gt;

&lt;p&gt;Choose GitHub from the list (or any other Git provider you may use), and choose the repository you pushed your code to.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/netlify-step2.png&quot; alt=&quot;Netlify second step&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;step-3&quot;&gt;Step 3&lt;/h1&gt;

&lt;p&gt;Since Netlify is quite smart, it should pick up the right build command for you already.
Make sure the build commands and the path match what I have in the next picture.
This is basically the way you tell Netlify how to compile
and build your website and then you specify the path to the build directory.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/netlify-step3.png&quot; alt=&quot;Netlify third step&quot; /&gt;&lt;/p&gt;

&lt;h1 id=&quot;step-4&quot;&gt;Step 4&lt;/h1&gt;

&lt;p&gt;Click “Deploy” and wait. In seconds, you should have a custom subdomain on Netlify. I changed mine to be
&lt;a href=&quot;https://dutyblog.netlify.com/&quot;&gt;https://dutyblog.netlify.com/&lt;/a&gt;. I also added my custom domain to Netlify which
was very easy and so the blog is also available on &lt;a href=&quot;https://blod.dutylabs.ro&quot;&gt;https://blog.dutylabs.ro&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h2&gt;

&lt;p&gt;I think Jekyll is the best way to kick off a blog or a simple CMS website.
Netlify is also a very cool platform where you can host such websites. Both of them are free, and anyone
with basic coding skills can rapidly learn how to use these tools.&lt;/p&gt;

&lt;p&gt;The source code of this blog is open source and can be accessed at &lt;a href=&quot;https://github.com/dutylabs/dutyblog&quot;&gt;https://github.com/dutylabs&lt;/a&gt;.&lt;/p&gt;

&lt;h1 id=&quot;ps&quot;&gt;PS&lt;/h1&gt;

&lt;p&gt;Do you have a cool idea of a mobile app? Perhaps a web site? Do you have an awesome disruptive idea? Drop us a line at contact@dutylabs.ro and we can help your idea come to life.&lt;/p&gt;</content><author><name>Cosmin Rusu</name></author><category term="blog" /><category term="jekyll" /><category term="cms" /><category term="netlify" /><category term="deploy" /><category term="github" /><category term="ruby" /><summary type="html"></summary></entry></feed>