First we will prepare the HTML where we will have the map:

<div id="map-canvas" style="width: 500px; height: 500px;"></div>

That’s all. Just an empty container, with the dimensions . Here I am using inline CSS only for the sake of briefness, but you could use a CSS stylesheet.

Then we will include the Google Maps API V3. Remember that with V3 you don’t need an API key.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>

About the sensor paramenter in the URL, I will quote the Google documentation:

Use of the Google Static Maps API requires that you indicate whether your application is using a “sensor” (such as a GPS locator) to determine the user’s location. This is especially important for mobile devices. Applications must pass a required sensor parameter indicating whether or not your application is using a sensor device.

Applications that determine the user’s location via a sensor must pass sensor=true within your Static Maps API request URL. If your application does not use a sensor, pass sensor=false.

Now for the meat:

// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')){
 
    // Coordinates to center the map
    var myLatlng = new google.maps.LatLng(52.525595,13.393085);
 
    // Other options for the map, pretty much selfexplanatory
    var mapOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    // Attach a map to the DOM Element, with the defined settings
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

And we are done. Here is a demo.

A little supervisor script for nodejs. It runs your program, and watches for code changes, so you can have hot-code reloading-ish behavior, without worrying about memory leaks and making sure you clean up all the inter-module references, and without a whole new require system.

So basically instead of running your apps with “node main.js”, you run them with “supervisor main.js”, and if they crash, they will automatically restart again. Quite useful.

But where it really shines is in watching changes in the code to restart the program automatically. It had definitely speed up my workflow.

I definitely recommend it.

Adjust preferences

Press Ctrl + Shift + P and chose “Preferences: Settings -User“. This are my favourite tweaks

1. Get the current line highlighted

"highlight_line": true

2. Show the fold buttons always

The folding buttons are faded out by default and they are only visible when you hover over the gutter. With this setting they will always be visible

"fade_fold_buttons": false

3. Bold folder labels

With this setting we can differentiate easier in the sidebar between folders and files

"bold_folder_labels": true

4. Increase line height

Giving more space between lines makes it code easier to read

"line_padding_bottom": 1,
"line_padding_top": 1

5. Change the caret style

The blinking caret is fine, but a fading caret can feel nicer

"caret_style": "phase"

Other options are “smooth”, “phase”, “blink”, “wide” and “solid”.

Install packages

First of all read my instructions about how to install the packet manager.

Credit

http://wesbos.com/sublime-text-5-visual-tweaks/
http://wbond.net/sublime_packages/package_control/installation

A basic example

Let’s say you have a website about traveling, and you send monthly a newsletter with recommendations for beach and mountain. You want that when people subscribing can chose between one of these 2 categories (or both).  This is how it’s done:

So first we install direct_mail and direct_mail_subscription to your TYPO3 system and add the basic static templates. In this case we are going to add an extra one called “Direct Mail Content Boundaries”.

Make sure this setting is properly set up (Should be fine by default)

config.insertDmailerBoundaries = 1

We will ad the following code to the TSConfig to ensure that we can assign categories to the content elements (even though it can be assign to other tables like tt_address, fe_users, sys_dmain… and not just to tt_content)

TCEFORM.tt_content.module_sys_dmail_category.PAGE_TSCONFIG_IDLIST = pid_list

We will have to change “pid_list” by a list of ids where the categories have been stored.

Finally, if you want to be able to change the category of each content element in the backend, you also need to add this code to the TSConfig

TCEFORM.tt_content.module_sys_dmail_category.disabled = 0

Now the system is all set up. All we need now is to let the users set up the categories they are interested in when they register. For that, we will add the marker ###CE_CATLIST### to the subscription template.

Presto! You are ready to go! Please comment if it didnt work out for you

Footnote: This info was taken from here

Requisites: You must know JavaScript, duh!

What is node.js?

If you are anything like I was, you thought that you could only run JavaScript code in a webpage, or in the console terminal from the developer tools.

Thanks to node.js you can now run JavaScript code as a standalone program.

Install it

We have different options here.

Ubuntu

If you are like me running an Ubuntu system, simply type

sudo apt-get install nodejs

and you are done! Easy-peasy, Japanese!

Manual installation

Another way is to download it manually. You just have to go to node.js official website and takin their downloads section you can grab the package more fitting for your system

First program

No better learn to swim than jumping in the pool. Let’s make our first node.js program. Of course, “Hello world!”.

Make a folder wherever you want. And create a new JavaScript file. Let’s name it main.js (but you can name it however you prefer)

console.log("Hello world!")

That was! Not so painful, right?

Now let’s run it. Go to the terminal, and type this:

node main.js

And the result is “Hello world”.

The code executes! We have JavaScript running out of the browser! Magic!

What is this good for?

War! What is it good for? Absolutely nothing!

That will be explained in some future post.

Ok, this was a really simple and dumb explanation. I just pretend to give you the very basics of what node.js is and how it works. I hope now that you have seen how it works, you feel more comfortable around the whole community.

Next post I will talk to you about how to install modules, which extend the functionality of node to the infinite and beyond!

Cheers

If you run this code…

$(".myClass").on("click", function(){...});

…it will attach the handler only to DOM elements with the class “myClass”  that already exist in the DOM tree.

On the other hand, this code…

$(".myClass1").on("click", ".myClass2", function(){...});

…will attach the handler to all DOM elements with class “myClass2″ that are descendants of DOM elements with class “myClass1″ even if they are added in the future.

Now you know how it works

Credit goes to the peeps in StackOverflow for teaching me

• tt_news: OK, this is a must-have. The uses it has are endless. From preparing blogs to have record collections of anything. Works like tt_contents really, but comes with predefined listing plugins that can take a lot of work off your hands
• ics_newssorting: This extension is a nice complement for tt_news. It allows you to order news records in a custom way, not just with the date
• kickstarter: If you develop your own extensions, this is what you are looking for
• sassify: CSS pre-processing is great and takes a load of work off you. Give it a try.
• rlmp_tmplselector: This extension it will allow you to change easily between templates for each page in the back-end
• multicolumn: Adding child columns inside a main column is easy with this extension.
• linkhandler: It allows you to link not only to pages, but also to specific news. Pretty cool.
• phpmyadmin: Basic for database manipulation.
• powermail: Great for building forms
• indexed_search: Great tool for a search inside your webpage
• accessible_is_browse_results: This is a much better pager for the results from indexed_search

10 = TEXT
10.field = bodytext

You will get raw text with none of the format given in the Rich Text Editor. All markup and format will be gone.

If you want to get the formatted version of the bodytext, you need to do this:

10 = TEXT
10.field = bodytext
10.parseFunc < lib.parseFunc_RTE

Lets say that your IP address is 11.22.33.44. In this case you just have to add this lines to end of the .htaccess:

#Maintenance page
Options +FollowSymlinks
RewriteEngine on
RewriteCond %{REQUEST_URI} !/maintenance.html$
RewriteCond %{REMOTE_HOST} !^11\.22\.33\.44
RewriteRule $ /maintenance.html [R=302,L]

This will redirect everyone accessing the page from any other IP address to the page “maintenance.html”, which I usually write as a static HTML page where I excuse for the downtime, and explain that the site will be back up soon enough.

$(".myclass").fadeIn(function(){
  //This callback may be executed several times!!!
});

If you apply a callback directly here, you will execute it as many times as elements are being animated. The solution is something called deferred objects and its used like this:

$.when(
    $('myClass').fadeIn();
)
.done(function() {
    //This will be executed only ONCE, after all the animations are over
});