webkit

Some tests on javascript, CSS and HTML. Because at least with github it can be stored online and I know where to find them. You know that feeling like "I knew how to do it, where did I put that ... oh right I made a junk repo out of it 👍". Are you really reading this? 👀

Start learning

Here are some complete website for web based languages and technologies to learn:

w3c Schools
SoloLearn
Kirupa's blog
MDN learning Area
- mdn/learning-area code example on github

HTML

Here is a list of nice links for HTML:

getting started
Simple HTML examples : samdutton/simpl
Generate favicon with real favicon generator

CSS

Here is a list of nice links for CSS:

Responsive navbar

It is default with bootstrap, but here are some explainations on how to do it yourself:

Colors

Color therory

Make it look good:

HSL, HSV, RGB

BootStrap

Bootstrap is a nice CSS / Javascript framework to build good looking sites, app, blogs, etc.

You can follow the github project here

There are also a lot of layout tools that can be used to either customiser or simplify your life with bootstrap such as :

Isolated bootstrap

If you don't want to have everything bootstrapped but rather only the grid or else, you can isolate bootstrap into another class say .bootstrap-iso with less.

Isolate bootstrap with less

And you can install less with the node.js package manager (npm):

npm install -g less

For proxy errors try this:

npm config set proxy http://<proxy-server-url>:<port>
npm config set https-proxy http://<proxy-server-url>:<port>

Javascript

Here is a list of nice links for Javascript:

Reading files in JavaScript using the File APIs

Events

Server requests

I have mostly french documentation for that, how to handle server/application or API communication. Ajax and XMLHttpRequest:

Managing JSON

You can load JSON through an XMLHttpRequest.

When you want to transform a JSON object into string or a string into a JSON. Write that in the console (ctr + shift + i) in the browser

var myJSON = { "name": "John", "level": "27" };
myJSON

var myString = JSON.stringify(myJSON);
myString

var myParsed = JSON.parse(myString);
myParsed

Miscellaneous

In Javascript, the … will take each element of an array separately.

arr =[1, 2, 3, 4]
String.fromCharCode(…arr)

Will return the string equivalent for all of the element of arr

Test framework

To test your javascript code, you might need the help of some test framework. As in other languages, they are here to help you write better code.

I have tested a couple of them:

jasmine - nice in browser display, feature BDD
Qunit - looks like a traditionnal unit test framework, a bit ugly in browser.

JQuery

The JQuery framework is a set a function that facilitate the development of javascript features. From DOM manipulation to events, it makes everything easier.

How to use, download here the source file or add this line in your html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Node.js

Node.js is a javascript backend.

npm

You would need beforehand. Node.js is a free open source lightweight server framework that runs on javascript. Node Package Manager (npm) needs node.js. To install a remote package:

npm install <package>

To run a simple package (it should be written on the doc, or it should have an index.js):

node index.js

Build setup local node package

Here are the basic operation that you can do on a local node package.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

Jekyll

Jekyll is a rubby app that creates static web/blog from text. You define a template and then all you do is add content. It is also widely use to create github page.

Liquid

Liquid is made by shopify and is used in jekyll:

Shopify liquid wiki

Here some information on how to use liquid for page / collection tags and categories:

Use tags and categories in Jekyll
Alphabetize Jekyll page's tagspage-tags-pure-liquid.html
Collection pages by tags
List all posts

cURL

cURL (for client URL request library) is a command line interface tool and library to get online content and data using various protocols. The resource must be designated with an URL and supported by cURL. It can also create or modify the resource (opposed to wget) and thus can be used as a REST client.

Installation

On the curl download page there's a link to the download wizard. Complete all the steps as follows:

Select Type of Package: curl executable
Select Operating System: Windows / Win32 or Win64
Select for What Flavour: Generic
Select which Win32 Version (only if you selected Windows / Win32 in step 2): Unspecified

If you chose Windows / Win32 you should end up here, a page that links to http://www.paehl.com/open_source/?CURL_x.y.z (x.y.z will change as newer versions of curl are released). There you can click the first link ("Download WITHOUT SSL") or second link ("Download WITH SUPPORT SSL") for a zip file with curl.exe.

If you chose Win64 you should end up on this page which should have direct download links from the https://curl.haxx.se website. These too contain only curl.exe.

Finally, you can copy curl.exe into %windir% and it should become available on the command line.

curl.exe is in the bin folder of the downloaded / extracted curl folder.

Miscelaneous

Here is a website that has a lot of free of use images for your website: pexels

sylhare/webkit