I switched over to Atom from Sublime Text a couple of months ago.
I couldn’t be happier.
Lots of Sublime Text packages are built in, so no need to look for extra packages.
Atom has its own package manager which is easy to use.
Give Atom a try if you are a Sublime user.
Detect OSX or Windows with Javascript
We can easily detect whether client’s machine is PC or Mac with Javascript.
We can just analyze the value of navigator.appVersion or navigator.userAgent. Be careful, some clients will spoof the userAgent.
// Javascript code for OSX or Windows detection
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
document.write('Your OS: '+OSName);
Regex Password Validation
I needed to find a regex pattern for validating a password for an Angular app.
The requirement were to have at least 1 lowercase character, 1 uppercase character, 1 number, and no repeating character more than 2. For the ng-pattern, I came up with is below
/^(?!.*([A-Za-z0-9])\1{2})(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/
Breaking It Down
(?!.*([A-Za-z0-9])\1{2}) Make sure that no characters repeat more than twice
(?=.*[a-z]) requires at least one lowercase
(?=.*[A-Z]) requires at least one uppercase
(?=.*\d) requires at least one digit
Idea Generation
It’s easier to filter the million ideas in your head when you have an idea system. Most ideas that we work on are actually fragile, where we get discouraged when we start working on it. John Carmack believes in an antifragile idea system which is outlined below.
- You are working on a problem and you get an idea and with it the initial idea high
- You should instantly try to defeat your idea – think of all the ways it could not work, test it out, put it under stress
- If the idea survive the brutal scrutiny then it has legs for further investigations or implementation
- If the idea is implemented and it works then that’s great
- If the idea fails the scrutiny or implementation you can quickly move on to the next idea without feeling the lows because you haven’t obsessed or talked about it i.e. it’s not your pet idea.
From Amjad Masad
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.