background preloader

CSS Almanac

CSS Almanac

Les fondamentaux du Responsive Web Design I. Introduction▲ Prenons deux exemples simples. Le « Responsive Web Design » est né, car nous sommes de plus en plus confrontés aux mêmes problèmes que les architectes : s'adapter aux supports. Voyez plutôt : autrefois, nous n'avions qu'un ou deux navigateurs et les tailles d'écrans variaient peu. Et tout cela, c'est ce que nous avons maintenant. II. Pour faire une application Web qui soit Responsive Web Design, nous devons établir les trois points suivants : une grille d'affichage qui soit flexible :autrement dit, un gabarit qui ne dépende pas d'une résolution minimale, maximale ; des médias flexibles :à savoir, faire en sorte que mes images, vidéos (si besoin), ne débordent pas du cadre de notre grille d'affichage/gabarit ; un ensemble de règles CSS basé sur Media Queries : le principe : mettre des conditions sur l'affichage afin d'afficher/masquer, voire changer le rendu de notre application Web. Il est heureusement possible de s'adapter pour y parvenir. III. IV. V. VI. <! Horreur ! <!

jQuery – Effet smooth scroll (défilement fluide) Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 110 465 fois. L’effet de scroll fluide est déjà intégré, en fonction de vos paramètres utilisateur, sur certains navigateurs. Il y a quelques temps de cela (peut-être trois ans maintenant) j’avais trouvé un script JS pour ajouter cet effet, mais celui-ci ne prenait en compte que les ancres dotées de l’attribut name, sous cette forme : <a href="#cible">Aller à "cible"</a> <a name="cible"></a> Or la création d’un élément anchor dans le seul but de créer une ancre ne me semblait pas la méthode la plus propre, mais comme j’étais une quiche en JavaScript (ça n’a pas trop changé d’ailleurs, puisque j’utilise principalement jQuery pour me faciliter l’existence), j’ai fait avec ce code jusqu’à ce que je découvre jQuery et le plugin jQuery.scrollTo(). C’est pourquoi aujourd’hui je vous propose de créer votre propre script jQuery de smoothscroll. Solution de base Voyons le code de plus près :

Building A RESTful PHP Server: Understanding the Request Once upon a time, what seems like a lifetime ago, I was away for a couple of weeks, and I wrote a series of posts about serving RESTful APIs from PHP to keep my blog going while I was away. Fast forward a few years and those posts are outdated and still wildly popular - so I thought it was about time I revisited this and showed how I'm writing RESTful PHP servers today! In the first part of this (probably) 3-part series, we'll begin with the basics. It might seem boring, but the most important thing to get right with REST is parsing all the various elements of the HTTP request and responding accordingly. I've put in code samples from from a small-scale toy project I created to make me think about the steps involved (should I put the code somewhere so you can see it? Let me know). Send Everything to index.php This assumes you're using apache with mod_rewrite; the same thing can be achieved with other webservers. Figure Out What Was Requested Incoming Data

Tutoriel - Creer un site avec Bootstrap de Twitter Découvrez comment il est possible de réaliser une interface Web de manière simple et la rendre compatible avec les différents types de support mobiles en utilisant Bootstrap de Twitter, qui repose sur un système de grille. Son avantage est qu'il permet également un gain de temps énorme en proposant des fondations prédéfinies pour vos projets, une normalisation de votre code en respectant les standards et des éléments graphiques loin d'etre négligeables. En plus de tout ceci, et c'est là l'objet de ce tutoriel, Bootstrap permet de faire rapidement et efficacement des structures de sites en Responsive Web Design, en d'autres termes de prendre en compte et d'adapter le contenu de votre site Web aux différents types d'appareils, mobiles ou non. Voir la réalisation effectuée avec ce tuto Découvrir Bootstrap de Twitter Je vous conseille de récupérer la dernière version sur le site afin de profiter des mises à jour. Télécharger Bootstrap de Twitter Télécharger JQuery Décortiquer le framework <! <! <!

Demo of a simple CRUD RESTful PHP service used with AngularJS and MySQL | Angular Code REST represents Representational State Transfer. For web applications REST API is a good architectural choice for the communication between the app and the server. This makes sharing data between different devices and apps easy. Implementing REST is simpler compared to other methods like SOAP, CORBA, WSDL. Live Demo Download In this project we will have the most simple Create, Read, Update, Delete operations on customers table using REST API. To run the customer manager web application in your local machine, follow the following 3 simple steps Download the required filesImport angularcode_customer.sqlEnable rewrite_module in apache server At first lets start building the REST API using PHP, MySQL and then we will move on to the AngularJS part for the front end part of our Customer Manager Application. 1. You can import the provided sql file angularcode_customer.sql in the download. [sql] [/sql] 2. $http.get$http.post$http.delete [code] <IfModule mod_rewrite.c> RewriteEngine On [/code] [php] <?

Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation - Call Me Nick Get Source View Demo In this lab, I’m going to demonstrate how to create a fixed navigation, single page site with smooth scrolling, and highlighting the navigation link depending on which section is currently being viewed. This technique is great for single page sites that want to pack in lots of goodies on one page, but use a navigation with cool scrolling to section it off. Let’s get started. Getting Started With The Markup The markup is fairly easy. <div id="main"><div class="container clearfix"><div id="sidebar"><div id="nav-anchor"></div><nav><ul><li><a href="#home">Home</a></li><li><a href="#about">About</a></li><li><a href="#services">Services</a></li><li><a href="#blog">Blog</a></li><li><a href="#contact">Contact</a></li></ul></nav></div><div id="content"><section id="home"> ... Now, Let’s Style With CSS Using standard CSS methods, we create a two column layout. Digging Into the JQuery and JavaScript First, let’s make our navigation box fixed after scrolling. Now for the fun part.

Styling Scrollbars to Match Your UI Design This tip will guide you in improving the look and feel of scrollbars to match your UI design. We'll take a look at what WebKit browsers offer us in terms of CSS, plus we'll use a jQuery fallback to cater for other browsers. Quick Note About Browsers When we refer to Webkit-based browsers we're essentially talking about Apple Safari and Google Chrome. Looking at these figures there should be a very bright future for scrollbar styling! Step 1: A Simple Page With Scrollbars Before we can begin with the actual topic of styling scrollbars with CSS, we need a functional demo; a page with scrollbars. Contents are larger than the visible window area (a scrollbar will appear on the right).A textarea contains enough text so that scrollbars appear.An iframe is used to display a different page.A div or any other block element has its overflow property set. For the sake of this demo we'll go with the last option. It's just a div with plenty of dummy content. Step 2: Starting With Webkit Browsers

jQuery custom content scroller Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more. Current version 3.1.5 (Changelog)Upgrading from version 2 When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 2 is still maintained and updated here. How to use it Get started by downloading the archive which contains the plugin files (and a large amount of HTML demos and examples). Include jquery.mCustomScrollbar.css in the head tag your HTML document (more info) Initialization Initialize via javascript more info

Creating a simple CRUD with Node.js, Express, MongoDB and AngularJS, Part 1 Last week (May 30th and 31st) I attended to the 2014 Costa Rica BarCamp, which is an international network of user-generated “unconferences" primarily focused around technology and the web. I participated as speaker and I prepared an "unconference" about Node.js and Entrepreneurship, and how Node can help to easily prototype, develop and scale a web application for entrepreneurs who has low budget to host/scale/develop. One of the attendees of my "unconference"" tweeted me about an explanation for a simple CRUD with Node.js and MongoDB, so this post explains how to create a simple CRUD using Express.js framework. Although there’re other frameworks that makes simple CRUD operations easier like Sails.js or Meteor, I will keep it simple to explain a bit better about doing CRUD operations (models/controllers/routes) with Express. Node.js As we all know, Node.js is a server-side platform to develop fast, scalable network applications using JavaScript. Express.js MongoDB Mongoose Angular.js n stable

Simple CRUD Node.js & MySQL Please Share this to your social media if this is useful for you This time I'd like to share a basic and simple example of CRUD Operation in Node.js and MySQL. Its a lil bit hard to find tutorial Node.js n MySQL as poeple tend to use Mongoose instead of MySQL. "note that there's no input validation on the Demo, just a crud example" ** UPDATE **I've created RESTFul Crud example with newest version of express and other dependencies here Before we start, Please mind the environment of this Application. I'm using UbuntuNPM, Express MySQL for Node I haven't tested it yet on Windows. but i bet this will work too. Installing all those things above Install Node.js, NPM and Express in Ubuntu After your installation's complete, lets start creating your project folder: ubuntu@AcerXtimeline:~$ express hello_world once your hello_world folder is ready, Install MySQL. ubuntu@AcerXtimeline:~/hello_world$ npm install mysql We need a connection manager in Express. install it Now take a look at this Folder structure

NodeJS REST API with MySQL and Express NPM Modules Expressfelixge/node-mysql - Source Most articles about building a REST API for NodeJS will be based on MongoDB, I'm going to show you how to do it with MySQL. Implementing the REST API To implement all the routes required by the API, the full REST API for the node application will be a single file server.js which consists of the following methods: Structure Require your modules and create a http server based on express framework. var express = require('express'), app = express(), mysql = require('mysql');app.listen(3000);console.log('Rest Demo Listening on port 3000'); DB Connection Setup your database and create a pool of connections to MySQL server; Where the configuration uses your host, username, password, and database name of course. Routes Your application will only need five REST routes to cover the methods table above. Each route takes a callback function with request and response objects. You may also notice we are going to be sending json Content-Type as a response always.

Gulp as a Development Web Server The task runner Gulp.js is getting more and more popular lately. It can be used for many things, like concatenating JavaScript files or minifying images. If you are new to Gulp.js, I recommend you to start off with Managing Your Build Tasks With Gulp.js. In this tutorial, you will learn how to use Gulp.js, in order to run a local web server with built-in, livereload support. Let's assume we want to develop a single page application. Today, an implementation in JavaScript exists for almost everything, even for a web server. In the following sections, we will setup a local web server for a single page application, so I'll assume you have already setup the basic files, like the gulpfile.js file. We start off by installing the Connect plugin with the command below. Tip: npm install --save-dev can be abbreviated with npm i -D. Now, let's define a task for the web server. We can now start the web server by simply running gulp in the terminal. Setting up the basic web server was easy, right?

knyga/light-orm Why We Should Stop Using Bower - And How to Do It If you are using some of the currently common frontend toolchains, chances are you are using Bower. In short, Bower is a package manager for JavaScript libraries and other frontend dependencies. It’s something that usually sneaks in with other build tools. It’s lightweight and does its job, so you’ll probably just set it up and forget it. Turns out you don’t need Bower and, in fact, it may actually be causing some of your problems. Let’s take a closer look. What is wrong with Bower As a Bower user, you probably are more than familiar with this sight: You may be accustomed to giving little hints to Bower so it can figure out which package versions are compliant. The reason, as it turns out, is that Bower doesn’t support nested dependencies. If your packages are large and few in number, flat dependency management may even be a plus. Bower is also redundant. The problems don’t end here. Step 1 – Move dependencies from bower.json to package.json The equivalent file in npm is package.json.

Related: