This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible. Since releasing babylon.js, the WebGL open-source gaming framework, a couple of years ago, we (with help from the community) are constantly exploring ways to make it even better. I’m definitely more than happy that […]
Continue reading %Experiment with ECMAScript 6 on Babylon.js with TypeScript 1.5%
OpenShift is Red Hat's Platform-as-a-Service (PaaS that allows developers to quickly develop, host, and scale applications in a cloud environment. With OpenShift you have choice of offerings, including online, on-premise, and open source project options.
With Git, developers can deploy web applications in different languages on the platform. OpenShift makes deployment hassle-free and it is also a free and open source software.
In this tutorial, I'll make a rails app with a static page and deploy it to the OpenShift platform. The purpose of this tutorial is to see how the deployment process works.
Continue reading %Deploy Your Rails to OpenShift%
When you write Sass and others use it, it’s quite possible for them to make mistakes with your code. Actually, let’s be honest, when I write Sass and use it days later (or even hours later), I make mistakes with my code. You might too. Fortunately, Sass has a number of functions that help us validate the input that developers put in to the Sass we write.
These techniques are especially useful for teams that share Sass mixins or maintain a starter kit or set of mixins and functions. Developers have two options when using a shared Sass library: either they can email, chat, ping, or otherwise interrupt each other for help with custom mixin, or use detailed documentation including code validation to help each other easily troubleshoot code. (For what it’s worth, this isn’t just a Sass thing: any shared code requires communication through interruption or documentation.) Let’s learn about a few of the most useful Sass validation methods now.
Mixins and functions take parameters. If you’re passing code off to another developer at work or releasing an open source library, you’ll want to make sure the arguments match your intentions. These functions are useful for validating variables in arguments.
variable-exists()If your function or mixin relies on a developer-defined variable, make sure the variable exists by using the aptly-named variable-exists() function. This function returns true or false based on whether or not a variable has been created and defined.
[code language="sass"]
@mixin create-font-size() {
@if global-variable-exists(base-font) {
font-size: $base-font;
} @else {
@error "Please define the variable `$base-font`.";
}
@if global-variable-exists(line-height) {
line-height: $line-height;
} @else {
@error "Please define the variable `$line-height`.";
}
}
// developer's code
$base-font: 18px;
$line-height: 1.5;
.element {
@include create-font-size;
}
[/code]
However, a better option than relying on developers’ correctly setting global variables is to include these default variables in your library:
[code language="sass"]
// Your plugin:
$base-font: 18px !default;
$line-height: 1.5 !default;
@mixin create-font-size() {
// etc...
}
// developer's code:
$base-font: 16px;
p {
@include create-font-size();
}
[/code]
type-of()If you need to know what type of value a variable represents, use type-of(). This function will return one of the following strings:
This is useful for validating certain kinds of input. You can ensure that a developer only passes a numerical value to a mixin that creates sizes:
[code language="sass"]
@mixin size($height, $width: $height) {
@if type-of($height) == number {
height: $height;
} @else {
@warn "Make sure that `$height` is a number.";
}
@if type-of($width) == number {
width: $width;
} @else {
@warn "Make sure that `$width` is a number.";
}
}
[/code]
You can also use type-of() to ensure that color mixins only deal with colors:
[code language="sass"]
@function color-fade($color) {
@if type-of($color) == 'color' {
@return rgba($color, .8);
} @else {
@warn "Make sure you pass a valid color to the color-fade() function.";
}
}
[/code]
If you need a developer to create a map of config settings for a theme, you can make sure they have a valid map:
Continue reading %Validating Input in Sass Mixins and Functions%
Do you want more engagement on your social channels? Have you considered using visual content? There are easy-to-use tools and tactics you can use to create visual content that attracts viewers and engages them. In this article you’ll discover how to use visual content to boost engagement. #1: Create Animated GIFs From YouTube Video Millennials (people reaching young adulthood […]
This post How to Boost Your Engagement With Visual Content first appeared on Social Media Examiner.
Social Media Examiner - Your Guide to the Social Media Jungle