Dynamisez vos sites web avec JavaScript !
Bienvenue à toutes et à tous, Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web ! Qui plus est, il se démocratise au sein d'autres environnements comme les serveurs avec le célèbre Node.js, les applications pour smartphones et tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les logiciels multiplateformes. Bref, JavaScript est partout ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript : Sur ce, bonne lecture !
Premiers pas avec Grunt
Nous vous conseillons aujourd’hui d’utiliser un gestionnaire de tâches qui nous paraît être mieux sur bien des points: configuration plus souple, lisible et facile et rapidité vous attendent avec Gulp. Vous avez sûrement déjà entendu parler de Grunt à droite à gauche, en conférence, voire votre boite l’utilise déjà mais vous ne savez toujours pas trop ce qui se cache derrière ce terme saugrenu digne d’un personnage de Warcraft. Soit, ce n’est pas bien grave. Vous est-il déjà arrivé de devoir régulièrement lancer, lancer et relancer des processus tels que Sass, LESS, uglify - en somme des préprocesseurs ou des minifiers - régulièrement à la main ? Voici un workflow assez classique : Compiler mes .scss en .css;Concaténer mes *.js en un seul fichier;Minifier (avec uglify par exemple) la résultante de l’action précédente. Voyons maintenant comment l’on peut mettre en place ceci via Grunt. # Installation Tout d’abord, installons Grunt. $ npm init $ npm install -g grunt-cli # Initialisation Fait ?
Grunt pour ceux qui pensent que Grunt est compliqué
On parle beaucoup de Grunt aujourd'hui, mais les articles disponibles sont souvent abscons et techniques. Pourtant Grunt n'est pas réservé aux spécialistes, comme le montre cette introduction de Chris Coyier. Par Chris Coyier On donne souvent les conseils suivants aux intégrateurs web : Divisez votre CSS et votre JavaScript en autant de parties que nécessaire, puis concaténez-les pour la version de production de votre site. Il y en aurait encore beaucoup à ajouter, mais voilà déjà quelques basiques. Je suis sûr que vous avez entendu parler de Grunt. Mais soyons clair : Grunt est un de ces nouveaux joujoux à la mode que tous les cool kids utilisent, mais qui à première vue semble étrange et intimidant. Écartons tout de suite quelques malentendus Peut-être avez-vous entendu parler de Grunt mais ne l'avez pas utilisé vous-même. Je n'ai pas besoin de ce que fait Grunt Probablement que si, en fait. Grunt fonctionne avec la console - Je ne suis qu'un designer Je suis designer, moi aussi. grunt
Sass: Sass Basics
Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! VariablesVariables permalink
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower
Whether you love or hate it, there’s no denying that AngularJS is the framework on every developer’s lips. It may not be for everybody, but AngularJS has a quirky, efficient and powerful feature set. Couple that with a few useful development tools like Yeoman, Grunt and Bower and you’ve got yourself an incredibly fast rapid prototyping process. What we’ll cover This AngularJS tutorial will cover: Generating a bare bones AngularJS app with YeomanUsing Grunt to speed up development and help perform repetitive tasksUsing Bower to add third party plugins/frameworksMaking minor changes to your AngularJS app Prerequisites To get the most out of this tutorial we recommend you have the following skills and resources available: A terminal and basic knowledge of the command lineNodeJS and NPM installedFundamental JS, CSS and HTML knowledge Files You can find a repo of this tutorial project here. Let’s get started yo! Alright, let’s get this thing underway. npm install -g yo grunt-cli bower Yeoman yo angular
Installing Node.js via package manager | Node.js
Note: The packages on this page are maintained and supported by their respective packagers, not the Node.js core team. Please report any issues you encounter to the package maintainer. If it turns out your issue is a bug in Node.js itself, the maintainer will report the issue upstream. Node.js and npm packages are available in the Community Repository. pacman -S nodejs npm Debian and Ubuntu based Linux distributions Also including: Linux Mint, Linux Mint Debian Edition (LMDE), elementaryOS and others. Node.js is available from the NodeSource Debian and Ubuntu binary distributions repository (formerly Chris Lea's Launchpad PPA). NOTE: If you are using Ubuntu Precise or Debian Wheezy, you might want to read about running Node.js >= 4.x on older distros. curl -sL | sudo -E bash - sudo apt-get install -y nodejs Alternatively, for Node.js v6: curl -sL | sudo -E bash - sudo apt-get install -y nodejs Available architectures:
Setup an Eclipse Run External Tool Configuration for Grunt | .:paul.tavares:.
I use Eclipse along with the Aptana plugin to develop web applications and have been for a long time. I started using Eclipse because I loved the fact that it provides a full feature Integrated Development Environment (IDE) framework that, through the use of plugins, supports multiple programing languages. At the time I started using it I wanted to learn one IDE that would fulfill developing in multiple languages. To that extent, Eclipse has lived up to it. I have used it to develop Java, Perl, Javascript, CSS, HTML, BrightScript (for my Roku) and will, very soon, use it to develop with Rails. I have tried other editors, like Sublime Text and Brackets, but keep coming back to Eclipse, mostly for the convenience that it already “has it all” and the fact that I’m comfortable using it. In a web project that I started a few months ago, I wanted to learn how to use Grunt, since it seems like it is now the standard javascript build tool. Setup a Run External Tool Configuration for Grunt
Node.js derrière un proxy Apache | Nicolas C. - Blog
Pour un projet dont je ne tarderai plus à vous parler, j’ai eu à faire cohabiter Apache2 et Node.js sur un même machine déstinée à la production. Je voulais pouvoir accéder à mon application Node.js sur le port 80. Le sujet est assez bien documenté et ne présente pas de difficultés particulières ; cet article sera surtout une mise en relation des différents tutos et autres posts que j’ai pu lire ici et là. On suppose ici qu’Apache2 tourne déjà et qu’il est configuré pour utiliser les Virtual Hosts. Installation de Node.js Node.js n’a toujours pas fait son arrivée dans les dépots officiels Debian stable. Node.js depuis les sources Rien de bien complexe à cette étape. Node.js en tant que service Créons un utilisateur pour notre application : Puis créez le fichier SuperApp.js sous le répertoire /home/super-app/ : Pour utiliser votre application en tant que service, un script init.d a été réalisé par un certain Peter Host. On va maintenant éditez le script pour l’adapter à nos besoins : Conclusion
Apache and Node.js on the Same Server
