¿Alguna vez has querido aprender a programar, pero al empezar te has visto abrumado ante la inclinada curva de aprendizaje? Si eres de esos, puede que te interese echar un vistazo a Glitch, un sitio web cuya meta es contar con una comunidad dispuesta a ayudarte y donde desarrollarás la aplicación de tus sueños.
Creada por Fog Creek Software, la empresa responsable de servicios como Trello, Glitch es un sitio para programar que es impulsado principalmente por su comunidad. Si algo debo destacar de este sitio web es la capacidad para remezclar (remix) códigos y proyectos de la plataforma, permitiendo al usuario modificar aplicaciones, bots o sitios webs que ya existen para hacerlos propios.
Aunque remezclar código no es tan difícil como desarrollar una aplicación desde cero, para un programador novato puede resultar una tarea intimidante y sobre todo tediosa. Para aquellos que necesitan ayuda con sus intentos de programación, Glitch te permite colaborar con otros programadores de la comunidad en tiempo real.
El entorno de programación que utiliza Glitch permite a los colaboradores solucionar problemas o agregar nuevas características sobre la marcha. Debido a que cada cambio que se realiza se muestra en vivo, los programadores pueden proceder a corregir errores y probar nuevos cambios en el código en el acto, sin tener que recargar páginas ni pulsar ningún botón.
La única limitación que tiene Glitch en este momento es que sólo admite Node.js. Dicho esto, los proyectos completados en Glitch pueden ser descargados, exportados a sitios como GitHub, o alojados en Glitch para ser manipulados por otros programadores. Basta decir que, si estás buscando mejorar tus habilidades a la hora de programar, Glitch puede transformarse en tu mejor aliado.
Y para muestra un botón, aquí tienes el código de un clásico to-do, desarrollado por uno de los usuarios de la comunidad de Glitch.
public/client.js
function initialize() {
var addbtn = document.getElementById("btn_add"),
list = document.getElementById("list"),
input = document.getElementById("txt_input"),
li = list.childNodes || null,
txt = null,
todo = null;
if (localStorage.getItem('list')) {
list.innerHTML = localStorage.getItem('list');
currentLi = document.getElementsByTagName("li");
for (var i = 0; i <= currentLi.length - 1; i++) {
currentLi[i].onclick = deleteToDo;
}
}
addbtn.onclick = addToDo;
input.onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
addToDo();
return false;
}
};
function addToDo() {
txt = input.value;
if (txt === "") {
return false;
}
else {
todo = document.createTextNode(txt);
li = document.createElement("li");
li.appendChild(todo);
list.insertBefore(li, list.firstChild);
input.value = "";
localStorage.setItem('list', list.innerHTML);
li.onclick = deleteToDo;
return false;
}
}
function deleteToDo() {
this.parentNode.removeChild(this);
localStorage.setItem('list', list.innerHTML);
return false;
}
}
window.onload = initialize;
public/style.css
/* ------------------------------------------------
BROWSER RESET
------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ----------------------------------------------
GENERAL
---------------------------------------------- */
body {
background-color: #f3f6dA;
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
line-height: 135%;
}
a {
text-decoration: none;
}
.input {
background-color: #f3f6dA;
box-shadow: .0625rem 0 .125rem rgba(0, 0, 0, 0.35);
opacity: .95;
position: fixed;
width: 100%;
}
#txt_input {
background-color: rgba(204, 0, 153, .6);
border: none;
border-radius: 0;
box-sizing: border-box;
color: rgba(0, 0, 0, .45);
display: block;
float: left;
font-size: 300%;
font-weight: 600;
margin: 0;
outline: none;
padding: 2rem;
width: 80%;
}
#btn_add {
background-color: rgba(204, 0, 153, .75);
border: none;
border-radius: 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
font-size: 300%;
font-weight: 700;
float: right;
margin: 0;
outline: none;
padding: 2rem;
width: 20%;
transition: all 0.3s;
-webkit-appearance: none;
-moz-appearance: none;
}
#btn_add:hover {
background-color: rgba(204, 0, 153, 1);
}
ul {
clear: both;
float: left;
margin-top: 7.5rem;
width: 100%;
}
li {
background-color: rgba(153, 0, 204, .75);
color: rgba(0, 0, 0, .4);
cursor: pointer;
font-size: 200%;
font-weight: 600;
line-height: 125%;
padding: 2rem;
transition: all 0.3s;
}
li:nth-child(odd) {
background-color: rgba(153, 0, 204, .7);
}
li:hover {
background-color: rgba(153, 0, 204, 1);
color: rgba(255, 255, 255, .85);
}
li a {
color: rgba(0, 0, 0, .25);
float: right;
margin-left: 2rem;
}
li a:hover {
color: rgba(255, 255, 255, .75);
}
.strikeout {
position: relative;
}
.strikeout:after {
border-bottom: .1875rem solid rgba(0, 0, 0, .4);
content: "";
left: -5%;
position: absolute;
right: 0;
top: 50%;
width: 110%;
}
/* ------------------------------------------------
MEDIA QUERIES
------------------------------------------------ */
@media screen and (max-width: 500px) {
#txt_input, #btn_add {
font-size: 200%;
padding: 1rem;
}
ul {
margin-top: 4.375rem;
}
li {
font-size: 150%;
padding: 1rem;
}
}
index.html
<!DOCTYPE html> <html> <head> <title>Simply Done</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="input"> <input type="text" id="txt_input" autofocus> <input type="button" id="btn_add" value="+"> </div> <ul id="list"></ul> </body> <script type="text/javascript" src="client.js"></script> </html>
Fuente: hongkiat.com