Links to Some of the Best HTML Cheatsheets

HTML (Hypertext Markup Language) is the backbone of the web, serving as the foundation upon which websites are built. Whether you’re a seasoned web developer or just starting on your coding journey, having a reliable HTML cheatsheet can be a lifesaver. Cheatsheets provide quick reference points for HTML tags, attributes, and elements, saving you time and helping you write clean, well-structured code.

In this blog post, we’ve gathered links to some of the best HTML cheatsheets that you can bookmark and keep handy for your web development projects. These cheatsheets offer a range of information from basic HTML tags to more advanced techniques:

  1. Oh My Cheatsheet – HTML: Oh My Cheatsheet is a fantastic resource for all things web development, and their HTML cheatsheet is no exception. It provides an organized and comprehensive overview of HTML elements, attributes, and common use cases. Whether you’re a beginner or an expert, this cheatsheet has something for everyone.
  2. Mozilla Developer Network (MDN) HTML Element Reference: MDN Web Docs is a trusted source for web development information, and their HTML Element Reference is an invaluable resource. It includes detailed information on each HTML element, including attributes, browser compatibility, and usage examples.
  3. HTML5 Cheat Sheet by HostingAdvice: HostingAdvice’s HTML5 Cheat Sheet is a concise reference that covers the essential HTML5 tags and attributes. It’s perfect for developers looking to keep their code up-to-date with modern web standards.
  4. HTML Cheat Sheet by W3Schools: W3Schools is known for its beginner-friendly tutorials, and their HTML Cheat Sheet is no different. It provides a quick overview of HTML tags and attributes, making it an excellent resource for those new to web development.
  5. HTML Cheat Sheet by HTML.com: HTML.com offers a downloadable PDF cheat sheet that’s easy to print and keep on your desk. It covers common HTML elements and attributes, making it a handy reference for both beginners and experienced developers.

Having these HTML cheatsheets at your fingertips can greatly speed up your coding process and help you avoid common mistakes. Whether you prefer an online resource like Oh My Cheatsheet or a printable PDF like HTML.com’s cheat sheet, having access to these references will undoubtedly enhance your HTML coding skills.

So, whether you’re designing a website from scratch or just need a quick reminder of a specific HTML tag, these cheatsheets will be your trusty companions on your web development journey. Happy coding!

How cheat sheets can make your life as a software developer easier.

Memorizing everything you might need is not always a good and possible idea. You cannot remember everything for sure. You might a few commands and syntax but for everything else you will have to google at some point of time. Googling can also be hectic as you might not find exactly what you are looking for. So, its better to bookmark some really useful site like Oh My Cheatsheet. You can find things you need only click away. It really speeds up you work.

Oh My Cheat sheet

Best place find hints of most popular programming and Markup languages you know. We have cheat sheet for HTML, CSS, Javascript, Ruby, Python, Font Awesome, Material Design Icons. All the nut-bolts related to these languages are found here.

HTML 5 Logo

HTML (HyperText Markup Language)

The most basic building block of the Web. It defines the meaning and structure of web content.We can compare HTML with the Skeleton system of our body.

 GOTO CHEATSHEET

CSS 3 Logo

Cascading Style Sheets

CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML.CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScriptWe can compare CSS with the Muscular and De system of our body.

 GOTO CHEATSHEET

jQuery Logo

jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.

 GOTO CHEATSHEET

Ruby Logo

Ruby

Ruby is an interpreted, high-level, general-purpose programming language. It was designed and developed in the mid-1990s by Yukihiro “Matz” Matsumoto in Japan. Ruby is dynamically typed and uses garbage collection.

 GOTO CHEATSHEET 

TRY RUBY NOW IN CODE EDITOR

Font Awesome Logo

Font Awesome

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome has a 38% market share among those websites which use third-party Font Scripts on their platform, ranking it second place after Google Fonts.

 GOTO CHEATSHEET

Material Design Logo

Material icons

Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.

 GOTO CHEATSHEET

ES6 Logo

ECMA Script 6

ECMAScript is a scripting-language specification standardized by Ecma International. It was created to standardize JavaScript to help foster multiple independent implementations. JavaScript has remained the most widely used implementation of ECMAScript since the standard was first published, with other implementations including JScript and ActionScript.

 GOTO CHEATSHEET

Oh My ZSH Logo

Oh My ZSH

A delightful community-driven (with 1500+ contributors) framework for managing your zsh configuration. Includes 200+ optional plugins (rails, git, OSX, hub, capistrano, brew, ant, php, python, etc), over 140 themes to spice up your morning, and an auto-update tool so that makes it easy to keep up with the latest updates from the community.

 GOTO CHEATSHEET

I find it very easy to keep track of all language features using cheat sheet.

I have been coding for the last 10 years. I have been through Quick Basic, Visual Basic, C, PHP, Ruby, Javascript and Web UI with CSS, HTML and Bootstrap. Its impossible for anyone to remember all the features and syntax of everything.

Then, I found https://ohmycheatsheet.com . It has everything I need like CSS, HTML, jQUery, Ruby and Javascript cheat sheets.

Some useful links are:-

https://ohmycheatsheet.com/

https://ohmycheatsheet.com/css

https://ohmycheatsheet.com/jquery

https://ohmycheatsheet.com/ruby

https://ohmycheatsheet.com/ruby/Array

https://ohmycheatsheet.com/html

https://ohmycheatsheet.com/fontawesome/

https://ohmycheatsheet.com/material_icons/

Links to my new site shivab.com

Installing and configuration of Nginx Web/(Reverse proxy) server in ubuntu

First you will have to install ubuntu

$ sudo apt install nginx

this will install the software and it will generate default configurations in /etc/nginx/site-available folder. You can see those files there. You can modify the default.conf file. Default content is 

# Default server configuration
#
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

        # pass PHP scripts to FastCGI server
        #
        #location ~ \.php$ {
        #       include snippets/fastcgi-php.conf;
        #
        #       # With php-fpm (or other unix sockets):
        #       fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
        #       # With php-cgi (or other tcp sockets):
        #       fastcgi_pass 127.0.0.1:9000;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #       deny all;
        #}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#       listen 80;
#       listen [::]:80;
#
#       server_name example.com;
#
#       root /var/www/example.com;
#       index index.html;
#
#       location / {
#               try_files $uri $uri/ =404;
#       }
#}

To configure reverse proxy

server {
  listen 80;
  listen [::]:80;

  server_name example.com;

  location / {
      proxy_pass http://localhost:3000/;
  }
}

here, your application server is running at port 3000 in localhost.

Problems I faced

I was trying to serve the Rails app from folder other than /var/www like /root/projects/production/myapp dir, but the nginx could not render the app. It return the permission denined issue. I changed the owner of all the folders and files and also I changed the file permission to 777. But I failed.

So I moved the project to /var/www

How I Hosted Rails app

I moved the rails app to /var/www and set the permission to chmod -R 755 /myapp

node-pre-gyp ERR! build error | yarn install | Rails | Mac – Mojave

I encountered a series of errors when I tried to run my existing Rails5 app in my freshly installed macOS Mojave.

$ bundle exec rails s

this generated some errors like, node not found, then I installed node using brew. 

$ brew install node

then,

$ npm install yarn
$ yarn install 
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/john/projects/sifaris/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:196:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Darwin 18.5.0
gyp ERR! command "/usr/local/Cellar/node/12.1.0/bin/node" "/Users/john/projects/sifaris/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/john/projects/sifaris/node_modules/node-sass
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
$ bundle exec rails s
=> Booting Puma
=> Rails 5.2.3 application starting in development
=> Run `rails server -h` for more startup options
error Lockfile does not contain pattern: "yarn@^1.15.2"
error Couldn't find an integrity file
error Found 2 errors.


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================

Solution

$ rm yarn.lock
$ yarn cache clean
$ yarn install
$ yarn install v1.15.2

now it installs all the dependencies properly

bundle exec rails s
=> Booting Puma
=> Rails 5.2.3 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.0-p0), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
yarn install v1.15.2

Rails | Apartment gem | Resets AR objects when tenant switched

I ran into a weird situation today. Active Record objects stored in vars are removed when I switched from one tenant to another on the fly. This will create a weird test-failing scenario and you never know why its happening.

def switch(name)
  yield(name)
end

@customers = [1,2,3]
switch('shiva') do |name|
  puts name
  puts @customers
end

# Gives output
# shiva
# 1
# 2
# 3

 

but when I do this

@roles     = Role.all
@customers = org.branches
@list      = [1, 2]

puts 'Role count' + @roles.count.to_s
puts 'Customer count' + @customers.count.to_s
puts 'list count' + @list.count.to_s

Apartment::Tenant.switch!(org.database_name)
puts '-------'
puts 'Role count' + @roles.count.to_s
puts 'Customer count' + @customers.count.to_s
puts 'list count' + @list.count.to_s

output is

Role count2
Customer count2
list count2
-------
Role count0
Customer count0
list count2

 

Reason

# apartment-2.2.0/lib/apartment/adapters/abstract_adapter.rb
#   Switch to a new tenant
#
#   @param {String} tenant name
#
def switch!(tenant = nil)
  run_callbacks :switch do
    return reset if tenant.nil?

    connect_to_new(tenant).tap do
      Apartment.connection.clear_query_cache
    end
  end
end

Rails : PaperTrail gem : Custom events to track fields changed

In my project, I was asked to keep track of changes in records. I found PaperTrails gem, and its found to be pretty useful.

But it lacks a straightforward feature to know the fields changed in that particular version. Then I thought to write custom event name so that I could grep the field_name I wish to check.

# == Schema Information
#
# Table name: tasks
#
#  id                :integer          not null, primary key
#  worker_id         :integer
#  customer_id       :integer
#  kind              :integer          default(0)
#  status            :integer          default(0)
#  note              :text
#  start_on          :datetime
#  complete_on       :datetime
#  started_on        :datetime
#  completed_on      :datetime
#  created_at        :datetime         not null
#  updated_at        :datetime         not null
#  driver_acceptance :integer          default(0)
#  refuel_id         :integer
#  shift_id          :integer
#

class Task < ActiveRecord::Base
  include Timeable
  has_paper_trail
  
  # Update event-name on update
  before_save :paper_trail_events, on: :update

  enum status: { scheduled: 0, started: 1, skipped: 2, completed: 3, paused: 4, rescheduled: 5 }
  enum kind: { inter_location: 0, refuel: 1, break: 2 }
  enum driver_acceptance: { pending: 0, accepted: 1, rejected: 2, sent: 3 }

  private

    def paper_trail_events
      changed_fields         = self.changes.keys - ['created_at', 'updated_at']
      self.paper_trail_event = "Updated #{changed_fields.join(',')}"
    end
end

In Rails Console

> Task.find(1768).versions.map &:event
=> ["Updated start_on,complete_on,status", "Updated worker_id"]

 

Invalid CSS after “(min-width: “: expected expression (e.g.

Two possible reasons:

  • You might be @importing minified version of css assets like bootstrap.min.css
    • I did same and later solved using normal version css file
  • Search the suspect file if it has the content (min-width: and (max-width on the same line
    • see if there is any variable used
    • there might be px unit missing after the var
    • see if there is any possibility of var being nil
    • use @if condition to solve problem
    • eg:
@if  $min != null and $max != null{
  @media (min-width: $min + 'px') and (max-width: $max + 'px') {
    @content;
  }
}

Ruby on Rails | Setup MS-SQL server in Ubuntu 17.04

MSSQL Server Installation

Follow these instructions https://www.rootusers.com/how-to-install-microsoft-sql-server-on-ubuntu-linux/

Note: During installation it will ask you for password, put a strong password remember it or note it down.

Reset Server Admin(SA) password

If you, unfortunately, forgot the SA password then you can reset follow the commands

$ sudo systemctl stop mssql-server
$ sudo /opt/mssql/bin/mssql-conf setup

Testing

If you wish to test if Server is installed and ready to receive requests

sqlcmd -S localhost -U sa -P your_strong_password

Install FreeTDS binaries

$ apt-get wget
$ apt-get install build-essential
$ apt-get install libc6-dev

$ wget ftp://ftp.freetds.org/pub/freetds/stable/freetds-1.00.21.tar.gz
$ tar -xzf freetds-1.00.21.tar.gz
$ cd freetds-1.00.21
$ ./configure --prefix=/usr/local --with-tdsver=7.3
$ make
$ make install

Install required gems

# SQL Server (2012 or higher required)
#
# Install the adapters and driver
#   gem install tiny_tds
#   gem install activerecord-sqlserver-adapter
#
# Ensure the activerecord adapter and db driver gems are defined in your Gemfile
#   gem 'tiny_tds'
#   gem 'activerecord-sqlserver-adapter'

If still, you cannot install the gem tiny_tds then try using sudo
$ sudo gem install tiny_tds -v '2.0.0'

Importing from Remote to Localhost db

Exporting from remote

bcp my_table_name out ~/my_table_name.txt -S yourdb.database.secure.windows.net -U yourusername -P 'YourStrongPassword123!!' -d mydbname -c -t ','

 

Import to Local

bcp my_table_name in ~/my_table_name.txt -S localhost -U sa -P 'PrashantBhusal1' -d my_local_db_name -c -t ',' -q

**Output When Successful**

Starting copy...

5 rows copied.
Network packet size (bytes): 4096
Clock Time (ms.) Total : 16 Average : (312.5 rows per sec.)

Useful links

https://askubuntu.com/questions/870927/sqlcmd-not-available-after-installing-mssql-tools

https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-troubleshooting-guide

https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-troubleshooting-guide#connection

How To Install Microsoft SQL Server On Ubuntu Linux

https://github.com/rails-sqlserver/tiny_tds#install