Introduction to blocks

What is a block?🔗

A block is a program created on the platform that you can embed in your own Nitoku web pages.

We want to get people working together in communities to create and construct things, to achieve this, blocks enable users to combine, reuse and extend bits and pieces of other web pages on their own, helping them to collaborate and avoid reinventing the wheel every time that they need to create a new web page.

There are plenty of blocks already created on the platform; blocks to include charts, a form, a graph editor application or a chat room on your page, show a video, blocks to show dynamic data, countdown information, etc. You can see a list of popular blocks here and some examples on the carousel below.

image : https://storage.googleapis.com/nitoku-static/site-img/landing/bar_chart.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/doughnut_chart.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/line_chart.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/polar_area.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/radar_chart.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/gridlink.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/graph_video.gif
image : https://storage.googleapis.com/nitoku-static/site-img/landing/gitter_chat.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/table.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/calendar.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/html_code_video.gif
image : https://storage.googleapis.com/nitoku-static/site-img/landing/text_editor.gif
image : https://storage.googleapis.com/nitoku-static/site-img/landing/countdown_video.gif
image : https://storage.googleapis.com/nitoku-static/site-img/landing/gantt_diagram.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/sequence_diagram.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/flowchart_diagram.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/youtube.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/google_drive.png
image : https://storage.googleapis.com/nitoku-static/site-img/landing/google_forms.png

For the sake of simplicity lets see how we can add a simple block to improve the visuals of our page. We will be using the flip block below. This is a simple block created by the user @emilio and based on a codepen made by Nooray Yemon. First we need to add the reference to the markdown block. In Our example the reference to the flip block is @emilio.public/flip, If you have used markdown before on other platforms you probably have seen similar approach to enhance markdown block content. For example Github uses markdown blocks starting with ```javascript to highlight the block contents as javascript code.

The configuration of the block is self explanatory, we include the words that we want to be displayed by the block:

```@emilio.public/flip
make
everything,nitoku,life
awesome!
```

And that is all, now we have added a simple widget to our page.

Block access.🔗

If the team where the block was created was public, any user in the platform can used it, if the team was private only users that are member of the private team can use the block.

List of popular blocks.🔗

Nitoku platform does not provide any block on their own, however, as a user, @nitoku is creating blocks on the @nitoku.public team. You can find on this link a list of popular blocks on the platform.

Using blocks.🔗

Disccuss about goiung to the block page to learn how to use it................

Follow this link to know how to better use blocks and see some examples of frequent use-cases.

How to create a block. Developers.🔗

Nitoku platform provides tools and APIs that enables users on the platform to create their own blocks. To create blocks on Nitoku you need to have at least a intermediate knowledge of HTML, CSS and Javascript. Follow this link to read the documentation for developers.