Things I’ve learned about CSS grid layout

Things I’ve learned about CSS grid layout

With CSS Grid you can create complex web designs. It is very intuitive and very well supported by the major browsers.

Setting Up CSS Grid

It is very simple to get CSS Grid up and running. First of all I would recommend to download Firefox’s Developer Edition. Firefox has some great Dev Tools included, which makes it very easy to examine the CSS grid. Here is the markup for a container (parent) with six items (children) in it:



To turn our container div into a grid, we give it a display of grid:


.container { display: grid; }
But, this doesn’t do anything yet, as we haven’t defined how we want our grid to look like. It’ll position six divs on top of each other.
CSS Grid

Defining Columns and Rows

To make it two-dimensional, we’ll need to define the columns and rows. Let’s create three columns and two rows. We’ll use the grid-template-row and grid-template-column properties. .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; grid-gap: 20px; }
CSS Grid Layout

More from Omaha Code

Read The Best CSS Visual Dictionary

How to Create a React Native Web App

How To Create a React Native Web App

React Native helps create mobile apps using JavaScript and React.

React Native Web App.

Learn how to create a simple React Native Web App.

Tables of Contents

How to Create a React Native Web App.
How to Create a React Native Web App Tutorial.

React Native Web App.

How to Create a React Native App

React Native lets you build mobile apps using only JavaScript.

It uses the same design as React, letting you compose a rich mobile UI using declarative components.

React Native Code

Go to

After creating an account on, upload the following files to view your new React App.

Add the following files to create a React Web App

Upload React Native Web App Dependencies:

React Native Web App Files.

React Native Compiling

React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly.

With Hot Reloading, you can even run new code while retaining your application state. Give it a try – it’s a magical experience.

React Native Code

Additionally, React Native combines smoothly with components written in Swift, Java, or Objective-C.

It’s simple to drop down to native code if you need to optimize a few aspects of your application.

It’s also easy to build part of your app in React Native, and part of your app using native code directly – that’s how the Facebook app works.

Omaha Code Tutorials

Learn More

React Brazil

Expo enables you to work using an SDK with access to native functionalities easily, while saving your time. Create an app in just a few steps.

2018 Developer Skills Report

2018 Developer Skills Report provided by HackerRank.

Table of Contents

2018 Developer Skills Report – Learning & Education


2018 Developer Skills Report.


1 in 4 developers started coding before they could drive.

It’s never too early — or too late! — to start coding. Of the roughly 39,000 developers surveyed across all professional levels, more than a quarter of developers wrote their first piece of code before they were 16 years old.

Meanwhile, of all the developers who started coding after the age of 26, 36% are now senior or even higher-level developers, growing quickly in their careers.

The PC revolution sparked a unique ambition among ‘70s kids

Unlike generations thereafter, if kids of the seventies wanted to see innovative technology, they’d have to build it themselves — they had no other choice.

There were no widespread resources to teach them how to build software. Almost half of all developers (47%) between the ages of 45 and 54 started coding before they were 16 years old.

Meanwhile, developers between 18 and 24 today are the least likely to have started coding before 16 (only 20%).

Developers between the ages of 45 and 54 were among the first to get their hands on relatively powerful PCs, like the Acorn Archimedes, TRS-80, Commodore 64, and Apple II.

With limited to no access to formal education, young people in the PC Revolution had an unusually strong drive to learn to code on their own.

Nearly all developers have an insatiable thirst for learning

It seems like every year there’s a new hallmark programming language, framework or library that proliferates across developer blogs.

2018 Developer Skills - when developers learned to code.
2018 Developer Skills – when developers learned to code.

First, it was all about Backbone.js. Now, everyone is raving about AngularJS and React. Self-teaching is the norm for developers of all ages. Even though 67% of developers have CS degrees, roughly 74% said they were at least partially self-taught.

On average, developers know 4 languages, and they want to learn 4 more. The degree of thirst for learning varies by generations — young developers between 18 and 24 plan to learn 6 languages, whereas folks older than 35 only plan to learn 3.

Since programming is centered on independent research aimed at solving new challenges, self-teaching is a major part of being a successful developer.

In choosing what to learn next, the best guiding principle is to plant yourself in one discipline and learn tools as a means to grow. Tools will always change.

Ultimately, it’s curiosity and genuine interest in programs that should fuel the drive to learn new tools and adapt to tech’s evolving landscape.

2018 Developer Skills Report: In Demand Skills

Even though new languages arise frequently, it’s most important for developers to master core, legacy languages.

Developers are learning the languages employers are looking for most.

Employers’ most common requirement today are:

  1. JavaScript

  2. Java

  3. Python

  4. C++

  5. C

The biggest gap in knowledge
is with JavaScript frameworks

Programming languages aren’t adopted in the industry as quickly as they are created, but JavaScript is changing the game with its frameworks.

A number of the most in-demand frameworks are JavaScript frameworks — it’s the only language versatile enough to build frontend, backend, mobile and browser extensions.

Hence, JavaScript is ruling the web. Most often, employers want developers who know AngularJS, Node.js, and React.

React has the biggest delta between percentage of developers who know the framework and percentage of employers who look for candidates with this skillset.

In other words, there’s a big opportunity for developers to learn React as a marketable skill that companies need today.

Almost all employers prioritize problem-solving skills first


2018 Developer Skills Coding - What core dependencies employers look for.
2018 Developer Skills Coding – What core dependencies employers look for.


Problem-solving skills are almost unanimously the most important qualification that employers look for….more than programming languages proficiency, debugging, and system design.

Demonstrating computational thinking or the ability to break down large, complex problems is just as valuable (if not more so) than the baseline technical skills required for a job.

What you do matters more than what’s on your resume

There’s a popular belief that recruiters favor candidates with CS degrees from prestigious universities. But it turns out that they actually care about what you’ve done — not where you went to school. An overwhelming majority of hiring managers said they look for proven skill, such as previous work, years of experience, and projects/GitHub.

Regardless of company size, 9 out of 10 hiring managers say previous experience and years of experience — both indicators of skill — are among the most popular qualifications.

What you do matters more than anything else. Small companies place a higher value on the portfolio: 80% versus 66% of large companies.

Execs place the highest value portfolios and personal projects

Companies are looking at GitHub and projects to supplement resumes and evaluate skills better.

When we filtered the data by roles, we found that those in a C-level positions, including founders, CTOs and VPs, valued GitHub projects more than years of experience.

Prestige of degree dropped even further in importance for these folks.


Frontend Web Developer Skills
Cloudinary Tutorials

Learn how to create a free content delivery network to serve pixel-perfect images and raw files. Discover AI based image recognition and content-aware image manipulation.

Last updated 3 mins ago

Cloudinary Image Transformation Tutorials.

10 WCAG Design Requirements

10 WCAG Design Requirements

10 WCAG design requirements to ensure Web Content Accessibility Guidelines (WCAG) and requirements are met.

Table of Contents

10 WCAG Design Requirements.

10 WCAG Design Requirements List

A list of 10 design guidelines provided by the Web Accessibility Initiative will help users with disabilities access and navigate your website.
10 WCAG Design Requirements
10 WCAG Design Requirements.

Provide sufficient contrast between foreground and background

Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements. This does not apply for logos, or incidental text, such as text that happens to be in a photograph. The links below provide more information on the minimum contrast ratio as required by the WCAG and how to check contrast. “Contrast ratio” is a short version of the more technically correct term “luminance contrast ratio”. View macOS app for quick access to WCAG color contrast ratios.

Don’t use color alone to convey information

While color can be useful to convey information, color should not be the only way information is conveyed. When using color to differentiate elements, also provide additional identification that does not rely on color perception. For example, use an asterisk in addition to color to indicate required form fields, and use labels to distinguish areas on graphs.

Ensure that interactive elements are easy to identify

Provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation. Ensure that styles and naming for interactive elements are used consistently throughout the website.

Provide clear and consistent navigation options

Ensure that navigation across pages within a website has consistent naming, styling, and positioning. Provide more than one method of website navigation, such as a site search or a site map. Help users understand where they are in a website or page by providing orientation cues, such as breadcrumbs and clear headings.

Ensure that form elements include clearly associated labels

Ensure that all fields have a descriptive label adjacent to the field. For left-to-right languages, labels are usually positioned to the left or above the field, except for checkboxes and radio buttons where they are usually to the right. Avoid having too much space between labels and fields.

Provide easily identifiable feedback

Provide feedback for interactions, such as confirming form submission, alerting the user when something goes wrong, or notifying the user of changes on the page. Instructions should be easy to identify. Important feedback that requires user action should be presented in a prominent style.

Use headings and spacing to group related content

Use whitespace and proximity to make relationships between content more apparent. Style headings to group content, reduce clutter, and make it easier to scan and understand.

Create designs for different viewport sizes

Consider how page information is presented in different sized viewports, such as mobile phones or zoomed browser windows. Position and presentation of main elements, such as header and navigation can be changed to make best use of the space. Ensure that text size and line width are set to maximize readability and legibility.

Include image and media alternatives in your design

Provide a place in your design for alternatives for images and media. Work with content authors and developers to provide alternatives for non-text content. For example, you might need:
  • Visible links to transcripts of audio.
  • Visible links to audio described versions of videos.
  • Text along with icons and graphical buttons.
  • Captions and descriptions for tables or complex graphs.

Provide controls for content that starts automatically

Provide visible controls to allow users to stop any animations or auto-playing sound. This applies to carousels, image sliders, background sound, and videos.

Read More from Omaha Code

Vue.js Tutorials.

Vue Tutorials

How to Create a Simple App with Vue learn how to create your a simple app with Vue.js.

Learn Vue

React Native Tutorials

React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly.

Learn React

DevRel – What is Developer Relations?

What is Developer Relations?

A developer evangelist or Developer Advocate is a spokesperson, mediator and translator between a company and both its technical staff and outside developers.

DevRel - What is Developer Relations?
DevRel – What is Developer Relations?

DevRel (Developer Relations) Department

A Developer Relations department, more often than not, consists of roles such as a Community Manager, Tech Author, Developer Evangelist, Developer Advocate and sometimes even Growth Hackers and Marketers.

Developer Relations aims at building positive relationships with Developers — who are the primary customers of developer facing companies.

At some companies, it can be, essentially, a sales role where you are selling software from a developer’s perspective. At other places, it’s more of a speaking/blogging/communicating about code job.

You normally write demo apps to show off tech and then demo them around at conferences/meetups and online.

Typically advocates keep documentation up to date, keep contact with the community, do demos and blog about the product, pass feedback on questions, and basically help facilitate a good developer experience with the company.

It’s a semi-technical role with high soft skills requirements. You can think of them as public relation persons representing some software or dev methodology (SaFE agile comes to mind).

In Addition, you’ll see a lot of Developer Advocates giving speeches at Tech conferences.

Developer Evangelist Salaries

According to Glassdoor, there are currently 167 job openings for talented Developer Evangelists.

In addition, 15 openings offered annual salaries greater than $159,000 per year.

15 Companies advertising DevRel salaries over 159k

View the salaries below. At number one, Service Now is advertising a position for a developer experience member, with ranges from $131,000 to $286,000 per year.

  • Consensys – ($110K-$160K), New York, New York.
  • Square – ($114K-$160K), San Francisco, California.
  • Salesforce – ($127K-$188K), Bellevue, Washington.
  • Intuit – ($128K-$178K)
  • Mulesoft – ($115K-$162K), San Francisco, CA.
  • Dropbox – ($119K-$169K), San Francisco, CA.
  • Oracle – ($114K-$162K), Petaluma, California.
  • VmWare – ($130K-$180K) Palo Alto, CA.
  • Cisco Systems – ($114K-$162K)
  • Service Now – ($217K-$286K)
  • Sift Science – ($131K-$172K)
  • Universal Technologies – $96K-$179K
  • Freddie Mac – $83K-$162, K McLean, Virginia.
  • SevOne, Inc – San Francisco, Ca.

Service Now

The job description for a role as Developer Experience member states:

We are looking for a product leader to define, plan, and execute on a clear product vision around an “end to end” developer experience.

Service Now, Developer Experience position.
Service Now


Square DevRel Jobs.

The job description for Square in San Francisco reads:

You’ll help showcase the platforms capabilities through content and presentations at events locally and abroad. Our developer evangelists also play a crucial role of representing the voice of external developers internally and bringing their feedback into our current and upcoming product offerings. Come grow the Square developer community!


You will connect with developers from the world’s leading companies, empower them to solve cutting-edge problems with the latest technologies and represent their point of view internally.


The Evangelist will act as an advocate for Pantheon and PegaSys tools generally, including representing PegaSys at conferences, through demos and weekly calls, and on digital channels such as Stack Overflow or Reddit.


We have ambitious goals for our developer program, and you will be supported accordingly by teams across MuleSoft – Engineering, PM, and Marketing

DevRel Conferences

In addition, traveling to conferences also becomes a large portion of the job duties. Sounds pretty sweet, right?

DevRel Conference 2019.

DevRelCon Tokyo 2019

DevRel Con, Tokyo2019.

DevRelCon is taking place once again high up in the Nihonbashi Tower for a day for developer relations and more with the Japanese dev rel community.

What is DevRelCon?

DevRelCon and DevXcon are an international series of conferences for people who build developer communities and developer experiences.

In 2016, the event DevRelcon was held in San Francisco.

“one day single track conference for technical evangelists, developer advocates and anyone interested in developer relations.”

DevRelcon 2016

Developer Relations jobs have become a hot commodity in 2019

According to

Developer advocacy, technical evangelism, developer community management: whatever you call it, it’s still pretty new.

DevRel at Google

These are roles for engineers who love connecting with other developers and partners; people who enjoy teaching, speaking or writing about cutting-edge technologies; people who find it natural to engage with other developers on Google+ and other social media.

These teams are advocates for third party developers’ needs within Google and are passionate evangelists for Google technologies in the outside world.

Read More from Omaha Code

How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

Speed up your WordPress site with a free CDN from Cloudinary.

Continue Learning Sign Up

How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN.
How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN

In this tutorial, I’ll show you how to speed up your WordPress website using a free Cloudinary Image CDN.

Migrate all of your existing WordPress images Cloudinary in minutes using the Auto Cloudinary Plugin.

Table of Contents

Image CDN Benefits

Hosting many images within your WordPress site slows down your sites performance and increases bandwidth. An Image CDN makes the process of serving images as seamless as possible. It increases the speed of your website by offloading images and caching static content. Image CDN’s also interpret the screen size and resolution of the device, the DPI, as well as supported image formats. In addition, an image CDN is able to dynamically render a master image to correspond with the specifications of the device.

Create a Free Cloudinary Account

You’ll need to sign up for a free account, then input your company or site name that will become your cloud name.

Create a Free Cloudinary Account.
Create a Free Cloudinary Account.

The cloud name is important when we configure the Auto Cloudinary Plugin.

  • First, create a free account with Cloudinary.
  • Create a cloud name used to configure Auto Cloudinary Plugin.

Once your signed in, you’ll be able to view a custom dashboard with your account details.

Your Cloudinary account details include:

  • Cloud-Name.
  • API Key.
  • API Secret.
  • Environment Variable.

Create a new Folder within the Media Library

The new folder will be used to automatically serve your new and existing images from a Cloudinary Image CDN. If you have a large site with many images stored within your WordPress Media Library, using a CDN will increase the performance of your website immediately.

Configure Your Cloudinary Settings

Now, select the settings icon located on the top right of the page within your dashboard menu. Cloudinary Settings.

Select Upload Settings

After selecting the uploads tab, scroll down to Auto Upload Mapping settings.

Cloudinary Auto Upload Settings.

Input the Name of the Folder You Created

Since I created a new folder titled omaha-code-cdn, this will be used as the name of the auto upload mapping folder.

URL Prefix

Now, Input the URL prefix of your WordPress uploads folder. The URL Prefix will appear as the your domain name and wp-content/uploads/. As you can see, my URL Prefix appears as Note: Replace with your own domain. “”

Download The Auto Cloudinary Plugin

Navigate back to your WordPress dashboard and select the Plugins tab. Click Add New Plugin, then type “Auto Cloudinary” into the search bar. Upload Auto Cloudinary Plugin. You may have noticed that Cloudinary also created an official plugin. I prefer the Auto Cloudinary plugin because it’s much easier to setup.

Auto Cloudinary Plugin Benefits

The official Cloudinary Plugin is somewhat of an overkill, and takes over the user interface of your image admin within WordPress. Auto Cloudinary Plugin has also been tested with the latest WordPress Update, and the official Cloudinary Plugin is untested with the latest WordPress Update.

  • Super simple and light-weight.
  • Totally seamless and out of the way.
  • A flexible tool for WordPress developers.

Under Tools, Select the New Cloudinary tab

Within your WordPress Dashboard, select Tools > Cloudinary. Under Tools, Select Cloudinary Tab.

Configure Auto Cloudinary Options

Input your Cloud Name and the name of your auto mapping folder. My Cloud Name is Omaha-Code, and my auto mapping folder is omaha-code-cdn. Image CDN Configuration. Choose “Automatically use Cloudinary for all Images” to create a super easy Auto-Upload feature in the Fetch API. This plugin tells Cloudinary where to find the files on our server (or on S3 or anywhere on the Internet), and it automatically downloads it from there,  thus saving it on to it’s servers the first time you ask for it, like a CDN would!


Now Cloudinary will automatically fetch and serve the images from your WordPress media library using a Cloudinary Dynamic File name.

Cloudinary Auto-Upload for WordPress

View the github repository here.

Cloudinary Auto Upload Tutorial

Once an image has been auto-uploaded from the remote location, all requests for the image will reference the image stored in your Cloudinary account.

This feature supports all resource_types (image, video and raw).

Image CDN Cloudinary and WordPress.
Cloudinary Image CDN Tutorial Background.

Cloudinary’s Media Developer Experts

As a Cloudinary MDE, I’ve received 2 days of first-hand training from Cloudinary software engineers.

Cloudinary Expert Neil Humphrey

Omaha Zip Code Map

Omaha Zip Code Map

View the results for the number of zip codes, total land area, water area, counties, and more.

Omaha Zip Code Data

Zip Code Map highlights the 48 different zip codes in Omaha, Nebraska.

Omaha Zip Code Map

View the results for the number of zip codes, total land area, water area, counties, and more.

They’re also 72 cities within 30 miles. Omaha is located in Douglas County.

Omaha Zip Code Map

  • 48 Zip Codes in Omaha, NE.
  • Timezone is Central (GMT -06:00).
  • Total Population in Omaha is 408,958.
  • Median Age in Omaha, NE is 34 years old.
  • They’re 2 area codes.
  • Water area is 9 sq. miles.
  • The 2 counties in Omaha area Douglas and Sarpy County.
  • Total Land area is 239 sq. miles.
  • Total area is 248 sq. miles.
  • The Mayor of Omaha is Jean Stothert.
  • Mayor’s hotline number is (402) 444-7000.

Omaha Demographic Information

According to the 2010 census, here is the data for the demographic representation of Omaha.


Omaha Demographic Information

All 48 Omaha Zip Codes

View all 48 unique zip codes available for Omaha, Nebraska.

  • 68007
  • 68010
  • 68022
  • 68028
  • 68069
  • 68101
  • 68102
  • 68103
  • 68104
  • 68105
  • 68106
  • 68107
  • 68108
  • 68109
  • 68110
  • 68111
  • 68112
  • 68114
  • 68116
  • 68117
  • 68118
  • 68119
  • 68120
  • 68122
  • 68124
  • 68127
  • 68130
  • 68131
  • 68132
  • 68134
  • 68135
  • 68137
  • 68139
  • 68144
  • 68145
  • 68152
  • 68154
  • 68155
  • 68164
  • 68172
  • 68175
  • 68176
  • 68178
  • 68179
  • 68180
  • 68182
  • 68183
  • 68197
  • 68198

Learn to code in Omaha

Additionally, Omaha is located in the heart of the Silicon Prairie. Omaha Code offers free guides and tutorials for individuals that want to learn how to code, and also offers private tutoring.

More Links


    7 New Features From Cloudinary

    7 New Features From Cloudinary

    In all, 16 new features were created during a 10-hour Hackathon by Cloudinary Engineers. We’ll discuss 7 notable creations.
    How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN.

    Engineers from the Cloudinary office in Petah Tikva also collaborated with remote Engineers in the United States to create 16 new features. Learn about 7 new exciting projects that were created during the Hackathon.

    Cloudinary Offices

    Cloudinary Office in Petah Tikva
    Cloudinary recently moved their office in Sunnyvale to Santa Clara, California.

    7 New Features

    Although the Engineering team at Cloudinary is incredibly small, they are comprised of technological leaders.

    DAM Terminal

    The winning project is a file system like operations in a terminal, that is incorporated into Cloudinary’s Media Library.

    Cloudinary-Usage Site Crawler

    This second-place winner enables analysis of Cloudinary’s service usage at a customer site and the potential to increase the service usage there. The site crawler can also detect usage trends, both positive and negative, over time.


    This third-place winner opens the Cloudinary platform by extending the transformation flow with WebAssembly modules or AWS Lambda. This project has been productized and is now part of Cloudinary’s service.


    This is a simple desktop app that automatically syncs user file systems with their Cloudinary accounts. We’ll open-source this project in the upcoming weeks.

    Cloudinary Chrome extensions

    We built several Chrome extensions, most of which for analyzing image usage and potential improvements in visited sites.

    Cloudinary Google Docs and Gmail Add-On

    This project incorporates images and videos from Cloudinary’s Media Library within Gmail and Google Docs.

    Cloudinary-Google Assistance Integration

    This project enables voice commands for querying account-related information.

    How to Speed Up Your WordPress Site with a Free Cloudinary Image CDN.

    Rife – Best Free WordPress Theme in 2019

    Rife - Best Free WordPress Theme in 2019

    Rife is my favorite free WordPress Theme for 2019.

    Nearly 80% of websites are created with

    According to a recent study by Netcraft, approximately 172 million websites are created with WordPress.

    Rife - Free WordPress Theme


    One of the best aspects about the free theme is it’s extensive documentation. An entire knowledge-base was created to answer any questions you may have.

    Plugin Compatability

    Apollo13 Framework Extensions is a name of the plugin and it is available also in official WordPress repository here.


    The creators have invested a lot of time into making common tasks much easier in WordPress. Read the official documentation here.

    Rife’s Free Core Features

    Here’s a list of the best free features that are included when you download the completely free theme.


    • RTL Support
    • One-Page Mode
    • Mega Menu
    • Writing Effect
    • Web fonts for Layout Parts
    • Page Preloader
    • Custom Sidebar
    • Basic Child Theme
    • Automatic Updates
    • Extensive Documentation

    Theme Features

    RTL Ready

    This theme includes RTL support for languages that requires websites to display text from right to left. 

    Mega Menu Support

    You can replace classic Submenu with the Mega Menu. This feature is also available in the Free version of this theme.

    Writing Effect

    This simple writing effect can add so much life to your page, you may not even need those crazy sliders.

    Webfonts for Layout Parts

    Making your website more beautiful and faster through great typography.

    Page Preloader

    Page preloader works as a mask for the time while the layout of a page is not ready yet and it(page) is not useful.

    Hidden Sidebar

    Hide a sidebar to allow a full page effect by following the following steps: 

    Accessed in Appearance → Customize → General settings → Hidden sidebar.

    WordPress Tutorials

    Create Your First Website with WordPress

    Complete guide on how to create your own website with WordPress.

    Download Ebook

    Complete Guide – Create a WordPress Website

    Complete Guide on Creating Your First Website with WordPress - Omaha Code
    Download the eBook on how to create your first website with WordPress.

    This is a complete guide on how to create your own WordPress Website. This how-to guide is all you’ll need to know on creating your first website.

    What’s Included?

    Everything you’ll need is included in this digital download.

    1. How to purchase your domain name
    2. How to setup hosting for your domain
    3. How to setup your own SSL certificate
    4. How to download WordPress
    5. How to setup your new WordPress site
    6. How to login and setup your WordPress Dashboard