Do you want to create social media videos for your business? Is your lack of video creation skills holding you back? The right apps make it easy to produce social videos by yourself in minutes. In this article, you’ll discover three tools and step-by-step tutorials to help you create stunning promotional videos. #1: Create an [...]
This post 3 Video Storytelling Tools for Social Marketers first appeared on .
- Your Guide to the Social Media Jungle
In this one-on-one episode, Tim and David discuss the ins and outs of job interviews in the web industry, including tips for preparing for and getting the most out of interviews, the pros and cons of recruiters, the merits of whiteboards, and curly questions you definitely don't want to be asked.
Continue reading %Versioning Show, Episode 13: Getting a Web Development Job%
I’ve always wanted to make a Minecraft mod. Sadly, I was never very fond of re-learning Java, and that always seemed to be a requirement. Until recently. Thanks to dogged persistence, I’ve actually discovered a way to make Minecraft mods, without really knowing Java. There are a few tricks and caveats that will let us […]
Continue reading %Modding Minecraft with PHP – Buildings from Code!%
Could there be anything better than what freelancing promises? Personal freedom, a chance to do something you are genuinely passionate about, and set your own schedule — all wrapped in one! It's no wonder freelancing is catching up as a preferred career choice the world over.
But, as you settle into your new way of life, a realization dawns — all that freedom is not without a cost, the biggest of which is health. The amount of time and effort freelancers and entrepreneurs spend on their enterprises, particularly when starting out, is already the stuff of legend.
Such an attitude (while no doubt badass) takes a huge toll on health. Finding time to exercise can become difficult. Any professional working long hours sitting in front of a desk is given to a variety of health problems including a heightened risk of heart disease, carpal tunnel syndrome, weak eyesight, anxiety, stress and posture related issues.
Writers, freelancers and bloggers who are always on the move also find it hard to stay in shape as they have difficulty accessing training equipment.
But should this really be the case?
Not in the least! I firmly believe most freelancers (or even regular people) expose themselves to such risks due to a persistent belief that staying fit is all about working out for 1-2 hours at a gym — big mistake!
A study by Boston University found that 10 minute bursts of exercise were just as effective as working out for hours in a gym for adequate overall health, as long as they both add up to the same amount of time spent exercising each week. In fact, by simply committing to 5-10 minutes jaunts of high intensity training, you can mitigate many of the health issues that come with a tied-to-desk lifestyle.
If any of this sounds like why you are still not working out, then calisthenics can be the perfect way to kick your butt back into shape!
Calisthenics are a form of training where you only use your bodyweight to add resistance to an exercise. These exercises have been around for millennia and can be done either as a complete regime, or added to other forms of workout as warm up or warm down.
Calisthenics are particularly useful for freelancers and traveling entrepreneurs as they do not require any equipment, yet can be extremely effective when done right. Indeed, there is a very lively debate as to whether weights are needed at all when we are hulking around with so much weight already!
Before you get started, though, consult with your physician to find out whether you can do the following exercises safely. They will place a lot of stress on your body and if you have or are prone to injuries, it's best to avoid any movement which can aggravate them.
With that settled, here are three exercises guaranteed to give you a killer tip to toe workout without impinging on your schedule.
Without a doubt one of the best leg workouts you will ever do! Hindu squats hit the glutes, quadriceps, hamstrings, hip flexors and calves while giving your lungs something to remember as well.
Start by standing with your feet shoulder width apart.
When starting out, aim to complete 20-30 reps in a set at a moderate pace. This should take no more than 40-50 seconds. Slowly work your way up to 100 reps.
The first time I tried the Hindu squats, I was wobbling silly at 40 reps, and I could barely walk for the next few days even though I was working out regularly, so I know at first-hand how effective this exercise is!
A complete lower body exercise in itself, these squats torch fat like there's no tomorrow and promote lean tissue growth while giving you a pretty thorough aerobic workout.
Here's an awesome instructional video on how to perform the Hindu squat properly.
[youtube vw2OT_-M8ek]
Freelancers can face posture-related problems because of long hours at the desk. Apart from the frontal rectus abdominis muscles, your core also has important muscles including obliques found on the sides of your abdominal section, and spinae erector muscles which run along the length of the spine. All of these muscles help with your posture and can become weak if ignored. A bad posture can lead to backaches and in extreme cases, a herniated spinal column (slip disk) as well.
Continue reading %3 Quick, Formidable Calisthenics Exercises for the Hustling Freelancer%
I've always wanted to build a 3D game. I've just never had the time and energy to learn the intricacies of 3D programming. Then I discovered I didn't need to...
While tinkering one day, I got to thinking that maybe I could simulate a 3D environment using CSS transformations. I stumbled across an old article about creating 3D worlds with HTML and CSS.
I wanted to simulate a Minecraft world (or a tiny part of it at least). Minecraft is a sandbox game, in which you can break and place blocks. I wanted the same kind of functionality, but with HTML, JavaScript, and CSS.
Come along as I describe what I learned, and how it can help you to be more creative with your CSS transformations!
Note: Most of the code for this tutorial can be found on Github. I've tested it in the latest version of Chrome. I can't promise it will look exactly the same in other browsers, but the core concepts are universal.
This is just half of the adventure. If you'd like to know how to persist the designs to an actual server, check out the sister post, PHP Minecraft Mod. There we explore ways to interact with a Minecraft server, to manipulate it in real time and respond to user input.
I've written my fair share of CSS and I've come to understand it quite well, for the purpose of building websites. But that understanding is predicated on the assumption that I'm going to be working in a 2D space.
Let's consider an example:
.tools {
position: absolute;
left: 35px;
top: 25px;
width: 200px;
height: 400px;
z-index: 3;
}
.canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
Here we have a canvas element, starting at the top left corner of the page, and stretching all the way to the bottom right. On top of that, we're adding a tools element. It starts 25px from the left and 35px from the top of the page, and measures 200px wide by 400px high.
Depending on the order div.tools and div.canvas are added to the markup, it's entirely possible that div.canvas could overlap div.tools. That is except for the z-index styles applied to each.
You're probably used to thinking of elements, styled in this way, as 2D surfaces with the potential to overlap each other. But that overlapping is essentially a third dimension. left, top, and z-index may as well be renamed to x, y, and z. So long as we assume every element has a fixed depth of 1px, and z-index has an implicit px unit, we're already thinking in 3D terms.
What some of us tend to struggle with are the concepts of rotation and translation in this third dimension...
CSS translations duplicate this familiar functionality, in an API that extends beyond the limitations top, left, and z-index place on us. It's possible to replace some of our previous styles with translations:
.tools {
position: absolute;
background: green;
/*
left: 35px;
top: 25px;
*/
transform-origin: 0 0;
transform: translate(35px, 25px);
width: 200px;
height: 400px;
z-index: 3;
}
Instead of defining left and top offsets (with an assumed origin of 0px from the left and 0px from the top), we can declare an explicit origin. We can perform all sorts of transformations on this element, for which use 0 0 as the centre. translate(35px, 25px) moves the element 35px to the right and 25px down. We can use negative values to move the element left and/or up.
With the ability to define an origin for our transformations, we can start to do other interesting things as well. For example, we can rotate and scale elements:
transform-origin: center;
transform: scale(0.5) rotate(45deg);
Every element starts with a default transform-origin of 50% 50% 0, but a value of center sets x, y, and z to the equivalent of 50%. We can scale our element to a value between 0 and 1, and rotate it (clockwise) by degrees or radians. And we can convert between the two with:
45deg = (45 * Math.PI) / 180 ≅ 0.79rad0.79rad = (0.79 * 180) / Math.PI ≅ 45degTo rotate an element anti-clockwise, we just need to use a negative deg or rad value.
What's even more interesting, about these transformations, is that we can use 3D versions of them.
Evergreen browsers have pretty good support for these styles, though they may require vendor prefixes. CodePen has a neat "autoprefix" option, but you can add libraries like PostCSS to your local code to achieve the same thing.
Let's begin to create our 3D world. We'll start by making a space in which to place our blocks. Create a new file, called index.html:
<!doctype html>
<html>
<head>
<style>
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.scene {
position: absolute;
left: 50%;
top: 50%;
margin: -192px 0 0 -192px;
width: 384px;
height: 384px;
background: rgba(100, 100, 255, 0.2);
transform: rotateX(60deg) rotateZ(60deg);
transform-style: preserve-3d;
transform-origin: 50% 50% 50%;
}
</style>
</head>
<body>
<div class="scene"></div>
<script src="http://ift.tt/2erNXZg
jquery-3.1.0.slim.min.js"></script>
<script src="http://ift.tt/2e3DEw3
jquery.transit/jquery.transit.min.js"></script>
<script>
// TODO
</script>
</body>
</html>
Here we stretch the body to the full width and height, resetting padding to 0px. Then we create a smallish div.scene, which we'll use to hold various blocks. We use 50% left and top, as well as a negative left and top margin (equal to half the width and height) to horizontally and vertically centre it. Then we tilt it slightly (using 3D rotation) so that we have a perspective view of where the blocks will be.
Notice how we define
transform-style:preserve-3d. This is so that child elements can also be manipulated in a 3D space.
The result should look something like this:
See the Pen Empty Scene by SitePoint (@SitePoint) on CodePen.
Now, let's start to add a block shape to the scene. We'll need to create a new JavaScript file, called block.js:
"use strict"
class Block {
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
this.build();
}
build() {
// TODO: build the block
}
createFace(type, x, y, z, rx, ry, rz) {
// TODO: return a block face
}
createTexture(type) {
// TODO: get the texture
}
}
Each block needs to be a 6-sided, 3D shape. We can break the different parts of construction into methods to (1) build the whole block, (2) build each surface, and (3) get the texture of each surface.
Each of these behaviours (or methods) are contained within an ES6 class. It's a neat way to group data structures and the methods that operate on them together. You may be familiar with the traditional form:
function Block(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
this.build();
}
var proto = Block.prototype;
proto.build = function() {
// TODO: build the block
};
proto.createFace = function(type, x, y, z, rx, ry, rz) {
// TODO: return a block face
}
proto.createTexture = function(type) {
// TODO: get the texture
}
This may look a little different, but it's much the same. In addition to shorter syntax, ES6 classes also provide shortcuts for extending prototypes and calling overridden methods. But I digress...
Let's work from the bottom up:
createFace(type, x, y, z, rx, ry, rz) {
return $(`<div class="side side-${type}" />`)
.css({
transform: `
translateX(${x}px)
translateY(${y}px)
translateZ(${z}px)
rotateX(${rx}deg)
rotateY(${ry}deg)
rotateZ(${rz}deg)
`,
background: this.createTexture(type)
});
}
createTexture(type) {
return `rgba(100, 100, 255, 0.2)`;
}
Each surface (or face) consists of a rotated and translated div. We can't make elements thicker than 1px, but we can simulate depth by covering up all the holes and using multiple elements parallel to each other. We can give the block the illusion of depth, even though it is hollow.
To that end, the createFace method takes a set of coordinates: x, y, and z for the position of the face. We also provide rotations for each axis, so that we can call createFace with any configuration and it will translate and rotate the face just how we want it to.
Let's build the basic shape:
Continue reading %Building a JavaScript 3D Minecraft Editor%