CSS: Text-Transform

If you are creating a form and want to have only uppercase characters shown to the user, you can apply the style ‘text-transform: uppercase‘ to the input field.

For example:

< input class="form-input" style="text-transform: uppercase;" name="Zip" type="text" placeholder="Zip Code" />

BEWARE: This will not save the form input as uppercase.

To save the input field as uppercase, in your JavaScript, you will need to apply .toUpperCase() to the input string.

Other text-transform values can be found here.

Screen Shot 2017-08-14 at 4.07.35 PM

 

Advertisements

How the Web Works

Viking Code School Prep Work Q’s

Web Development Basics

  1. What is the internet?
    The internet is just billions of computers connected through wires run all over the Earth.
  2. How is information broken down and sent?
    Information is sent in packets to an IP address.
  3. What are packets?
    Packets are small bits of information sent over the internet.
  4. What is a “client”?
    You! Your browser or computer. Something that’s able to communicate with a server.
  5. What is a “server”?
    Server is where information is stored.
  6. What is HTTP and how does an HTTP request work?
    Hypertext Transfer Protocol. Protocol browsers and servers use to communicate. Browser will send a GET message across the internet when you enter a web address.
  7. What are DNS servers?
    Domain Name Servers are like a phone book. They hold all the domain names and match them with their IP addresses.
  8. What is HTML and how is it used?
    HTML (Hypertext Markup Language) is used to identify and display content.
  9. What is CSS and how is it used?
    CSS (cascading stylesheets) is used to style content.
  10. What is your browser’s Web Inspector (aka Developer Tools) and how can you use it to poke around in a page’s HTML?
    I use Chrome to see what the content and styling is for each HTML element
  11. What happens behind the scenes after you click “search” on google.com?
    Great explanation here:
    http://www.google.co.in/insidesearch/howsearchworks/thestory/

    Unnamed QQ Screenshot20151209030654

Github Pages

Did you know that you can use Github Pages to host your websites live?

It’s free and easy to setup whether you are on Windows or Mac.

There are two different types of Github Pages, one for Users & Organizations, and one for Projects. Each User & Organization can only have ONE Github Page. With each Github Page, you can have unlimited Project Pages. Project Pages are located as a subpath to the User Page (http://username.github.io/projectpage). To get more information about the similarities and differences, click here.

To set up a User Page, you first will need to create a new repository called username.github.io (where username is your Github username). This will be the URL of your website.

Then follow the instructions located here: https://pages.github.com/

To read about setting up a custom domain, go here.
Adding a CNAME file to your repository (for custom domains), go here.

Icons | Gradients | Asset Pipeline

I’ve just completed the first part of Part VII of Rob Dey’s Codermanual course! He recommended some great resources for styling your website and improving site loading speed.

This is what my Rails app looks like so far, after completing the first part of Part VII:
codermanual saas


Font Awesome

If you want to add icons to your website, you can go to Font Awesome where there are tons of free pre-made icons. You can resize the icons, add them to a drop-down menu, and also add animations to the icons.

You can read their Getting Started page here to learn how to integrate it into your Rails app.


UIGradients

UI Gradients Color Design
A great website for getting CSS codes for pre-made color gradients. The website has a beautiful layout, with easy navigation. Click on the gradient you fancy and check out the CSS code. Simply copy and paste into your project!


Asset Pipeline

The asset pipeline in Ruby on Rails combines all your CSS files into one file, and all your JavaScript files into one file. Compressing them for faster loading speeds. In Rails 4, the asset pipeline is automatically added in your Gemfile under:

gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'

If you don’t want your Rails application to automatically load the asset pipeline feature, you can just type this when creating a new Rails app:

$ rails new appname --skip-sprockets

Read more here: http://guides.rubyonrails.org/asset_pipeline.html


PageSpeed Insights

Enter your website URL here to check how fast your site loads on both mobile and desktop. Google will recommend what improvements you should make as well as let you know what you are doing right.
pageinsights google