Problem
In jQuery, getting a numeric property returns a string.
What if we want a css property value as an integer or float?
Solution
parseInt($('#elem').css('top'));
parseFloat($('#elem').css('top'));
Problem
How do you expand a div to contain floats?
Elements like div’s grow to fit its contents, but when you use the float property on its children, the div will not expand.
The div will show a height of 0.
Solution to Contain a Float
Set the parent to overflow:auto.
<div style="overflow: auto;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
I have idea debt. I have lists and lists of ideas that never get anywhere, because I never work on them.
I get paralyzed thinking how I want to build an app or researching for weeks on how to collect data for an app. Then I fall in love with a new idea. How I’ll make it to this great app and roll in money, until the next idea comes along.
For the past month, I just do it. I just pick a framework and start building. Just one idea, 30 minutes a day. It’s been working very well. If a new idea pops up, I just put it in a Todoist list and forget about it.
Idea Debt is when you spend too much time picturing what a project is going to be like, too much time thinking about how awesome it will be to have this thing done and in the world, too much time imagining how cool you will look, how in demand you’ll be, how much money you’ll make. And way too little time actually making the thing.
In Part 1, we set up gulpjs and browser-sync to build a static site generator.
In this part, we will set up a template engine called Nunjucks and set up a base template.
Installing Plugins
Let’s start by installing the plugins in our project. In our command line, type the following.
$ npm install --save-dev gulp-nunjucks-render
About Nunjucks
Nunjucks allows us to break our html into smaller reusable pieces that we can use in other html files. We can even inject data to populate our html files. If you have used Flask, you’ll notice the markup is inspired by Jinja2.
Creating a Template
We’ll copy our app/index.html file to app/templates/base.html.
Then, we’ll make a pages directory and move the index.html to app/pages/index.html
$ cp app/index.html app/templates/base.html $ mv app/index.html app/pages/index.html
Folder Structure ├── app │ └── templates │ └── base.html | └── pages │ └── index.html ├── gulpfile.js
We’ll change the markup for base.html to become a Nunjucks template.
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{% block title %} {% endblock %} <!-- we'll change the title -->
</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container container-fluid">
{% block content %} <!--- Our content will be here -->
{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Let’s change the index.html to take advantage of our new base.html nunjucks template.
<!-- index.html -->
{% extends "base.html" %} <!-- we're extending the base template -->
{% block title %}This is the new title of our webpage{% endblock %}
{% block content %}
<h1>Hello<h1>
<p>
We just extended the base template. Anything we put in the content blocks will
be specific to the index.html page.
</p>
{% endblock %}
Integrating Gulpjs and Nunjucks
Now that we have our template and pages file ready.
We’ll import the plugin and write a gulp task for it
// gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var nunjucksRender = require('gulp-nunjucks-render'); // importing the plugin
gulp.task('serve', function() {
console.log('running server');
browserSync({
server: {
baseDir: 'app'
}
});
});
// writing up the gulp nunjucks task
gulp.task('nunjucks', function() {
console.log('nunjucking');
// configuring the templates folder for nunjucks
nunjucksRender.nunjucks.configure(['app/templates/']);
// get the pages files
return gulp.src('app/pages/**/*.+(html)')
.pipe(nunjucksRender())
.pipe(gulp.dest('app'))
});
//default task to be run with gulp
gulp.task('default', ['serve']);
Running Nunjucks
Now, we can run the nunjucks task and then the serve task to see our changes.
$ gulp nunjucks $ gulp serve
Results
Nunjucks took our base template and index file and turned it into a fully compiled html page.
We can make as many pages files as we want and the nunjucks task will compile them into static files.
We can combine the nunjucks and serve commands as another task, but we’ll save it for another tutorial.
You can check out our changes on Github.
I wanted to create a static site without having to copy and paste the header/footer and other common snippets.
There’s lots of tools that would do this including Jekyll (ruby) or Pelican (python), but I wanted something fast and easy to work with.
I figured I could use gulp.js with plugins to create the same type of static site generator as the above two.
Let’s start by installing gulp and browser-sync and creating an index page to display.
Installing Plugins
Let’s start by installing the plugins in our project. In our command line, type the following.
$ npm init $ npm install gulp browser-sync --save-dev
Folder Structure
Let’s create two folders in our project folder called app/ and a file, gulpfile.js
Our Folder Structure
├── app ├── gulpfile.js
Browser Reloading
We are installing a tool called browser-sync which watches our files and automatically reloads the server, so that we do not need to constantly refresh the page. Let’s edit our gulpfile.js to look like the file below.
// gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('serve', function() {
browserSync({
server: {
baseDir: 'app' // Change this to your web root dir
}
});
});
// Default task to be run with `gulp`
gulp.task('default', ['serve']);
The first two ‘var’ lines are importing our plugins. The ‘gulp.task’ functions are running our gulp tasks. One which includes running browser-sync, and the other will default to the first task without any additional command line parameters.
Let’s set up our index page in the app folder. I grabbed the default bootstrap demo site.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Folder Structure ├── app | ├── index.html ├── gulpfile.js
Running Commands
In the terminal, run the command ‘gulp’ or ‘gulp serve’ and it should open a browser window with the index.html page shown.
If you leave gulp running and change the index.html page, it will automatically reload and show you your edits.
You can see what we currently have on Github.
Check out Part 2 on building a static site generator with gulp.
The iPhone can get sluggish and laggy after a while. iOS doesn’t have a button to you can tap to shutdown all apps and free the RAM.
But there’s a quick trick to force your iPhone to free up it’s RAM without a new app to download.
- Hold the Sleep / Wake button until you get the “slide to power off” screen.
- Release the the Sleep Wake Button.
- Now hold the Home button until it goes back to the home screen.
Once the iOS home screen is displayed, the iPhone’s RAM flush should be completed.
Easy orientation change detection for Ionic Apps or mobile web apps.
window.addEventListener("orientationchange",
function() {
if (window.orientation == 90 || window.orientation == -90) {
alert('landscape mode');
} else {
alert('portrait mode;);
}
}, false);
Of course you should go to University and study whatever you want. Of course you should find your passion, however long it takes. You can be whatever you want. You can do whatever you want. Post secondary education is an investment in your future.
But maybe spending $100,000 and eight-years of your life on that double-major in history and fine arts, only to spend the next few years working as a Starbucks barista, wasn’t the wisest use of your time and money.
DIY can be seen as a side-hustle to make more money. Now there’s zero excuse for folks who are unwilling to moonlight, start a side business, or create a product to generate passive income. You can simply increase the amount of DIY projects, like cleaning, to earn more money by saving money.
If you love money, you will probably be better at accumulating more money. You’ll do a lot more research on how wealthy people got rich, what to invest in the stock market, how to get a raise, and all sorts of money attracting stuff.
If you’ve ever had a big idea and thought, “There’s no way I can make time for it,” there are a lot of real-life stories that say, “Yes, you can.”
Craigslist, Spankx, GitHub, Basecamp were all side projects. Wake up earlier or sleep later. You have to prioritize what’s important.