Have you Customized your Bootstrap website?

Once you have built a few websites with Bootstrap, you may notice that your sites look too much alike. As a web developer, you want your websites to useful as well as attractive. How do you fix this problem? You can customize how your Bootstrap looks. By working with and customizing the design, you can create a Bootstrap website that doesn’t look like it was made with Bootstrap.

Have you customized your bootstrap website?

What web development techniques can you use?

  • Create a custom style sheet
  • Use Custom Fonts
  • Add Custom Photography
  • Use Font Awesome
  • Customize Bootstrap’s Buttons

Create a custom style sheet

You want to create a custom style sheet to keep your design customizations separate from Bootstrap. Nothing more annoying than upgrading and realizing that you lost all of your design work because you added them to the Bootstrap CSS and forgot what you did. If you use Adobe Kuler or COLOURlovers color scheme generators, you can create a Bootstrap theme with the color scheme to start your designs from.

Use Custom Fonts

Fonts as well as colors should be unique to your website. By using custom web fonts, you can change how your site looks quickly and easily. When you choose the wrong font, your site can look bad. Where can you get ideas for choosing the right fonts? You can use the following resources Top 20 Google Fonts and How to Use Them and 10 Great Google Font Combinations You Can Copy.

Add Custom Photography

With sites like pixabay.com or Death to the Stock Photo, you don’t have to be a photographer to add unique and interesting photos to your website. With tools like Photoshop, you can crop, add photo effects and more to make a photo unique to your website.

Use Font Awesome

With Font Awesome, you can incorporate these icons into your designs. You can use them on buttons, navigations bars or anything else that you need.

Customize Bootstrap’s Buttons

Bootstrap comes with default buttons for you to use. You can customize the way these buttons appear in your design. Use this Bootstrap Button Generator to create the look that you need.

With web development tools like photos, Font Awesome and CSS, your Bootstrap website doesn’t have to look like a standard Bootstrap website. You can customize it to look the way you want.

Paper Prototyping

Have an idea for project? Do you start by opening your code editor and getting started? I have. Those projects seemed to take longer and failed to become good products. What works is prototyping or sketching the product out. Sketching helps you to slow down and think about the problem. It makes you choose one solution over the other and even seen things that you may not consider if you had jumped into coding first.

Paper Prototyping

Why paper?

  • Paper is cheap and easy. You just grab a piece of paper, a pen and start drawing. If you don’t like it, you can throw it away and start over.
  • Easy iterations. A paper prototype also allows you to create multiple iterations as possible without the expensive of writing code.
  • Documentation. No need to create additional documentation. The prototype becomes your documentation. With paper, you write notes on your design or on the back or add them with Post-It Notes.
  • Collaboration. You and your team can quickly and easily draw out ideas on paper and share them.

What do you need to get started?

  • Paper
  • Pens and pencils
  • Stencils

When do you use paper prototyping?

  • Brainstorming new ideas
  • Creating a mock-up of a new feature or product
  • Redesigning an older feature that no longer works

Should you use it for every project?

It depends. If your client or project can be easily understood by simple sketches, then you can use them to present your ideas. For some project, you may need to create a more interactive mock-up. Your client may need to see a working product in order to understand how you plan to implement your idea.

Paper prototyping is the easiest and simplest way to get started. If you want to stop talking and start sketching, this guide can help you get started.

5 Places to Get WordPress Snippets

How can you modify your WordPress website? By adding a theme, plugins or modifying WordPress yourself. When you develop your own WordPress websites, you may want to add code instead of relying on a plugin. Adding a code snippet to your theme or a custom plugin can be a better solution than searching for a plugin that does what you want. Where do you find these code snippets, what do you do if it breaks your site and how to do manage them?

5 Places to Get WordPress Snippets

Where do you find code snippets?

WPSNIPP

WPSNIPP – WordPress Snippets has a collection of about 666 snippets. You should be able to find a snippet that works for your next project.

wpsnipp

 

Digging Into WordPress

Digging Into WordPress has tips, tricks and snippets for modifying and making your WordPress site even better. You can use their tips and tutorials to replace plugins that could do the same thing.

Digging Into WordPress

 

WP-Mix

WP-Mix is a mix of code snippets and tutorials. You will find WordPress, PHP, jQuery, HTML, CSS and more.

WP-Mix

 

CSS-Tricks

CSS-Tricks has a collection of WordPress snippets. You can add these snippets to your theme or a site-specific plugin.

CSS-Tricks WordPress Snippets

The Web

You can search the web for a code snippet. Many WordPress or developer blogs will have code snippets that you can use.

What happens when you find one and it breaks your site?

WP Beginner explains how to paste snippets from the web into WordPress and how to avoid mistakes that could take your site down.

What do you do with your code snippets?

Whether you have written or found a WordPress snippet that you want to share, you need a way to do it. Thoriq Firdaus show you how in How to Manage and Use Snippets in WordPress.

Code snippets can make it easier for you to modify WordPress. You can search and paste snippets into your WordPress site. Where and how you paste these snippets can determine whether or not it will fix your problem or crash your website. As with all code you find, read it to make sure you understand what it does and test it. Do you have a place where you can find WordPress code snippets?

Notes on Building Accessible Websites

Everyone should be able to go to a website and do what they want with a minimal amount of effort. What makes a website accessible? An accessible website should be perceivable, operable, understandable and robust. A website is perceivable when you provide text for any non-text content like images, videos, podcasts or other sound files and provide alternatives for time-based media. An operable website makes all functionality available via keyboard and provides users enough time. Your website is understandable when you create content that is readable and understandable. It becomes robust when your create it using techniques that maximizes future compatibility.
Notes On Building Accessible Websites

How do you achieve this?

You get started by adding accessibility to your website with HTML, CSS and files names.

  • Add alt tags to images. Not all images need the alt tag. If your image is for decoration only, you can skip the alt tag.
  • Use headings frequently. Headings help break up the text and make it easy to understand. Remember, to use one H1 tag per page
  • Use color contrast. The right color combinations can make text either easy or hard to read. Try Lea Verou’s color contrast tool.
  • Make your file names meaningful. Your camera gives your images names with long sets of letters and numbers. Rename them to describe the image. Meaningful names can help with SEO and finding an image if you need to updated it later.
  • Add a label to every form element.

How do you know how accessible your website is?

You can use the following tools to determine your websites accessibility and take steps to fix issues.

Wave

Wave is an accessibility evaluation tool. It can help you to make your content more accessible. It shows you errors in red, warnings in yellow and accessible content features in green.

Wave On Burlington Footwear

ChromeVox

A screen reader for the Chrome browser. Use ChromeVox to learn how a visually impaired person has to use your website.

Your Keyboard

Use your keyboard to navigate through your website without using your mouse. If you need to use your mouse, then you have some items that need fixing.

Do you use Chrome for Your Development?

Ire Aderinokun, UI Designer and Front End Developer, talks about the Chrome Accessibility tools that she uses to test for accessibility issues.

While you develop your next website, use these tools and tips to ensure that you build a site that is perceivable, operable, understandable and robust. By using a variety of tools, you can help to make the user experience better for all of your users.

Want to learn more about accessibility? The A11Y Project is working to make web accessibility easier for web developers to implement.

Takeaways from Milwaukee Code Camp 2016

What is Milwaukee Code Camp? A one day conference with a wide variety of presentations and talks on coding, technology and more. I attended the sessions on Design Patterns, Firebase, HoloLens and Building a Chat Bot. Here are my notes:

Takeaways Milwaukee Code Camp 2016

Design Patterns

David showed us how to make your code adaptable, separate concerns and apply an interface and different design patterns. He started with code that was written without the benefit of an interface. David showed why this design wasn’t as adaptable to changes as it needed to be. You couldn’t add a new back-end provider without rewriting the code.

David showed us four Design Patterns. They are:

  • Bridge Pattern: use an interface to separate dependency from code
  • Decorator Pattern: wrap one object inside of another
  • Chain of Responsibility: passes through a series of handler until it can process your request
  • Template Pattern: it handles repeated code (an algorithm)

David explained that you should use patterns when they make sense. Not all situations are appropriate for a design pattern. You can download the code and check out the slides for Design Patterns on github.

Firebase

Firebase is a noSQL database. It is a realtime database which has a cloud-based backend. With Firebase, you can build high-quality apps. It has APIs package into a single SDK for easy use. As a Google product, can use AD Works and Analytics to learn what your users need. It works across multiple platforms from iOS to JavaScript.

You may want to consider Firebase for your app if:

  • You’re building a new app or rebuilding an existing one.
  • Your application requires minimal integration with third party services or legacy systems.
  • You’re creating an app that doesn’t have complex user authentication needs or heavy data processing requirements.

To get started, sign up for a Firebase account. Create a project, then setup authentication because it is in active at first. Then, you can start creating your app. If you want, you can use it with a Facebook app. You can learn more about Firebase from Google.

HoloLens

HoloLens uses both augmented and mixed reality. They defined augmented as supplemental to reality. PokeMon Go is an example of augmented reality. Mixed is where you add objects to reality. Greg Levenhagen talked about how Microsoft is leading the way with augmented reality by providing HoloLens as a tool for creating revolutionary apps and games. We discussed how HoloLens can be used for engineering, training, manufacturing, sales and remote communications. Right now, C# developers can start building apps for HoloLens today.

You Can Build a Bot, too!

A chat bot that is. A chat bot is an app that simulates a human conversation. They can tell you the weather or find an article for you. “Chat bots are becoming the new apps.” Big tech companies like Google, Apple, Facebook and Slack have chat bots. You can order tacos from Taco Bell in Slack using a chat bot.

When you create a chat bot, you want it to have:

  • A simple and uncomplicated user interface.
  • A specific purpose and complete specific tasks.
  • A personality. Is it snarky or formal?
  • A reliable hosting service. You want your bot to be available all day.
  • A “catch all” response when it doesn’t know something. It may refer you to a website or a person who can answer the question.
  • Be well tested. A buggy chat bot will not be used.

Anthony Jesmok, a Full Stack Developer with Misix, explained that you can get started with your own chat bot. There are several bot frameworks to choose from. For his presentation, he used the Microsoft Bot Framework, Microsoft LUIS (a natural language recognition engine) and Node.js. With Microsoft LUIS, you create an app recognizes and handles the situations (functions) that you what the chat bot do. Anthony has made his code and slides available on github.

Summary

As with other conferences, it can be hard to choose between sessions to go to. I have new and interesting technologies and coding techniques to learn more about. Thanks to the sponsors: Skyline Technologies, SafeNet, Concurrency and University of Wisconsin – Milwaukee for making a great conference.