Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Tuesday, December 09, 2014

Your one stop web designer cheat sheet stop? (If not, it's close...)

Designer Daily - The best cheatsheets web designers will need

Despite of years of practice and coding, it’s impossible for any designers to remember and know absolutely everything required for their work. The technology and trend is never constant. Whether it’s a programming language, CMS or any other framework, they need to refer the official document and a handy cheatsheet for best outcome in any design and development work.

In this today’s post, here we have collected the best cheatsheets that any web designers will need. Have a look at it below and enjoy your work!

1. CSS – Cascading Style Sheets

2. Popular CSS Frameworks

3. HTML – HyperText Markup Language

4. JavaScript & jQuery

5. PHP

6. WordPress

7. Joomla!

8. Drupal 7

9. SEO

10. Adobe Photoshop

11. Adobe Illustrator

image

[Insert my usual, "One of these days, I'm might have to play web, so am going to cache this for future reference" statements here]

(via Infragistics - D-Coding - Developer News - What's IN with the Infragistics Community? (12/1-12/7))

Monday, April 07, 2014

Visual Studio 2013 Update 2 lets you build your own Scaffolder

.NET Web Development and Tools Blog - Creating a Custom Scaffolder for Visual Studio

With the release of Visual Studio 2013 last October, we introduced the concept of Scaffolding to Web Application projects. Scaffolding is the framework on which code generation for MVC and WebAPI is built. For more information on Scaffolding or the MVC Scaffolders check the following blog post: http://www.asp.net/visual-studio/overview/2013/aspnet-scaffolding-overview.

However, the true potential for the scaffolding framework comes from the new extensibility surface released in Update 2. With this new functionality, any VSIX can code against the Scaffolding API surface and have their scaffolds added to the Add New Scaffold Dialog. This blog post will walk through the creation of a custom scaffolder.

To get started make sure you have the following installed on your machine:

Creating a New Scaffolder Project Using Sidewaffle

  1. Go to create a new project.
  2. Click on the C#->Extensibility->Sidewaffle Node.
  3. Select new “Basic Scaffolder”.
  4. Input the desired name of your Scaffolder.
  5. Create the Project.

image

...

Next Steps

Now that you have the basics of creating a scaffolder down, here are some additional resources for what to do next:

Additionally you can look to create more complex scaffolders using the following services:

  • ICategoryRegistrationService – to add new Categories in the Add Scaffold Dialog

  • IServiceRegistrar – to add new ActionServices that you can invoke during scaffolding

  • IRollbackService – to make the services registered above be able to use the Scaffolding rollback feature

  • The Scaffolding.EntityFramework dll – to help with the processing of EF models (this is used by the MVC and WebAPI Entity Framework Scaffolders to create the controllers and for MVC the views)

ASP.NET Scaffolding in Visual Studio 2013

Overview

ASP.NET Scaffolding is a code generation framework for ASP.NET Web applications. Visual Studio 2013 includes pre-installed code generators for MVC and Web API projects. You add scaffolding to your project when you want to quickly add code that interacts with data models. Using scaffolding can reduce the amount of time to develop standard data operations in your project.

...

Tutorials

To customize the generated files, see How to customize the generated files from the New Scaffolded Item dialog.

For an example of using scaffolding with Database First development, see EF Database First with ASP.NET MVC.

For an example of using scaffolding in an MVC project, see Getting Started with ASP.NET MVC 5.

For an example of using scaffolding in a Web API project, see Create a REST API with Attribute Routing in Web API 2.

This was pretty lost in the Build news stream, but I think this is going to spawn some very interesting Extensions in the near future.

Succinctly eBook of the Day: "Twitter Bootstrap Succinctly" [Reg-ware]

SyncFusion Succinctly eBook Shelf - Twitter Bootstrap Succinctly

image

Twitter Bootstrap (TWB) is a free front-end framework built by Twitter developers to ensure visual and functional consistency across websites and applications. In Twitter Bootstrap Succinctly, Peter Shaw explains what makes up a consistent, attractive UI, and why having one is important. He then walks you through the basics of adding beautiful, user-friendly components to your projects with only a few lines of HTML and CSS. You'll learn how to add TWB to an existing project, and use it to customize attractive buttons, tabs, breadcrumbs, dropdowns, and more. There are even chapters dedicated to optional JavaScript and TWB extensions for when you're ready to take your UI's appearance a step further.

Table of Contents

  1. What is Twitter Bootstrap?
  2. Adding Bootstrap to Your Project
  3. Twitter Bootstrap Scaffolding
  4. Twitter Bootstrap Base CSS Classes
  5. Forms
  6. Buttons
  7. Components
  8. Twitter Bootstrap JavaScript
  9. Extending Bootstrap

If you've been hearing about Bootstrap but weren't sure what it was or how to get started with it [insert usual "this ebook is for you" statement here]

(via expression{web.blog} - Twitter Bootstrap Succinctly)

Friday, February 21, 2014

Need a little help cleaning up your code? CodeMaid will help with that developer dirty work...

Dotnetjalps-asp.net - CodeMaid extension for visual studio

Till now I’m a resharper fan boy and I still love using it. It is a great productivity tool. But it is not free for commercial use. So lots of my friends tell we want something open source or free which provide some kind of productivity over normal visual studio things and recently I came across CodeMaid extension of visual studio. It is a great plugin.

What is CodeMaid?

CodeMaid is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, JavaScript and TypeScript coding.

CodeMaid

An open source visual studio extension to cleanup, dig through and simplify our C#, C++, F#, VB, XAML, XML, ASP, HTML, CSS, LESS, JavaScript and TypeScript coding

image

Code Digging
Visualize and navigate through the contents of your C# and C++ files from a tree view hierarchy. Quickly switch between different sorting methods to get a better overview. Drag and drop to reorganize the code. See McCabe complexity scores and informative tooltips.

Reorganizing
Reorganize the layout of members in a C# file to follow Microsoft’s StyleCop convention, or your own preferences.

Collapsing
Recursively collapse nodes or the entire tree in the solution explorer window.

Configuring
Enable, modify or disable many of the aspects of how CodeMaid does its work.

Formatting
Format comments to wrap at a specified column and arrange XML major and minor tags on separate lines.

Progressing
View the overall progress of a build within Visual Studio, or in the Windows taskbar, both with a green/red status indication.

Switching
Switch between related files, such as cpp and header files or xaml and code-behind.

Joining
Join two adjacent lines, or a highlighted section of code onto a single line.

Finding
Find the current file in the solution explorer window.

and More!
Toggle read-only state, close read-only files, etc.

Download (Visual Studio Gallery) Go Straight to the Source

I dig the number of languages supported (and that it's OSS :) This is SO likely to see a Coding4Fun blog post in the near future... :)

Thursday, July 25, 2013

modern.IE is OSS... The HTML/CSS/JS code scanner from Microsoft is free and OSS (oh, and the IE VM's have been updated too!)

InternetExplorer/modern.IE-static-code-scan

modern.IE

The modern.IE scan analyzes the HTML, CSS, and JavaScript of a site or application for common coding issues. It warns about practices such as incomplete specification of CSS properties, invalid or incorrect doctypes, and obsolete versions of popular JavaScript libraries.

It's easiest to use modern.IE by going to the modern.IE site and entering the URL to scan there. To customize the scan, or to use the scan to process files behind a firewall, you can clone and build the files from this repo and run the scan locally.

How it works

The modern.IE local scan runs on a system behind your firewall; that system must have access to the internal web site or application that is to be scanned. Once the files have been analyzed, the analysis results are sent back to the modern.IE site to generate a complete formatted report that includes advice on remediating any issues. The report generation code and formatted pages from the modern.IE site are not included in this repo.

Since the local scan generates JSON output, you can alternatively use it as a standalone scanner or incorporate it into a project's build process by processing the JSON with a local script.

The main service for the scan is in the lib/service.js file; it acts as an HTTP server. It loads the contents of the web page and calls the individual tests, located in /lib/checks/. Once all the checks have completed, it responds with a JSON object representing the results.

Installation and configuration

  • ...

Testing

...

JSON output

...

Exploring IE - modern.IE updated for IE11 – Parallels offer and free VMs for download

With the release today of the Internet Explorer 11 Developer Preview for Windows 7, we’ve also updated modern.IE – a set of tools and resources that make developing for the web (and IE) just a little bit easier. We want the web to move forward. And, we want to help web developers spend more time innovating and less time testing.

Today, we announce three new enhancements:

1. Limited offer: 25% off Parallels Desktop 8 virtualization for Mac.

2. New virtual machines for testing IE11 on Windows 8.1 and Windows 7.

3. A new, free screenshot tool that lets you see how a site looks across browsers and devices.

Additionally, the modern.IE scanner is now available open source (under Apache 2.0 license) to download from GitHub for your own projects.

...

Limited offer: 25% off Parallels Desktop 8 for Mac

...

IE11 Preview available on Virtual Machines

Virtual machines have proven to be a great way for developers to test in their preferred environment. We’ve made these available across various versions – from IE6 on Windows XP to IE10 on Windows 8 and in-between. Today we’ve added new VMs for IE11:

  • Windows 8.1 Preview with IE11
  • Windows 7 with IE11 Developer Preview

And they are available across many common virtualization platforms:

  • Hyper-V on Windows Server 2008 R2 SP1
  • Hyper-V on Windows Server 2012 & Windows 8 Pro w/Hyper-V
  • Virtual PC for Windows 7 (note that VPC cannot run Windows 8 VMs)
  • VirtualBox on Windows , Mac OSX and Linux
  • VMWare Player for Windows and Mac OSX

Start downloading the new VMs here.

How your users see your site. On Android. In Safari. With an Xbox.

...

That should be enough things and IE stuff to play with for a couple days at least. I wonder if there's an Azure VM in the gallery for this yet? That way we could starting playing with IE11 in just minutes...

Friday, February 15, 2013

The HTML5 Quick Start For Greg's (err... Dummies... um... err... um.. for the HTML5 Challenged. Yeah. Them)

CodeProject - HTML5 Quick Start Web Application

image

Background

I started learning more about HTML5 from December last year. Since it was new, talked about and had real good features, I got a jump start from the thought of using it in our upcoming projects and possibly giving a session on HTML5 to my team once I have some good insight on the same. While learning about the HTML5, I started developing a demo web application that was fully HTML5 based with all the new major features that we will be discussing in this article going ahead.

Once the thought of sharing the features in a quick and easy manner hit me, I tried to develop a HTML5 enabled ASP.NET application that would be self sufficient in explaining and showcasing the new HTML5 features - kind of self starter kit to see and play around with the feature implementation straight away post download.

Table of Contents

...

image"

Being HTML5 "Challenged" (Man, I seem to say that about a bunch of things don't I? That's why I love my job and the tech space... so much to learn! That's also why I hate the tech space... so much to learn! lol ) I found this article a great read and tool to jump start my HTML5'ness... The best things are the diagrams/snaps/images. they really help demonstrate the point at hand...

Tuesday, November 27, 2012

Developing with HTML5 with JavaScript and CSS3 Jumpstart from the Microsoft Virtual Academy (free and a free exam voucher too!)

MSDN UK Team blog - Get your free HTML5 exam voucher

image

Get ahead of your competition: Earn your MCSD certifications and start developing Windows 8 web and Windows store apps.

We’ll get you started with our “Programming in HTML5 with JavaScript and CSS3” course and exam.

It’s all FREE: Register for the free online course, and receive a free exam voucher (Exam 70-480) to prove what you know. Act now: This offer is available for a limited time only. [GD: Post leached in full]

Microsoft Virtual Academy - Developing in HTML5 with JavaScript and CSS3 Jump Start

This course provides an accelerated introduction to HTML5, CSS3, and JavaScript and helps students gain basic HTML5/CSS3/JavaScript programming skills. This course is an entry point into both the Web application and Windows Store apps training paths and helps prepare learners for Microsoft exam 70-480. The course focuses on using HTML5/CSS3/JavaScript to implement programming logic, define and use variables, perform looping and branching, develop user interfaces, capture and validate user input, store data, and create well-structured applications. This course uses Visual Studio 2012, running on Windows 8.

Audience Profile | The course is intended for developers who have at least six months of professional experience and who are interested in developing applications using HTML5 with JavaScript and CSS3 (either Windows Store apps or IE10 apps for the Web). While the students may have little or no HTML5 coding experience, they should have some experience with HTML4.

The popular “Jump Start” virtual classroom experience leverages two experts and an engaging team-teaching approach. We’re excited to introduce Jeremy Foster and Michael Palermo - two seasoned Microsoft Technical Evangelists with real world experience developing applications using a wide array of platforms and languages. Both Jeremy and Michael share a passion for creating powerful solutions leveraging HTML, CSS and JavaScript and are excited to dive into these topics together.

FREE EXAM VOUCHER FOR 70-480! | Register now to take Exam 70-480 Programming in HTML5 with JavaScript and CSS3 for FREE! Just use this voucher code when scheduling your exam: HTMLJMP (voucher code available through 3/31/2013 or while supplies last.)

image..."

Dude. Free training online virtual training and a free exam voucher too? You too can be the talk of the holiday parties as you show off your HTML dev cert! Family, friends and co-workers will be in awe of your dev'ness!

Okay, maybe not...

But still. Free is free and when it comes to raise time, have a cert could help a good bit. And the fact that all you need to invest is your time and you KNOW HTML5/CSS3/Javascript is "the thing"... so... started yet?

 

Related Past Post XRef:
Microsoft Virtual Academy (MVA) provides free Microsoft Cloud Tech training
8 x 2 = 16 hours of instructor lead virtual Windows Phone 8 Dev training (That's free too!)
"Office 365 for the IT Pro - Platform" course now available on MVA

zoom zoom to Zoomzum's 20 must have web dev chest sheets

zoomzum - 20 Must Have Cheat Sheets for Web Development

Web development has become very much essential these days and it isn’t a very easy task. A lot of effort is needed on the part of the web developer to study all the important information and get all the necessary details about the process of web development only then will he be able to progress on the development part.

Web development has taken and acquired various dimensions in today’s time and is extremely necessary and essential. The developers have a tough job in their hands. They are supposed to create web pages that are creative attractive and easy to make at the same time.

PHP is thus very useful for these developers because it really helps in creating amazing web pages .among its uses and advantages and unique feature one feature is that it is the first ever side scripting language to be embedded in a HTML document.PHP therefore gets the status of the most important and also the most popular developmental languages.

WordPress is a very effective blogging tool and it is absolutely free and open source. WordPress is an amazing and a dynamic content management system that is CMS. WordPress is very much based on PHP or even MySQL. It has various features that are very important and essential which includes a plugin architecture and also a template system in addition.

WordPress cheat sheets can be widely used for theme development.WordPress cheats sheets are of various types and categories such as word press theme anatomy model cheat sheet, SEO for word press model cheat sheet and various other cheat sheets that are very important and helpful.

Today we are going to share cheat sheet for web developers. Visit this list and select the best one that helps to make your web development simplify with these cheat sheets. Also share your thought in our comment section below.

...

image..."

Now that's a boat load of cheatsheets! If you're a web dev or wanna be, like me, there's likely something here that you need now or will in the near future...

Monday, October 29, 2012

"Programming Windows 8 Apps with HTML, CSS, and JavaScript" eBook finished and the PDF is available right now... (and still free as in free, and now 833 pages)

Microsoft Press - Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript

Hello, Kraig Brockschmidt here. To help celebrate //build/, I’m delighted to announce the completion of Programming Windows 8 Apps with HTML, CSS, and JavaScript!

You  can download the ebook in PDF format here: http://go.microsoft.com/FWLink/?Linkid=270056 (17.9 MB)

(Note: We will be providing EPUB and MOBI formats in the near future. We’ll add links here when those formats are ready.)

The ebook’s companion content is here: http://go.microsoft.com/FWLink/?Linkid=270057 (60.0 MB)

This free ebook provides comprehensive coverage of the platform for Windows Store apps. Since its second preview in August, we’ve added the remaining chapters on live tiles, notifications, background tasks, background transfers, networking, devices, printing, WinRT components, accessibility, localization, and the Windows Store itself. The final ebook contains 17 chapters. And of course all of the earlier chapters have also been reviewed and refined—over 800 pages in total, along with new and updated companion content!

It has been a wild ride these last few months to finish a book of this magnitude at the same time we were building up to the public release of Windows 8. At moments like these one would like to stop, let out a long “Whew!” and rest for a while. But truly, this is just the beginning! I primarily wrote this book for those developers who have yet to delve into Windows 8 but who will certainly be very interested in the platform as it gains momentum with consumers in the coming year especially. There’s going to be a great market out there for the wonderful apps you’ll be creating, and it is my delight to help serve as a guide to that territory.

As I wrote in an earlier post, I’ve endeavored in this ebook to coalesce the collective experience of app builders who have been working with this platform from the beginning, as well as the insights and understanding of the Windows engineering team itself. I’ve also made a focused effort to highlight the amazing resources that are available in the Windows SDK samples, because they contain thousands and thousands of lines of code that you won’t have to write yourself once you know where to look! I’m hoping that my efforts in doing that research will save you the trouble and help you write some great apps in a short amount of time.

I’ll also reiterate that while this book focused on writing apps with HTML, CSS, and JavaScript, many of the later chapters are really applicable to apps written in any language because they focus on the WinRT API rather than the details of the HTML/CSS presentation layer. Chapter 16, “WinRT Components,” in fact, focuses on using multiple languages within the same app, something that allows you to use the best language for any particular problem! Chapter 17, “Apps for Everyone: Localization, Accessibility, and the Windows Store,” also goes into detail on writing apps for global markets, employing tools like the Multilingual App Toolkit that isn’t specific to apps written in JavaScript.

In the end, then, there is much in this ebook that will be highly valuable to developers working on Windows 8 apps in whatever language. And again, the ebook is free, so there’s no excuse to not have it in your library.

Of course, there are many bits and details that have crossed my path since I had to hand off the text to Microsoft Press. In the months ahead, then, I will be sharing those on my blog, http://www.kraigbrockschmidt.com/luminarity, as well as in postings here with Microsoft Press. I look forward to the continued journey with you!

..."

imageimage

If you want more information a glimpse into the book, click through for the intro/who's this book is for, etc.

Now get coding! :)

 

Related Past Post XRef:
"Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)" 537 page PDF now available (and still free)
It's an eBook day I guess... "Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)"

Wednesday, October 10, 2012

Extra, extra... MSDN Magazine, Windows 8 Special Edition is now available...

MSDN Magazine - Windows 8 Special Edition of MSDN Magazine

"Welcome to the Windows 8 special edition of MSDN Magazine. Over the past several months a talented team of authors, editors and Microsoft technical experts have worked together to produce a bonus issue of MSDN Magazine focused entirely on Windows 8, Windows Runtime and the development of Windows Store applications.

As I explain in my Editor’s Note for the issue, the Windows 8 special edition of the magazine is packed with hands-on tutorials and technical features. Whether you are looking for insight into the technical underpinnings of the Windows Runtime, guidance on building Windows Store apps with XAML, or a tutorial that explores how to create compelling UIs with Expression Blend, this special issue of MSDN Magazine has something for you.

Mind you, this is just the start. Over the months to come, you can expect Windows 8 and Windows Runtime to figure prominently in our coverage. Next month’s November issue will include a pair of features focused on JavaScript and WinJS, a look at managing memory in C/C++ and C#, and design guidance for creating more effective Windows Store app UIs.

..."

MSDN Magazine - Windows 8 Special

SNAGHTML1fb5a24

image

All Windows 8, all the time (well for this edition anyway)...

Monday, October 08, 2012

The web dev world joins hands and helps produce Web Platform Docs (Think "central repository for Web developer documentation")

IEBlog - Web Platform Docs Debuts with Developer Resources

"Today, we are taking another step forward in helping developers achieve the goal of interoperability through same markup. We’re happy to be part of creating Web Platform Docs (WPD), a new W3C hosted community resource for developers and designers who use open Web standards. For developers the Web is about building great experiences with the potential to reach millions of people around the world by writing interoperable sites and applications. We’ve talked many times about the promise of interoperability through the same standards-based markup yielding the same results.

The W3C, Adobe, Apple, Facebook, Google, HP, Microsoft, Mozilla, Nokia and Opera have teamed up to create and seed this new community-driven site whose aim is to become a central repository for Web developer documentation.

  • Clear reference docs that are accurate, complete, and indicate adoption rate.
  • Thoughtful tutorials for existing and new technologies.
  • A sample library that takes into account real-world scenarios.
  • The ability to see—at a glance—which technologies are on a standard track and the stability and implementation status of features

..."

Web Platform - Welcome to Web Platform Docs

Web Platform Docs is a new community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. Even though Web Platform Docs is still in alpha, you can already find lots of valuable content on the site, including information on:

  • How to use features of the open web, with syntax and examples
  • What platforms and devices you can use various technologies on
  • What is the current standardization, stability and implementation status of each technology specification

In the future, Web Platform Docs will include even more content for you to explore such as live code examples, resources for educators and much more. To get there faster, we’d like to invite you to also contribute your knowledge. We hope you will join us!

SNAGHTML106d2bae

image

[Insert Ghostbusters quote here, "Dogs and cats living together..."]

Interesting and cool that so many vendors are behind this. I'd love to see this take off and fulfill it's rather lofty goal. If you're a web dev and wish there was someway you could be part of the community, helping in the building of what looks like a cool repository, here's your chance!

Friday, October 05, 2012

Need help spell checking your comments and HTML elements & attributes? Spell Checking Extension comes to your spelling rescue!

.NET Web Development and Tools Blog - Spell Checker extension for Visual Studio 2012 HTML, ASP.NET, CSS and other files

I have updated spell checker extension for Visual Studio 2012. You can download it from Visual Studio Gallery.

Spell checker supports text verification in:

  • HTML and ASP.NET element content and attributes
  • HTML style comments <-- HTML -->
  • ASP.NET server side comments: <%-- ASP.NET --%>
  • JScript, C# and C++ comments: // C++ style comments
  • CSS and C style comments: /* C style comments */
  • VB and VBScript style comments: 'This is VB comment

Spell checking is supported in style and script blocks as well as in JS, CS, VB, CSS, CPP and H files. Spell checker is able to detects lang attribute specified on HTML elements, extract ISO language and use it to specify appropriate dictionary for the Office spell checking engine.

image..."

I hate when I misspell something. I mean we're all in a hurry, but if we take the time to write comments, shouldn't they at least be spelled correctly? ???

Thursday, September 27, 2012

Free two day virtual/online/instructor led course, Oct 10-11, "Develop Windows 8 Apps and prep for the exams 70-480 and 70-481"

Microsoft Press - Free Jump Start course: Develop Windows 8 Apps and prep for the exams 70-480 and 70-481

Microsoft Learning and Developer & Platform Evangelism (DPE) are teaming up again to provide an exciting new learning experience. This Jump Start is tailored for Application Developers looking to take the fast track to building apps for the new Windows 8 platform! If you've been asking questions like “how different is Windows 8 -- really?” or “why are developer communities reacting differently to this version of Windows?” then this new Microsoft Jump Start is for you.

We’re excited to introduce you to Jeremy Foster and Michael Palermo, two seasoned Microsoft Technical Evangelists with real world experience developing applications using a wide array of platforms and languages. Jeremy and Michael will be leveraging the popular “Jump Start” virtual classroom approach to engaging, expert-led, and demo-rich team-teaching.

** REGISTER NOW **

Date: October 10 - 11, 2012 (2 days)
Time:  9:00am – 4:00pm PST (both days)
Where: Live, online virtual classroom
Cost: FREE!
Target audience: Application Developers with experience developing applications for a touch-enabled interface/platform, including apps that access local and remote data and services.

image..."

Two full days of free Windows 8 Dev training? Free? Live? Online? Come-on, how can your boss not give you some time to attend this? Did you catch the free, live/instructor led and no travel required part?

Friday, September 07, 2012

Web Matrix 2 RTW - Still free and still awesome...

Microsoft Web Matrix 2

"WebMatrix is a free and lightweight web development tool. Create, publish, and maintain your website with ease.

Optimized for Open Source

Install popular web apps with a few clicks, customize them easily with app-specific code completion, and publish them quickly to the web. Learn More

Designed for Top Languages

Create websites using our ASP.NET, PHP, Node.js, or HTML5 templates, and take advantage of the latest web standards, emerging standards(CSS3, HTML5), and popular JavaScript libraries such as JQuery.

Built for the Cloud

Deploy your websites to and from Windows Azure Web Sites with a single click, edit them remotely or even download directly from the cloud.

..."

Vishal Joshi's Tangent  - WebMatrix 2 is Released

On June 6th, I announced  RC version of WebMatrix 2.   I highly encourage you to read the post Announcing WebMatrix 2 RC as it covers most of the new features that we are releasing.

I also encourage you to visit www.webmatrix.com which has tons of user documentation.

Since the June RC release we primarily focused on getting polish on the product and as part of this post I am hoping to highlight the key changes since WebMatrix 2 RC.  This post is not intended to be flashy but hopefully will give you an understanding of the effort that the team took in taking WebMatrix 2 from RC to RTM.

...

The goal for the RTW release was not to add a ton of new features but to actually make only targeted changes to make your experience with the product even more awesome and raise the quality even more.  We had given “Go-Live” license with the RC release already but now hopefully there would be nothing stopping you upgrading from WebMatrix  1 to WebMatrix 2.  JFYI: we will soon turn on the “Upgrade” flag in WebMatrix which will prompt millions of users using WebMatrix 1 to move to WebMatrix 2.

WebMatrix 2 in my opinion is one of the best light weight web development tool out there.  With support for Node.js, PHP, ASP.NET, HTML5, CSS3, jQuery, SQL CE, SQL Server, MySQL, FTP, Web Deploy, Less, ScSS, Coffee Script, SEO, iPhone/iPad simulators and many many other features there is no doubt that it is probably the best web editing tool that one could possibly get for FREE, so if you are not already using it I hope you give it a try by downloading it below:

Since WebMatrix 2 RC we fixed over 100 bugs, many of them reported on Stackoverflow and user voice. Thanks for the taking the time to report issues, and helping us make WebMatrix 2 even better.  Below are some notable fixes that went in between WebMatrix 2 RC and RTM:

image..."

Nice to see the continued work on Web Matrix. Now to really impress me, they need to start working on v3 now... (oh and change the cadence to a more agile one... [well you can always hope...] :)

Anyway... If you're doing web dev and looking for a great tool that free, this is a must go to tool.

 

Related Past Post XRef:
WebMatrix 2 RC - HTML, CSS, Node.js, ASP.Net, Coffee, {Less} and so much more and still free...
WebMatrix v2 Beta is out...

Tuesday, August 21, 2012

"Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)" 537 page PDF now available (and still free)

Microsoft Press - Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)

We’re happy to release the Second Preview of our free ebook Programming Windows 8 Apps with HTML, CSS, and JavaScript, by Kraig Brockschmidt, today. Here’s a description of the ebook from Kraig:

Kraig here. Hello again! Now that the RTM build of Windows 8 is out and available to developers, along with upgraded tools, I’m delighted to offer the next preview release of my book, Programming Windows 8 Apps with HTML, CSS, and JavaScript. Since the first release in June, we’ve added eight more chapters, bringing the total to 12 out of a planned 17. The new chapters cover collection controls (everything you wanted to know about ListView!), layout (especially view states), commanding UI (app bars, message dialogs, and their friends), the all-important topic of managing state, a close look at input and sensors (a form of input, really), media, animations, and contracts (share, search, the file pickers, and contacts). The earlier preview chapters (1-4) have also been updated and refined.

Writing a book like this has always been a journey of exploration for myself, and I’m truly grateful that I also have the opportunity to share the results with you. The process has involved many discussions with the Windows engineering team who created the platform, often taking me into far-off corners of the galaxy, so to speak. I’ve also been doing my best to follow app-building discussions both within Microsoft, on the MSDN forums, and StackOverflow so that I can try to anticipate and answer questions that will likely arise in your own mind. And with this over-abundance of information and experience, my goal has been to pull together a narrative story from start to finish, blazing a single trail through what can seem at times like a thick jungle. I would love to hear from you how successful I’ve been at this endeavor.

..."

imageimageimage

From the "Who this book is for";

This book is about writing WinRT apps using HTML5, CSS3, and JavaScript. Our primary focus will be on applying these web technologies within the Windows 8 platform, where there are unique considerations, and not on exploring the details of those web technologies themselves. For the most part, then, I'm assuming that you're already at least somewhat conversant with these standards. We will cover some of the more salient areas like the CSS grid, which is central to app layout, but otherwise I trust that you're capable of finding appropriate references for everything else.

I'm also assuming that your interest in Windows 8 has at least two basic motivations. One, you probably want to come up to speed as quickly as you can, perhaps to carve out a foothold in the Windows Store sooner rather than later. Toward that end, I've front-loaded the early chapters with the most important aspects of app development along with "Quickstart" sections to give you immediate experience with the tools, the API, and core platform features. On the other hand, you probably also want to make the best app you can, one that performs really well and that takes advantage of the full extent of the platform. Toward this end, I've also endeavored to make this book comprehensive, helping you at least be aware of what's possible and where optimizations can be made.

Many insights have come from working directly with real-world developers on their real-world apps. As part of the Windows Ecosystem team, myself and my teammates have been on the front lines bringing those first apps to the Windows Store. This has involved writing bits of code for those apps and investigating bugs, along with conducting design, code, and performance reviews with members of the core Windows engineering teams. As such, one of my goals with this book is to make that deep understanding available to many more developers, including you!

Wow, 537 pages and still just the "second preview". Not bad for free!

 

Related Past Post XRef:
It's an eBook day I guess... "Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)"

[Limited time offer] Programming Windows 6th Edition Preview eBook is now available. Buy the CP edition today for $10 and get the RP/RTM book updates as they are released, free...
Code samples for "Programming Windows, 6th Edition" updated for Windows 8 Release Preview & Visual Studio 2012 RC (and you also get C++ versions too)

Wednesday, August 15, 2012

For the Win[JS] - Blend for Visual Studio 2012 now available (and Blend for WPF/SilverLight & SketchFlow Preview too)

Blendinsider - Available Now: Blend for Visual Studio 2012

Today, I have the great pleasure to announce the latest release of Blend. In this release cycle, our big focus has been Windows 8: Blend now supports UX authoring not just for store apps written in XAML, but also for those written in HTML.

We want to make it really easy for you to create great apps for Windows 8. Therefore, we are now including Blend with Visual Studio 2012, including the free Express for Windows 8 version for authoring Win 8 store apps. With one fast download and install you get VS for your coding-centric tasks and Blend for visual authoring.

Visual Studio 2012 and Blend can be downloaded from MSDN today if you’re an MSDN Subscriber. You can also download the free Visual Studio 2012 Express for Windows 8, which includes Blend, or free trial versions of Visual Studio 2012 with Blend today.

...

Completely new in Blend is visual authoring for HTML and CSS, especially for Windows 8 store apps.

Blend is a unique, innovative and exciting authoring tool with rich visual tools. It gives you great tools to create, edit and diagnose CSS, supporting some of the latest CSS standards, including CSS Grid, Gradients, Transitions, and media queries. Blend creates clean and standard-conformant markup.

It also is designed to handle app UX that makes heavy use of JavaScript to dynamically create and manipulate DOM elements. Blend constantly runs your code on the design surface, so that content generated by JavaScript can be displayed and edited accurately. Using Interactive Mode you can even interact with the app on the design surface and bring it into states that are not reachable via markup at all.

In summary, Blend for HTML makes visual authoring of HTML, CSS and WinJS productive, fast, and fun again.

..."

Announcing Blend + SketchFlow Preview for Visual Studio 2012

"We are making available a preview version of Blend + SketchFlow Preview for Visual Studio 2012. This release includes support for WPF version 3.5/4.0/4.5, Silverlight 4.0/5.0, SketchFlow, and Blend tools for Windows 8. This preview release will run on Windows 7 SP1, Windows 8, and Windows 8 Server.

WPF, Silverlight, and SketchFlow applications can be developed on any of the operating systems listed above. Windows Store apps authored in HTML and XAML require the Windows 8 client operating system. This preview also includes Blend SDKs for WPF 3.5/4.0/4.5 and Silverlight 4.0/5.0 platforms.

This is a preview version for evaluation only and none of the platforms contain a go-live license. You should use other released versions of Blend for production work. The table below lists the Blend Platforms and the version of Blend you should use for production applications.

..."

Good to see SketchFlow get some love (and that Blend hasn't dropped WPF/SilverLight support...)

Monday, July 30, 2012

Bob's back and teaching us the HTML5/CSS3 with "HTML5 & CSS3 Fundamentals: Development for Absolute Beginners"

Channel 9 - HTML5 & CSS3 Fundamentals: Development for Absolute Beginners

Want to learn a different language? Over the course of 21 episodes, our friend Bob Tabor from www.LearnVisualStudio.net will teach you the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

We'll walk you through getting the web principals, writing code and much more! Each concept is broken into its own video so you can search for and focus on the information you need.

image..."

A prefect companion series to Visual Basic Fundamentals: Development for Absolute Beginners and C# Fundamentals: Development for Absolute Beginners and given what's expected to drop this week, good timing too...

 

Related Past Post XRef:
Two new series of 25 episodes each from Channel 9: "Visual Basic Fundamentals: Development for Absolute Beginners" and "C# Fundamentals: Development for Absolute Beginners"

Friday, July 06, 2012

Three classes, 23 modules, for Designing and App Development for Modern (aka Metro) UI and Devices

Designing for Modern UI

This curriculum contains 11 modules that provide tutorials on how to design for the Windows 8 UI METRO language. The content is 100 Level and can be used as part of a UI/UX class or for self-paced independent learning. The focus of the content is on METRO style design. This material is suitable for any college student, including business, social sciences, liberal or fine arts, students who may have little or no computer programming background

This curriculum provides tutorials on how to design for the Windows 8 UI METRO language. The content is 100 Level and can be used as part of a UI/UX class or for self-paced independent learning. The focus of the content is on METRO style design.

This material is suitable for any college student, including business, social sciences, liberal or fine arts, students who may have little or no computer programming background. There are no programming skills required and the early modules start from basics and build skills required for more advanced topics.

Because this content can be used as part of an Academic class it includes background information, describing problems that are being solved, and provides background information as well as terminology that relate to Human Computer Interaction (HCI).

The material contains an Instructor Guide and video files that accompany the exercise files.

Learning Objectives:

  • Module 1: The Metro Design Solution
    • Module 1 includes an overview of the Windows 8 platform, and how Metro style apps fit into the user experience. This module introduces components to designers that not only should they be aware of but that they should integrate into their own application designs.
  • Module 2: User Experience Design Fundamentals
    • In this module, your students learn the fundamentals of the user experience design process. This session explains and navigates your students a typical process that a UX designer might follow when creating any app. It is important that you frame this module as a precursor to creating Metro style aps. Metro style apps are rooted in good user experience and are the key to building apps that are successful.
  • Module 3: Applying User Experience Process to Metro Applications
    • In this module, your students take the principles covered in Module 2, “User Experience Design Fundamentals,” and apply them to building their own Metro style app. They can choose to build the app from one of the example concepts provided, or build from their own concept. Students will spend a considerable amount of time in the planning stages of creating a Metro style app, which might be different than any experiences that they have had in the past with building apps. The benefit to this planning is that development time should proceed more efficiently, due to their planning and preparation.
  • Module 4: Introduction To Metro Design Principle: Do More with Less
    • This module builds on the exercise in Module 3 where students created a “best-at” statement and then created scenarios that followed situations that the user might be in when using their application. In this module, students will start recognizing the relationship between the user experience process, discussed in Module 3, and how it relates to the features and organization of content in a Metro style app.
  • Module 5: Organizing Features To Fit The Scenario
    • In this module, students discover the relationship between the scenarios that they have created in Module 3, “Applying User Experience Process To Metro Applications,” and the related features they created in Module 4, “Introduction to Metro Design Principle: Do More With Less.” Students discover how to organize features as commands on the canvas, or in the App bar. The App bar is a unique method for presenting features in a Metro app that is only available in the Windows 8 platform.
  • Module 6: Introduction to Metro Design Principle: Pride in Craftsmanship
    • In this module students learn how the grid is used in Metro style design and how type is handled using the typographic grid and the type ramp. By the end of this module participants will feel confident in their understanding of the guidelines for using both the grid and type in Metro style applications.
  • Module 7: Being Fast and Fluid, and Authentically Digital
    • In this module students learn about two major components of Metro style apps: Animation and designing for touch interaction. These two components are part of a larger concept called “authentically digital.” Students discover how removing the traditional physical metaphors of application design allow them to create new and useful experiences for users.
  • Module 8: Winning as One: Using and Charms Contracts
    • In this module students discover how their users can take advantage of charms to enable unique integrated experiences between their app and the Windows 8 platform. Students also find out how charms are enabled by implementing contracts, agreements with other apps and the system UI. After this module, students will be able to create and implement scenarios where their app’s users can integrate with other apps or services on the platform. Students will also discover how they can design experiences for the results of those interactions.
  • Module 9: Introduction to Live Tiles and Notifications
    • In this module, students learn the role of live tiles in a Metro Style application and discover why it is important to invest in a tile on the Start menu. They also learn about the Metro templates that are available for use as well as the various features of the Live tile, such as peek and cycle. Additional topics covered include branding, badges, and notifications.
  • Module 10: Designing for Multiple Screens and Resolutions
    • In this module, students discover techniques used for designing an app that looks great and works great on all screens. They also discover how to take advantage of snap and portrait, new views that are unique to Windows 8 and the tablet form factor.
  • Module 11: App Submission Process
    • In this module, students learn about the Windows Store and how to submit apps for sale and distribution. Trial versions, monetization options, and the certification process are reviewed.

App Development for Modern UI

This curriculum contains 9 modules that provide an overview of Metro style app development using JavaScript and HTML/CSS. The scope of this curriculum covers the fundamental concepts of developing Metro style apps using JavaScript. This material contains an Instructor Guide and video files that accompany the exercise files.

This curriculum contains 9 modules that provide an overview of Metro style app development using JavaScript and HTML/CSS. Ideally, the lessons will be taught in order, since a common app is built; progressively starting with Module 4. However, you can use each lesson independent of the others if needed, as there are “starter” solutions for each module.

The scope of this curriculum covers the fundamental concepts of developing Metro style apps using JavaScript. Throughout the curriculum, you will find references to more advanced topics that are suitable for follow-up assignments.

This material contains an Instructor Guide and video files that accompany the exercise files.

Learning Objectives:

  • Module 1: Components of HTML5 and CSS3
    • In this module, students learn about core concepts of HTML5 and CSS3 as used in Metro apps, including layout models, styles, and animations. Specifically, they examine page layout using regions, grid layout, flexible box layout, multiple columns, text-wrap, and media queries. They also explore 2D & 3D transforms, transitions, animations, gradients, box and text shadow, border-radius, inline SVG and canvas.
  • Module 2: Creating App Layouts and Design Using HTML5, CSS, and JavaScript
    • In this module, students learn to create and modify page layouts of a Metro style app. Specifically they learn how to modify the rows and columns of a Grid Layout using Blend as well as to open a Metro style JavaScript project in Visual Studio.
  • Module 3: Advanced Adaptive Layout
    • In this module, students learn about the different views supported by Metro style apps, including Full Screen, Snapped, and Fill. They learn to use CSS styles to support these multiple views, and how to respond to View State changes in their apps.
  • Module 4: App Development Essentials
    • In this module, students learn the structure of a JavaScript based Windows Metro Style Project. They explore the tools used to create Metro Style Apps, look at the different templates available, and create a simple Grid app.
  • Module 5: Using JavaScript in Metro Apps
    • In this module, students learn how to add logic to their apps using JavaScript, how to create custom data entry forms, and how to use Metro-specific controls such as the Application Bar and Flyout control.
  • Module 6: Working with Files
    • In this module, students learn about the special security restrictions in Metro apps, how to configure the App Manifest to allow access to files, and how to use File Pickers to access user files. They also explore how they can use the StorageFolder class to save application specific data.
  • Module 7: Accessing and Displaying Data
    • In this module, students learn how to access data from web services, and display that data in a Metro Grid App project. They learn about the WinJS.xhr function, which makes it easy to call services in an asynchronous manner.
  • Module 8: Using Contracts and App Lifecycle
    • In this module, students learn how to implement contracts in our applications, such as the search contract. They will discover how to respond to lifecycle events so that users get the best experience when performing app switching.
  • Module 9: Selling Through The Windows Store
    • In this module, students learn about the Windows Store and how to submit apps for sale and distribution. Trial versions, monetization options, and the certification process are reviewed.

Here's the full list of the modules;

  1. App Development for Modern Devices: 1 of 3 (Networking)
  2. App Development for Modern Devices: 2 of 3 (NUI and Touch)
  3. App Development for Modern Devices: 3 of 3 (Augmented Reality)
  4. App Development for Modern UI: Module 1 of 9
  5. App Development for Modern UI: Module 2 of 9
  6. App Development for Modern UI: Module 3 of 9
  7. App Development for Modern UI: Module 4 of 9
  8. App Development for Modern UI: Module 5 of 9
  9. App Development for Modern UI: Module 6 of 9
  10. App Development for Modern UI: Module 7 of 9
  11. App Development for Modern UI: Module 8 of 9
  12. App Development for Modern UI: Module 9 of 9
  13. Designing for Modern UI: Module 1 of 11
  14. Designing for Modern UI: Module 10 of 11
  15. Designing for Modern UI: Module 2 of 11
  16. Designing for Modern UI: Module 3 of 11
  17. Designing for Modern UI: Module 4 of 11
  18. Designing for Modern UI: Module 5 of 11
  19. Designing for Modern UI: Module 6 of 11
  20. Designing for Modern UI: Module 7 of 11
  21. Designing for Modern UI: Module 8 of 11
  22. Designing for Modern UI: Module 9 of 11

Also available is one download for them all, Download all files associated with related objects (684.00 MB unzipped)

The thing I love about these is that they are great if you just want to learn it yourself, let alone using these as a teaching resource.

Wednesday, July 04, 2012

Making some cross browser Metro buttons with the CSS3 Microsoft-Metro Buttons (CMMB) library

Ginktage - Free Download – CSS3 Microsoft-Metro Buttons

"As per the developer, the CSS3 Microsoft-Metro Buttons is inspired by Tim O’Donnell’s CSS3 Google Buttons, Twitter Bootstrap, and Microsoft Icons from glyphicons.com and SyncFusion’s Metro Studio.

CSS3 Microsoft-Metro Buttons weighs about 21 KB and is a light weight and easy to use CSS or JavaScript library which uses CSS3 styles for rich button design.

The CSS3 Microsoft-Metro Buttons are cross-browser compatible from Internet Explorer 8 to the latest versions including Google Chrome and Mozilla Firefox.

..."

ace-subido / css3-microsoft-metro-buttons

"Inspired by Microsoft's Metro Design Language, I was in need of a metro-styled CSS3 button library. I wanted to make similar metro-looking buttons used by Microsoft (extensively used in their Microsoft Windows Azure website) So I've built a very small, simple and clean CSS3 library to deal with my problem.

My goal is to help developers out there shave off some wasted time building that metro-like stylesheet by providing them a library, a starter kit, a base on which they can build upon.

...

Demo and Documentation

http://ace-subido.github.com/css3-microsoft-metro-buttons has a live demo and the library documentation

..."

http://ace-subido.github.com/css3-microsoft-metro-buttons/

CSS3 Microsoft-Metro Buttons (CMMB)
Inspired by Microsoft's Metro Design Language, I was in need of a metro-styled CSS3 button library. I wanted to make similar metro-looking buttons used by Microsoft (extensively used in their Microsoft Windows Azure and Codeplex websites) So I've built a very small, simple and clean CSS3 library to deal with my problem.

Thus CSS3 Microsoft-Metro Buttons (CMMB) was born. Weighing in at a healthy 21KB (compressed, 4KB gzipped), it's a light-weight and easy-to-use CSS/JS library that uses CSS3 styles for rich button design. The library can also work with Twitter Bootstrap. The buttons are also cross-browser compatibile from IE8, to the latest version of Chrome, and Firefox so you don't have to spend countless minutes testing on different browsers.

License

You can use this library for any projects you have in mind, although it would be nice if you give credit to me and/or mention me in twitter.
This work is licensed under a Creative Commons Attribution 3.0 Unported License.

image

image

Nothing like a little CSS3 Metro buttons for the 4th of July... (okay, yeah, that doesn't make any sense... Sorry, it's been a long week... :)

Monday, June 04, 2012

It's an eBook day I guess... "Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)"

Microsoft Press - Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)

Hello! To help celebrate the Windows 8 Release Preview and the Visual Studio 2012 Release Candidate, we’re happy to release a preview edition of Programming Windows 8 Apps with HTML, CSS, and JavaScript, by Kraig Brockschmidt (who, some of you might remember, many years ago worked with us on a couple editions of Inside OLE).

...

This first preview contains the first four chapters of what we think will be an 18-chapter final ebook:

  • Chapter 1 The Life Story of a Metro Style App: Platform Characteristics of Windows 8
  • Chapter 2 Quickstart
  • Chapter 3 App Anatomy and Page Navigation
  • Chapter 4 Controls, Control Styling, and Basic Data Binding
  • Chapter 5 Collections and Collection Controls
  • Chapter 6 Layout
  • Chapter 7 Metro Style Commanding UI
  • Chapter 8 State, Settings, Files, and Documents
  • Chapter 9 Input and Sensors
  • Chapter 10 Media
  • Chapter 11 Purposeful Animations
  • Chapter 12 Contracts
  • Chapter 13 Tiles, Notifications, the Lock Screen, and Background Tasks
  • Chapter 14 Networking
  • Chapter 15 Devices and Printing
  • Chapter 16 Extensions
  • Chapter 17 Apps for Everyone: Localization, Accessibility, and the Windows Store
  • Chapter 18 Services

..."

imageimage

image

Who This Book Is For
This book is about writing Metro style apps for Windows 8 using HTML5, CSS3, and JavaScript. Our primary focus will be on applying these web technologies within the Windows 8 platform, where there are unique considerations, and not on exploring the details of those web technologies themselves. For the most part, then, I'm assuming that you're already at least somewhat conversant with these standards. We will cover some of the more salient areas like the CSS grid, which is central to app layout, but otherwise I trust that you're capable of finding appropriate references for everything else.

I'm also assuming that your interest in Windows 8 has at least two basic motivations. One, you probably want to come up to speed as quickly as you can, perhaps to carve out a foothold in the Windows Store sooner rather than later. Toward that end, I've front-loaded the early chapters with the most important aspects of app development along with "Quickstart" sections to give you immediate experience with the tools, the API, and core platform features. On the other hand, you probably also want to make the best app you can, one that performs really well and that takes advantage of the full extent of the platform. Toward this end, I've also endeavored to make this book comprehensive, helping you at least be aware of what's possible and where optimizations can be made.

Many insights have come from working directly with real-world developers on their real-world apps. As part of the Windows Ecosystem team, myself and my teammates have been on the front lines bringing those first apps to the Windows Store. This has involved writing bits of code for those apps and investigating bugs, along with conducting design, code, and performance reviews with members of the core Windows engineering teams. As such, one of my goals with this book is to make that deep understanding available to many more developers, including you!

This is just the start of this wave and given the change that is Windows 8, this is going to be a big one...

 

Related Past Post XRef:
[Limited time offer] Programming Windows 6th Edition Preview eBook is now available. Buy the CP edition today for $10 and get the RP/RTM book updates as they are released, free...
Code samples for "Programming Windows, 6th Edition" updated for Windows 8 Release Preview & Visual Studio 2012 RC (and you also get C++ versions too)

Windows 8 RP now available via MSDN Subscribers Download (and everyone else now)

Visual Studio 2012 RC (fka VS 11) now available