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? đź‘€
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
Here is a list of nice links for HTML:
- getting started
- Simple HTML examples : samdutton/simpl
- Generate favicon with real favicon generator
Here is a list of nice links for CSS:
- How to align div
- CSS Grid for better cross plateform design
- CSS tricks
- Center in CSS generator
- 30s solutions to CSS problem
It is default with bootstrap, but here are some explainations on how to do it yourself:
Make it look good:
- HSL and HSV
- RGB to HSL color conversion
- HSL to RGB color conversion
- Math behind colorspace conversions, RGB-HSL
- The three-dimensional representation of the HSV model
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 :
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.
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>
Here is a list of nice links for Javascript:
I have mostly french documentation for that, how to handle server/application or API communication. Ajax and XMLHttpRequest:
- FR: Interrogez un serveur web
- FR: Utilisez des API web
- FR: Le fonctionnement de $.ajax()
- Getting started with Ajax
- FR: L'objet XMLHttpRequest
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);
myParsedIn 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
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.
- Raygun - framework comparaison
- Designmodo - test javascript unit test
- Medium - javascript testing guide
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.
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 is a javascript backend.
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
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 testJekyll 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.
- Jekyll official doc
- Configuring Jekyll for github page
- Jekyll on github page
- Create and publish a Jekyll gem
- Set up a Jekyll theme
Liquid is made by shopify and is used in jekyll:
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 (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.
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.
Here is a website that has a lot of free of use images for your website: pexels