Developers overview

Developers documentation🔗

Use the links below to explore in detail Nitoku features for developers:

Introduction to Nitoku for developers.🔗

Nitoku has been developed considering three types of users and their particular needs, spectators ( browsing Nitoku pages) , page owners ( creating new pages ) and developers (using html in their pages and creating new styles and blocks). Therefore, Nitoku may appear to some users as a simple platform, and that is intentional, we have tried to shield spectators and new users from Nitoku's more fully featured functionality aimed at developers.

Nevertheless, the developers experience is not an afterthought. We at Nitoku consider the experience of the developers first, think about how they will use and enjoy the platform. Only after we have consider developers needs, we include in our design the interface functionality needed by spectators and page owners. In this page we detail our thinking about the main design principles that drives the development of the platform.

Nitoku loves Web technologies.🔗

We believe in the web and are building a platform that embrace web technologies, Nitoku is based on standard web technology, CSS HTML and Javascript. Unfortunately Javascript present risks, we use iframes to avoid Javascript inside the block affecting your page or the platform, this is the same approach that other applications like CodePen use.

The capability of using CSS, HTML and Javascript on your page is not something new, but unfortunately the trend for new platforms has been to restrict more and more how you can use web native capabilities. We don't want to restrict how you use web technologies, don't want to constraint your imagination. We want to give you the tools to collaborate and create any type of web experience. We are aware that this approach could make the Nitoku platform a bit of a mess, like some sort of a MySpace 2.0. And that is okay with us, the web is a mess. It is, like its creators, imperfect. It’s the most human of mediums. And that messiness, that fluidly shifting imperfection, is why we believe it’s survived this long. It makes it adaptable to our quickly-shifting times. We embrace this messy web, it give us so much for free that app developers could only dream of.

Permissionless innovation.🔗

Today’s software apps are like appliances: we can only use the capabilities exactly as programmed by the developer. What if we, and all computer users, could reach in and modify our favorite apps? Or even create new apps on the fly according to our needs in the moment?

At Nitoku we support permissionless innovation. In Nitoku experimentation with new technology and business models should be generally permitted by default. Developers and users should be able to tinker and explore at multiple levels. Innovation should be about the creativity of the human mind to run wild in its inherent curiosity and inventiveness.

Yes, the permissionless model has flaws, some people prefer the non-inclusive curated walled garden that is native apps and their app stores. But that is not us, we value the freedom of developers to create and innovate over the niceness of curated app stores. In a word, innovation in Nitoku is about freedom. In Nitoku if you want to create an application or a style to be shared with your users, colleagues or friends you should not need to ask for permission, anyone should be able to do so.

Learn, tinker, reuse and extend.🔗

The Code It Yourself Manifesto has a few insight into how developers approach to software. It starts with the following sentences :

The software we use is coded by brave programmers that have their own goals. Most of the time there is an overlap between their goals and ours. Over time these will diverge. This means that the tools we depend on grow features we don't use or understand. There will be bugs in these code parts which will prevent us from reaching our goals. So we are at a fork in the road:

We have the choice of trying to understand the code and fix it.
We have the choice of trying another program, whose creator's goals are closer to ours.
We also have the choice of coding the software ourself.

We believe that this approach to software development will resonate with our fellow developers, but unfortunately, on the web that we live now, it is an approach that is becoming increasingly difficult to apply. For the first few years of the web, people learned to build web pages using the “View Source” feature in their web browser, but the web has evolved and currently web pages are complex, the source code most of the time has been transpiled from the original code that was used to develop the page into something that most of the time can't be understood. We believe that we need to get back to something similar to the original view source feature, we want developers to be able to understand easily how any web page on the platform has been built. This will enable then to learn, grow and build for themselves better web experiences.

With the Nitoku editor we want to bring back something close to the old “View Source” feature. The Nitoku editor will let you see how the page has been built, tinker with the page and see your changes on real time, delete your changes to go back to the original page or send those changes to the team owner to fix bugs or implement new features, everything from the browser.

%###### HTML ######%
<div class="stars-frame">
    <div class="message">
        <div class="message-details">
            <p>The Code It Yourself Manifesto.</p>
    <li><p class="title">We implement it according to our own goals.</p></li>
    <li><p class="title">We make mistakes and learn from them.</p></li>
    <li><p class="title">We learn how our tools we depend on need to work.</p></li>
    <li><p class="title">We gain a deep understanding of our problem domain.</p></li>
            <a href='https://www.nitoku.com/@nitoku.public/community' class="buttom">Connect with the community</a>
        </div>    
    </div>
    <div class="background">
        <div class="landscape"></div>
        <canvas id="canvas"></canvas>
    </div>
</div>
%###### CSS #######%
.stars-frame{
    position: relative;    
}

li {
	margin-left: 25px;
}

.title{
    color: #676a6c;
    font-weight: 500;
    letter-spacing: .025em;
    font-size: 18px;    
}

.inner-text{
	font-size:16px;
    font-weight: 400;
}

.stars-frame p{
    margin:0px;
    padding:8px;
}
.background{
    z-index: 0;
    width: 100%;
    height: 450px;
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #ceced4 100%); 
    overflow: hidden;
    position: relative;
}

@keyframes colorChange {
    0%,
    100% {
    opacity: 0;
    }
    50% {
    opacity: .9;
    }
}

.landscape {
    position :absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 500px;
    /*background-image: url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);*/
    background-image:url(https://i.imgur.com/FCAlCQ2.png);
    background-size: 1000px 500px;
    background-repeat: repeat-x;
    background-position: center bottom;
}

/** message **/
.message {
    position : absolute;
    width: 95%;
    z-index: 1;    
}

.message-details {
    max-width : 600px;
    color: #676a6c;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    font-size: 18px;
    font-weight: 600;
}

.buttom{

-webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);
    box-shadow: 0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);
    white-space: nowrap;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .025em;
    text-decoration: none;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    margin-right: 23px;
    margin-left: 10px;
    margin-top: 20px;
    color: #fff;
    background: #3ecf8e;
    text-shadow: 0 1px 3px rgba(36,180,126,.4);

}
%### JAVASCRIPT ###%
function Star(id, x, y){
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*2)+3;
	//var alpha = (Math.floor(Math.random()*10)+1)/10/2;
	//this.color = "rgba(255,255,255,"+alpha+")";
	this.color = "#ffffff";
}

Star.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Star.prototype.move = function() {
	this.y -= .15 + params.backgroundSpeed/100;
	if (this.y <= -10) this.y = HEIGHT + 10;
	this.draw();
}

function Dot(id, x, y, r) {
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*5)+1;
	this.maxLinks = 2;
	this.speed = .5;
	this.a = .5;
	this.aReduction = .005;
	//this.color = "rgba(255,255,255,"+this.a+")";
	this.color = "#ffffff";
	//this.linkColor = "rgba(255,255,255,"+this.a/4+")";
	//this.linkColor = "rgba(255,255,255,"+this.a/2+")";
	this.linkColor = "#ffffff";

this.dir = Math.floor(Math.random()*140)+200;
}

Dot.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Dot.prototype.link = function() {
	if (this.id == 0) return;
	var previousDot1 = getPreviousDot(this.id, 1);
	var previousDot2 = getPreviousDot(this.id, 2);
	//var previousDot3 = getPreviousDot(this.id, 3);
	if (!previousDot1) return;
	ctx.strokeStyle = this.linkColor;
	ctx.moveTo(previousDot1.x, previousDot1.y);
	ctx.beginPath();
	ctx.lineTo(this.x, this.y);
	ctx.lineWidth = 2;
	if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);
	//if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);
	ctx.stroke();
	ctx.closePath();
}

function getPreviousDot(id, stepback) {
	if (id == 0 || id - stepback < 0) return false;
	if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];
	else return false;//getPreviousDot(id - stepback);
}

Dot.prototype.move = function() {
	this.a -= this.aReduction;
	if (this.a <= 0) {
		this.die();
		return
	}
	
	//this.color = "rgba(255,255,255,"+this.a+")";
	//this.linkColor = "rgba(255,255,255,"+this.a/4+")";
	this.color = "#ffffff";
	//this.linkColor = "rgba(255,255,255,"+this.a/2+")";
	this.linkColor = "#ffffff";
	this.x = this.x + Math.cos(degToRad(this.dir))*(this.speed+params.dotsSpeed/100),
	this.y = this.y + Math.sin(degToRad(this.dir))*(this.speed+params.dotsSpeed/100);

this.draw();
	this.link();
}

Dot.prototype.die = function() {
    dots[this.id] = null;
    delete dots[this.id];
}

var canvas  = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	WIDTH,
	HEIGHT,
	mouseMoving = false,
	mouseMoveChecker,
	mouseX,
	mouseY,
	stars = [],
	initStarsPopulation = 60,
	dots = [],
	dotsMinDist = 5,
	params = {
		maxDistFromCursor: 100,
		dotsSpeed: 0,
		backgroundSpeed: 0
	};

function setCanvasSize() {
	WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;

canvas.setAttribute("width", WIDTH);
	canvas.setAttribute("height", HEIGHT);
}

function init() {
	ctx.strokeStyle = "white";
	ctx.shadowColor = "white";
	for (var i = 0; i < initStarsPopulation; i++) {
		stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT));
		//stars[i].draw();
	}
	ctx.shadowBlur = 0;
	animate();
}

function animate() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);

for (var i in stars) {
    	stars[i].move();
    }
    for (var i in dots) {
    	dots[i].move();
    }
    drawIfMouseMoving();
    requestAnimationFrame(animate);
}

window.onmousemove = function(e){
	mouseMoving = true;
	mouseX = e.clientX;
	mouseY = e.clientY;
	clearInterval(mouseMoveChecker);
	mouseMoveChecker = setTimeout(function() {
		mouseMoving = false;
	}, 100);
}

function drawIfMouseMoving(){
	if (!mouseMoving) return;

if (dots.length == 0) {
		dots[0] = new Dot(0, mouseX, mouseY);
		dots[0].draw();
		return;
	}

var previousDot = getPreviousDot(dots.length, 1);
	var prevX = previousDot.x; 
	var prevY = previousDot.y;

var diffX = Math.abs(prevX - mouseX);
	var diffY = Math.abs(prevY - mouseY);

if (diffX < dotsMinDist || diffY < dotsMinDist) return;

var xVariation = Math.random() > .5 ? -1 : 1;
	xVariation = xVariation*Math.floor(Math.random()*params.maxDistFromCursor)+1;
	var yVariation = Math.random() > .5 ? -1 : 1;
	yVariation = yVariation*Math.floor(Math.random()*params.maxDistFromCursor)+1;
	dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation);
	dots[dots.length-1].draw();
	dots[dots.length-1].link();
}
//setInterval(drawIfMouseMoving, 17);

function degToRad(deg) {
	return deg * (Math.PI / 180);
}

parent.postMessage("{'service':'@nitoku.public/blockApi','request':'set-full-width'}",
								"*");
                                
parent.postMessage("{'service':'@nitoku.public/blockApi','request':{'set-height':'400'}}",
							"*");

setTimeout(function(){ 
	setCanvasSize();
	init();
}, 100);

%#### SETTINGS ####%
{"readOnly":true}