Code Theory - Page 27 of 38 - Web and Mobile Development articles

How to Create a Fixed Header

Fixed headers are an increasingly popular trend for styling headers or navigation menus on your site. When you add a fixed header to a page, that means that the position of the header stays fixed (usually to the top of the page, but it doesn’t necessarily have to be positioned as such) no matter how far the user scrolls down the page. This feature is helpful for anyone who wants to make sure their users always have access to particular links or navigation no matter which part of the page they may be exploring.

If you think that adding a fixed header to any of your projects might be a good idea or, at the very least, a fun experiment, you’re in luck, because it’s actually pretty easy to do. Keep reading and we’ll walk you through the basic steps.

The HTML

For a very, very basic fixed header structure, we used something like this:

<body>

<div class="header">
 <h1 class="header_logo">This is a Fixed Header</h1>
</div>
<div class="offset">
 <p>Scroll down to see the responsive header in action.</p>
</div>

</body>

It’s totally up to you what you want to include in your header. It could be navigation, links, a phone number or other contact info…the choice is completely yours. For the purposes of this demonstration, we just chose to include some text indicating that what you’re looking at is, in fact, a fixed header, and some content below that so we have something to scroll past.

The CSS

We wanted our fixed header to be purple, but the color choice and style of your header is totally up to you. The only line of CSS you absolutely can’t do without if you want the header to be fixed is position: fixed, which in our code is applied to the .header selector. The size, color, positioning, padding, font-family, and pretty much everything else can be tailored to the needs of your project or site.

Check out the CSS below:

body {
 height: 1500px;
 font-family: "Montserrat";
}

.offset {
 margin-top: 0;
 padding-top: 270px;
 text-align: center;
 -webkit-transition: .3s;
 transition: .3s;
}

.header {
 position: fixed;
 width: 100%;
 height: 100px;
 font-weight: bold;
 text-align: center;
 background: #7F6FF0;
 -webkit-transition: .3s;
 transition: .3s;
 color: #fff;
}

.header_logo {
 font-family: 'Oswald', sans-serif;
 margin: 0;
 padding-top: 8px;
 font-size: 30px;
 text-shadow: 3px 4px rgba(0, 0, 0, 0.1);
 -webkit-transition: .3s;
 transition: .3s;
}

If you use the code above, this is how your fixed header should look:

While you can’t really appreciate the whole fixed header effect from just a screenshot, trust us when we say that when you scroll down this page , you will scroll past the text and end up with the header still stuck to the to of the page. Add the code to any of your projects to see it in action for yourself!

CSS Snippets: Styling Breadcrumbs

In the famous old story of Hansel and Gretel, the children spread breadcrumbs behind them as they made their way into the woods. They left this trail of breadcrumbs so that they would always be able to find their way home. In web development, breadcrumbs are a navigational element that, much like Hansel and Gretel’s breadcrumbs, show you the path you took to get to the page you’re currently visiting, and allow you to retrace your steps, if you like. This helpful navigational element was actually named for the breadcrumbs in the old fairy tale.

While breadcrumbs are certainly a useful feature to add to any project, they’re often overlooked when it comes to adding style. Most of the time, they’re treated just like any other link in terms of style. If you want to add some flair to your breadcrumbs, check out the snippet below.

The HTML

Here’s the easy part. For the purposes of this example, we’ll just use static HTML to create our breadcrumbs, which will be <li> elements within a <ul> tag.

<ul id="breadcrumb">
 <li><a href="#"><i class="fa fa-home"></i></a></li>
 <li><a href="#">Crumb 1</a></li>
 <li><a href="#">Crumb 2</a></li>
 <li><a href="#">Crumb 3</a></li>
 <li><a href="#">Crumb 4</a></li>
 </ul>

Here’s how it looks so far:

As you might be able to tell, we used a Font Awesome icon to indicate the home page. If you plan on using Font Awesome too, make sure you link to their library somewhere in the <head> section of your code. Here’s the link to their library:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The CSS

In the CSS, we’re going to give the breadcrumbs a nice arrow shape. This effect is achieved by utilizing the :before and :after pseudo-selectors (if you take a look at the code, you’ll see that all of the shaping of the breadcrumbs happens within the #breadcrumb li a:before and #breadcrumb li a:after selectors. If you’re interested in learning how to achieve that shaping, pay special attention to the uses of border and border-color within those selectors).

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body{
 font-family: 'Source Sans Pro';
 background-color: #d6fffb;
}

#breadcrumb{
 list-style-type: none;
 display: inline-block;
}

#breadcrumb li{
 float: left;
}

#breadcrumb li a{
 color: #fff;
 display: block;
 background: #f40c81;
 text-decoration: none;
 position: relative;
 height: 40px;
 line-height: 40px;
 padding: 0 10px 0 5px;
 text-align: center;
 margin-right: 23px;
}

#breadcrumb li:nth-child(even) a:before{
 border-left-color: transparent;
}

#breadcrumb li:first-child a{
 padding-left: 15px;
 border-radius: 4px 0 0 4px;
}

#breadcrumb li:first-child a:before{
 border: none;
}

#breadcrumb li:last-child a{
 padding-right: 15px;
 border-radius: 0 4px 4px 0;
}

#breadcrumb li:last-child a:after{
 border: none;
}

#breadcrumb li a:before, #breadcrumb li a:after{
 content: "";
 position: absolute;
 top: 0;
 border: 0 solid #f40c81;
 border-width: 20px 10px;
 width: 0;
 height: 0;
}

#breadcrumb li a:before{
 left: -20px;
 border-left-color: transparent;
}

#breadcrumb li a:after{
 left: 100%;
 border-color: transparent;
 border-left-color: #f40c81;
}

#breadcrumb li a:hover{
 background: #7dd49a;
}

#breadcrumb li a:hover:before{
 border-color: #7dd49a;
 border-left-color: transparent;
}

#breadcrumb li a:hover:after{
 border-left-color: #7dd49a;
}

It’s a lot of CSS, but don’t worry, most of it is rather simple. Here’s what it looks like now:

Finishing Touches

Let’s add some polish to this design by adding a cool hover effect that changes the background color from pink to green when the breadcrumbs are hovered upon. Because the #breadcrumb li a:before and #breadcrumb li a:after make up part of the background of the breadcrumbs, it’s important to remember to include hover effect style rules for them too, or else your breadcrumbs could end up looking a little funky when a user hovers upon them.

#breadcrumb li a:hover{
 background: #7dd49a;
}

#breadcrumb li a:hover:before{
 border-color: #7dd49a;
 border-left-color: transparent;
}

#breadcrumb li a:hover:after{
 border-left-color: #7dd49a;
}

This is what your finished product should look like (notice that the hover effect is applied to Crumb 4).

WordPress or Drupal: Which One is Right for You?

WordPress and Drupal are both popular, powerful CMS platforms, and if you’re a web developer, chances are that you’re going to have to work with both of them at some point in your career. Most developers have their own preferences for which one they’d rather work with, and these preferences can sometimes be based on arbitrary things, like which platform you worked with first, or they can be based on more concrete reasoning, like your level of PHP skills.

The truth is, WordPress and Drupal, while both CMS platforms, are similar in the broadest of terms, but it many ways they are very, very different. Neither is better than the other, but each is definitely suited to different types of projects and different types of developers. If you’re not sure which is most suited to you and your project, read our analysis of the two CMS platforms below.

WordPress

The greatest thing about WordPress is that it’s super user-friendly. The install only takes five minutes, and once you have everything set up, you can jump right in using any of the default themes, which are all responsive and feature clean, modern designs. With WordPress, it’s possible for even the most inexperienced developers to get a site up and running in a very short time frame.

If you’re not into any of the default themes, you’re in luck, because there are thousands of free and premium WordPress themes available, both from WordPress’s theme directory and from third parties, so you can make your site look great without the need for a developer or designer.

The other great thing about WordPress are the plugins. There are almost 50,000 free plugins available to add to your site, and they can all be added using your WordPress dashboards, so technically you don’t need to have any coding skills or FTP experience to add the plugins to your server (although it probably helps). Plugins are used primarily to add functionalities to your site, so WordPress is a great CMS option for people who are tech-savvy but not necessarily coders.

WordPress also has a great support community in the form of forums. If you have a question, chances are it has already been asked and answered somewhere in the archive. For all of these reasons, WordPress is the better CMS platform for people who don’t code, or for people who are new to coding. For a lot of developers, WordPress is the first CMS they use, which might explain why so many people have a preference for it, and why it’s a lot more popular than Drupal.

Drupal

WordPress’s user-friendliness is limiting in a lot of ways. Drupal relies a lot more on code than WordPress does, and using the dashboard interface isn’t as intuitive for a beginner as using WordPress is — generally, when you’re using Drupal, you have to use a lot more PHP than when you’re working on WordPress. Because Drupal is a little more technical than WordPress, it’s also a lot more powerful and dynamic.

Drupal has a lot of free themes and plugins (in Drupal they’re called modules) available to download, but they often require a little more time and effort to get up and running than the ones on WordPress…the default theme in Drupal is neither beautiful or responsive. You can get some that are, but you’ll have to search for them on your own. Drupal’s capabilities, however, are greater than those of WordPress, and the performance of a Drupal site is usually better and faster than a WordPress one. Like WordPress, Drupal also has a great support community.

If you’re just learning to code, Drupal probably isn’t for you. You should know a decent amount of PHP before starting to work on a Drupal build. However, if you’ve got some PHP knowledge or a coding background and want to build a powerful, dynamic site, Drupal is probably the way to go.

Conclusion

Use WordPress if you’re a beginner, or if the person who’s going to be managing the site is a beginner or not a coder. WordPress is also a great platform to use if you’re an experienced coder but are building a blog, or a site for a business that doesn’t need many custom functionalities.

If you aren’t an absolute beginner and/or you want to create a dynamic site that can handle all different types of content and perform many custom functionalities, Drupal should be your CMS of choice.

Adding AMP Support to WordPress Sites

The Accelerated Mobile Pages (AMP) Project is one of the latest initiatives by developed by Google to enhance the quality of mobile browsing. AMPs are an open-source framework developed with a goal of making mobile web pages quicker to load, more lightweight, and simpler in terms of both design and code.

The reason AMP pages are so much quicker and simpler than standard web pages is that they’re limited to certain libraries and functionalities. Only a certain set of HTML tags are allowed to appear in AMPS, and this also applies to CSS and jQuery. In fact, AMP pages draw from their own streamlined CSS and JS libraries to make sure that the code is as lightweight as possible.

Additionally, AMP pages are cached in the cloud to significantly reduce page load time and let users access their desired content almost immediately. The benefits of using AMP for your sites also go beyound giving your users a better UX on mobile, because it can also improve your search ranking — sites that use AMP are also more likely to be ranked higher on a Google search executed by a mobile device. Setting up AMP on your sites from scratch can be confusing and time-consuming, but if you’ve got a WordPress site, the install couldn’t be easier when using any of the following plugins:

AMP

This plugin was developed by the people over at Automattic and is incredibly easy to use. Once it’s installed, it’s pretty much ready to go. To see the AMPs, you just need to install the plugin and then view any post with “/amp” appended to the end of the URL, so for example: www.mysite.com/mypost/amp. Once you view the page, you’ll see that the page has a clean design, the main focus of the page is the content, and that, of course, it’s quick to load.

AMP for WP – Accelerated Mobile Pages

AMP for WP is a similar to the AMP plugin above, but with support for a few more WordPress features. This plugin has support for related posts, recent comments, Google AdSense, Google Analytics, color scheme customizations, social sharing buttons, social media embed support, and more. This plugin is a great option for those who want to benefit from using AMP without compromising too much of their site’s functionality, style, ad revenue, etc.

Facebook Instant Articles & Google Accelerated Mobile Pages by PageFrog

This PageFrog Plugin is another popular plugin that will convert your posts into AMP format. A bonus of using this plugin is that it will also make your posts compatible with Facebook Instant Articles (FBIA), which is content that can be served to users from within Facebook’s mobile app, so if a user clicks on your link from within Facebook’s mobile app, they won’t be brought to an external browser, but can actually view your post within Facebook’s app. This plugin also gives you control over styling, branding, and theme customization, and allows you to run ads on the AMP and FBIA pages as well.

Guide to Creating CSS Toggle Switch

This guide will show you exactly the code you’ll need to create a cool toggle switch that sort of resembles the ones used on iOS devices. The toggle switch is interactive, so that when the user clicks on the switch, it actually changes positions (and reveals a color on the toggle bar that signifies whether or not the switch is “active”). The toggle is actually created by adding some serious styling to your average checkbox input HTML tag. To start building this effect, all you really need are a few lines of HTML.

The HTML

<div class="container">
 <input type="checkbox" name="toggle" id="toggle">
 <label for="toggle"></label>
</div>

As you can see, all we really need is a standard input tag to get the ball rolling. The real magic happens when we add the CSS, but make sure you don’t forget to include the label tag! See the CSS below to find out just how handy that label tag becomes.

The CSS

body{
 background-color: #d9d9d9;
}

input#toggle {
 max-height: 0;
 max-width: 0;
 opacity: 0;
}

input#toggle + label {
 display: block;
 position: relative;
 box-shadow: inset 0 0 0px 1px #a6a6a6;
 height: 30px;
 width: 50px;
 border-radius: 15px;
 margin: 100px auto;
 background-color: rgba(255, 255, 255, .3);
}

input#toggle + label:before {
 content: "";
 display: block;
 height: 30px;
 width: 30px;
 top: 0;
 left: 0;
 border-radius: 15px;
 background: rgba(172, 230, 0, 0);
 -moz-transition: .3s ease-in-out;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}

input#toggle + label:after {
 content: "";
 position: absolute;
 display: block;
 height: 30px;
 width: 30px;
 top: 0;
 left: 0px;
 border-radius: 15px;
 background: white;
 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
 -moz-transition: .3s ease-in-out;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}

input#toggle:checked + label:before {
 width: 50px;
 background: #ace600;
}

input#toggle:checked + label:after {
 left: 20px;
 box-shadow: inset 0 0 0 1px rgba(172, 230, 0, 1), 0 2px 4px rgba(0, 0, 0, .2);
}

One little toggle switch takes about 60 lines of CSS to create, which is quite a lot, but once you see the final effect (image below), you’ll see that it’s totally worth it. Below is an image of the toggle switch in the “off” position.

Some things of note in the CSS: the box-shadow property is one that is used often to create that 3D look. The border-radius property is used to give the input tag that oblong, rounded corner shape we’re so used to seeing on our mobile devices. The CSS also makes use of the label input and the :checked, :before and :after pseudo-selectors to create the toggle functionality and control the movements of the rounded “toggle”. See the image below of the toggle in the switched on position (this is the default).

Best Mobile Analytics Solutions

Analytics are important, not only for tracking the amount of people visiting your site, but also to track their behavior once they’re on it. For mobile apps and mobile sites, popular analytic tools like Google Analytics don’t always work as well tracking behavior of app users as they do tracking the behavior of users on a desktop site. If you really want to analyze the behavior of your app users, you need to use analytic resources built specifically for mobile apps and sites. Take a look at the list below to see some of the best.

Flurry Analytics

Flurry Analytics can be used to easily and conveniently track the performance of your iOS and Android apps. You can track users’ actions and behaviors in order to learn about trends. It also gives you access to your users’ demographics and interests so as to really give you a feel for who your users are and what sort of content they may be interested in.

Countly

Countly is a mobile app analytics tool that supports apps on iOS, Android, Windows Phone, and Blackberry. It features an easy to use dashboard and some great options for tracking and user interaction, including access to the habits and session details of your users, and the ability to interact with them using push notifications. Countly also gives you access to crash reports for all different OS builds of your apps, AND it allows you to track the effectiveness of your social media campaigns.

Localytics

Localytics provides real-time analytics for your mobile apps, in addition to targeted, personalized messaging options for your users and marketing engagement and campaign tracking features. They also offer different pricing packages to scale with the size of your business.

Amplitude

Amplitude lets you easily track user behavior across platforms so that you can easily compare behaviors on web, tablet, and mobile versions of your sites and applications. Amplitude also offers free options for using their service, as well as paid elite and enterprise options.

Answers

Answers is a mobile app analytics platform that supports iOS and Android apps. The premise of the platform is that they give you the “answers” you’re looking for — performance metrics, user history and interests, trends — without you having to wade through a lot of data to figure out all of the “answers” on your own.

Best Resources to Learn to Code for Free

If you’ve ever wanted to learn how to code (or maybe you know some basics, but would like to learn more), now’s the time to do it. There are dozens of free code classes and bootcamp-type courses available to accommodate all levels and all schedules so that you can learn at your own pace. Whether you’ve never coded before in your life, or you’re an experienced coder looking to brush up their skills or learn a new language, there’s a good, free code course resource out there for you. Take a look at the list of free coding resources below to see if there’s something that suits you!

Free Code Camp

Free Code Camp is a unique resource in that it doesn’t just offer free code lessons, but it also allows its “students” to use their newly-acquired coding skills to work on real projects for non-profit organizations. Not only do you learn valuable coding skills, but you also get to start creating a portfolio that can be really helpful to you if your ultimate goal is to get a job in web development.

Codecademy

Codecademy is one of the most popular free coding resources, and has free interactive courses for several different languages, including HTML & CSS, JavaScript & jQuery, Python, Ruby, and PHP. In addition to teaching the fundamentals of these popular languages, they also offer courses in practical things, like website deployment, how to use Git, how to use SQL, how to learn Angular and Sass, etc. This resource is a great one for someone who’s interested in learning to code and wants to learn a little to see if it’s right for them.

Coursera

Coursera lets you take free coding classes from actual accredited schools and universities (schools like Hopkins, Duke, and Wesleyan, just to name a few, are among some of the ones offering free coding and computer science courses). While you will have to pay for some of the more advanced classes, it’s still a great research to receive some top notch education for free.

Udemy

Udemy is an online learning platform that offers over 40,000 courses in many different subjects, including coding and web development. Like Coursera, you’ll have to pay for some of the courses (especially the non-introductory ones), but if you’re looking to get a solid education in web development languages, this is the place to go.

HTML5 Rocks

HTML5 Rocks is a Google project that offers free tutorials and resources tailored to people who want to learn about code and tech. This site is an awesome resource for people who are already interested in web development or already know a little code, but are striving to learn more and be better informed.

Khan Academy

Like Udemy, Khan Academy offers courses in a variety of subjects, but their computer programming courses are known to be quite good. You can use Khan’s courses to teach yourself the basics of coding languages, and then you can also choose to take more advanced courses that will show you how to use the fundamentals to create projects to add to your portfolio.

Code Avengers

Code Avengers helps you to learn code interactively by letting you create web applications while learning new languages. When you’re done, you can add the projects to your portfolio to show off your skills and your coding knowledge.

edabit

Learn to code with interactive challenges. Gain XP, unlock achievements and climb the leaderboard. Edabit goes beyond basic syntax and teaches its users how to think like real programmers, so they can finally start making things.