Creating a Single Page Todo App with Node and Angular Today we will be creating a very simple Todo application using the MEAN (Mongo, Express, Angular, Node) stack. We will be creating: Single page application to create and finish todosStoring todos in a MongoDB using MongooseUsing the Express frameworkCreating a RESTful Node APIUsing Angular for the frontend and to access the API While the application is simple and beginner to intermediate level in its own right, the concepts here can apply to much more advanced apps. The biggest things we should focus on is using Node as an API and Angular as the frontend. What We’ll Be Building Base Setup File Structure We are going to keep the file structure very simple and put most of the code for our Node application into the server.js file. - public ----- core.js ----- index.html - package.json - server.js Installing Modules In Node, the package.json file holds the configuration for our app. Now if we run npm install, npm will look at this file and install Express and Mongoose. Node Configuration Todo Model
Responsive Navigation: Optimizing for Touch Across Devices As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes? Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. Designing towards touch really forces us to simplify and decide what's most important- what needs to stay on the screen. An Adaptive Solution
Getting started Bootstrap (currently v3.3.6) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs. Bootstrap Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included. Download Bootstrap Source code Source Less, JavaScript, and font files, along with our docs. Download source Bootstrap CDN The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Install with Bower You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Bower: $ bower install bootstrap Install with npm You can also install Bootstrap using npm: $ npm install bootstrap require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. Bootstrap's package.json contains some additional metadata under the following keys: Install with Composer You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Composer:
Responsive Web Design Patterns | This Is Responsive Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox
Initializr - Start an HTML5 Boilerplate project in 15 seconds! Atomic Design By Brad Frost Originally published: Jan 15, 2014 This article was originally published June, 2013 at We’re not designing pages, we’re designing systems of components. -Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. In searching for inspiration and parallels, I kept coming back to chemistry. Similarly, interfaces are made up of smaller components. Josh Duck’s HTML Periodic Table gives a great breakdown of web designers’ atomic elements. What is Atomic Design Atomic design is methodology for creating design systems. Atoms Molecules Organisms Templates Pages Let’s explore each stage in more detail. Atoms Atoms are the basic building blocks of matter. Molecules Pages
10 Easy Steps to a Complete Understanding of SQL Too many programmers think SQL is a bit of a beast. It is one of the few declarative languages out there, and as such, behaves in an entirely different way from imperative, object-oriented, or even functional languages (although, some say that SQL is also somewhat functional). I'm writing SQL every day and embracing SQL with my Open Source Software jOOQ. I thus feel compelled to bring the beauty of SQL a bit closer to those of you still struggling with it. The following tutorial is destined for readers who have already worked with SQL but never completely understood itreaders who know SQL well but have never really thought about its syntaxreaders who want to teach SQL to others This tutorial will focus on SELECT statements only. 1. Get this into your head first. SELECT first_name, last_name FROM employees WHERE salary > 100000 Easy to understand. What do we learn from this? So if this is so simple, what's the problem? Forget about all that. 2. There are three things to note: 3. FROM a, b 4.
UX Immersion Mobile Conference 2014 • April 7–9, 2014 in Denver, CO @brad_frost on Twitter If you’ve ever seen Brad Frost onstage, then you’ll know his passion and enthusiasm for responsive design is matched only by his practical working knowledge for the subject. But if you haven’t yet seen him, then get ready—he’s a coach, vocal leader, and partial comedian who makes learning fun and functional. Brad is known for his work in designing responsive sites for huge content sites such as Entertainment Weekly and TechCrunch. So if your team talks about designing mobile-first, content-first, responsively, adaptively, or progressively… well, it’s time to decipher what all of those mean in practice and process alike. And Brad is the best guide you could hope to have.
Which Custom Web Fonts Solution Should You Use? Over the past few years the number of fonts available for use in web design has dramatically increased. It wasn’t long ago that we all knew not to stray further than the basic Arial, Helvetica, Times, Georgia mix, but now there’s a range of services that allow the use of almost any font imaginable in your website design. This post rounds up the various custom web font solutions and looks at the pros and cons of each. The most basic solution out of the lot is the CSS3 @font-face property. Pros: Powered by CSS. Cons: Limited to open source fonts Links: Since Google launched its Google Web Fonts API the service has grown to include hundreds of freely available fonts for use in your designs. Powered by CSS. Choice is limited to a range of free fonts For those needing professional or classic fonts in their designs for corporate branding, Typekit is definitely the best solution. Premium service with a yearly fee Good cross browser supportCharacter set can be limited for a smaller file size