DEV Community: Darshan J

Three ways to Theme a React App

Darshan J — Fri, 28 Feb 2020 15:30:46 +0000

Whether it might be to let the user toggle between light & dark themes or let them choose one of the many color themes, themes make websites better.

Here are 3 ways I found to theme a React App:

Using CSS Variables

This one is fairly simple and can also enable you to add themes quite easily event after you built your website without considering adding theme. This method isn't event restricted to just React apps, you can even use this method to theme a Vanilla JS app.

Github link

Theming with React.js or any in minutes with CSS Variables by Harish V

Using React Context

This one was hard for me to get it to work.
Here's how I got it to work
Unfortunately I lost the link to the article I used to learn about this - fortunately I also used React Context docs while learning it.
I'll update this section as I think I understood this better

Using Higher Order Components from other frameworks/libraries

Styled Components

CSSinJS Theming

Material UI theming

Tools that I've used for Web Design & Development so far

Darshan J — Tue, 25 Feb 2020 14:33:14 +0000

This is a list of my most used tool/software/websites for Web Design & Development.

Pen & Paper

Nothing can beat a blank sheet of paper & pen, whatever it might be - design, coding, planning & everything in between.
It is exactly because the page is blank that you can fill it with anything that you want, so next time when you stress over a software/website to choose for a task(like to-do list), ask yourself if you really need it and try using a blank paper/book instead.

Windows 10

I use Windows 10 and not Linux although I do agree that Linux feels better for most web design/development needs. I use WSL, which is quite slower than actually running tools on Linux but it gets the job done and also with upcoming WSL 2 we can expect increased performance.

Ubuntu WSL

There are several distros available as wsl, I use this one

Windows Terminal

Nothing to say, terminal for using wsl over pre-installed command prompt.

VS Code

You probably use the same.

Web Browsers

I use Chrome most of the time and occasionally new Edge and Firefox

Photo editing

GIMP and Inkscape to rarely edit photos for web.

Taking Notes

Currently I use Dropbox Paper and thinking of moving to Onenote as note organization in it feels like a book.

Noise cancellation

Spotify - beware though as songs themselves might distract from the task at hand.
My Noise - Amazing website for noise cancellation.

Here's my spotify Music playlist.

Picking Color/Theme for design

Coolors that I recently used while designing my first portfolio webpage.

Adobe Color that I have been using for quite some time.

Other

A lot of Google/Stack overflow/MDN/Youtube searches and blog/article reading complete my toolset.

How to make API calls in Rails

Darshan J — Tue, 17 Dec 2019 21:29:37 +0000

I'll be using OpenWeather API in the below examples.

Let's get started by creating a new rails app.

rails new weather-app

Install Faraday

Faraday is used to make HTTP requests to API
Add this line to the top of your application's Gemfile:

gem 'faraday'

Execute:

bundle

Generate Controller & View for making API requests

rails g controller search index

Now open `/config/routes.rb` and replace `get 'search/index'` with:

get '/search' => 'search#index', :as => 'search'

We'll be making API requests using this route and also display response on browser on the same route.

Open `/app/views/search/index.html.erb` and fill it with:

<h2>Search for world weather by location</h2>

<%= form_with(url: search_path, method: "get", local: true) do %>
  <%= label_tag(:location, "Enter Location name:") %>
  <%= text_field_tag(:location) %>
  <%= submit_tag("Search") %>
<% end %>

<% if @response %>
  <div>
    <%= @response.body %>
  </div>
<% end %>

Which gives us a form to enter a location whose weather data we can pull from OpenWeather. And in if statement we have @response variable which is set to response from API if we made a call in the controller.

Create API service

Now let's actually get into the process of making API request to OpenWeather.
Although we have Faraday installed, it can't be directly called from within the controller.
Create a new folder named services inside /app. Make sure not to change the name of the folder.
Next add a ruby file in /app/services, this file can be named anything you wish but the same name albeit capitalized should be used for the module inside it.

I'll create openweather.rb inside /app/services

module Openweather
  class Search
    def self.by_location(location)
      Faraday.get 'https://api.openweathermap.org/data/2.5/weather?q=' + location + '&appid=' + ENV['API_KEY']
    end
  end
end

The class inside the module and the method inside the class can be named anything.

From the code above, we can make out that - by calling Openweather::Search.by_location method with a location parameter would make an API call to OpenWeather, but what about ENV['API_KEY']?
We sure can replace ENV['API_KEY'] with actual API key provided by OpenWeather, but leaving an API key within code is not right. So, we are going to place our API key as an Environment variable.
First let's place API key as Environment variable in our local machine.
To do this we'll be using Dotenv gem

Install Dotenv

Add this line to the top of your application's Gemfile:

gem 'dotenv-rails', groups: [:development, :test]

And then execute:

bundle

Now add a file named .env to the root of your application. Make sure not to change the name of the file. Add your API key in the first line like so:

API_KEY=your_api_key

Replace your_api_key with your actual key provided by OpenWeather.
If your going to commit your work add .env file to .gitignoreso that it is not tracked by git.

Call API service from the controller

Now for the final part, add this to index action of your controller /app/controllers/search_controller.rb

if params['location']
  @response = Openweather::Search.by_location(params['location'])
end

Make sure match the names of module, class and function that you named earlier.

Check the result

Now, open the server

rails server

And visit http://localhost:3000/search from your browser.
Search for a location to see the response.