diff options
| -rw-r--r-- | README.markdown | 4 | ||||
| -rw-r--r-- | c++.html.markdown | 64 | ||||
| -rw-r--r-- | de-de/csharp-de.html.markdown | 2 | ||||
| -rw-r--r-- | de-de/latex-de.html.markdown | 235 | ||||
| -rw-r--r-- | el-gr/css-gr.html.markdown | 243 | ||||
| -rw-r--r-- | el-gr/racket-gr.html.markdown | 72 | ||||
| -rw-r--r-- | it-it/brainfuck-it.html.markdown | 111 | ||||
| -rw-r--r-- | it-it/java-it.html.markdown | 170 | ||||
| -rw-r--r-- | java.html.markdown | 17 | ||||
| -rw-r--r-- | javascript.html.markdown | 2 | ||||
| -rw-r--r-- | latex.html.markdown | 3 | ||||
| -rw-r--r-- | nl-nl/yaml-nl.html.markdown | 139 | ||||
| -rw-r--r-- | ocaml.html.markdown | 6 | ||||
| -rw-r--r-- | php.html.markdown | 39 | ||||
| -rw-r--r-- | pl-pl/python-pl.html.markdown | 4 | ||||
| -rw-r--r-- | pt-br/css-pt.html.markdown | 257 | ||||
| -rw-r--r-- | pt-br/sass-pt.html.markdown | 477 | ||||
| -rw-r--r-- | pt-br/tmux-pt.html.markdown | 254 | ||||
| -rw-r--r-- | vi-vn/json-vi.html.markdown | 76 | ||||
| -rw-r--r-- | zfs.html.markdown | 400 |
20 files changed, 2407 insertions, 168 deletions
diff --git a/README.markdown b/README.markdown index 28fa5093..94afbcbe 100644 --- a/README.markdown +++ b/README.markdown @@ -8,7 +8,7 @@ commented code and explained as they go. ... to write more inline code tutorials. Just grab an existing file from this repo and copy the formatting (don't worry, it's all very simple). -Make a new file, send a pull request, and if it passes master I'll get it up pronto. +Make a new file, send a pull request, and if it passes muster I'll get it up pronto. Remember to fill in the "contributors" fields so you get credited properly! @@ -18,7 +18,7 @@ All contributions are welcome, from the tiniest typo to a brand new article. Tra in all languages are welcome (or, for that matter, original articles in any language). Send a pull request or open an issue any time of day or night. -**Please tag your issues pull requests with [language/lang-code] at the beginning** +**Please tag your issues and pull requests with [language/lang-code] at the beginning** **(e.g. [python/en] for English Python).** This will help everyone pick out things they care about. diff --git a/c++.html.markdown b/c++.html.markdown index 2bee51dc..d03092e5 100644 --- a/c++.html.markdown +++ b/c++.html.markdown @@ -310,6 +310,70 @@ basic_string(basic_string&& other); // constructor that "salvages" parts of that temporary string. You will see this // concept referred to as "move semantics". +///////////////////// +// Enums +///////////////////// + +// Enums are a way to assign a value to a constant most commonly used for +// easier visualization and reading of code +enum ECarTypes +{ + Sedan, + Hatchback, + SUV, + Wagon +}; + +ECarTypes GetPreferredCarType() +{ + return ECarTypes::Hatchback; +} + +// As of C++11 there is an easy way to assign a type to the enum which can be +// useful in serialization of data and converting enums back-and-forth between +// the desired type and their respective constants +enum ECarTypes : uint8_t +{ + Sedan, // 0 + Hatchback, // 1 + SUV = 254, // 254 + Hybrid // 255 +}; + +void WriteByteToFile(uint8_t InputValue) +{ + // Serialize the InputValue to a file +} + +void WritePreferredCarTypeToFile(ECarTypes InputCarType) +{ + // The enum is implicitly converted to a uint8_t due to its declared enum type + WriteByteToFile(InputCarType); +} + +// On the other hand you may not want enums to be accidentally cast to an integer +// type or to other enums so it is instead possible to create an enum class which +// won't be implicitly converted +enum class ECarTypes : uint8_t +{ + Sedan, // 0 + Hatchback, // 1 + SUV = 254, // 254 + Hybrid // 255 +}; + +void WriteByteToFile(uint8_t InputValue) +{ + // Serialize the InputValue to a file +} + +void WritePreferredCarTypeToFile(ECarTypes InputCarType) +{ + // Won't compile even though ECarTypes is a uint8_t due to the enum + // being declared as an "enum class"! + WriteByteToFile(InputCarType); +} + ////////////////////////////////////////// // Classes and object-oriented programming ////////////////////////////////////////// diff --git a/de-de/csharp-de.html.markdown b/de-de/csharp-de.html.markdown index 8ad7d71f..78bb0a6b 100644 --- a/de-de/csharp-de.html.markdown +++ b/de-de/csharp-de.html.markdown @@ -883,7 +883,7 @@ zur nächsten Zeile, ""Wahnsinn!"", die Massen waren kaum zu bändigen"; * [LINQ](http://shop.oreilly.com/product/9780596519254.do)
* [MSDN Library](http://msdn.microsoft.com/en-us/library/618ayhy6.aspx)
* [ASP.NET MVC Tutorials](http://www.asp.net/mvc/tutorials)
- * [ASP.NET Web Matrix Tutorials](http://www.asp.net/web-pages/tutorials)
+ * [ASP.NET Web Matrix Tutorials](http://www.asp.net/web-pages/overview/exploring-webmatrix)
* [ASP.NET Web Forms Tutorials](http://www.asp.net/web-forms/tutorials)
* [Windows Forms Programming in C#](http://www.amazon.com/Windows-Forms-Programming-Chris-Sells/dp/0321116208)
diff --git a/de-de/latex-de.html.markdown b/de-de/latex-de.html.markdown new file mode 100644 index 00000000..2c18b8fd --- /dev/null +++ b/de-de/latex-de.html.markdown @@ -0,0 +1,235 @@ +--- +language: latex +contributors: + - ["Chaitanya Krishna Ande", "http://icymist.github.io"] + - ["Colton Kohnke", "http://github.com/voltnor"] + - ["Sricharan Chiruvolu", "http://sricharan.xyz"] +translators: + - ["Moritz Kammerer", "https://github.com/phxql"] +lang: de-de +filename: latex-de.tex +--- +``` +% Alle Kommentare starten fangen mit % an +% Es gibt keine Kommentare über mehrere Zeilen + +% LateX ist keine "What You See Is What You Get" Textverarbeitungssoftware wie z.B. +% MS Word oder OpenOffice Writer + +% Jedes LateX-Kommando startet mit einem Backslash (\) + +% LateX-Dokumente starten immer mit der Definition des Dokuments, die sie darstellen +% Weitere Dokumententypen sind z.B. book, report, presentations, etc. +% Optionen des Dokuments stehen zwischen den eckigen Klammern []. In diesem Fall +% wollen wir einen 12 Punkte-Font verwenden. +\documentclass[12pt]{article} + +% Als nächstes definieren wir die Pakete, die wir verwenden wollen. +% Wenn du z.B. Grafiken, farbigen Text oder Quelltext in dein Dokument einbetten möchtest, +% musst du die Fähigkeiten von Latex durch Hinzufügen von Paketen erweitern. +% Wir verwenden die Pakete float und caption für Bilder. +\usepackage{caption} +\usepackage{float} + +% Mit diesem Paket können leichter Umlaute getippt werden +\usepackage[utf8]{inputenc} + +% Es können durchaus noch weitere Optione für das Dokument gesetzt werden! +\author{Chaitanya Krishna Ande, Colton Kohnke \& Sricharan Chiruvolu} +\date{\today} +\title{Learn LaTeX in Y Minutes!} + +% Nun kann's losgehen mit unserem Dokument. +% Alles vor dieser Zeile wird die Preamble genannt. +\begin{document} +% Wenn wir den Autor, das Datum und den Titel gesetzt haben, kann +% LateX für uns eine Titelseite generieren +\maketitle + +% Die meisten Paper haben ein Abstract. LateX bietet dafür einen vorgefertigen Befehl an. +% Das Abstract sollte in der logischen Reihenfolge, also nach dem Titel, aber vor dem +% Inhalt erscheinen. +% Dieser Befehl ist in den Dokumentenklassen article und report verfügbar. +\begin{abstract} + LateX documentation geschrieben in LateX! Wie ungewöhnlich und garantiert nicht meine Idee! +\end{abstract} + +% Section Befehle sind intuitiv. +% Alle Titel der sections werden automatisch in das Inhaltsverzeichnis übernommen. +\section{Einleitung} +Hi, mein Name ist Moritz und zusammen werden wir LateX erforschen! + +\section{Noch eine section} +Das hier ist der Text für noch eine section. Ich glaube, wir brauchen eine subsection. + +\subsection{Das ist eine subsection} % Subsections sind auch ziemlich intuitiv. +Ich glaube, wir brauchen noch eine. + +\subsubsection{Pythagoras} +So ist's schon viel besser. +\label{subsec:pythagoras} + +% Wenn wir den Stern nach section schreiben, dann unterdrückt LateX die Nummerierung. +% Das funktioniert auch bei anderen Befehlen. +\section*{Das ist eine unnummerierte section} +Es müssen nicht alle sections nummeriert sein! + +\section{Ein paar Notizen} +LateX ist ziemlich gut darin, Text so zu platzieren, dass es gut aussieht. +Falls eine Zeile \\ mal \\ woanders \\ umgebrochen \\ werden \\ soll, füge +\textbackslash\textbackslash in den Code ein.\\ + +\section{Listen} +Listen sind eine der einfachsten Dinge in LateX. Ich muss morgen einkaufen gehen, +also lass uns eine Einkaufsliste schreiben: +\begin{enumerate} % Dieser Befehl erstellt eine "enumerate" Umgebung. + % \item bringt enumerate dazu, eins weiterzuzählen. + \item Salat. + \item 27 Wassermelonen. + \item einen Hasen. + % Wir können die Nummer des Eintrags durch [] überschreiben + \item[Wie viele?] Mittelgroße Wasserpistolen. + + Kein Listeneintrag, aber immer noch Teil von enumerate. + +\end{enumerate} % Alle Umgebungen müssen ein end haben. + +\section{Mathe} + +Einer der Haupteinsatzzwecke von LateX ist das Schreiben von akademischen +Artikeln oder Papern. Meistens stammen diese aus dem Bereich der Mathe oder +anderen Wissenschaften. Und deswegen müssen wir in der Lage sein, spezielle +Symbole zu unserem Paper hinzuzufügen! \\ + +Mathe kennt sehr viele Symbole, viel mehr als auf einer Tastatur zu finden sind; +Symbole für Mengen und relationen, Pfeile, Operatoren und Griechische Buchstaben, +um nur ein paar zu nennen.\\ + +Mengen und Relationen spielen eine sehr wichtige Rolle in vielen mathematischen +Papern. So schreibt man in LateX, dass alle y zu X gehören: $\forall$ y $\in$ X. \\ + +% Achte auf die $ Zeichen vor und nach den Symbolen. Wenn wir in LateX schreiben, +% geschieht dies standardmäßig im Textmodus. Die Mathe-Symbole existieren allerdings +% nur im Mathe-Modus. Wir können den Mathe-Modus durch das $ Zeichen aktivieren und +% ihn mit $ wieder verlassen. Variablen können auch im Mathe-Modus angezeigt werden. + +Mein Lieblingsbuchstabe im Griechischen ist $\xi$. Ich mag auch $\beta$, $\gamma$ und $\sigma$. +Bis jetzt habe ich noch keinen griechischen Buchstaben gefunden, den LateX nicht kennt! + +Operatoren sind ebenfalls wichtige Bestandteile von mathematischen Dokumenten: +Trigonometrische Funktionen ($\sin$, $\cos$, $\tan$), +Logarithmus und Exponenten ($\log$, $\exp$), +Grenzwerte ($\lim$), etc. haben vordefinierte Befehle. +Lass uns eine Gleichung schreiben: \\ + +$\cos(2\theta) = \cos^{2}(\theta) - \sin^{2}(\theta)$\\ + +Brüche (Zähler / Nenner) können so geschrieben werden: + +% 10 / 7 +$^{10}/_{7}$ + +% Komplexere Brüche können so geschrieben werden: +% \frac{Zähler}{Nenner} +$\frac{n!}{k!(n - k)!}$ \\ + +Wir können Gleichungen auch in einer equation Umgebung verwenden. + +% Dies zeigt Mathe in einer equation Umgebung an +\begin{equation} % Aktiviert automatisch den Mathe-Modus. + c^2 = a^2 + b^2. + \label{eq:pythagoras} % Pythagoras referenzieren +\end{equation} % Alle \begin Befehle müssen einen \end Befehl besitzen + +Wir können nun unsere Gleichung referenzieren! +Gleichung ~\ref{eq:pythagoras} ist auch als das Theorem des Pythagoras bekannt. Dieses wird in +Abschnitt ~\ref{subsec:pythagoras} behandelt. Es können sehr viele Sachen mit Labels versehen werden: +Grafiken, Gleichungen, Sections, etc. + +Summen und Integrale können mit den sum und int Befehlen dargestellt werden: + +% Manche LateX-Compiler beschweren sich, wenn Leerzeilen in Gleichungen auftauchen +\begin{equation} + \sum_{i=0}^{5} f_{i} +\end{equation} +\begin{equation} + \int_{0}^{\infty} \mathrm{e}^{-x} \mathrm{d}x +\end{equation} + +\section{Grafiken} + +Lass uns eine Grafik einfügen. Das Platzieren von Grafiken kann etwas trickreich sein. +Aber keine Sorge, ich muss auch jedes mal nachschauen, welche Option wie wirkt. + +\begin{figure}[H] % H ist die Platzierungsoption + \centering % Zentriert die Grafik auf der Seite + % Fügt eine Grafik ein, die auf 80% der Seitenbreite einnimmt. + %\includegraphics[width=0.8\linewidth]{right-triangle.png} + % Auskommentiert, damit es nicht im Dokument auftaucht. + \caption{Dreieck mit den Seiten $a$, $b$, $c$} + \label{fig:right-triangle} +\end{figure} + +\subsection{Tabellen} +Wir können Tabellen genauso wie Grafiken einfügen. + +\begin{table}[H] + \caption{Überschrift der Tabelle.} + % Die {} Argumente geben an, wie eine Zeile der Tabelle dargestellt werden soll. + % Auch hier muss ich jedes Mal nachschauen. Jedes. einzelne. Mal. + \begin{tabular}{c|cc} + Nummer & Nachname & Vorname \\ % Spalten werden durch & getrennt + \hline % Eine horizontale Linie + 1 & Biggus & Dickus \\ + 2 & Monty & Python + \end{tabular} +\end{table} + +% \section{Links} % Kommen bald! + +\section{Verhindern, dass LateX etwas kompiliert (z.B. Quelltext)} +Angenommen, wir wollen Quelltext in unserem LateX-Dokument. LateX soll +in diesem Fall nicht den Quelltext als LateX-Kommandos interpretieren, +sondern es einfach ins Dokument schreiben. Um das hinzubekommen, verwenden +wir eine verbatim Umgebung. + +% Es gibt noch weitere Pakete für Quelltexte (z.B. minty, lstlisting, etc.) +% aber verbatim ist das simpelste. +\begin{verbatim} + print("Hello World!") + a%b; % Schau dir das an! Wir können % im verbatim verwenden! + random = 4; #decided by fair random dice roll +\end{verbatim} + +\section{Kompilieren} + +Ich vermute, du wunderst dich, wie du dieses tolle Dokument in ein PDF +verwandeln kannst. (Ja, dieses Dokument kompiliert wirklich!) \\ + +Dafür musst du folgende Schritte durchführen: + \begin{enumerate} + \item Schreibe das Dokument. (den LateX-Quelltext). + \item Kompiliere den Quelltext in ein PDF. + Das Kompilieren sieht so ähnlich wie das hier aus (Linux): \\ + \begin{verbatim} + $pdflatex learn-latex.tex learn-latex.pdf + \end{verbatim} + \end{enumerate} + +Manche LateX-Editoren kombinieren Schritt 1 und 2. Du siehst also nur Schritt 1 und Schritt +2 wird unsichtbar im Hintergrund ausgeführt. + +Alle Formatierungsoptionen werden in Schritt 1 in den Quelltext geschrieben. Schritt 2 verwendet +dann diese Informationen und kümmert sich drum, dass das Dokument korrekt erstellt wird. + +\section{Ende} + +Das war's erst mal! + +% Dokument beenden +\end{document} +``` +## Mehr Informationen über LateX + +* Das tolle LaTeX wikibook: [https://de.wikibooks.org/wiki/LaTeX-Kompendium](https://de.wikibooks.org/wiki/LaTeX-Kompendium) +* Ein Tutorial (englisch): [http://www.latex-tutorial.com/](http://www.latex-tutorial.com/) diff --git a/el-gr/css-gr.html.markdown b/el-gr/css-gr.html.markdown new file mode 100644 index 00000000..327dc1a0 --- /dev/null +++ b/el-gr/css-gr.html.markdown @@ -0,0 +1,243 @@ +--- +language: css +contributors: + - ["Kostas Bariotis", "http://kostasbariotis.com"] +filename: css-gr.html.markdown +lang: el-gr +--- + +Η αρχική μορφή του Παγκόσμιου Ιστού αποτελούταν απο καθαρό κείμενο, χωρίς οπτικά αντικείμενα. Με το πέρας +του χρόνου και την εξέλιξη των Φυλλομετρητών, οι πλούσιες σελίδες, σε οπτικά και πολυμεσικά αντικείμενα, +γίναν καθημερινότητα. + +Η CSS μας βοηθάει να διαχωρήσουμε το περιεχόμενο της σελίδας μας (HTML) απο την οπτική της περιγραφή. + +Με την CSS ορίζουμε οπτικές ιδιότητες (χρώμα, μέγεθος, κλπ) σε HTML αντικείμενα (H1, div, κλπ). + +```css +/* Σχόλια εμφανίζονται εντός καθέτου-αστερίσκου, όπως εδώ. + Δεν υπάρχουν σχόλια μια γραμμής και πολλών. */ + +/* #################### + ## ΚΑΝΟΝΕΣ + #################### */ + +/* ένας κανόνας χρησιμοποιείτε για να στοχεύσουμε ένα αντικείμενο (selector). +selector { property: value; /* περισσότερες ιδιότητες...*/ } + +/* +Αυτό είναι ενα παράδειγμα αντικειμένου¨ + +<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' /> +*/ + +/* Μπορούμε να το στοχεύσουμε με την χρήση CSS κλάσεων */ +.class1 { } + +/* Ή και με τις δύο κλάσεις! */ +.class1.class2 { } + +/* Και με το όνομα του */ +div { } + +/* Ή με το id του */ +#anID { } + +/* Ή με το γεγονός ότι περιέχει ενα attribute */ +[attr] { font-size:smaller; } + +/* Ή οτι το attribute αυτό έχει μια συγκεκριμένη τιμή */ +[attr='value'] { font-size:smaller; } + +/* Ξεκινάει απο το λεκτικό (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* Καταλήγει σε αυτο το λεκτικό (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + +/* Περιέχει κάποιο λεκτικό */ +[otherAttr~='foo'] { } +[otherAttr~='bar'] { } + +/* περιέχει το λεκτικό σε λίστα χωρισμένη με παύλες, δηλαδή: "-" (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } + + +/* Μπορούμε να προσθέσουμε μεταξύ τους selectors για να δημιουργήσουμε πιο αυστηρούς. + Δεν βάζουμε κενά ανάμεσα. */ +div.some-class[attr$='ue'] { } + +/* Μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται μέσα σε άλλα. */ +div.some-parent > .class-name { } + +/* Ή κάποιο αντικείμενο απόγονο ανεξαρτήτου του βάθους της σχέσης τους. */ +div.some-parent .class-name { } + +/* ΠΡΟΣΟΧΗ: ο ίδιος selector χωρίς κενά έχει άλλο νόημα. (Άσκηση προς τον αναγνώστη) */ +div.some-parent.class-name { } + +/* Μπορούμε να επιλέξουμε αντικείμενα με βάση το αμέσως επόμενο αντικείμενο στο ίδιο επίπεδο. */ +.i-am-just-before + .this-element { } + +/* Ή οποιοδήποτε αντικείμενο που προηγείται */ +.i-am-any-element-before ~ .this-element { } + +/* Με την βοήθεια των ψευδο-κλάσεων μπορούμε να επιλέξουμε αντικείμενα που βρίσκονται σε μια + ορισμένη κατάασταση. */ + +/* π.χ. όταν ο κέρσορας είναι πάνω απο ένα αντικείμενο */ +selector:hover { } + +/* ή ένας υπερσύνδεσμος που πατήθηκε */ +selector:visited { } + +/* ή που δεν πατήθηκε */ +selected:link { } + +/* ή ένα αντικείμενο που επιλέχθηκε */ +selected:focus { } + +/* οποιοδήποτε αντικείμενο είναι το πρώτο παιδί των γονέων του */ +selector:first-child {} + +/* οποιοδήποτε αντικείμενο είναι το πρώτοτελευταίο παιδί των γονέων του */ +selector:last-child {} + +/* Όπως και με τις ψευδο-κλάσεις, τα ψευδο-αντικείμενα μας επιτρέπουν τα τροποοιήσουμε συγκεκριμένα + κομμάτια της σελίδας */ + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς πριν απο το αντικείμενο */ +selector::before {} + +/* επιλέγει το ψευδο-αντικείμενο ακριβώς μετά απο τον αντικείμενο */ +selector::after {} + +/* Σε σωστά σημεία (όχι πολύ ψηλά στην ιεραρχία) ο αστερίσκος μπορείς να χρησιμοποιηθεί για να + επιλέξουμε όλα τα αντικείμενα */ +* { } /* όλα τα αντικείμενα της σελίδας */ +.parent * { } /* όλους τους απόγονους */ +.parent > * { } /* όλους τους απόγονους πρώτου επιπέδου */ + +/* #################### + ## Ιδιότητες + #################### */ + +selector { + + /* Οι μονάδες μπορούν να είναι είτε απόλυτες είτε σχετικές */ + + /* Σχετικές μονάδες */ + width: 50%; /* ποσοστό επί του πλάτους του γονέα */ + font-size: 2em; /* πολλαπλασιαστής της αρχικής τιμής του αντικειμένου */ + font-size: 2rem; /* ή της τιμής του πρώτου αντικειμένου στην ιεραρχία */ + font-size: 2vw; /* πολλαπλαστιαστής του 1% του οπτικού πλάτους */ + font-size: 2vh; /* ή τους ύψους */ + font-size: 2vmin; /* οποιοδήποτε απο αυτα τα δύο είναι το μικρότερο */ + font-size: 2vmax; /* ή το μεγαλύτερο */ + + /* Απόλυτες μονάδες */ + width: 200px; /* pixels */ + font-size: 20pt; /* στιγμες */ + width: 5cm; /* εκατοστά */ + min-width: 50mm; /* χιλιοστά */ + max-width: 5in; /* ίντσες */ + + /* Χρώματα */ + color: #F6E; /* σύντομη δεκαεξαδική μορφή */ + color: #FF66EE; /* δεκαεξαδική μορφή */ + color: tomato; /* χρώμα με το όνομα του (συγκεκριμένα χρώματα) */ + color: rgb(255, 255, 255); /* τιμή RGB */ + color: rgb(10%, 20%, 50%); /* τιμή RGB με ποσοστά */ + color: rgba(255, 0, 0, 0.3); /* τιμή RGBA (CSS3) σσ. 0 < a < 1 */ + color: transparent; /* όπως και το παραπάνω με a = 0 */ + color: hsl(0, 100%, 50%); /* τιμή hsl με ποσοστά (CSS 3) */ + color: hsla(0, 100%, 50%, 0.3); /* τιμή hsla με ποσοστά και a */ + + /* Εικόνες μπορούν να τοποθετηθούν στον φόντο ενός αντικειμένου */ + background-image: url(/img-path/img.jpg); + + /* Γραμματοσειρές */ + font-family: Arial; + /* εάν η γραμματοσειρα περιέχει κενά */ + font-family: "Courier New"; + /* εάν η πρώτη γραμματοσειρα δε βρεθεί εγκατεστημένη στο Λειτουργικό Σύστυμα, αυτόματα + επιλέγετε η δεύτερη, κ.κ.ε. */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; +} +``` + +## Χρήση + +Αποθηκεύουμε ένα αρχείο CSS με την επέκταση `.css`. + +```xml +<!-- Πρέπει να συμπεριλάβουμε το αρχείο στην επικεφαλίδα(head) ενος HTML αρχείου. + σσ. http://stackoverflow.com/questions/8284365 --> +<link rel='stylesheet' type='text/css' href='path/to/style.css' /> + +<!-- Μπορούμε να το ενσωματώσουμε --> +<style> + a { color: purple; } +</style> + +<!-- Ή απευθείας σε κάποιο αντικείμενο (inline) --> +<div style="border: 1px solid red;"> +</div> +``` + +## Ειδικότητα των κανόνων (Cascading απο το αγγλικό τίτλο Cascading Style Sheets) + +Ένα αντικείμενο μπορεί να στοχευθεί απο πολλούς κανόνες και μπορεί η ίδια ιδιότητα να +περιλαμβάνετε σε πολλούς κανόνες. Σε αυτές της περιπτώσεις υπερισχύει πάντα ο πιο ειδικός +κανόνας και απο αυτούς, αυτός που εμφανίζεται τελευταίος. + +```css +/* A */ +p.class1[attr='value'] + +/* B */ +p.class1 { } + +/* C */ +p.class2 { } + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +```xml +<p style='/*F*/ property:value;' class='class1 class2' attr='value' /> +``` + +Η σειρά θα είναι: + +* `E` έχει μεγαλύτερο βάρος λόγω του `!important`. Κάλες πρακτικές λένε να το αποφεύγουμε. +* `F` επόμενο λόγω του inline κανόνα. +* `A` επόμενο λόγω του το οτι είναι πιο ειδικό. Περιέχει τρεις selectors. +* `C` επόμενο, λόγω του οτι εμφανίζεται μετα το Β και ας έχει την ίδια ειδικότητα. +* `B` επόμενο. +* `D` τελευταίο. + +## Συμβατότητα + +Τα περισσότερα απο τα παραπάνω ήδη υποστηρίζονται απο τους γνωστούς φυλλομετρητές. Άλλα θα πρέπει +πάντα να ελέγχουμε πρωτου τους χρησιμοποιήσουμε. + +## Περισσότερα + +* Έλεγχος συμβατότητας, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) + +## Μελέτη + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing +* [CSS-Tricks](https://css-tricks.com) diff --git a/el-gr/racket-gr.html.markdown b/el-gr/racket-gr.html.markdown index 4c4576bb..589adfeb 100644 --- a/el-gr/racket-gr.html.markdown +++ b/el-gr/racket-gr.html.markdown @@ -31,12 +31,12 @@ H Racket είναι μια γενικού σκοπού, πολυ-υποδειγ ;; Τα σχόλια S-expression (εκφράσεις S) comments απορρίπτουν την ;; έκφραση που ακολουθεί, δυνατότητα που είναι χρήσιμη για να -;; κάνουμε σχόλια κάποιες εκφράσεις κατα τη διάρκεια του debugging +;; κάνουμε σχόλια κάποιες εκφράσεις κατά τη διάρκεια του debugging #; (αυτή η έκφραση δεν θα εκτελεστεί) ;; (Αν δεν καταλαβαίνεται τι είναι οι εκφράσεις , περιμένετε... Θα το μάθουμε -;; πολύ συντομα!) +;; πολύ σύντομα!) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -57,8 +57,8 @@ H Racket είναι μια γενικού σκοπού, πολυ-υποδειγ ;; όπου το f είναι η συνάρτηση και τα x y z ;; είναι οι όροι που η συνάρτηση δέχεται ;; ως ορίσματα. Αν θέλουμε να δημιουργήσουμε -;; μια λίστα στην κυριολεξία απο δίαφορα δεδομένα, -;; χρησιμοποιούμε το ' για να το εμποδίσουμε απο το να +;; μια λίστα στην κυριολεξία από δίαφορα δεδομένα, +;; χρησιμοποιούμε το ' για να το εμποδίσουμε από το να ;; αξιολογηθεί σαν έκφραση. Για παράδειγμα: '(+ 1 2) ; => Παραμένει (+ 1 2) και δεν γίνεται η πράξη ;; Τώρα , ας κάνουμε μερικές πράξεις @@ -88,15 +88,15 @@ H Racket είναι μια γενικού σκοπού, πολυ-υποδειγ ;;; Τα αλφαριθμητικά είναι πίνακες χαρακτήρων συγκεκριμένου μήκους "Hello, world!" "Benjamin \"Bugsy\" Siegel" ; Το backslash είναι χαρακτήρας διαφυγής -"Foo\tbar\41\x21\u0021\a\r\n" ; Συμπεριλαμβάνονται οι χαρακτήες διαφυγής της C, +"Foo\tbar\41\x21\u0021\a\r\n" ; Συμπεριλαμβάνονται οι χαρακτήρες διαφυγής της C, ; σε Unicode "λx:(μα.α→α).xx" ; Μπορούν να υπάρχουν και Unicode χαρακτήρες -;; Μπορούμε να εννώσουμε αλφαριθμητικά! +;; Μπορούμε να ενώσουμε αλφαριθμητικά! (string-append "Hello " "world!") ; => "Hello world!" -;; Ένα αλφαριθμητικό μπορούμε να το χρησιμοπιησουμε -;; όπως και μια λίστα απο χαρακτήρες +;; Ένα αλφαριθμητικό μπορούμε να το χρησιμοποιήσουμε +;; όπως και μια λίστα από χαρακτήρες (string-ref "Apple" 0) ; => #\A ;; Παίρνουμε το πρώτο στοιχείο ;; Η συνάρτηση format μπορεί να χρησιμοποιηθεί για @@ -117,18 +117,18 @@ H Racket είναι μια γενικού σκοπού, πολυ-υποδειγ some-var ; => 5 ;; Μπορούμε επίσης να χρησιμοποιήσουμε unicode χαρακτήρες. -(define ⊆ subset?) ;; Εδώ ουστιαστικά δίνουμε στη ήδη ύπαρχουσα συνάρτηση subset? +(define ⊆ subset?) ;; Εδώ ουσιαστικά δίνουμε στη ήδη υπάρχουσα συνάρτηση subset? ;; ένα νέο όνομα ⊆ , και παρακάτω την καλούμε με το νέο της όνομα. (⊆ (set 3 2) (set 1 2 3)) ; => #t -;; Αν ζητήσουμε μια μεταβλητή που δεν έχει οριστεί πρίν π.χ +;; Αν ζητήσουμε μια μεταβλητή που δεν έχει οριστεί πριν π.χ. (printf name) ;; θα πάρουμε το παρακάτω μήνυμα ;name: undefined; ; cannot reference undefined identifier ; context...: -;; Η τοπική δέσμευση : `me' δευσμεύεται με το "Bob" μόνο μέσα στο (let ...) +;; Η τοπική δέσμευση : `me' δεσμεύεται με το "Bob" μόνο μέσα στο (let ...) (let ([me "Bob"]) "Alice" me) ; => "Bob" @@ -156,7 +156,7 @@ my-pet ; => #<dog> ;;; Λίστες ;; Οι λίστες είναι linked-list δομές δεδομένων, -;; που έχουν δημιουργηθεί απο ζευγάρια 'cons' +;; που έχουν δημιουργηθεί από ζευγάρια 'cons' ;; και τελειώνουν με 'null' (ή αλλιώς '()) για να ;; δηλώσουν ότι αυτό είναι το τέλος της λίστας (cons 1 (cons 2 (cons 3 null))) ; => '(1 2 3) @@ -191,12 +191,12 @@ my-pet ; => #<dog> ;; Τα διανύσματα είναι πίνακες σταθερού μήκους #(1 2 3) ; => '#(1 2 3) -;; Χρησιμοποιύμε το `vector-append' για να προσθέσουμε διανύσματα +;; Χρησιμοποιούμε το `vector-append' για να προσθέσουμε διανύσματα (vector-append #(1 2 3) #(4 5 6)) ; => #(1 2 3 4 5 6) ;;; Σύνολα -;; Δημιουργούμε ένα σύνολο απο μία λίστα +;; Δημιουργούμε ένα σύνολο από μία λίστα (list->set '(1 2 3 1 2 3 3 2 1 3 2 1)) ; => (set 1 2 3) ;; Προσθέτουμε έναν αριθμό στο σύνολο χρησιμοποιώντας το `set-add' @@ -214,10 +214,10 @@ my-pet ; => #<dog> ;; Δημιουργήστε ένα αμετάβλητο πίνακα κατακερματισμού (define m (hash 'a 1 'b 2 'c 3)) -;; Παίρνουμε μια τιμή απο τον πίνακα +;; Παίρνουμε μια τιμή από τον πίνακα (hash-ref m 'a) ; => 1 -;; Άν ζητήσουμε μια τιμή που δέν υπάρχει παίρνουμε μία εξαίρεση +;; Αν ζητήσουμε μια τιμή που δεν υπάρχει παίρνουμε μία εξαίρεση ; (hash-ref m 'd) => no value found for key ;; Μπορούμε να δώσουμε μια default τιμή για τα κλειδιά που λείπουν @@ -234,7 +234,7 @@ m2 ; => '#hash((b . 2) (a . 1) (d . 4) (c . 3)) m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' ;; Χρησιμοποιούμε το `hash-remove' για να αφαιρέσουμε -;; κλειδία +;; κλειδιά (hash-remove m 'a) ; => '#hash((b . 2) (c . 3)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -247,12 +247,12 @@ m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' ;; Μπορούμε επίσης να χρησιμοποιήσουμε το `λ' (λ () "Hello World") ; => Ίδια συνάρτηση -;; Χρησιμοποιύμε τις παρενθέσεις για να καλέσουμε όλες τις συναρτήσεις +;; Χρησιμοποιούμε τις παρενθέσεις για να καλέσουμε όλες τις συναρτήσεις ;; συμπεριλαμβανομένων και των εκφράσεων 'λάμδα' ((lambda () "Hello World")) ; => "Hello World" ((λ () "Hello World")) ; => "Hello World" -;; Εκχωρούμε σε μια μετάβλητη την συνάρτηση +;; Εκχωρούμε σε μια μεταβλητή την συνάρτηση (define hello-world (lambda () "Hello World")) (hello-world) ; => "Hello World" @@ -302,7 +302,7 @@ m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' (lambda (name . args) (format "Hello ~a, you passed ~a extra args" name (length args)))) -;; Και με λέξεις κλειδία +;; Και με λέξεις κλειδιά (define (hello-k #:name [name "World"] #:greeting [g "Hello"] . args) (format "~a ~a, ~a extra args" g name (length args))) (hello-k) ; => "Hello World, 0 extra args" @@ -347,7 +347,7 @@ m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' (eq? (string-append "foo" "bar") (string-append "foo" "bar")) ; => #f -;; Το `eqv?' υποστηρίζει την σύκριση αριθμών αλλα και χαρακτήρων +;; Το `eqv?' υποστηρίζει την σύγκριση αριθμών αλλά και χαρακτήρων ;; Για άλλα ήδη μεταβλητών το `eqv?' και το `eq?' επιστρέφουν το ίδιο. (eqv? 3 3.0) ; => #f (eqv? (expt 2 100) (expt 2 100)) ; => #t @@ -365,12 +365,12 @@ m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' (equal? (list 3) (list 3)) ; => #t ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; 5. Έλεχγος Ροής +;; 5. Έλεγχος Ροής ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;; Συνθήκες (conditionals) -(if #t ; έκφραση ελέχγου +(if #t ; έκφραση ελέγχου "this is true" ; έκφραση then "this is false") ; έκφραση else ; => "this is true" @@ -483,7 +483,7 @@ m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' (values i (number->string i))) ; => '#hash((1 . "1") (2 . "2") (3 . "3")) -;; Υπάρχουν πολλά είδη απο προϋπάρχοντες τρόπους για να συλλέγουμε +;; Υπάρχουν πολλά είδη από προϋπάρχοντες τρόπους για να συλλέγουμε ;; τιμές από τους βρόχους (for/sum ([i 10]) (* i i)) ; => 285 @@ -491,7 +491,7 @@ m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' (for/and ([i 10] [j (in-range 10 20)]) (< i j)) ; => #t (for/or ([i 10] [j (in-range 0 20 2)]) (= i j)) ; => #t -;; Και για να χρησιμοποιήσουμε ένα αφθαίρετο συνδιασμό χρησιμοποιούμε +;; Και για να χρησιμοποιήσουμε ένα αυθαίρετο συνδυασμό χρησιμοποιούμε ;; το 'for/fold' (for/fold ([sum 0]) ([i '(1 2 3 4)]) (+ sum i)) ; => 10 @@ -524,17 +524,17 @@ m ; => '#hash((b . 2) (a . 1) (c . 3)) <-- δεν υπάρχει `d' (set! n (add1 n)) n ; => 6 -;; Χρησιμοποιούμε τα boxes για να δηλώσουμε ρητά ότι μια μεταβητή -;; θα είναι mutable (θα μπορεί να αλλάξη η τιμή της) +;; Χρησιμοποιούμε τα boxes για να δηλώσουμε ρητά ότι μια μεταβλητή +;; θα είναι mutable (θα μπορεί να αλλάξει η τιμή της) ;; Αυτό είναι παρόμοιο με τους pointers σε άλλες γλώσσες (define n* (box 5)) (set-box! n* (add1 (unbox n*))) (unbox n*) ; => 6 -;; Πολλοί τύποι μεταβλητών στη Racket είναι αμετάβλητοι πχ τα ζεύγη, οι +;; Πολλοί τύποι μεταβλητών στη Racket είναι αμετάβλητοι π.χ. τα ζεύγη, οι ;; λίστες κτλ. Άλλοι υπάρχουν και σε μεταβλητή και σε αμετάβλητη μορφή -;; πχ αλφαριθμητικά, διανύσματα κτλ +;; π.χ. αλφαριθμητικά, διανύσματα κτλ. (define vec (vector 2 2 3 4)) (define wall (make-vector 100 'bottle-of-beer)) ;; Χρησιμοποιούμε το 'vector-set!' για να ανεώσουμε κάποια @@ -579,7 +579,7 @@ vec ; => #(1 2 3 4) (printf fmt (make-string n ch)) (newline))) -;; Χρησιμοποιομε το 'require' για να πάρουμε όλα τα +;; Χρησιμοποιουμε το 'require' για να πάρουμε όλα τα ;; παρεχόμενα ονόματα από μία ενότητα (require 'cake) ; το ' είναι για τοπική υποενότητα (print-cake 3) @@ -634,7 +634,7 @@ vec ; => #(1 2 3 4) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Οι μακροεντολές μας επιτρέπουν να επεκτείνουμε -;; το συντακτικό μιάς γλώσσας. +;; το συντακτικό μιας γλώσσας. ;; Ας προσθέσουμε έναν βρόχο while (define-syntax-rule (while condition body ...) @@ -664,20 +664,20 @@ vec ; => #(1 2 3 4) ;; (set! tmp other) ;; (set! other tmp_1)) -;; Αλλά ακόμα υπάρχουν ακόμη μετασχηματισμοί του κώδικα, π.χ: +;; Αλλά ακόμα υπάρχουν ακόμη μετασχηματισμοί του κώδικα, π.χ.: (define-syntax-rule (bad-while condition body ...) (when condition body ... (bad-while condition body ...))) -;; αυτή η μακροεντολή είναι χαλασμένη: δημιουγεί ατέρμονα βρόχο +;; αυτή η μακροεντολή είναι χαλασμένη: δημιουργεί ατέρμονα βρόχο ;; και αν προσπαθήσουμε να το χρησιμοποιήσουμε, ο μεταγλωττιστής -;; θα μπεί στον ατέρμονα βρόχο. +;; θα μπει στον ατέρμονα βρόχο. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; 10. Συμβόλαια (Contracts) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Τα συμβόλαια βάζουν περιορισμόυς σε τιμές που προέρχονται +;; Τα συμβόλαια βάζουν περιορισμούς σε τιμές που προέρχονται ;; από ενότητες (modules) (module bank-account racket (provide (contract-out @@ -719,7 +719,7 @@ vec ; => #(1 2 3 4) (displayln "Hola mundo" out-port) (close-output-port out-port) -;; Διαβάζουμε απο αρχείο ξανά +;; Διαβάζουμε από αρχείο ξανά (define in-port (open-input-file "/tmp/tmp.txt")) (displayln (read-line in-port)) ; => "Hello World" diff --git a/it-it/brainfuck-it.html.markdown b/it-it/brainfuck-it.html.markdown index 4999d7e6..08d2ede9 100644 --- a/it-it/brainfuck-it.html.markdown +++ b/it-it/brainfuck-it.html.markdown @@ -1,75 +1,72 @@ --- - language: brainfuck contributors: - ["Prajit Ramachandran", "http://prajitr.github.io/"] - ["Mathias Bynens", "http://mathiasbynens.be/"] translators: - ["Ivan Sala", "http://slavni96.github.io/"] + - ["Christian Grasso", "http://chris54721.net"] lang: it-it - --- -Brainfuck è un linguaggio di programmazione estremamente minimale, -ma è ingrado di rappresentare completamente una macchina di turnig, -e sfrutta solo 8 caratteri. -[Per saperne di più](http://it.wikipedia.org/wiki/Brainfuck) +Brainfuck è un linguaggio di programmazione +[Turing equivalente](https://it.wikipedia.org/wiki/Turing_equivalenza) +estremamente minimale, composto da solo 8 comandi. + +Puoi provarlo nel tuo browser utilizzando +[brainfuck-visualizer](http://fatiherikli.github.io/brainfuck-visualizer/). ``` -Qualsiasi carattere che non sia "><+-.,[]" (escludendo gli apici) +Qualsiasi carattere diverso da "><+-.,[]" (escludendo gli apici) viene ignorato. -Branfuck è caratterizzato da un array (vettore) di 30,000 celle -inizializzare a zero, e un puntatore che punta alla cella corrente. +Branfuck è caratterizzato da un array di 30,000 celle inizializzate a zero +e da un puntatore che punta alla cella corrente. -Vi sono solo otto comando: +Vi sono otto comandi: + : Incrementa il valore della cella attuale di uno. - : Decrementa il valore della cella attuale di uno. -> : Sposta il puntatore sulla cella seguente (prossima a destra). -< : Sposta il puntatore sulla cella precendete (precedente a sinistra). -. : Stampa il valore in ASCII della cella corrente. (es: 65 = 'A') -, : Legge un singolo carattere come input per la cella corrente. -[ : Se il valore della cella corrente è zero, conclude il ciclo - andando alla sua corrispondente ]. +> : Sposta il puntatore sulla cella seguente (sulla destra). +< : Sposta il puntatore sulla cella precendete (sulla sinistra). +. : Stampa il valore ASCII della cella corrente. (es. 65 = 'A') +, : Legge un singolo carattere come input e lo salva nella cella corrente. +[ : Se il valore della cella corrente è zero, prosegue fino alla ] corrispondente. Altrimenti, passa alla prossima istruzione. ] : Se il valore della cella corrente è zero, passa alla prossima istruzione. - Altrimenti torna indetro fino alla [ corrispondente. + Altrimenti, torna indietro fino alla [ corrispondente. -[ e ] creano un loop (while). Ovviamente dovranno essere bilanciati. -Per ogni [ dovrà corrispondere una ] +[ e ] formano un ciclo while. Ovviamente dovranno essere bilanciati. +(Ad ogni [ dovrà corrispondere una ]) -Alcuni semplici esempi di programmi scritti in Brainfuck: +Ecco alcuni semplici esempi di programmi scritti in Brainfuck: ++++++ [ > ++++++++++ < - ] > +++++ . -Questo programma stampa in output la lettera 'A'. Priam incrementa -la cella #1 fino a 6, Quindi la cella #1 viene usata per crare un ciclo. -Poi, entra in un loop ([) e si sposta alla cella #2. -Incrementa la cella #2 10 volte, e torna alla cella #1, e la decrementa. -Questo avviene 6 volte (servono che la cella #1 venga decrementata 6 volte -per raggiungere lo 0. Quindi passa alla corrispondente ] e prosegue). +Questo programma stampa in output la lettera 'A'. Prima di tutto, incrementa +la cella #1 fino al valore 6. La cella #1 verrà utilizzata per il ciclo. +Poi, entra nel ciclo ([) e si sposta alla cella #2. Incrementa la cella #2 10 +volte, torna alla cella #1, e decrementa quest'ultima. +Il ciclo si ripete 6 volte (la cella #1 viene decrementata 6 volte prima di +raggiungere lo 0, quindi prosegue oltre la corrispondente ]). -A questo punto, siamo sulla cella #1, che ha valore 0, -la cella #2 ha valore 60 (6*10). Ci spostiamo sulla cella #2, incrementiamo -per 5 volte, e otteniamo il valore 65, quindi stampaimo il valore della cella -#2 (.). -65 è 'A' in ASCII, quindi alla fine viene stampata 'A'. +A questo punto, siamo sulla cella #1, che ha valore 0, mentre la cella #2 ha +valore 60. Ci spostiamo sulla cella #2, la incrementiamo per 5 volte, ottenendo +il valore 65, quindi stampiamo il valore della cella #2. +Il valore 65 equivale ad 'A' in ASCII, per cui viene stampato 'A' nel terminale. , [ > + < - ] > . -Questo programma legge un carattere come input dall'utente, -quindi salva il carattere dentro la cella #1. -In seguito, incominca a ciclare. -Si sposta alla cella #², e increementa il valore della cella (#2). -Quindi torna alla cella #1, e decrementa il valore della cella (#1). -Questo continua fino a quando la cella #²1 diventa 0, e quindi la cella #2 -avrà il valore iniziale della cella #1. -Infine, visto che ci troviamo sulla cella #1 alla fine del ciclo, si sposta -sulla cella #2 e stampa il valore in ASCII. +Questo programma legge un carattere come input dall'utente, quindi salva il +carattere nella cella #1. Dopodichè entra in un ciclo. Si sposta alla cella #2, +incrementa quest'ultima, torna alla cella #1, e decrementa quest'ultima. +Il ciclo continua fino a quando la cella #1 diventa 0, e quindi la cella #2 +avrà il valore iniziale della cella #1. Infine, visto che ci troviamo sulla +cella #1 alla fine del ciclo, si sposta sulla cella #2 e stampa il valore in +ASCII. -Gli spazi nel codice sovrastante, sono presenti solo a scopo di ottenere -una maggiore leggibilità, si poteva anche scrivere senza: +Gli spazi nel codice sovrastante sono presenti solo a scopo di ottenere +una maggiore leggibilità. Lo stesso programma poteva essere scritto senza spazi: ,[>+<-]>. @@ -77,25 +74,19 @@ Proviamo, adesso, a capire cosa fa invece questo programma: ,>,< [ > [ >+ >+ << -] >> [- << + >>] <<< -] >> -Prende due numeri in input e quindi li moltiplica. +Il programma legge 2 numeri come input dall'utente, e li moltiplica. -Prima prende in input i due numeri (,>,<), quindi inizia un cilclo -basandosi sulla cella #1. -Quindi si sposta sulla cella #2, e inizia un altro ciclo condizionato -dal valore della cella #2, incrementando la cella #3. +Innanzitutto, legge in input i due numeri. Poi entra nel ciclo più esterno +basandosi sulla cella #1. Quindi si sposta sulla cella #2, e inizia il ciclo +più interno basandosi sul valore della cella #2, incrementando la cella #3. Arrivati a questo punto abbiamo un problema: alla fine del ciclo interno -la cella #2 ha valore 0. In questo caso, quando il ciclo esterno rifarà -partire il ciclo interno, non funzionerà più perchè la cella #2 ha valore 0. -Per ovviare a questo problema, oltre alla cella 3, incrementiamo anche la cella -#4, e alla fine di ogni ciclo interno copiala il valore della cella #4 -nella cella #2, in modo che il ciclo interno -possa essere eseguito una altra volta. -Alla fine la cella #3 contiene il risultato. +la cella #2 avrà valore 0. Ciò impedirà di eseguire nuovamente il ciclo interno. +Per ovviare a questo problema, incrementiamo anche la cella #4, e copiamo il +valore di quest'ultima nella cella #2. +Il risultato sarà infine contenuto nella cella #3. ``` -E questo è brainfuck...Non è difficele, vero? -Per divertimento adesso puoi scrivere i tuoi programmi in brainfuck, -oppure puoi scrivere un interprete brainfuck in un altro linguaggio. -L'interprete è abbastanza semplice da implementare, ma se sei veramente -masochista prova ad implementare un interprete brainfuck in... -brainfuck. +E questo è brainfuck. Non è così difficile, eh? Se vuoi, ora puoi scrivere per +divertimento altri programmi in brainfuck, oppure scrivere un interprete +brainfuck in un altro linguaggio. L'interprete è abbastanza semplice da +implementare, ma se sei veramente masochista, prova ad implementare un interprete brainfuck... in brainfuck. diff --git a/it-it/java-it.html.markdown b/it-it/java-it.html.markdown index 6eabd61f..54602cff 100644 --- a/it-it/java-it.html.markdown +++ b/it-it/java-it.html.markdown @@ -6,6 +6,7 @@ contributors: - ["Madison Dickson", "http://github.com/mix3d"] translators: - ["Ivan Sala","http://github.com/slavni96"] + - ["Tommaso Pifferi","http://github.com/neslinesli93"] lang: it-it --- @@ -31,9 +32,9 @@ import java.security.*; // Ogni file .java contiene una classe pubblica, con lo stesso nome del file public class LearnJava { - // Un programma deve avere un metodo main come punto di partenza - // Ma si possono creare anche file senza main, che però per essere usati - // devono essere richiamati da altri file. + // Un programma deve avere un metodo main come punto di partenza. + // Tuttavia si possono creare anche file senza main, che però + // per essere usati devono essere richiamati da altri file. public static void main (String[] args) { // Per stampare a schermo si usa System.out.println @@ -47,88 +48,157 @@ public class LearnJava { System.out.print("Ciao "); System.out.print("Mondo "); + // Per stampare del testo formattato, si puo' usare System.out.printf + System.out.printf("pi greco = %.5f", Math.PI); // => pi greco = 3.14159 /////////////////////////////////////// - // Tipi e Variabili + // Variabili /////////////////////////////////////// - // Si dichiara una variabile usando <tipo> <nome> - // Byte - variabile intera da 8 bit con segno + + /* + * Dichiarazione delle Variabili + */ + // Per dichiarare una variabile basta fare <tipoDato> <nomeVariabile> + int fooInt; + // Per dichiarare piu' di una variabile dello lo stesso tipo si usa: + // <tipoDato> <nomeVariabile1>, <nomeVariabile2>, <nomeVariabile3> + int fooInt1, fooInt2, fooInt3; + + /* + * Inizializzazione delle Variabili + */ + + // Per inizializzare una variabile si usa + // <tipoDato> <nomeVariabile> = <valore> + int fooInt = 1; + // Per inizializzare piu' di una variabile dello lo stesso tipo + // si usa <tipoDato> <nomeVariabile1>, <nomeVariabile2>, <nomeVariabile3> = <valore> + int fooInt1, fooInt2, fooInt3; + fooInt1 = fooInt2 = fooInt3 = 1; + + /* + * Tipi di Variabili + */ + // Byte - intero con segno a 8 bit (in complemento a 2) // (-128 <= byte <= 127) byte fooByte = 100; - // Short - variabile intera da 18 bit con segno + // Short - intero con segno a 16 bit (in complemento a 2) // (-32,768 <= short <= 32,767) short fooShort = 10000; - // Integer - variabile intera da 32 bit con segno + // Integer - intero con segno a 32 bit (in complemento a 2) // (-2,147,483,648 <= int <= 2,147,483,647) int fooInt = 1; - // Long - variabile da 64 bit intera con segno + // Long - intero con segno a 64 bit (in complemento a 2) // (-9,223,372,036,854,775,808 <= long <= 9,223,372,036,854,775,807) long fooLong = 100000L; - // L viene usato per specificare che il valore dalla variabile - // e' di tipo "Long", qualsiasi variabile che non viene contrassegnata - // e' trattata di base come un intero. + // L viene usato per indicare che il valore e' di tipo Long; + // altrimenti il valore viene considerato come intero. - // Nota: Java non dispone di variabili senza segno + // Nota: Java non dispone di interi senza segno. - // Float - variabile piu' precisa, con virgola [numeri reali] - // di grandezza 32 bit + // Float - Numero in virgola mobile a 32 bit con precisione singola (IEEE 754) + // 2^-149 <= float <= (2-2^-23) * 2^127 float fooFloat = 234.5f; - // f e' usato per specificare che la variabile e'' di tipo "float" - // altrimenti di default viene trattata come un "dobule" + // f o F indicano the la variabile e' di tipo float; + // altrimenti il valore viene considerato come double. - // Double - ancora piu' precisione la si puo' ottenere con una variabile - // Double, con granzezza di 64 bit. + // Double - Numero in virgola mobile a 64 bit con precisione doppia (IEEE 754) + // 2^-1074 <= x <= (2-2^-52) * 2^1023 double fooDouble = 123.4; - // Boolean - vero & falso + // Boolean - Puo' assumere il valore vero (true) o falso (false) boolean fooBoolean = true; boolean barBoolean = false; - // Char - un singolo carattere con grandezza 16 bit + // Char - Un singolo carattere Unicode a 16-bit char fooChar = 'A'; - // final - Costanti, non possono essere riassegnate ad un altro oggetto - final int ORE_LAVORATIVE_DI_UNA_SETTIMANA = 9001; - - // String - Stringhe, array di caratteri - String fooString = "Ecco una stringa!"; - - // \n e' un carattere speciale che permette di andare a capo. - String barString = "Andare a capo?\nNessun problema!"; - // \t e' un carattere speciale che permette di aggiungere un 'Tab' - String bazString = "Vuoi inserire tab?\tNessun problema"; + // Le variabili precedute da final possono essere inizializzate una volta sola, + final int HOURS_I_WORK_PER_WEEK = 9001; + // pero' e' possibile dichiararle e poi inizializzarle in un secondo momento. + final double E; + E = 2.71828; + + + // BigInteger - Interi a precisione arbitraria + // + // BigInteger e' un tipo di dato che permette ai programmatori di + // gestire interi piu' grandi di 64 bit. Internamente, le variabili + // di tipo BigInteger vengono memorizzate come un vettore di byte e + // vengono manipolate usando funzioni dentro la classe BigInteger. + // + // Una variabile di tipo BigInteger puo' essere inizializzata usando + // un array di byte oppure una stringa. + + BigInteger fooBigInteger = new BigDecimal(fooByteArray); + + // BigDecimal - Numero con segno, immutabile, a precisione arbitraria + // + // Una variabile di tipo BigDecimal e' composta da due parti: un intero + // a precisione arbitraria detto 'non scalato', e un intero a 32 bit + // che rappresenta la 'scala', ovvero la potenza di 10 con cui + // moltiplicare l'intero non scalato. + // + // I BigDecimal permettono un controllo completo sull'arrotondamento + // dei numeri. Essi sono molto usati in ambito finanziario, nella + // gestione delle valute, e in ogni altro posto in cui serve + // precisione esatta. + // + // Le variabili di tipo BigDecimal possono essere inizializzate con un + // int, long, double o String, oppure con un intero non scalato + // (di tipo BigInteger) e una scala (int). + + BigDecimal fooBigDecimal = new BigDecimal(fooBigInteger, fooInt); + + + + // Stringhe + String fooString = "Questa e' la mia stringa!"; + + // \n e' un carattere di escape che rappresenta l'andare a capo + String barString = "Stampare su una nuova riga?\nNessun problema!"; + // \t e' un carattere di escape che aggiunge un tab + String bazString = "Vuoi aggiungere un tab?\tNessun problema!"; System.out.println(fooString); System.out.println(barString); System.out.println(bazString); - // Vettori [array] - //La lunghezza del vettore deve essere decisa quando viene istanziato - //Si puo' dichiarare come segue: - //<tipodato> [] <nomevariabile> = new <tipodato>[<grandezza vettore>]; - //<tipodato> <nomevariabile>[] = new <tipodato>[<grandezza vettore>]; - int [] intArray = new int[10]; - String [] stringArray = new String[1]; - boolean boolArray [] = new boolean[100]; - - // Un altro modo per dichiarare & inizializzare un vettore - int [] y = {9000, 1000, 1337}; - String nomi [] = {"Andrea", "Bob", "Pippo", "Susan"}; + // Vettori + // La dimensione di un array deve essere decisa in fase di + // istanziazione. Per dichiarare un array si puo' fare in due modi: + // <tipoDato>[] <nomeVariabile> = new <tipoDato>[<dimensioneArray>]; + // <tipoDato> <nomeVariabile>[] = new <tipoDato>[<dimensioneArray>]; + int[] intArray = new int[10]; + String[] stringArray = new String[1]; + boolean boolArray[] = new boolean[100]; + + // Un altro modo per dichiarare ed insieme inizializzare un vettore. + int[] y = {9000, 1000, 1337}; + String names[] = {"Gianni", "Anna", "Luca", "Cristina"}; boolean bools[] = new boolean[] {true, false, false}; - - // I vettori vengono indicizzati a parire dallo 0 + + // Per accedere ad un elemento di un vettore System.out.println("intArray @ 0: " + intArray[0]); - // e' possibile un accesso diretto ad un elemento + // I vettori non sono immutabili (ma la loro dimensione si!) + // e gli indici partono da 0. intArray[1] = 1; System.out.println("intArray @ 1: " + intArray[1]); // => 1 - // Altro da vedere: - // Liste di array - come i vettori ma piu' funzionali - // e la loro grandezza puo' variare in corso di esecuzione - // Liste concatenate di memoria + // Ci sono altri tipo di dato interessanti. + // ArrayList - Simili ai vettori, pero' offrono altre funzionalita', + // e la loro dimensione puo' essere modificata. + // LinkedList - Si tratta di una lista linkata doppia, e come tale + // implementa tutte le operazioni del caso. + // Map - Un insieme di oggetti che fa corrispondere delle chiavi + // a dei valori. Non permette l'inserimento di chiavi uguali. + // HashMap - Questa classe usa una tabella di hash per implementare + // l'interfaccia di tipo Map. Questo permette di effettuare + // operazioni basilari, come inserimento e cancellazione, + // in tempo costante anche su insiemi molto grandi. /////////////////////////////////////// // Operatori diff --git a/java.html.markdown b/java.html.markdown index 35ec57d8..c2c1a18b 100644 --- a/java.html.markdown +++ b/java.html.markdown @@ -250,7 +250,7 @@ public class LearnJava { // If statements are c-like int j = 10; - if (j == 10){ + if (j == 10) { System.out.println("I get printed"); } else if (j > 10) { System.out.println("I don't"); @@ -285,7 +285,18 @@ public class LearnJava { // Iterated 10 times, fooFor 0->9 } System.out.println("fooFor Value: " + fooFor); - + + // Nested For Loop Exit with Label + outer: + for (int i = 0; i < 10; i++) { + for (int j = 0; j < 10; j++) { + if (i == 5 && j ==5) { + break outer; + // breaks out of outer loop instead of only the inner one + } + } + } + // For Each Loop // The for loop is also able to iterate over arrays as well as objects // that implement the Iterable interface. @@ -320,7 +331,7 @@ public class LearnJava { // Starting in Java 7 and above, switching Strings works like this: String myAnswer = "maybe"; - switch(myAnswer){ + switch(myAnswer) { case "yes": System.out.println("You answered yes."); break; diff --git a/javascript.html.markdown b/javascript.html.markdown index 6ea0b0bb..34ba9b47 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -413,7 +413,7 @@ var doubler = product.bind(this, 2); doubler(8); // = 16 // When you call a function with the `new` keyword, a new object is created, and -// made available to the function via the this keyword. Functions designed to be +// made available to the function via the `this` keyword. Functions designed to be // called like that are called constructors. var MyConstructor = function(){ diff --git a/latex.html.markdown b/latex.html.markdown index e180e622..9b7b4feb 100644 --- a/latex.html.markdown +++ b/latex.html.markdown @@ -6,6 +6,8 @@ contributors: - ["Sricharan Chiruvolu", "http://sricharan.xyz"] filename: learn-latex.tex --- + +```tex % All comment lines start with % % There are no multi-line comments @@ -225,6 +227,7 @@ That's all for now! % end the document \end{document} ``` + ## More on LaTeX * The amazing LaTeX wikibook: [https://en.wikibooks.org/wiki/LaTeX](https://en.wikibooks.org/wiki/LaTeX) diff --git a/nl-nl/yaml-nl.html.markdown b/nl-nl/yaml-nl.html.markdown new file mode 100644 index 00000000..a4a9d5fc --- /dev/null +++ b/nl-nl/yaml-nl.html.markdown @@ -0,0 +1,139 @@ +--- +language: yaml +filename: learnyaml-nl.yaml +contributors: + - ["Adam Brenecki", "https://github.com/adambrenecki"] +translators: + - ["Niels van Velzen", "https://nielsvanvelzen.me"] +lang: nl-nl +--- + +YAML is een data serialisatie taal ontworpen om snel te kunnen worden begrepen door mensen. + +Het is een strikte superset van JSON en bevat nieuwe regels en een stricte manier van inspringen, zoals bij Python. In tegenstelling tot Python kan je alleen geen tab tekens gebruiken. + +```yaml +# Commentaar in YAML ziet er zo uit + +################ +# SCALAR TYPES # +################ + +# Ons hoofd object (Wat in het hele document gebruikt wordt) is een map, +# dit staat gelijk aan een dictionary, hash of object in andere talen. +sleutel: waarde +nog_een_sleutel: Een andere waarde +nummer_waarde: 100 +wetenschappelijke_waarde: 1e+12 +boolean_waarde: true +null_waarde: null +sleutel met spaties: waarde +# Merk op dat strings niet verplicht in quotes moeten, maar dit kan wel. +quote_waarde: "Een string in quotes" +"Ook sleutels kunnen in quotes": "Dit is bijvoorbeeld handig als je een dubbelepunt wilt gebruiken in je key" + +# Tekst over meerdere lijnen kan je schrijven als een 'letterlijk blok' (met |) +# Of een 'gevouwen blok' (met >) +letterlijk_blok: | + Dit hele blok met tekst is de waarde van de 'letterlijk_blok' sleutel, + met nieuwe lijnen behouden. + + Het blok blijft door gaan tot het geeindigd wordt door korter te inspringen. + + Lijnen die groter zijn ingesprongen behouden dit. +gevouwen_stijl: > + Dit blok met tekst zal de waarde zijn van 'gevouwen_stijl', + maar deze keer zullen alle nieuwe lijnen worden vervangen met een spatie. + + Lege lijnen, zoals hierboven, zullen worden vertaald naar een nieuwe lijn. + + Meer ingesprongen lijnen zullen hun nieuwe lijnen ook behouden, + deze tekst zal over 2 lijnen te zien zijn. + +#################### +# COLLECTION TYPES # +#################### + +# Nesten wordt bereikt met inspringen. +geneste_map: + sleutel: waarde + andere_sleutel: andere waarde + andere_geneste_map: + hallo: wereld + +# In een map is een sleutel niet verplicht om een string te gebruiken +0.25: een float als sleutel + +# Sleutels kunnen ook meerdere lijnen gebruiken met behulp van het vraagteken +? | + Dit is een sleutel + met meerdere lijnen +: en dit is de waarde + +# YAML staat ook collection types toe in sleutels, maar veel programmeertalen +# zullen hierover klagen. + +# Sequences (gelijk aan lijsten of arrays) zien er zo uit: +een_sequence: + - Item 1 + - Item 2 + - 0.5 # sequences kunnen meerdere type waardes bevatten. + - Item 4 + - sleutel: waarde + andere_sleutel: andere waarde + - + - Dit is een sequence + - in een andere sequence + +# Doordat YAML een superset van JSON is kan je ook JSON-stijl mappen en +# sequences maken: +json_map: {"sleutel": "waarde"} +json_seq: [3, 2, 1, "takeoff"] + +####################### +# EXTRA YAML FUNCTIES # +####################### + +# YAML heeft ook een handige functie genaamd 'anchors' (ankers), deze laten je +# makkelijk de waarde van ergens anders in je document kopieëren. Beide sleutels +# krijgen dezelfde waarde: +geankert_content: &anker_naam Deze string zal verschijnen als waarde voor de twee sleutels +andere_anker: *anker_naam + +# YAML heeft ook tags, deze gebruik je om een expliciet type te verklaren +expliciete_string: !!str 0.5 +# Sommige parsers gebruiken taal specifieke tags, zoals deze voor Python's +# complexe nummer type: +python_complex_nummer: !!python/complex 1+2j + +#################### +# EXTRA YAML TYPES # +#################### + +# Strings en nummer zijn niet de enige types die YAML begrijpt. +# ISO opgemaakte datum en datumtijd notaties werken ook: +datumtijd: 2001-12-15T02:59:43.1Z +datumtijd_met_spaties: 2001-12-14 21:59:43.10 -5 +datum: 2002-12-14 + +# De !!binary tag geeft aan dat de string een base64-gecodeerde +# binary blob is. +gif_bestand: !!binary | + R0lGODlhDAAMAIQAAP//9/X17unp5WZmZgAAAOfn515eXvPz7Y6OjuDg4J+fn5 + OTk6enp56enmlpaWNjY6Ojo4SEhP/++f/++f/++f/++f/++f/++f/++f/++f/+ + +f/++f/++f/++f/++f/++SH+Dk1hZGUgd2l0aCBHSU1QACwAAAAADAAMAAAFLC + AgjoEwnuNAFOhpEMTRiggcz4BNJHrv/zCFcLiwMWYNG84BwwEeECcgggoBADs= + +# YAML heeft ook een set type, dat ziet er zo uit: +set: + ? item1 + ? item2 + ? item3 + +# Zoals in Python zijn sets gewoon mappen met null waardes; +# bovenstaand is gelijk aan: +set2: + item1: null + item2: null + item3: null +``` diff --git a/ocaml.html.markdown b/ocaml.html.markdown index 02435e4d..8faab297 100644 --- a/ocaml.html.markdown +++ b/ocaml.html.markdown @@ -196,7 +196,7 @@ let (~/) x = 1.0 /. x ;; ~/4.0 (* = 0.25 *) -(*** Built-in datastructures ***) +(*** Built-in data structures ***) (* Lists are enclosed in square brackets, items are separated by semicolons. *) @@ -341,10 +341,10 @@ let say x = say (Cat "Fluffy") ;; (* "Fluffy says meow". *) -(** Traversing datastructures with pattern matching **) +(** Traversing data structures with pattern matching **) (* Recursive types can be traversed with pattern matching easily. - Let's see how we can traverse a datastructure of the built-in list type. + Let's see how we can traverse a data structure of the built-in list type. Even though the built-in cons ("::") looks like an infix operator, it's actually a type constructor and can be matched like any other. *) let rec sum_list l = diff --git a/php.html.markdown b/php.html.markdown index 39ec5aef..13cc83eb 100644 --- a/php.html.markdown +++ b/php.html.markdown @@ -12,7 +12,7 @@ This document describes PHP 5+. <?php // PHP code must be enclosed with <?php tags // If your php file only contains PHP code, it is best practice -// to omit the php closing tag. +// to omit the php closing tag to prevent accidental output. // Two forward slashes start a one-line comment. @@ -103,6 +103,8 @@ END; // String concatenation is done with . echo 'This string ' . 'is concatenated'; +// Strings can be passed in as parameters to echo +echo 'Multiple', 'Parameters', 'Valid'; /******************************** * Constants @@ -141,6 +143,8 @@ echo $array[0]; // => "One" // Add an element to the end of an array $array[] = 'Four'; +// or +array_push($array, 'Five'); // Remove element from array unset($array[3]); @@ -379,7 +383,7 @@ for ($i = 0; $i < 5; $i++) { // Define a function with "function": function my_function () { - return 'Hello'; + return 'Hello'; } echo my_function(); // => "Hello" @@ -388,8 +392,8 @@ echo my_function(); // => "Hello" // number of letters, numbers, or underscores. function add ($x, $y = 1) { // $y is optional and defaults to 1 - $result = $x + $y; - return $result; + $result = $x + $y; + return $result; } echo add(4); // => 5 @@ -400,21 +404,21 @@ echo add(4, 2); // => 6 // Since PHP 5.3 you can declare anonymous functions; $inc = function ($x) { - return $x + 1; + return $x + 1; }; echo $inc(2); // => 3 function foo ($x, $y, $z) { - echo "$x - $y - $z"; + echo "$x - $y - $z"; } // Functions can return functions function bar ($x, $y) { - // Use 'use' to bring in outside variables - return function ($z) use ($x, $y) { - foo($x, $y, $z); - }; + // Use 'use' to bring in outside variables + return function ($z) use ($x, $y) { + foo($x, $y, $z); + }; } $bar = bar('A', 'B'); @@ -426,6 +430,21 @@ echo $function_name(1, 2); // => 3 // Useful for programatically determining which function to run. // Or, use call_user_func(callable $callback [, $parameter [, ... ]]); + +// You can get the all the parameters passed to a function +function parameters() { + $numargs = func_num_args(); + if ($numargs > 0) { + echo func_get_arg(0) . ' | '; + } + $args_array = func_get_args(); + foreach ($args_array as $key => $arg) { + echo $key . ' - ' . $arg . ' | '; + } +} + +parameters('Hello', 'World'); // Hello | 0 - Hello | 1 - World | + /******************************** * Includes */ diff --git a/pl-pl/python-pl.html.markdown b/pl-pl/python-pl.html.markdown index c3e8287a..ade1d7ca 100644 --- a/pl-pl/python-pl.html.markdown +++ b/pl-pl/python-pl.html.markdown @@ -125,7 +125,7 @@ not False # => True # Ta metoda jest obecnie polecana: "{0} są {1}".format("napisy", "fajne") # Jeśli nie chce ci się liczyć użyj słów kluczowych. -"{imie} chce zjeść {jadlo}".format(imie="Bob", jasno="lasagne") +"{imie} chce zjeść {jadlo}".format(imie="Bob", jadlo="makaron") # None jest obiektem None # => None @@ -158,7 +158,7 @@ print "Jestem Python. Miło poznać!" print("Ja też jestem Python! ") # Nie trzeba deklarować zmiennych przed przypisaniem. -jakas_zmienna = 5 # Konwencja mówi: używaj małych znaków i podłogi _ +jakas_zmienna = 5 # Konwencja mówi: używaj małych znaków i kładki _ jakas_zmienna # => 5 # Próba dostępu do niezadeklarowanej zmiennej da błąd. diff --git a/pt-br/css-pt.html.markdown b/pt-br/css-pt.html.markdown new file mode 100644 index 00000000..ed6f6c4c --- /dev/null +++ b/pt-br/css-pt.html.markdown @@ -0,0 +1,257 @@ +--- +language: css +filename: learncss-pt.css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["Geoffrey Liu", "https://github.com/g-liu"] + - ["Connor Shea", "https://github.com/connorshea"] + - ["Deepanshu Utkarsh", "https://github.com/duci9y"] +translators: + - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] +lang: pt-br +--- + +Nos primeiros dias da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornou comum. + +CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web. + +CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles. + +Este guia foi escrito para CSS2, embora CSS3 está rapidamente se tornando popular. + +**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa tentar de tudo em um playground CSS como [dabblet](http://dabblet.com/). +O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais. + +```css +/* Comentários aparecem dentro do slash-asterisk, tal como esta linha! + não há "comentários de uma linha"; este é o único estilo de comentário * / + +/* #################### + ## SELETORES + #################### */ + +/* O seletor é usado para direcionar um elemento em uma página. + seletor { propriedade: valor; / * Mais propriedades ... * / } + +/* +Abaixo um elemento de exemplo: + +<div class='class1 class2' id='anID' attr='value' otherAttr='pt-br foo bar' /> +*/ + +/* Você pode direciona-lo usando uma das suas classes CSS */ +.class1 { } + +/* ou ambas as classes! */ +.class1.class2 { } + +/* ou o seu nome */ +div { } + +/* ou o seu id */ +#anID { } + +/* ou utilizando o fator de que tem um atributo!*/ +[attr] { font-size:smaller; } + +/* ou que o atributo tem um valor específico */ +[attr='value'] { font-size:smaller; } + +/* começa com um valor (CSS 3) */ +[attr^='val'] { font-size:smaller; } + +/* ou terminando com um valor (CSS 3) */ +[attr$='ue'] { font-size:smaller; } + + +/* Ou contém um valor em uma lista separada por espaços */ +[otherAttr ~ = 'foo'] {} +[otherAttr ~ = 'bar'] {} + +/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */ +[otherAttr | = 'en'] {font-size: smaller; } + + +/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não + colocar espaços entre eles. */ +classe div.some [attr $ = 'ue'] {} + +/* Você pode selecionar um elemento que é filho de outro elemento */ +div.some-parent> .class-name {} + +/* Ou um descendente de um outro elemento. As crianças são os descendentes diretos de + seu elemento pai, apenas um nível abaixo da árvore. Pode ser qualquer descendentes + nivelar por baixo da árvore. */ +div.some-parent class-name {} + +/* Atenção: o mesmo seletor sem espaço tem um outro significado. + Você consegue adivinhar o que? */ +div.some-parent.class-name {} + +/* Você também pode selecionar um elemento com base em seu irmão adjacente */ +.i am just-antes + .Este elemento {} + +/* Ou qualquer irmão que o precede */ +.i am-qualquer-elemento antes ~ .Este elemento {} + +/* Existem alguns selectores chamado pseudo classes que podem ser usados para selecionar um + elemento quando ele está em um determinado estado */ + +/* Por exemplo, quando o cursor passa sobre um elemento */ +seletor:hover {} + +/* Ou um link foi visitado */ +seletor:visited {} + +/* Ou não tenha sido visitado */ +seletor:link {} + +/* Ou um elemento em foco */ +seletor:focus {} + +/* Qualquer elemento que é o primeiro filho de seu pai */ +seletor:first-child {} + +/* Qualquer elemento que é o último filho de seu pai */ +seletor:last-child {} + +/* Assim como pseudo classes, pseudo elementos permitem que você estilo certas partes de um documento */ + +/* Corresponde a um primeiro filho virtual do elemento selecionado */ +seletor::before {} + +/* Corresponde a um último filho virtual do elemento selecionado */ +seletor::after {} + +/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos + elemento */ +* {} /* */ Todos os elementos +.parent * {} /* */ todos os descendentes +.parent> * {} /* */ todas as crianças + +/* #################### + ## PROPRIEDADES + #################### */ + +seletor { + + /* Unidades de comprimento pode ser absoluta ou relativa. */ + + /* Unidades relativas */ + width: 50%; /* Percentagem de largura elemento pai */ + font-size: 2em; /* Múltiplos de font-size original de elemento */ + font-size: 2rem; /* Ou do elemento raiz font-size */ + font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */ + font-size: 2vh; /* Ou a sua altura */ + font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */ + font-size: 2vmax; /* Ou superior */ + + /* Unidades absolutas */ + width: 200px; /* píxeis */ + font-size: 20pt; /* Pontos */ + width: 5cm; /* Centímetros */ + min-width: 50mm; /* Milímetros */ + max-width: 5 polegadas; /* Polegadas */ + + /* Cores */ + color: # F6E; /* Formato hexadecimal curto */ + color: # FF66EE; /* Formato hexadecimal longo */ + color: tomato; /* Uma cor nomeada */ + color: rgb (255, 255, 255); /* Como valores rgb */ + cor: RGB (10%, 20%, 50%); /* Como porcentagens rgb */ + cor: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 <a <1 */ + color: transparent; /* Equivale a definir o alfa a 0 */ + cor: HSL (0, 100%, 50%); /* Como porcentagens HSL (CSS 3) */ + cor: HSLA (0, 100%, 50%, 0,3); /* Como porcentagens HSLA com alfa */ + + /* Imagens como fundos de elementos */ + background-image: url (/img-path/img.jpg); /* Citações dentro url () opcional */ + + /* Fontes */ + font-family: Arial; + /* Se o nome da família de fonte tem um espaço, deve ser citado */ + font-family: "Courier New"; + /* Se o primeiro não for encontrada, o navegador usa o próximo, e assim por diante */ + font-family: "Courier New", Trebuchet, Arial, sans-serif; +} +``` + +## Uso + +Guardar uma folha de estilo CSS com a extensão `.css`. + +```xml +<!-- Você precisa incluir o arquivo css no da sua página <head>. Isto é o + método recomendado. Consulte http://stackoverflow.com/questions/8284365 --> +<link rel='stylesheet' type='text/css' href='path/to/style.css' /> + +<!-- Você também pode incluir alguns CSS inline na sua marcação. --> +<style> + a { color: purple; } +</style> + +<!-- Ou diretamente definir propriedades CSS no elemento. --> +<div style="border: 1px solid red;"> +</div> +``` + +## Precedência ou Cascata + +Um elemento pode ser alvo de vários seletores e pode ter um conjunto de propriedades em que mais de uma vez. Nestes casos, uma das regras tem precedência sobre os outros. Geralmente, uma regra em um seletor mais específico têm precedência sobre um menos específico, e uma regra que ocorre mais tarde na folha de estilo substitui uma anterior. + +Este processo é chamado de cascata, portanto, as Fichas de nome de estilo em cascata. + +Dado o seguinte CSS: + +```css +/* UMA */ +p.class1[attr="value"] + +/* B */ +p.class1 {} + +/* C */ +p.class2 {} + +/* D */ +p { } + +/* E */ +p { property: value !important; } +``` + +e a seguinte marcação: + +```xml +<p style='/*F*/ property:value;' class='class1 class2' attr='value' /> +``` + +A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada **propriedade**, não para todo o bloco. + +* `E` tem a precedência mais alta por causa de uma palavra-chave`!important`. É recomendável que você evitar seu uso. +* `F` é a próxima, porque é um estilo interno. +* `A` é a próxima, porque é mais" específico "do que qualquer outra coisa. Tem 3 especificadores: O nome do elemento `p`, o seu `class1` classe, um atributo `attr='value'`. +* `C` está próximo, mesmo que ele tenha a mesma especificidade que `B`. Isso é porque ele aparece depois de `B`. +* `B` é o próximo. +* `D` é a última. + +## Compatibilidade + +A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática para verificar antes de usar um novo recurso. + +## Recursos + +* Para executar uma verificação de compatibilidade rápida, [CanIUse](http://caniuse.com). +* CSS Playground [Dabblet](http://dabblet.com/). +* [Documentação CSS Mozilla Developer Rede](https://developer.mozilla.org/en-US/docs/Web/CSS) +* [Codrops 'Referência CSS](http://tympanus.net/codrops/css_reference/) + +## Leitura adicional + +* [Entendendo Estilo Precedência em CSS: Especificidade, Herança, eo Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [Selecionando elementos usando atributos](https://css-tricks.com/almanac/selectors/a/attribute/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - O empilhamento context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) +* [SASS](http://sass-lang.com/) e [menos](http://lesscss.org/) para CSS pré-processamento +* [CSS-Tricks](https://css-tricks.com) diff --git a/pt-br/sass-pt.html.markdown b/pt-br/sass-pt.html.markdown new file mode 100644 index 00000000..105896b2 --- /dev/null +++ b/pt-br/sass-pt.html.markdown @@ -0,0 +1,477 @@ +--- +language: sass +filename: learnsass-pt.scss +contributors: + - ["Laura Kyle", "https://github.com/LauraNK"] + - ["Sean Corrales", "https://github.com/droidenator"] +translators: + - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] +lang: pt-br +--- + +Sass é uma linguagem de extensão CSS que adiciona recursos, como variáveis, aninhamento, mixins e muito mais. +Sass (e outros pré-processadores, como [Less](http://lesscss.org/)) ajudam os desenvolvedores a escrever código de fácil manutenção e DRY (Do not Repeat Yourself). + +Sass tem duas opções de sintaxe diferentes para escolher. SCSS, que tem a mesma sintaxe de CSS, mas com os recursos adicionais de Sass. Ou Sass (a sintaxe original), que usa o recuo, em vez de chaves e ponto e vírgula. +Este tutorial é escrito usando SCSS. + +Se você já está familiarizado com CSS3, você será capaz de pegar Sass de forma relativamente rápida. Ele não fornece quaisquer novas opções de estilo, mas sim as ferramentas para escrever sua CSS de forma mais eficiente e fazer a manutenção mais fácilmente. + +```scss + + +// Comentários de linha única são removidos quando Sass é compilado para CSS. + +/* Comentários multi-line são preservados. */ + + + +/*Variáveis +==============================*/ + + + +/* É possível armazenar um valor CSS (tais como a cor) de uma variável. +Use o símbolo "$" para criar uma variável. */ + +$primary-color: #A3A4FF; +$secondary-color: #51527F; +$body-font: 'Roboto', sans-serif; + +/* Você pode usar as variáveis em toda a sua folha de estilo. +Agora, se você quer mudar a cor, você só tem que fazer a mudança uma vez. */ + +body { + background-color: $primary-color; + color: $secondary-color; + font-family: $body-font; +} + +/* Quando compilar ficaria assim: */ +body { + background-color: #A3A4FF; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + + +/ * Este é muito mais fácil de manter do que ter de mudar a cor +cada vez que aparece em toda a sua folha de estilo. * / + + + + +/*Mixins +==============================*/ + + + +/* Se você achar que você está escrevendo o mesmo código para mais de um +elemento, você pode querer armazenar esse código em um mixin. + +Use a diretiva '@mixin', além de um nome para o seu mixin. */ + +@mixin center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +/* Você pode usar o mixin com '@include' e o nome mixin. */ + +div { + @include center; + background-color: $primary-color; +} + +/* Apoś compilar ficaria assim: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #A3A4FF; +} + + +/* Você pode usar mixins para criar uma propriedade estenográfica. */ + +@mixin size($width, $height) { + width: $width; + height: $height; +} + +/* O que você pode invocar passando argumentos de largura e altura. */ + +.rectangle { + @include size(100px, 60px); +} + +.square { + @include size(40px, 40px); +} + +/* Isso compilado ficará assim: */ +.rectangle { + width: 100px; + height: 60px; +} + +.square { + width: 40px; + height: 40px; +} + + + +/*Funções +==============================*/ + + + +/* Sass fornece funções que podem ser utilizados para realizar uma variedade de + tarefas. Considere o seguinte */ + +/* Funções pode ser chamado usando seu nome e passando o + argumentos necessários */ +body { + width: round(10.25px); +} + +.footer { + background-color: fade_out(#000000, 0.25) +} + +/* Compiles to: */ + +body { + width: 10px; +} + +.footer { + background-color: rgba(0, 0, 0, 0.75); +} + +/* You may also define your own functions. Functions are very similar to + mixins. When trying to choose between a function or a mixin, remember + that mixins are best for generating CSS while functions are better for + logic that might be used throughout your Sass code. The examples in + the Math Operators' section are ideal candidates for becoming a reusable + function. */ + +/* This function will take a target size and the parent size and calculate + and return the percentage */ + +/* Você também pode definir suas próprias funções. As funções são muito semelhantes aos + mixins. Ao tentar escolher entre uma função ou um mixin, lembre- + que mixins são os melhores para gerar CSS enquanto as funções são melhores para + lógica que pode ser usado em todo o seu código Sass. Os exemplos + seção Operadores Math 'são candidatos ideais para se tornar um reutilizável + função. */ + +/* Esta função terá um tamanho de destino eo tamanho do pai e calcular + e voltar a percentagem */ + +@function calculate-percentage($target-size, $parent-size) { + @return $target-size / $parent-size * 100%; +} + +$main-content: calculate-percentage(600px, 960px); + +.main-content { + width: $main-content; +} + +.sidebar { + width: calculate-percentage(300px, 960px); +} + +/* Compila para: */ + +.main-content { + width: 62.5%; +} + +.sidebar { + width: 31.25%; +} + + + +/* Extend (Herança) +============================== */ + + + +/*Extend é uma maneira de compartilhar as propriedades de um seletor com outro. */ + +.display { + @include size(5em, 5em); + border: 5px solid $secondary-color; +} + +.display-success { + @extend .display; + border-color: #22df56; +} + +/* Compiles to: */ +.display, .display-success { + width: 5em; + height: 5em; + border: 5px solid #51527F; +} + +.display-success { + border-color: #22df56; +} + +/* Ampliando uma declaração CSS é preferível a criação de um mixin + por causa da maneira agrupa as classes que todos compartilham + o mesmo estilo base. Se isso for feito com um mixin, a largura, + altura, e a borda seria duplicado para cada instrução que + o chamado mixin. Enquanto isso não irá afetar o seu fluxo de trabalho, será + adicionar inchaço desnecessário para os arquivos criados pelo compilador Sass. */ + + + +/*Assentamento +==============================*/ + + + +/ * Sass permite seletores ninhos dentro seletores * / + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #FF0000; + } +} + +/* '&' será substituído pelo selector pai. */ +/* Você também pode aninhar pseudo-classes. */ +/* Tenha em mente que o excesso de nidificação vai fazer seu código menos sustentável. +Essas práticas também recomendam não vai mais de 3 níveis de profundidade quando nidificação. +Por exemplo: */ + + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: red; + + &:hover { + background-color: blue; + } + + a { + color: white; + } + } +} + +/* Compila para: */ + +ul { + list-style-type: none; + margin-top: 2em; +} + +ul li { + background-color: red; +} + +ul li:hover { + background-color: blue; +} + +ul li a { + color: white; +} + + + +/*Parciais e Importações +==============================*/ + + +/* Sass permite criar arquivos parciais. Isso pode ajudar a manter seu Sass + código modularizado. Arquivos parciais deve começar com um '_', por exemplo, _reset.css. + Parciais não são geradas em CSS. */ + + + +/* Considere o seguinte CSS que nós vamos colocar em um arquivo chamado _reset.css */ + +html, +body, +ul, +ol { + margin: 0; + padding: 0; +} + +/* Sass offers @import which can be used to import partials into a file. + This differs from the traditional CSS @import statement which makes + another HTTP request to fetch the imported file. Sass takes the + imported file and combines it with the compiled code. */ + +/* Sass oferece @import que pode ser usado para importar parciais em um arquivo. + Isso difere da declaração CSS @import tradicional, que faz + outra solicitação HTTP para buscar o arquivo importado. Sass converte os + importadas arquivo e combina com o código compilado. */ + +@import 'reset'; + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + +/* Compiles to: */ + +html, body, ul, ol { + margin: 0; + padding: 0; +} + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + + + +/*Placeholder Selectors +==============================*/ + + + +/* Placeholders are useful when creating a CSS statement to extend. If you + wanted to create a CSS statement that was exclusively used with @extend, + you can do so using a placeholder. Placeholders begin with a '%' instead + of '.' or '#'. Placeholders will not appear in the compiled CSS. */ + +/* Os espaços reservados são úteis na criação de uma declaração CSS para ampliar. Se você + queria criar uma instrução CSS que foi usado exclusivamente com @extend, + Você pode fazer isso usando um espaço reservado. Espaços reservados começar com um '%' em vez + de '.' ou '#'. Espaços reservados não aparece no CSS compilado. * / + +%content-window { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.message-window { + @extend %content-window; + background-color: #0000ff; +} + +/* Compilado para: */ + +.message-window { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.message-window { + background-color: #0000ff; +} + + + +/*Operações Math +============================== * / + + +/* Sass provides the following operators: +, -, *, /, and %. These can + be useful for calculating values directly in your Sass files instead + of using values that you've already calculated by hand. Below is an example + of a setting up a simple two column design. */ + +/* Sass fornece os seguintes operadores: +, -, *, /, e %. estes podem + ser úteis para calcular os valores diretamente no seu Sass arquivos em vez + de usar valores que você já calculados pela mão. Abaixo está um exemplo + de uma criação de um projeto simples de duas colunas. * / + +$content-area: 960px; +$main-content: 600px; +$sidebar-content: 300px; + +$main-size: $main-content / $content-area * 100%; +$sidebar-size: $sidebar-content / $content-area * 100%; +$gutter: 100% - ($main-size + $sidebar-size); + +body { + width: 100%; +} + +.main-content { + width: $main-size; +} + +.sidebar { + width: $sidebar-size; +} + +.gutter { + width: $gutter; +} + +/* Compiles to: */ + +body { + width: 100%; +} + +.main-content { + width: 62.5%; +} + +.sidebar { + width: 31.25%; +} + +.gutter { + width: 6.25%; +} + + +``` + + + +## SASS ou Sass? +Alguma vez você já se perguntou se Sass é um acrônimo ou não? Você provavelmente não tem, mas vou dizer-lhe de qualquer maneira. O nome do idioma é uma palavra, "Sass", e não uma sigla. +Porque as pessoas estavam constantemente a escrevê-lo como "SASS", o criador da linguagem de brincadeira chamou de "StyleSheets Sintaticamente Incríveis". + + +## Prática Sass +Se você quiser jogar com Sass em seu navegador, vá para [SassMeister](http://sassmeister.com/). +Você pode usar uma sintaxe, basta ir para as configurações e selecionar Sass ou SCSS. + + +## Compatibilidade + +Sass pode ser usado em qualquer projeto, desde que você tenha um programa para compilá-lo +em CSS. Você vai querer verificar se o CSS que você está usando é compatível +com os seus navegadores de destino. + +[QuirksMode CSS](http://www.quirksmode.org/css/) e [CanIUse](http://caniuse.com) são ótimos recursos para verificação de compatibilidade. + + +## Leitura +* [Official Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) +* [The Sass Way](http://thesassway.com/) fornece tutoriais (iniciante avançados) e artigos. diff --git a/pt-br/tmux-pt.html.markdown b/pt-br/tmux-pt.html.markdown new file mode 100644 index 00000000..9d5bf292 --- /dev/null +++ b/pt-br/tmux-pt.html.markdown @@ -0,0 +1,254 @@ +--- +category: tool +tool: tmux +contributors: + - ["mdln", "https://github.com/mdln"] +translators: + - ["Luis Custodio", "http://luiscustodio.com"] +lang: pt-br +filename: LearnTmux-pt.txt +--- + +O [tmux](http://tmux.sourceforge.net) +é um multiplexador de terminal, ele permite que terminais sejam criados, +acessados e controlados a partir de uma unica instância. tmux pode ser separado +de uma tela e continuar rodando no plano de fundo e depois ser reacoplado à +instância (ou tela original). + +``` + + tmux [command] # Roda um [comando] + # 'tmux' sem comandos irá criar uma nova seção + + new # Cria uma nova seção + -s "Nome" # Cria uma nova seção com nome "Nome" + -n "Janela" # Cria uma janela com o nome "Janela" + -c "/dir" # Inícia em uma pasta específica + + attach # Reacopla a última seção disponível + -t "#" # Reacopla a seção com nome "#" + -d # Separa (Desacopla) a sessaão de outras instâncias. + + ls # Lista todas as seções + -a # Lista todas as seções abertas + + lsw # Lista as janelas + -a # Lista todas as janelas + -s # Lista todas janleas em uma seção + + lsp # Lista os painéis + -a # Lista todos os painéis + -s # Lista todos os painéis em uma seção + -t "#" # Lista os painéis baseado no nome "#" + + kill-window # Encerrar a janela corrente + -t "#" # Encerrar a janela baseado no nome "#" + -a # Encerrar todas as janelas + -a -t "#" # Encerrar todas as janelas exceto a com nome "#" + + kill-session # Encerrar seção corrente + -t "#" # Encerrar seção com nome "#" + -a # Encerrar todas as seções + -a -t "#" # Encerrar todas as seções exceto a com nome "#" + +``` + + +### Teclas de atalhos (comandos) + +A maneira de controllar uma seção tmux acoplada é através de uma +combinação de teclas de prefixo. + +``` +---------------------------------------------------------------------- + (C-b) = Ctrl + b # Combinação de prefixos para usar comandos(atalhos). + + (M-1) = Meta + 1 -or- Alt + 1 +---------------------------------------------------------------------- + + ? # Lista todos os comandos. + : # Acessa o lugar (prompt command) para receber comandos do tmux + r # Força a redefiniçao do cliente acoplado. + c # Cria uma nova janela. + + ! # Retira o painel corrente da janela. + % # Divide o painel corrente em dois para a esquerda e direita. + " # Divide o painel corrente em dois para cima e para baixo. + + n # Move para a próxima janela. + p # Move para a janela anterior. + { # Troca o painel corrente pelo anterior. + } # Troca o painel corrent pelo posterior. + + s # Seleciona uma nova seção para o cliente acoplado iterativamente. + w # Seleciona a janela corrente iterativamente. + 0 to 9 # Seleciona a janela de 0 à 9. + + d # Separa o cliente atual. + D # Seleciona um cliente a ser separado. + + & # Encerra a janela corrente. + x # Encerra o painel corrente. + + Up, Down # Move para o painel acima, abaixo, a esquerda ou a direita. + Left, Right + + M-1 to M-5 # Organiza os paines: + # 1) Horizontalmente de maneira igual + # 2) Verticalmente de maineira igual. + # 3) Principal horizontalmente + # 4) Principal verticamente. + # 5) Mosaico + + C-Up, C-Down # Altera o tamanho do painel corrente baseado em uma célula. + C-Left, C-Right + + M-Up, M-Down # Altera o tamanho do painel corrente baseado em cinco células. + M-Left, M-Right + +``` + + +### Configurando ~/.tmux.conf + +Existe um arquivo chamado tmux.conf, ele pode ser usado para definir opções no + momento de inicialização, da mesma maneira que .vimrc, init.el, .bash_profile são usados. + + +``` +# Exemplo de tmux.conf +# 2014.10 + + +### General +########################################################################### + +# Habilita UTF-8 +setw -g utf8 on +set-option -g status-utf8 on + +# Limite da história de comandos +set -g history-limit 2048 + +# Indíce de inicialização +set -g base-index 1 + +# Mouse +set-option -g mouse-select-pane on + +# Recarregar o arquivo de configuração sem a necessidade de reiniciar o programa +unbind r +bind r source-file ~/.tmux.conf + + +### Teclas de atalho +########################################################################### + +# Desvincular C-b como prefixo padrão. +unbind C-b + +# Define um novo prefixo padrão. +set-option -g prefix ` + +# Definir prefixos que podem ser usados para voltar para a janela anterior. +bind C-a last-window +bind ` last-window + +# Fazer com que F11 e F12 alterem o comportamento de C-a e ` +bind F11 set-option -g prefix C-a +bind F12 set-option -g prefix ` + +# Preferencia de teclas de atalho +setw -g mode-keys vi +set-option -g status-keys vi + +# Mover enter paineis com teclas de orientaçao do vim +bind h select-pane -L +bind j select-pane -D +bind k select-pane -U +bind l select-pane -R + +# Iterar entre as Janelas +bind e previous-window +bind f next-window +bind E swap-window -t -1 +bind F swap-window -t +1 + +# Iterar entre os painéis +bind = split-window -h +bind - split-window -v +unbind '"' +unbind % + +# Habilitar a sub-seção a enviar comandos. +bind a send-prefix + + +### Theme +########################################################################### + +# Paleta de cores para a barra de status +set-option -g status-justify left +set-option -g status-bg black +set-option -g status-fg white +set-option -g status-left-length 40 +set-option -g status-right-length 80 + +# Paleta de cores para bordas do painel +set-option -g pane-active-border-fg green +set-option -g pane-active-border-bg black +set-option -g pane-border-fg white +set-option -g pane-border-bg black + +# Palta de cores para mensagem +set-option -g message-fg black +set-option -g message-bg green + +# Paleta de cores para janela de status +setw -g window-status-bg black +setw -g window-status-current-fg green +setw -g window-status-bell-attr default +setw -g window-status-bell-fg red +setw -g window-status-content-attr default +setw -g window-status-content-fg yellow +setw -g window-status-activity-attr default +setw -g window-status-activity-fg yellow + + +### UI +########################################################################### + +# Notificações +setw -g monitor-activity on +set -g visual-activity on +set-option -g bell-action any +set-option -g visual-bell off + +# Definir automaticamente o título de janelas +set-option -g set-titles on +set-option -g set-titles-string '#H:#S.#I.#P #W #T' # window number,program name,active (or not) + +# Ajustes na barra de status +set -g status-left "#[fg=red] #H#[fg=green]:#[fg=white]#S#[fg=green] |#[default]" + +# Mostrar indicativos de performance na barra de status +# Requires https://github.com/thewtex/tmux-mem-cpu-load/ +set -g status-interval 4 +set -g status-right "#[fg=green] | #[fg=white]#(tmux-mem-cpu-load)#[fg=green] | #[fg=cyan]%H:%M #[default]" + +``` + + +### Referências + +[Tmux | Início](http://tmux.sourceforge.net) + +[Manual Tmux (em inglês)](http://www.openbsd.org/cgi-bin/man.cgi/OpenBSD-current/man1/tmux.1?query=tmux) + +[Gentoo Wiki](http://wiki.gentoo.org/wiki/Tmux) + +[Archlinux Wiki](https://wiki.archlinux.org/index.php/Tmux) + +[Mostrar CPU/MEM % in statusbar](https://stackoverflow.com/questions/11558907/is-there-a-better-way-to-display-cpu-usage-in-tmux) + +Possui uma sugestão? Uma correção, talvez? Abra um issue no Repositório GitHub, ou então faça um pull request. diff --git a/vi-vn/json-vi.html.markdown b/vi-vn/json-vi.html.markdown new file mode 100644 index 00000000..257216ff --- /dev/null +++ b/vi-vn/json-vi.html.markdown @@ -0,0 +1,76 @@ +--- +language: json +filename: learnjson-vi.json +contributors: + - ["Anna Harren", "https://github.com/iirelu"] + - ["Marco Scannadinari", "https://github.com/marcoms"] + - ["himanshu", "https://github.com/himanshu81494"] +translators: + - ["Thanh Phan", "https://github.com/thanhpd"] +lang: vi-vn +--- + +Do JSON là một ngôn ngữ trao đổi dữ liệu hết sức đơn giản, đây có thể sẽ là bài +đơn giản nhất của Học X trong Y phút (Learn X in Y Minutes) từ trước tới nay. + +JSON ở dạng thuần túy nhất không có chú thích cho câu lệnh (comment) nào, nhưng +hầu hết các trình phân tích cú pháp (parser) đều chấp nhận chú thích theo phong +cách của ngôn ngữ C (`//`, `/* */`). Một số trình phân tích cú pháp còn chấp +nhận dấu phẩy cuối cùng (vd: một dấu phẩy sau phần tử cuối cùng của một mảng +hoặc sau thuộc tính cuối cùng của một object), nhưng những trường hợp này nên +tránh để có sự tương thích tốt hơn. + +Để phục vụ cho mục đích bài học này, tất cả cú pháp JSON ở đây sẽ đều là 100% hợp lệ. +May mắn thay, chúng cũng tự trình bày cho chính mình mà không cần thêm giải thích. + +Các kiểu dữ liệu được JSON hỗ trợ bao gồm: số (*numbers*), chuỗi kí tự +(*string*), toán tử đúng/sai (*boolean*), mảng (*array*), *object* và *null*. +Các trình duyệt hỗ trợ bao gồm: Mozilla Firefox phiên bản 3.5 trở lên, +Internet Explorer 8 trở lên, Google Chrome, Opera 10 trở lên, Safari 4 trở lên. +Kiểu tệp JSON có dạng ".json". Kiểu MIME (Multipurpose Internet Mail Extensions) +cho JSON là "application/json". Điểm yếu của JSON đó là thiếu các định dạng cho +kiểu dữ liệu cũng như quy chuẩn cú pháp chặt chẽ sử dụng DTD. + +```json +{ + "khóa": "dữ liệu", + + "các khóa": "phải luôn được đặt trong dấu ngoặc kép", + "số": 0, + "chuỗi kí tự": "Xin chàø. Tất cả kí tự unicode đều được chấp nhận, sử dụng với dạng \"kí tự\"." + "có đúng không?": true, + "không có gì": null, + + "số rất lớn": 1.2e+100, + + "objects": { + "chú thích": "Hầu hết các cấu trúc dữ liệu bạn sẽ dùng sẽ sử dụng object.", + + "mảng": [0, 1, 2, 3, "Mảng có thể chứa bất kì thứ gì bên trong.", 5], + + "một object khác": { + "chú thích": "Những thứ này có thể lồng vào nhau, rất tiện." + } + }, + + "ngớ ngẩn": [ + { + "nguồn cung cấp kali": ["chuối"] + }, + [ + [1, 0, 0, 0], + [0, 1, 0, 0], + [0, 0, 1, "neo"], + [0, 0, 0, 1] + ] + ], + + "phong cách khác": { + "chú thích": "kiểm tra cái này xem!" + , "vị trí dấu phẩy": "không quan trọng - chỉ cần nó ở trước khóa tiếp theo là được" + , "chú thích khác": "tiện phải không" + }, + + "nó rất ngắn": "Và bạn đã xong rồi đấy. Bạn đã biết tất cả những thứ mà JSON có thể cung cấp." +} +``` diff --git a/zfs.html.markdown b/zfs.html.markdown new file mode 100644 index 00000000..74487e35 --- /dev/null +++ b/zfs.html.markdown @@ -0,0 +1,400 @@ +--- +category: tool +tool: zfs +contributors: + - ["sarlalian", "http://github.com/sarlalian"] +filename: LearnZfs.txt +--- + + +[ZFS](http://open-zfs.org/wiki/Main_Page) +is a rethinking of the storage stack, combining traditional file systems as well as volume +managers into one cohesive tool. ZFS has some specific teminology that sets it appart from +more traditional storage systems, however it has a great set of features with a focus on +usability for systems administrators. + + +## ZFS Concepts + +### Virtual Devices + +A VDEV is similar to a raid device presented by a RAID card, there are several different +types of VDEV's that offer various advantages, including redundancy and speed. In general +VDEV's offer better reliability and safety than a RAID card. It is discouraged to use a +RAID setup with ZFS, as ZFS expects to directly manage the underlying disks. + +Types of VDEV's +* stripe (a single disk, no redundancy) +* mirror (n-way mirrors supported) +* raidz + * raidz1 (1-disk parity, similar to RAID 5) + * raidz2 (2-disk parity, similar to RAID 6) + * raidz3 (3-disk parity, no RAID analog) +* disk +* file (not recommended for production due to another filesystem adding unnecessary layering) + +Your data is striped across all the VDEV's present in your Storage Pool, so more VDEV's will +increase your IOPS. + +### Storage Pools + +ZFS uses Storage Pools as an abstraction over the lower level storage provider (VDEV), allow +you to separate the user visable file system from the physcal layout. + +### ZFS Dataset + +ZFS datasets are analagous to traditional filesystems but with many more features. They +provide many of ZFS's advantages. Datasets support [Copy on Write](https://en.wikipedia.org/wiki/Copy-on-write) +snapshots, quota's, compression and deduplication. + + +### Limits + +One directory may contain up to 2^48 files, up to 16 exabytes each. A single storage pool +can contain up to 256 zettabytes (2^78) of space, and can be striped across 2^64 devices. A +single host can have 2^64 storage pools. The limits are huge. + + +## Commands + +### Storage Pools + +Actions: +* List +* Status +* Destroy +* Get/Set properties + +List zpools + +```bash +# Create a raidz zpool +$ zpool create bucket raidz1 gpt/zfs0 gpt/zfs1 gpt/zfs2 + +# List ZPools +$ zpool list +NAME SIZE ALLOC FREE EXPANDSZ FRAG CAP DEDUP HEALTH ALTROOT +zroot 141G 106G 35.2G - 43% 75% 1.00x ONLINE - + +# List detailed information about a specific zpool +$ zpool list -v zroot +NAME SIZE ALLOC FREE EXPANDSZ FRAG CAP DEDUP HEALTH ALTROOT +zroot 141G 106G 35.2G - 43% 75% 1.00x ONLINE - + gptid/c92a5ccf-a5bb-11e4-a77d-001b2172c655 141G 106G 35.2G - 43% 75% +``` + +Status of zpools + +```bash +# Get status information about zpools +$ zpool status + pool: zroot + state: ONLINE + scan: scrub repaired 0 in 2h51m with 0 errors on Thu Oct 1 07:08:31 2015 +config: + + NAME STATE READ WRITE CKSUM + zroot ONLINE 0 0 0 + gptid/c92a5ccf-a5bb-11e4-a77d-001b2172c655 ONLINE 0 0 0 + +errors: No known data errors + +# Scrubbing a zpool to correct any errors +$ zpool scrub zroot +$ zpool status -v zroot + pool: zroot + state: ONLINE + scan: scrub in progress since Thu Oct 15 16:59:14 2015 + 39.1M scanned out of 106G at 1.45M/s, 20h47m to go + 0 repaired, 0.04% done +config: + + NAME STATE READ WRITE CKSUM + zroot ONLINE 0 0 0 + gptid/c92a5ccf-a5bb-11e4-a77d-001b2172c655 ONLINE 0 0 0 + +errors: No known data errors +``` + +Properties of zpools + +```bash + +# Getting properties from the pool properties can be user set or system provided. +$ zpool get all zroot +NAME PROPERTY VALUE SOURCE +zroot size 141G - +zroot capacity 75% - +zroot altroot - default +zroot health ONLINE - +... + +# Setting a zpool property +$ zpool set comment="Storage of mah stuff" zroot +$ zpool get comment +NAME PROPERTY VALUE SOURCE +tank comment - default +zroot comment Storage of mah stuff local +``` + +Remove zpool + +```bash +$ zpool destroy test +``` + + +### Datasets + +Actions: +* Create +* List +* Rename +* Delete +* Get/Set properties + +Create datasets + +```bash +# Create dataset +$ zfs create tank/root/data +$ mount | grep data +tank/root/data on /data (zfs, local, nfsv4acls) + +# Create child dataset +$ zfs create tank/root/data/stuff +$ mount | grep data +tank/root/data on /data (zfs, local, nfsv4acls) +tank/root/data/stuff on /data/stuff (zfs, local, nfsv4acls) + + +# Create Volume +$ zfs create -V zroot/win_vm +$ zfs list zroot/win_vm +NAME USED AVAIL REFER MOUNTPOINT +tank/win_vm 4.13G 17.9G 64K - +``` + +List datasets + +```bash +# List all datasets +$ zfs list +NAME USED AVAIL REFER MOUNTPOINT +zroot 106G 30.8G 144K none +zroot/ROOT 18.5G 30.8G 144K none +zroot/ROOT/10.1 8K 30.8G 9.63G / +zroot/ROOT/default 18.5G 30.8G 11.2G / +zroot/backup 5.23G 30.8G 144K none +zroot/home 288K 30.8G 144K none +... + +# List a specific dataset +$ zfs list zroot/home +NAME USED AVAIL REFER MOUNTPOINT +zroot/home 288K 30.8G 144K none + +# List snapshots +$ zfs list -t snapshot +zroot@daily-2015-10-15 0 - 144K - +zroot/ROOT@daily-2015-10-15 0 - 144K - +zroot/ROOT/default@daily-2015-10-15 0 - 24.2G - +zroot/tmp@daily-2015-10-15 124K - 708M - +zroot/usr@daily-2015-10-15 0 - 144K - +zroot/home@daily-2015-10-15 0 - 11.9G - +zroot/var@daily-2015-10-15 704K - 1.42G - +zroot/var/log@daily-2015-10-15 192K - 828K - +zroot/var/tmp@daily-2015-10-15 0 - 152K - +``` + +Rename datasets + +```bash +$ zfs rename tank/root/home tank/root/old_home +$ zfs rename tank/root/new_home tank/root/home +``` + +Delete dataset + +```bash +# Datasets cannot be deleted if they have any snapshots +zfs destroy tank/root/home +``` + +Get / set properties of a dataset + +```bash +# Get all properties +$ zfs get all zroot/usr/home │157 # Create Volume +NAME PROPERTY VALUE SOURCE │158 $ zfs create -V zroot/win_vm +zroot/home type filesystem - │159 $ zfs list zroot/win_vm +zroot/home creation Mon Oct 20 14:44 2014 - │160 NAME USED AVAIL REFER MOUNTPOINT +zroot/home used 11.9G - │161 tank/win_vm 4.13G 17.9G 64K - +zroot/home available 94.1G - │162 ``` +zroot/home referenced 11.9G - │163 +zroot/home mounted yes - +... + +# Get property from dataset +$ zfs get compression zroot/usr/home +NAME PROPERTY VALUE SOURCE +zroot/home compression off default + +# Set property on dataset +$ zfs set compression=gzip-9 mypool/lamb + +# Get a set of properties from all datasets +$ zfs list -o name,quota,reservation +NAME QUOTA RESERV +zroot none none +zroot/ROOT none none +zroot/ROOT/default none none +zroot/tmp none none +zroot/usr none none +zroot/home none none +zroot/var none none +... +``` + + +### Snapshots + +ZFS snapshots are one of the things about zfs that are a really big deal + +* The space they take up is equal to the difference in data between the filesystem and its snapshot +* Creation time is only seconds +* Recovery is as fast as you can write data. +* They are easy to automate. + +Actions: +* Create +* Delete +* Rename +* Access snapshots +* Send / Receive +* Clone + + +Create snapshots + +```bash +# Create a snapshot of a single dataset +zfs snapshot tank/home/sarlalian@now + +# Create a snapshot of a dataset and its children +$ zfs snapshot -r tank/home@now +$ zfs list -t snapshot +NAME USED AVAIL REFER MOUNTPOINT +tank/home@now 0 - 26K - +tank/home/sarlalian@now 0 - 259M - +tank/home/alice@now 0 - 156M - +tank/home/bob@now 0 - 156M - +... + +Destroy snapshots + +```bash +# How to destroy a snapshot +$ zfs destroy tank/home/sarlalian@now + +# Delete a snapshot on a parent dataset and its children +$ zfs destroy -r tank/home/sarlalian@now + +``` + +Renaming Snapshots + +```bash +# Rename a snapshot +$ zfs rename tank/home/sarlalian@now tank/home/sarlalian@today +$ zfs rename tank/home/sarlalian@now today + +# zfs rename -r tank/home@now @yesterday +``` + +Accessing snapshots + +```bash +# CD Into a snapshot directory +$ cd /home/.zfs/snapshot/ +``` + +Sending and Receiving + +```bash +# Backup a snapshot to a file +$ zfs send tank/home/sarlalian@now | gzip > backup_file.gz + +# Send a snapshot to another dataset +$ zfs send tank/home/sarlalian@now | zfs recv backups/home/sarlalian + +# Send a snapshot to a remote host +$ zfs send tank/home/sarlalian@now | ssh root@backup_server 'zfs recv tank/home/sarlalian' + +# Send full dataset with snapshos to new host +$ zfs send -v -R tank/home@now | ssh root@backup_server 'zfs recv tank/home' +``` + +Cloneing Snapshots + +```bash +# Clone a snapshot +$ zfs clone tank/home/sarlalian@now tank/home/sarlalian_new + +# Promoting the clone so it is no longer dependent on the snapshot +$ zfs promote tank/home/sarlalian_new +``` + +### Putting it all together + +This following a script utilizing FreeBSD, jails and ZFS to automate +provisioning a clean copy of a mysql staging database from a live replication +slave. + +```bash +#!/bin/sh + +echo "==== Stopping the staging database server ====" +jail -r staging + +echo "==== Cleaning up existing staging server and snapshot ====" +zfs destroy -r zroot/jails/staging +zfs destroy zroot/jails/slave@staging + +echo "==== Quiescing the slave database ====" +echo "FLUSH TABLES WITH READ LOCK;" | /usr/local/bin/mysql -u root -pmyrootpassword -h slave + +echo "==== Snapshotting the slave db filesystem as zroot/jails/slave@staging ====" +zfs snapshot zroot/jails/slave@staging + +echo "==== Starting the slave database server ====" +jail -c slave + +echo "==== Cloning the slave snapshot to the staging server ====" +zfs clone zroot/jails/slave@staging zroot/jails/staging + +echo "==== Installing the staging mysql config ====" +mv /jails/staging/usr/local/etc/my.cnf /jails/staging/usr/local/etc/my.cnf.slave +cp /jails/staging/usr/local/etc/my.cnf.staging /jails/staging/usr/local/etc/my.cnf + +echo "==== Setting up the staging rc.conf file ====" +mv /jails/staging/etc/rc.conf.local /jails/staging/etc/rc.conf.slave +mv /jails/staging/etc/rc.conf.staging /jails/staging/etc/rc.conf.local + +echo "==== Starting the staging db server ====" +jail -c staging + +echo "==== Make sthe staging database not pull from the master ====" +echo "STOP SLAVE;" | /usr/local/bin/mysql -u root -pmyrootpassword -h staging +echo "RESET SLAVE;" | /usr/local/bin/mysql -u root -pmyrootpassword -h staging +``` + + +### Additional Reading + +* [BSDNow's Crash Course on ZFS](http://www.bsdnow.tv/tutorials/zfs) +* [FreeBSD Handbook on ZFS](https://wiki.freebsd.org/ZF://wiki.freebsd.org/ZFS) +* [BSDNow's Crash Course on ZFS](http://www.bsdnow.tv/tutorials/zfs) +* [Oracle's Tuning Guide](http://www.oracle.com/technetwork/articles/servers-storage-admin/sto-recommended-zfs-settings-1951715.html) +* [OpenZFS Tuning Guide](http://open-zfs.org/wiki/Performance_tuning) +* [FreeBSD ZFS Tuning Guide](https://wiki.freebsd.org/ZFSTuningGuide) |