Il mio nuovo editor preferito per il Web

atom.io
Atom.io

Ho da poco scoperto Atom www.atom.io e me ne sono innamorato. Direi che per me soppianta totalmente sublime. E’ disponibile per Mac e per Windows (solo Visual Studio code è disponibile anche per Linux).

Vi consiglio di darci un’occhiata installando come estensioni:

  1. Atom Beautify
  2. Sublime
  3. Autocomplete-paths
  4. Emmet
  5. Linter e tutti i linter per il vostro linguaggio
    1. -eslint
    2. -htmllint
    3. -csslint
    4. -python
    5. -pylama
    6. etc.

Buon coding!!!

Ecco uno screenshot:

screen-shot-2016-10-04-at-23-32-09

 

Il mio nuovo editor preferito per il Web

Convertire una combobox in checkbox con jQuery

Se non avete accesso all’html di un CMS e volete cambiare una textbox in una checkbox, ecco il codice jQuery che ve lo fa fare!
Enjoy!!!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="https://code.jquery.com/jquery-migrate-1.2.1.js"></script>
	</head>
	<body>
		<select size="1" name="mySelect" id="mySelect">
			<option selected="selected" value="Any">Hello</option>
			<option value="1">Questo è una</option>
			<option value="2">Textbox</option>
			<option value="3">In realtà :O)</option>
		</select>			
	</body>
</html>

<script type="text/javascript">
$(function(){
	//$(".main_container select").selectbox();
	$('select').each(function(i, select){
	    var $select = $(select);
	    $select.find('option').each(function(j, option){
	        var $option = $(option);
	        // Create a radio:
	        var $radio = $('<input type="radio" />');
	        // Set name and value:
	        $radio.attr('name', $select.attr('name')).attr('value', $option.val());
	        // Set checked if the option was selected
	        if ($option.attr('selected')) $radio.attr('checked', 'checked');
	        
	        // Insert radio before select box:
	        $select.before($radio);

	        //wrap radio in div
	        $radio.wrap( "<div class='radio_button'></div>" );
	        
	        // Insert a label:
	        $radio.after(
	          $("<label />").text($option.text())
	        );
	        // Insert a <br />:
	        //$select.before("<br/>");
	    });
	    $select.remove();
	});
})
</script>

Salvatelo come file Html e provatelo 😉

Convertire una combobox in checkbox con jQuery

Bootstrap 3 with less

Se volete lavorare con Bootstrap 3 modificando i file .less e non volete installare o non conoscete Bower e Grunt allora un buon setup di strumenti di sviluppo multipiattaforma a mio avviso è:

  • SourceTree by Atlasssian per il versioning con Git
  • Sublime Text 2 per la modifica dei file html, php e less
  • Prepros App per la compilazione di file .less, .css (minify) e .js (minify)

Qui i riferiementi, alla data di scrittura dell’articolo, al download dei tool:

SourceTree
Sublime Text 2
Prepros App

Questa la configurazione per la compilazione su Prepros App dei file .less a partire dalla struttura di directory dei file sorgenti di bootstrap.

prepros.css.config

Una cosa che ho trovato differente rispetto ad altri preprocessori è nella gestione dei file minificati .min.css differenti rispetto ai file da cui derivano .css (senza suffisso .min) e questa:

Volendo generare sia i file.css e i loro minificati separati file.min.css occorre non settare il flag (compressCSS) sui file.css ma all’interno del progetto sul file generato file.css è qui che va messo il flag di minificazione (compressCSS).

Un’altra cosa da sapere è che Sublime Text non ha di default la sintassi per i file .less.

Se volete quindi installarla seguite le istruzioni che trovate qui: danro/LESS-sublime

Buon lavoro!

Alla prossima!

Bootstrap 3 with less