Technology we use link
Jump to navigation
Jump to search
(22 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
Of course each of them depends in turn by other tools (for instance | Of course each of them depends in turn by other tools (for instance | ||
[https://quasar.dev/ Quasar Framework] depends on [https://vuejs.org/ Vue.js], and Vue.js is in turn composed | [https://quasar.dev/ Quasar Framework] depends on [https://vuejs.org/ Vue.js], and Vue.js is in turn composed | ||
− | by several components), however, given a set even arbitrary of | + | by several components, like the [https://router.vuejs.org/ router] and [https://vuex.vuejs.org/ vuex], a "state management pattern"), however, given a set even arbitrary of |
− | the most prominent tools we use, the reader might explore the vast areas not covered by the following table | + | the most prominent tools we use, the reader might explore on his or her own both in extension and in depth the vast areas not covered by the following table. |
<!-- | <!-- | ||
Line 10: | Line 10: | ||
http://knexjs.org/assets/images/knex.png | http://knexjs.org/assets/images/knex.png | ||
--> | --> | ||
− | |||
<noinclude> | <noinclude> | ||
+ | '''Currently used''' | ||
{| class="wikitable" | {| class="wikitable" | ||
|+ | |+ | ||
Line 18: | Line 18: | ||
!use | !use | ||
|- | |- | ||
− | |[https://www.mediawiki.org/wiki/MediaWiki Mediawiki 1. | + | |[https://www.mediawiki.org/wiki/MediaWiki Mediawiki 1.35] |
|The collaboration and documentation platform which inspired and powers [https://www.wikipedia.org/ Wikipedia]. | |The collaboration and documentation platform which inspired and powers [https://www.wikipedia.org/ Wikipedia]. | ||
|We use it for the back-end side of this site, in order to ensure collaborative creation of quality contents. | |We use it for the back-end side of this site, in order to ensure collaborative creation of quality contents. | ||
Line 24: | Line 24: | ||
|[https://culturaitaliana.org/wiki/Special:Version Mediawiki extensions] | |[https://culturaitaliana.org/wiki/Special:Version Mediawiki extensions] | ||
|Plugins extending the set of features of Mediawiki. | |Plugins extending the set of features of Mediawiki. | ||
− | |Some of the most prominent extensions include: [https://www.mediawiki.org/wiki/Extension:Page_Forms Page forms], [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki Semantic Mediawiki], [https://www.mediawiki.org/wiki/Extension:VisualEditor Visual editor], [https://www.mediawiki.org/wiki/Extension:MsUpload Ms Upload], [https://www.mediawiki.org/wiki/Extension:MultimediaViewer MultimediaViewer], and more: we are also using a custom extension created by us | + | |Some of the most prominent extensions include: [https://www.mediawiki.org/wiki/Extension:Page_Forms Page forms], [https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki Semantic Mediawiki], [https://www.mediawiki.org/wiki/Extension:VisualEditor Visual editor], [https://www.mediawiki.org/wiki/Extension:MsUpload Ms Upload], [https://www.mediawiki.org/wiki/Extension:MultimediaViewer MultimediaViewer], and more: we are also using a custom extension created by us, including [https://www.mediawiki.org/wiki/Extension:CIForms CIForms]! |
|- | |- | ||
|[https://quasar.dev/ Quasar framework] | |[https://quasar.dev/ Quasar framework] | ||
|open-source [https://vuejs.org/ Vue.js] based framework for building apps | |open-source [https://vuejs.org/ Vue.js] based framework for building apps | ||
− | |We use it for all the [https://culturaitaliana.org/ | + | |We use it for all the [https://culturaitaliana.org/ Front-end part] of the site, taking advantage of its server side rendering feature and beautifully crafted components |
|- | |- | ||
|[https://github.com/cheeriojs/cheerio#readme Cheerio] | |[https://github.com/cheeriojs/cheerio#readme Cheerio] | ||
|DOM manipulation from an html string | |DOM manipulation from an html string | ||
− | |We use it to perform some adjustments to the mediawiki html output before recording the | + | |We use it to perform some adjustments to the mediawiki html output before recording the latest version of a page to be served through the [[How_it_works/APIs|APIs]] |
− | |||
− | |||
− | |||
− | |||
|- | |- | ||
|[https://github.com/macbre/nodemw nodemw] | |[https://github.com/macbre/nodemw nodemw] | ||
Line 44: | Line 40: | ||
|[https://detectlanguage.com/ detectlanguage] | |[https://detectlanguage.com/ detectlanguage] | ||
|Language identification JSON webservice | |Language identification JSON webservice | ||
− | |We use it to determine the language of a wiki page, in order to filter them by language in the | + | |We use it to determine the language of a wiki page, in order to filter them by language in the front-end site, or to perform hyphenation |
|- | |- | ||
|[https://cloud.google.com/translate/docs/basic/detecting-language Detecting languages] (Google Cloud Translation) | |[https://cloud.google.com/translate/docs/basic/detecting-language Detecting languages] (Google Cloud Translation) | ||
Line 52: | Line 48: | ||
|[http://knexjs.org/ Knex] | |[http://knexjs.org/ Knex] | ||
|Query builder for Node.js | |Query builder for Node.js | ||
− | |We use it to assemble [https://www.mysql.com/ mysql] queries in our Node.js | + | |We use it to assemble [https://www.mysql.com/ mysql] queries in our Node.js environment |
|- | |- | ||
|[https://github.com/forwardemail/email-templates Email templates] | |[https://github.com/forwardemail/email-templates Email templates] | ||
Line 60: | Line 56: | ||
|[https://prismjs.com/ Prism] | |[https://prismjs.com/ Prism] | ||
|Javascript syntax highlighter | |Javascript syntax highlighter | ||
− | |We use it to | + | |We use it to format code snippets on the [https://culturaitaliana.org/How_it_works Front-end site] |
|- | |- | ||
|[https://www.npmjs.com/package/jsonwebtoken jsonwebtoken] | |[https://www.npmjs.com/package/jsonwebtoken jsonwebtoken] | ||
|Node.js implementation of An implementation of [https://jwt.io/ JSON Web Tokens]. | |Node.js implementation of An implementation of [https://jwt.io/ JSON Web Tokens]. | ||
− | |We use it to | + | |We use it to authenticate logged-in users |
|- | |- | ||
|[https://github.com/mar10/fancytree fancytree] | |[https://github.com/mar10/fancytree fancytree] | ||
|Javascript library providing interactive trees based on hierarchical data structures | |Javascript library providing interactive trees based on hierarchical data structures | ||
− | |We use it to display a structured and editable [https://culturaitaliana.org/wiki/ | + | |We use it to display a structured and editable [https://culturaitaliana.org/wiki/Table_of_contents table of contents] of a given set of wiki pages to be used as navigation panel in the related front-end site. |
|- | |- | ||
|[https://mnater.github.io/Hyphenopoly/Hyphenators.html Hyphenopoly] | |[https://mnater.github.io/Hyphenopoly/Hyphenators.html Hyphenopoly] | ||
Line 77: | Line 73: | ||
|client-side open-source JavaScript database inspired by [https://couchdb.apache.org/ CouchDB] | |client-side open-source JavaScript database inspired by [https://couchdb.apache.org/ CouchDB] | ||
|We use it to store all the organization or documentation's pages on the client, to minimize loading data from the server and to allow offline navigation | |We use it to store all the organization or documentation's pages on the client, to minimize loading data from the server and to allow offline navigation | ||
+ | |- | ||
+ | |[https://github.com/jackocnr/intl-tel-input International Telephone Input] | ||
+ | |"JavaScript plugin for entering and validating international telephone numbers" | ||
+ | |We use it to assist the entry of international telephone numbers in some tables of private wikis | ||
+ | |- | ||
+ | |[https://redis.io/ Redis] | ||
+ | |"in-memory data structure store" | ||
+ | |We use it to record private files on the back-end which can be accessed on the front-end given logged-in user credentials or permissions. In certain circumstances the list could be composed each time that a page is accessed, hence the need of a solution allowing maximum performance. | ||
+ | |- | ||
+ | |[https://socket.io/ socket.io] | ||
+ | |"real-time, bidirectional and event-based communication" | ||
+ | |We use it to broadcast advertisements and notifications through our internal system, based on user's contributions ! | ||
+ | |- | ||
+ | |[https://www.tiny.cloud/ TinyMCE] | ||
+ | |online rich-text editor | ||
+ | |We use it to empower our integrated, web-based email client | ||
+ | |- | ||
+ | |[https://github.com/apostrophecms/split-html split-html] | ||
+ | |split HTML in balanced HTML fragments | ||
+ | |We use it to correctly split pages for the [https://culturaitaliana.org/browse/books/open-source-books Books section] of the site, or to insert [https://culturaitaliana.org/pages/How_it_works/Multiple_choice_questions multiple choice questions], within pages | ||
+ | |- | ||
+ | |[https://github.com/compwright/split-human-name#readme split-human-name] | ||
+ | |"Split a person's name into first name and last name fields" | ||
+ | |We use it to fill-in the list of contacts from incoming emails for our web-based email client | ||
+ | |} | ||
+ | |||
+ | |||
+ | '''Previously used''' | ||
+ | {| class="wikitable" | ||
+ | |+ | ||
+ | !software | ||
+ | !description | ||
+ | !use | ||
+ | !notes | ||
+ | |- | ||
+ | |[https://github.com/jquery/esprima Esprima] | ||
+ | |ECMAScript parser | ||
+ | |We use it to securely parse the javascript object produced by the [https://culturaitaliana.org/wiki/Frontend_Index Frontend Index] (the link might be broken) storing the structure of the tree | ||
+ | |The functioning of the the former "Frontend Index" (now renamed "Table of contents") has been reviewed. Now the tree object representing the table of contents is saved as a semantic property directly by a form, rather than by a script invoking the Mediawiki javascript api, in a process technically virtuous but not the simplest. | ||
|} | |} | ||
Latest revision as of 01:50, 11 April 2021
Here is a list of the tools we use to make this platform work. Of course each of them depends in turn by other tools (for instance Quasar Framework depends on Vue.js, and Vue.js is in turn composed by several components, like the router and vuex, a "state management pattern"), however, given a set even arbitrary of the most prominent tools we use, the reader might explore on his or her own both in extension and in depth the vast areas not covered by the following table.
Currently used
software | description | use |
---|---|---|
Mediawiki 1.35 | The collaboration and documentation platform which inspired and powers Wikipedia. | We use it for the back-end side of this site, in order to ensure collaborative creation of quality contents. |
Mediawiki extensions | Plugins extending the set of features of Mediawiki. | Some of the most prominent extensions include: Page forms, Semantic Mediawiki, Visual editor, Ms Upload, MultimediaViewer, and more: we are also using a custom extension created by us, including CIForms! |
Quasar framework | open-source Vue.js based framework for building apps | We use it for all the Front-end part of the site, taking advantage of its server side rendering feature and beautifully crafted components |
Cheerio | DOM manipulation from an html string | We use it to perform some adjustments to the mediawiki html output before recording the latest version of a page to be served through the APIs |
nodemw | Node.js interface for the Mediawiki APIs | We use it to call the mediawiki APIs from a Node.js script to retrieve and structure wiki pages before serving them through the APIs |
detectlanguage | Language identification JSON webservice | We use it to determine the language of a wiki page, in order to filter them by language in the front-end site, or to perform hyphenation |
Detecting languages (Google Cloud Translation) | Language detect using Google Cloud Translation APIs | As above, we use both of them concurrently |
Knex | Query builder for Node.js | We use it to assemble mysql queries in our Node.js environment |
Email templates | A wrapper for sending email using template engines (like PUG) and transports (like Nodemailer) | We use it to send email using PUG templates and Node mailer-Sendgrid transport |
Prism | Javascript syntax highlighter | We use it to format code snippets on the Front-end site |
jsonwebtoken | Node.js implementation of An implementation of JSON Web Tokens. | We use it to authenticate logged-in users |
fancytree | Javascript library providing interactive trees based on hierarchical data structures | We use it to display a structured and editable table of contents of a given set of wiki pages to be used as navigation panel in the related front-end site. |
Hyphenopoly | "Hyphenation for node and Polyfill for client-side hyphenation." | We use it to hyphenate the organization or documentation's pages based on the detected language of each wiki page. Especially important on mobile devices combined with justified columns. |
pouchdb | client-side open-source JavaScript database inspired by CouchDB | We use it to store all the organization or documentation's pages on the client, to minimize loading data from the server and to allow offline navigation |
International Telephone Input | "JavaScript plugin for entering and validating international telephone numbers" | We use it to assist the entry of international telephone numbers in some tables of private wikis |
Redis | "in-memory data structure store" | We use it to record private files on the back-end which can be accessed on the front-end given logged-in user credentials or permissions. In certain circumstances the list could be composed each time that a page is accessed, hence the need of a solution allowing maximum performance. |
socket.io | "real-time, bidirectional and event-based communication" | We use it to broadcast advertisements and notifications through our internal system, based on user's contributions ! |
TinyMCE | online rich-text editor | We use it to empower our integrated, web-based email client |
split-html | split HTML in balanced HTML fragments | We use it to correctly split pages for the Books section of the site, or to insert multiple choice questions, within pages |
split-human-name | "Split a person's name into first name and last name fields" | We use it to fill-in the list of contacts from incoming emails for our web-based email client |
Previously used
software | description | use | notes |
---|---|---|---|
Esprima | ECMAScript parser | We use it to securely parse the javascript object produced by the Frontend Index (the link might be broken) storing the structure of the tree | The functioning of the the former "Frontend Index" (now renamed "Table of contents") has been reviewed. Now the tree object representing the table of contents is saved as a semantic property directly by a form, rather than by a script invoking the Mediawiki javascript api, in a process technically virtuous but not the simplest. |
... and more ! The list is in progress !