Wednesday, February 10, 2016

How To Write a Syntax Highlighting Package for Atom

Atom is a fantastic editor and comes by default with all you need to develop your project … except maybe for one thing – that one detail that you’d love to see in Atom. That one thing could be anything: a keyboard shortcut to write faster; an important feature; or even syntax highlighting for a language you use but that isn’t supported by default.

The good news is that Atom is ready to welcome a lot of packages. You can extend its default features with these packages, written by the community. But what if you don’t find the package you’re searching for?

Writing your own package is not so complicated, so why not? In this tutorial we’ll see how to create our own package for Atom, by taking the example of a syntax highlighting package.

What We’ll Build

Recently I wanted to develop some programs in the Scilab language. As it’s a language used in maths, it’s not really the type of language we find by default in Atom, and there was no package for its syntax. That’s why I decided to write my own package: language-scilab.

Here we’ll write a similar package, for the language you want. We’ll see first how to initialize a brand new package with a valid package.json file. Then we’ll write some rules to highlight our language. Finally, we’ll see how to publish our package – so that any user of Atom will be able to use it.

Initializing a New Atom Package

Atom uses a configuration folder to store all your personal options, but also the packages you installed. This folder is named .atom, and is located in your personal folder (/home/user/.atom for instance).

Viewing the packages folder

The packages you install are all located in the packages subfolder of this folder. Every package has its own folder. So the first step to create your package is to create the your folder, named after your package. In our example, I create the folder language-mylanguage: it’s a sort of naming convention when we want to add the support for a language.

For now, your package is invalid. To be recognized by Atom, it needs a package.json file at the root of the folder you just created.

The package.json file

This file contains some information, like the name of your package or the repository where we can find it. Below is the package.json file of our language-mylanguage package (explanations follow):

{
  "name": "language-mylanguage",
  "version": "0.0.0",
  "description": "Mylanguage language support in Atom",
  "engines": {
    "atom": "*"
  },
  "dependencies": {},
  "repository": {
    "type": "git",
    "url": "http://ift.tt/1ShtaYz;
  },
  "bugs": {
    "url": "http://ift.tt/1mtsJw7;
  },
  "license": "MIT"
}

We find several entries in this file. First, the name one: as you can guess, it contains the name of your package. You can (and you should) add a description with the description entry, basically to let the other users know about what your package does.

The version entry is filled with a version number, which must respect the following convention: major.minor.bug. Here we indicate 0.0.0. Even if you know that you’re developing the version 1.0.0 or 0.1.0 or your package, indicate 0.0.0. We’ll see why when we publish our package.

The engines entry can be used to indicate the minimal required version of Atom for your package to work. In the same vein, we find the dependencies entry to indicate other packages needed by your package. It must be used if you create a plugin for another package.

Then we find the repository entry. It’s the URL indicating where the public repository of your package is located. If you want to publish your package, you need this entry. You can leave it empty for now if you don’t want to create your public repository right now, but think about filling it before publishing.

The bugs entry is the URL where we can report issues affecting your package. Here we use the default page GitHub offers for every repository. Finally, a license name can be indicated with the license entry.

Other entries can be filled if you need them. They’re not mandatory. All available entries can be found on Atom documentation.

Now that your package has a valid package.json file, Atom can recognize it and load it. However, it’s totally useless right now, so it’s time to make it useful by giving it some features.

Note that Atom won’t load your package now: it loads all the installed packages at start. You can, however, force Atom to reload the packages with View/Reload. It’s useful for seeing the changes you just did on your package.

Continue reading %How To Write a Syntax Highlighting Package for Atom%


by Jérémy Heleine via SitePoint

Audio Player with HTML5 and jQuery

A nice looking audio player that you can use on your website, created by using HML5 Audio, jQuery and CSS.


by via jQuery-Plugins.net RSS Feed

Quick Tip: Master Closures by Reimplementing Them from Scratch

This article was peer reviewed by Tim Severien and Michaela Lehr. Thanks to all of SitePoint's peer reviewers for making SitePoint content the best it can be!

To say there are a lot of articles about closures would be an understatement. Most will explain the definition of a closure, which usually boils down to a simple sentence: A closure is a function that remembers the environment in which it was created. But how does it remember? And why can a closure use local variables long after those variables have gone out of scope? To lift the veil of magic surrounding closures, I'm going to pretend that JavaScript doesn't have closures and can't nest functions, and then we're going to re-implement closures from scratch. In doing so, we'll discover what closures really are and how they work under the hood.

[author_more]

For this exercise, I'll also need to pretend that JavaScript has one feature it doesn't really have. I'll need to pretend that an ordinary object can be called as if it were a function. You may have already seen this feature in other languages. Python lets you define a __call__ method, and PHP has a special __invoke method, and it's these methods that are executed when an object is called as if it were a function. If we pretend that JavaScript has this feature too, here's how that might look:

// An otherwise ordinary object with a "__call__" method
let o = {
  n: 42,
  __call__() {
    return this.n;
  }
};

// Call object as if it were a function
o(); // 42

Here we have an ordinary object that we're pretending we can call as if it were a function, and when we do, the special __call__ method is executed, same as if we had written o.__call__().

With that, let's now look at a simple closure example.

function f() {
  // This variable is local to "f"
  // Normally it would be destroyed when we leave "f"'s scope
  let n = 42;

  // An inner function that references "n"
  function g() {
    return n;
  }

  return g;
}

// Get the "g" function created by "f"
let g = f();

// The variable "n" should be destroyed by now, right?
// After all, "f" is done executing and we've left its scope
// So how can "g" still reference a freed variable?
g(); // 42

Here we have an outer function f with a local variable, and an inner function g that references f's local variable. Then we return the inner function g and execute it from outside f's scope. But if f is done executing, then how can g still use variables that have gone out of scope?

Here's the magic trick: A closure isn't merely a function. It's an object, with a constructor and private data, that we can call as if it were a function. If JavaScript didn't have closures and we had to implement them ourselves, here's how that would look.

class G {
  // An instance of "G" will be constructed with a value "n",
  // and it stores that value in its private data
  constructor(n) {
    this._n = n;
  }

  // When we call an instance of "G", it returns the value from its private data
  __call__() {
    return this._n;
  }
}

function f() {
  let n = 42;

  // This is the closure
  // Our inner function isn't really a function
  // It's a callable object, and we pass "n" to its constructor
  let g = new G(n);

  return g;
}

// Get the "g" callable object created by "f"
let g = f();

// It's okay if the original variable "n" from "f"'s scope is destroyed now
// The callable object "g" is actually referencing its own private data
g(); // 42

Continue reading %Quick Tip: Master Closures by Reimplementing Them from Scratch%


by Jeff Mott via SitePoint

This Week's HTML5 and Browser Technology News (Issue 226)


Read this e-mail on the Web
HTML 5 Weekly
Issue 226 — February 10, 2016
Ana Tudor
The most extensive walkthrough of background-clip and its potential uses I’ve ever seen. You’ll pick up something useful here if CSS is your bag.


David Valdman
Fast, uses 3D rendering and CSS3, and lets you coordinate and animate hundreds of DOM elements together. Looks very promising.


Paul Bakaus
A look at some updates to Chrome’s DevTools, including support for custom CSS properties and a new ‘dark theme’ (a la Firefox Developer Edition).


Telerik Kendo UI  Sponsored
Will JavaScript continue to rise in use? What’s in store for the most popular JavaScript frameworks? Learn the answers to these questions in this whitepaper containing interviews with developers building the JavaScript of tomorrow.

Telerik Kendo UI

Luke Fender
Give it the URL of a CSS file and it’ll highlight any unnecessary complexity and help you analyze your selectors for duplicates, etc.


The New York Times
A quick look at the technical challenges the New York Times is facing breaking away from Flash to entirely using HTML5 video.


Jake Archibald
A call for help on a matter that affects service workers. How should they work with base URIs?


Jvalen
Draw pixel art with this simple online tool and get a CSS box-shadow value to use in your own projects to reproduce the image without any extra files.


Wes Bos
One key benefit of native CSS variables is they can be updated dynamically by JavaScript, unlike, say, Sass variables.


SitePoint
PostCSS is a CSS parser and framework for creating plugins that can analyse, lint, and transform parsed CSS.


Jobs

  • Lead, Front-end & Design (London, UK)You’ll join our team of designers & front-end devs that works across all product teams to create a unified design and UX for our apps. You’ll build a range of websites that tell our story using HTML, CSS, and SASS. AlphaSights
  • Stop Applying to Jobs - Let Companies Apply to YouOn Hired, sign up in 10 minutes and get offers from top companies like Facebook, Uber, & Stripe. Engineers get an average of 5 offers on the platform in 1 week. Try it today. Hired.com

In brief

Curated by Peter Cooper and published by Cooper Press.
Want to post a job? E-mail us or use our self-serve system.

Unsubscribe : Change email address : Read this issue on the Web

Published by Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK


by via HTML5 Weekly

This Week in Mobile Web Development (#94)

Read this on the Web

Mobile Web Weekly February 10, 2016   #94
Holly Schinsky recommends
jQuery Mobile 1.5: It's Alive — jQuery Mobile recently posted a status update after over a year of silence. Find out what to expect in their upcoming 1.5 release.
Gajotres.net
Holly Schinsky recommends
Build Your First Mobile App With Ionic 2 & Angular 2 — Part 4 in a series on building your first mobile app with Ionic 2.
gonehybrid.com
Brian Rinaldi recommends
Why Mobile First Is Outdated — The author argues that mobile is secondary for business software and that you need to focus on the jobs that users need to do rather than the screens.
Paul Adams
This issue is sponsored by RANGLE.IO
The Mobile Ecosystem in 2016 and What You Need to Know — Rangle’s CEO looks at the current state of hybrid mobile, including the latest from PhoneGap Day, insights on PhoneGap/Cordova, Ionic, React Native and NativeScript, as well as interviews with Adobe, Telerik and Ionic. Find out what you should know about the mobile landscape and how it’s moving forward in 2016.
RANGLE.IO

Peter Cooper recommends
Google AMP Launch Looms, Designed to Reinvent Mobile Web — A high level look at AMP (Accelerated Mobile Pages). “In short, AMP is like a diet version of HTML.”
Ad Age
Brian Rinaldi recommends
Is the Hamburger Menu a Problem? — Ah, the hamburger menu, a source of endless controversy. This author says that using or not using the icon simply based upon the advice of some article is wrong.
Tri Branch Vo
Brian Rinaldi recommends
What Sucks About React Native — A fan of React Native shares the parts of it that he doesn’t like.
Grant Laborde
Brian Rinaldi recommends
IonicRealty: New Ionic 2 Sample Application — An updated Ionic 2 sample using the recently released beta.
Christophe Coenraets
Brian Rinaldi recommends
Mozilla Outlines the End of Firefox OS on Phones — Firefox OS development will cease by May and Mozilla is moving towards IoT, though, they say, inspired by their Firefox OS work.
The Verge
Holly Schinsky recommends
PhoneGap 6.0.0 Now Available on Build — PhoneGap 6.0.0 includes major version increments on all 3 platforms and is now available on PhoneGap Build.
PhoneGap Build Blog
Holly Schinsky recommends
The Lean Startup Mobile Tool of Choice is PhoneGap — The Rangle.io CEO discusses some strategic reasons for adopting PhoneGap/Cordova in any exciting Lean Startup project.
Nick Van Weerdenburg - PhoneGap Blog
Holly Schinsky recommends
Example Code using the Latest Push Plugin with ngCordova and Ionic — How to use the latest PhoneGap push plugin in your apps built with ngCordova and Ionic.
Yafra
Brian Rinaldi recommends
Mobify Astro Docs — Like Project ACE, Astro is a framework (discussed at PhoneGap Day US) that allows the use of native UI elements within hybrid Cordova apps.
Mobify
Holly Schinsky recommends
20+ Docs and Guides for Front-end Developers (No. 7) — 20+ learning resources, interactive playgrounds, and other goodies for front-end learning.
SitePoint
Holly Schinsky recommends
New in Cordova 6: App Starter Templates — Apache Cordova 6 was released last week at PhoneGap Day and includes a new useful template feature, read on for details on how to use.
Medium - Modus Create
Brian Rinaldi recommends
iOS App Distribution in 7 Steps — Rob Lauer provides a detailed walkthrough for developers in the process of distributing their iOS apps for testing or for sale in the marketplace.
Telerik Developer Network
Job listing
Stop Applying to Jobs - Let Companies Apply to You — On Hired, sign up in 10 minutes and get offers from top companies like Facebook, Uber, & Stripe. Engineers get an average of 5 offers on the platform in 1 week. Try it today.
Hired.com

Curated by Brian Rinaldi and Holly Schinsky for Cooper Press.
Cooper Press is located at Office 30, Fairfield Enterprise Centre, Louth, LN11 0LS, UK
Update your email address
or stop receiving MWW here


by via Mobile Web Weekly

Introducing the One Page Love Job Board

opl-thumbnail-jobsWe’re officially out of BETA! Thank you to all the testers and job posters. Our Job Board now has a decent collection of designer and developer jobs to start browsing.

We’re keeping things simple for now and just plan to list quality jobs ranging from full time, part-time, freelance, internship and projects.

Jobs also state if they are location-dependant for if they’re available as remote positions.

How much does a job listing cost?

The cost is $29 to post a job listing and it stays live for 30 days. We will do our best to bring your job to the One Page Love readers. Each job is also tweeted to our 4k Twitter followers at our best engagement times. The price is also to keep the quality of the job submissions up, much alike our One Page website submissions.

Future plans

Once we have an active flow of jobs, we’ll add search and filter functionality. For now we’re keeping things nice, clean and mobile-friendly:)

Hope you find our Job Board a good resource. Please send us as much feedback as possible. Email me on rob@onepagelove.com or tweet me at @hitdelete – thank you!

Visit the new One Page Love Job Board.


by Rob Hope via One Page Love

Building an Spress Svbtle Theme – Responsive Static Blogs!

You may have heard of Sculpin - a static site generator for PHP. Static blogs are, as you may know, blogs which you dynamically write in your app or on your local machine, and then export as a pure HTML version for hosting on static-only servers, for speed, reliability, and offline-first friendliness.

While easy to use and fast to set up, Sculpin’s development has stagnated a bit and the documentation leaves much to be desired. Spress is, in a way, its spritual successor. Much better documentation, much more flexible configuration, much easier to extend, and just as easy to use with almost the same API and commands.

Spress header image

In this tutorial, we’ll be building an Spress setup for generating a static blog with a custom theme.

Bootstrapping

This tutorial will assume you have a working PHP environment like Homestead Improved. For convenience, the following few lines will get you started immediately:

git clone http://ift.tt/1Lhem4x hi_spress
cd hi_spress
bin/folderfix.sh
vagrant up; vagrant ssh

After we’re in the VM, we can install Spress with:

wget http://ift.tt/1KFHDLg
sudo mv spress.phar /usr/local/bin/spress
sudo chmod +x /usr/local/bin/spress

Spress is now available system-wide (or VM-wide if you’re using a VM), which can be verified by running spress:

Screenshot of Spress output

To create a sample site, we can use the instructions from the docs:

cd ~/Code
spress site:new myblog spresso
cd myblog
spress site:build --server

The site should now be accessible via http://localhost:4000 or if you’re in a VM like Homestead Improved, you should first forward port 4000 in Homestead.yaml, run vagrant provision outside of the VM, and then access the site via http://ift.tt/1KFHDLj:

Screenshot of working demo app

Continue reading %Building an Spress Svbtle Theme – Responsive Static Blogs!%


by Bruno Skvorc via SitePoint