Monday, May 23, 2016

The Best Web Development Frameworks and Resources

  12:38:00 PM    

Inspiration/Ideas

  • CodePen: Show off your latest creation and get feedback. Build a test case for that pesky bug. Find example design patterns and inspiration for your projects.
  • Dribble: A community of designers sharing screenshots of their work, process, and projects.

Text/Code Editors

  • Visual Studio 2015.
  • Brackets: A lightweight and powerful modern text editor; written in JavaScript, HTML and CSS.
  • Notepad++: A free source code editor which supports several programming languages running under the MS Windows environment.
  • Visual Studio Code: Code editing redefined and optimized for building and debugging modern web and cloud applications.

Languages

  • C#: Programming language for server-side development.
  • Javascript: Programming language of HTML and the web.
  • HTML5: Markup language, the latest version of HTML and XHTML.
  • CSS3: Latest version of cascading style sheets used in front-end development of sites and applications.
  • NodeJS: Event-driven I/O server-side JavaScript environment based on V8.

Front-End Framework

  • Bootstrap: HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Web-Application Frameworks

  • ASP.net: Free, fully supported Web application framework that helps you create standards-based Web solutions (Microsoft).
  • AngularJS: Lets you extend HTML vocabulary for your web application. AngularJS is a framework, even though it’s much more lightweight and sometime referred to as a library.

Task Runners/Package Manager

Tasks runners automates workflows. For example the minification of JavaScript. Package managers keep track of all the packages you use and make sure they are up to date and the specific version that you need.

  • Nuget: Microsofts package manager
  • Gulp: Keeps things simple and makes complex tasks manageable, while automating and enhancing your workflow.
  • npm: Pack manager for JavaScript.
  • Bower: A web package manager. Manage components that contain HTML, CSS, JavaScript, fonts or even image files.

CSS Preprocessors

A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.
  • Sass: A very mature, stable, and powerful professional grade CSS extension.

Code Sharing / Experimenting


  • JS Bin:  Tool for experimenting with web languages. In particular HTML, CSS and JavaScript, Markdown, Jade and Sass.
  • JSfiddle: Custom environment to test your JavaScript, HTML, and CSS code right inside your browser.
  • codeshare: Share code in real-time with other developers.

Website Speed Test Tools


  • Website Speed Test:  A page speed test developed by KeyCDN that includes a waterfall breakdown and the website preview.
  • Google PageSpeed Insights: PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.
  • Google Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome.
  • WebPageTest: Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
  • Pingdom: Test the load time of that page, analyze it and find bottlenecks.
  • GTmetrix: Gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

Friday, May 6, 2016

Using jQuery DataTables in ASP.NET MVC6 for pagination, sorting and filtering

  3:54:00 PM    

If you use tables in your ASP.NET MVC project you most likely would like to do searching, sorting and filtering of these tables. The jQuery plugin dataTables will give you excactly those features with the least amount of effort. 

 There is a lot of good documentation on the datatables website. I will provide you with a little example on how you can implement this in an ASP.NET Core 1.0 MVC 6 application.  

 I have an Index.cshtml that generates the table I would like to enhance using datatables. 

Step 1: Reference the libraries

First of all you need to add jQuery and DataTables to your file. I am adding these to the _Layout.cshtml file, but they can also be included som place else as long as the libraries becomes available.

Step 2: Make sure your table has an ID

For datatables to be able to find your table in the DOM you need to give it an ID. 
This ID will be used when you do tha basic datatables initialization (below).

 <table id="example" .....>

Step 3: Initialize DataTable with a few lines of Javascript code

<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>



Wednesday, May 4, 2016

Top 10 JavaScripts Things To Know

  9:28:00 AM    

Top 8 Javascripts things to know 

1. Learn the basics really good (basic theory).
2. Learn how to test JavaScript (i.e tools like plunker and editors like brackets).
3. Learn about F12 tools in Firefox or Chrome or similar.
4. Learn JSON (and tools like JSONLint)
5. Learn AJAX is?
6. Learn where to find answers to your questions (StackOverflow).
7. Learn jQuery (this is a must).
8. Learn React (by Facebook).

Some favorite JavaScript Libraries 

  • jQuery: A fast, small, and feature-rich JavaScript library.
  • BackBoneJS: Give your JS app some backbone with models, views, collections, & events.
  • D3.js: A JavaScript library for manipulating documents based on data.
  • React: Facebook’s Javascript library developed for building user interfaces.
  • jQuery UI: A curated set of user interface interactions, effects, widgets, and themes.
  • jQuery Mobile: HTML5-based user interface system designed to make responsive web sites.
  • Underscore.js: Functional programming helpers without extending any built-in objects.
  • Moment.js: Parse, validate, manipulate, and display dates in JavaScript.
  • Lodash: A modern utility library delivering modularity, performance, & extras.
Subscribe to: Posts (Atom)