Arthur Wang's Blog
Follow me on
  • My General Blog
  • Software Development
    • Latest Articles on Software Development
    • Complete Resources for Developers >
      • Tutorial Information for Developers
      • .NET Developer Blogs
      • Developer Journals and Magazines
      • Developer's Tools
      • Database Development
      • ​Developer Conference and Events
  • Tech
    • Latest Articles on Technology Development
  • Health
  • Money
  • Services
    • Modern Website Design
    • Web Maintenance of Existing Websites Service
    • Corporate Business Consulting Service
  • About
  • Contact
  • Art
  • 中文部落格

Supercharge the Web Development Workflow with LESS or SASS (CSS Preprocessor)

2/26/2016

0 Comments

 
​The thought of adding another step to the already lengthy workflow on web development is discouraging.  You probably have been seen "LESS" or "SASS" somewhere for a long time but you have been tried to ignore it due to already lengthy workflow in your web development. If you are a web developer and has experience working with CSS, you probably have spend countless hours of copy and pasting section of CSS code from place to place and there are just so many repeating code lines and no one has thought of making it programmable and substituting repeating elements into variables, just like any other programming languages out there.  Actually, this was the reason inspired other developers to resolve this problem by creating new programmable CSS syntax languages called "SASS", Syntactically Awesome Stylesheets.  However, since browsers only understand regular CSS, a special type of preprocessor will be needed to convert this SASS files into CSS files before deployment.
How CSS Preprocessor works Flow chart
LESS is another type of language that was influenced by SASS, and both were written in Ruby.  Later, LESS was rewritten by using JavaScript instead.  The goals of these languages are to reduce duplication in the process of writing the CSS so no more repeating steps or DRY as in Don't repeat yourself. Another goal is to act more like CSS in their syntax. For LESS, it was redesigned to be as close to CSS as possible.  In one instance, you can include the less.js JavaScript file to convert the LESS code on-the-fly. Another way is to render the LESS code into regular CSS using the preprocessor. 
 
Besides less coding in using this method, your CSS code will be easier to be maintained and organized.  There are many frameworks built on top of CSS preprocessing languages that help you further in the front-end coding, such as making sprites, compliant CSS3, reusable patterns, managing vendor prefixes, and faster CSS writing.  The popular frameworks are Compass, Bourbon, Susy, Stylus, CSS-Crush, Myth, and Rework.  There are other less known CSS Preprocessors, such as Brunch, Switch CSS, DtCSS, Clay and CSS Preprocessor.  There is LibSass which does not required the Ruby.
Picture
If you prefer to use programs that acts as a compiler, instead of using the command line, there are several ones to choose from. The differences are that some accept both SASS and LESS, or just one, and some work on both Mac and Windows.  Here are the list of such programs.
 
1. CodeKit
2. Prepros App
3. Mixture
4. LiveReload
5. Koala
6. Compass.app
7. Scout
8. Crunch
9. WinLess
10. SimpLess
​11. Gulp
12. Ghostlab
 
Here are the list for old fashioned command line:
Grunt -  http://gruntjs.com/
 
In any ways you select from above, for Sass, you must install Ruby if you are on Windows since Mac already comes with Ruby preinstalled.  For LESS that is written in javascript, you will need NodeJS to run it.  
0 Comments

How to Implement Azure Redis Cache using .NET C# in Your Web Application and When to Upgrade Your Azure Service Plan?

2/23/2016

0 Comments

 
How to Implement Azure Redis Cache using .NET C# in Your Web Application
​Redis Cache is like bringing your server's memory to the cloud and you can bring more information out from your database and keep it there as long as you want. No pressure given from the garbage collector to release those memory in case of memory shortage problem. In addition, the more information you bring from the database means that less requests from the database as well.  Overall, Redis Cache gives you better performance in web server and database server at the same time.  Please note that since Redis is a remote type of data structure, it is indeed slower than storing the data in local memory.  So you still need to keep login details and site data that is going to be accessed in every page in the local memory.
 
In this article, I will demonstrate how to use Redis Cache service provided by Microsoft Azure.  First part is about how to setup the Redis Cache from Azure. In the second part, I'll be showing you on how to setup and access the cache by using Visual Studio with C#.  We will see how to determine whether or not you need to upgrade the Redis Cache in the last part.

How to setup the Redis Cache from Azure?

Go to http://portal.azure.com  and sign in to the Azure portal. Select the "+" sign on the top left. 
Then select "Data + Storage", a list of data storage related services will be shown on the right.
Picture
​Select "Redis Cache" from the list.​
Picture
A entry form comes out for you to enter your DNS name in the url: yourDNSname.redis.cache.windows.net.  Make sure the Location is selected to the same location where your web application located. 
For the pricing tier list options, the minimum is C0 Basic Plan with 250 MB cache and up to 256 connections.  You can select this to do the test. Or you can click on "View All" link to see all available plans.  Finally, click on the "Create" button.
Picture
Picture
Please wait a few minutes to have Azure create the Redis Cache for you. You will see something like this when it's done.
Picture
You can find your access keys in the above screen.  You need these keys to access your Redis Cache via your application.  I will now show you how to implement this Redis Cache into your web application.

How to setup and access the Azure Redis cache by using Visual Studio with C#?

You can download my source code in GitHub: https://github.com/Arthurwiz/DemoRedisCache
 
I'll be using Visual Studio program with C# to do the demo project.  I create a new project with ASP.NET Web Application template with .NET Framework 4.5, which I named it, DemoRedisCache.  In the project, I created 3 folders: Common, Managers, Services for a general multi-tier architecture. 
Picture
In this empty project, I highlight the project name from the Solution Explorer, and select "Manage NuGet Packages for Solution".  When the NuGet windows comes out, select the "Online" source from the left, and then type "StackExchange.Redis" in the top right search box.  In this example, I'll create a generic list called List<Fruit> as my data type to demonstrate the process of saving and retrieving the data from the Azure Redis Cache service.  Please note that the StackExchange.Redis client requires .NET Framework 4 or higher.  In our example, we use 4.5.
Picture
Picture
In the Web.config file, I have these keys.
 <appSettings>
  <add key="CacheEndpoint" value="yourDNSname.redis.cache.windows.net" />
  <add key="CachePassword" value="yourRedisCachePassword_here" />
  <add key="CacheSyncTimeout" value="3000" />
  <add key="CacheConnectTimeout" value="4000" />
  </appSettings>

-- Fruit.cs
    public class Fruit
    {
        public int FruitID { get; set; }
        public string FruitName { get; set; }
        public string Color { get; set; }
    }
 
-- RedisCache.cs
 
In the Services folder, I have one file.
-- CacheService.cs
 
In the Managers folder, I have one file.
-- CacheManager.cs
 
In the root, I have a start up webpage that I use it to demo the cache.
-- TestCache.Page.aspx

​It will look like this when app runs.
Picture

How do you know when do you need to upgrade your Redis Cache plan?

There are many reasons that you might need to consider to upgrade your plan, such as the limit on the number of connections you can make to your cache, the cache size and the speed of calling the cache, and finally the bandwidth.  By looking at the Network Bandwidth chart provided by the Azure portal, you can see the flat top when you reach the maximum cache read call KB/s limit. The example shown below is using the Basic C0 plan:
Picture
There are different limits to the plans.  Please see the table below:
Picture
I hope this article is helpful for you.
0 Comments

The New ASP.NET 5 is Back to 1.0 and Is it a rename or a reset? (ASP.NET Core 1.0)

2/21/2016

0 Comments

 
Picture
​The ASP.NET 5.0, was suppose to be the successor of ASP.NET 4.6, but all of sudden, the ASP.NET Core 1.0 will be the next version.  This does not sound right if it's done just for the rebranding purpose.  It looks very confusing at first and perhaps this might be just another marketing gimmick for reviving the ASP.NET line of products.  We should look closer to this announcement (January 2016).  
 
This sudden change of name must be resulted from a heated debate within the Microsoft since if you look at the milestone of releases from Beta to RC, you will notice the trend of inevitable change from just merely for enhancing the ASP.NET 4.6 to completely focusing on supporting the cross-platform development on the .NET Core, a complete new framework that was rewritten completely from scratch (no code copying from .NET Framework 4.6).  This tight turn was resulted from the release of Beta7 on 9/27/2015 and onward.  This decision might be painful and could cause confusion, undesired development issues, and potential negative impact to developers by changing from ASP.NET 5 to ASP.NET Core 1.0.  For example, it disrupts the continuity of using the versioning-based NuGet packages since the name has changed.  It may also affect all the libraries in the framework due to namespacing changes.  Inside the Microsoft, they have to do a major refactoring by renaming their internal namespacing before they can release the product and expect to be prefect and error-free.  It is a daunting task to be completed within a short period of time and at the last stage of releasing a major product. 

​When Rebranding Becomes A Necessity
In the recent years, the ecosystem of various mobile devices continues to strive in a very fast pace.  Microsoft not only needs to adapt the changes in the ecosystem, but also quickly to innovate its products in order to stay competitive.   Since November 2014, Microsoft introduces the .NET Core designed to be the foundation of all future .NET platforms with a unprecedented implementation of the open-source development model.  It's a new era where Microsoft has begun to join the communities and offers its modern .NET stack in full open source condition.  The .NET Core is a new .NET framework build from ground up and it is built with the independent of platform in mind and need to be open source.  In addition, due to complicated issues of license and patent in the existing .NET framework since first version, this brand new framework is unable to just borrow the existing code from old framework to the new framework.  It has to have a complete new codebase if this needs to implement as a full open source framework!  Furthermore, since the purpose is to be the cross-platform framework, it must also revamp the process of compilation and execution.  In the old framework, the source code is compiled into Compiled CIL (Common Intermediate Language) code and stored in the CLI (Common Language Infrastructure) assemblies in the format of DLL and EXE files.  Upon execution, the platform-specific CLR (Common Language Runtime) compiles the CIL to machine-readable codes that can then be executed.  In the new framework, .NET Core, instead of using the CLR, it uses CoreCLR to do the execution for the cross-platform .NET programs due to its modular design to work with all platforms including, Linux, Mac OS X, and Universal Windows Platform.  By using NuGet, you can download the CoreCLR runtime along with its CoreFX libraries and then package and deploy them with your application.  In addition, you can optimize the deployment by including only the CoreFx libraries that you need.  This is a great leap since your runtime environment can be at minimal file size and it seems promising for the future tiny devices with unknown file size limit.
 
Consequently, the renaming of ASP.NET 5.0 to ASP.NET Core 1.0 is a must and reasonable.  Besides it is completely new and deserves to have its own timeline, it has a different architectural design which is no longer based on System.Web.dll, the mother of traditional ASP.NET, and it is designed and optimized for the cross-platform and cloud-ready environments.  You can even deploy your ASP.NET web app directly to a Docker platform, a containers-as-a-Service architecture.  The change should be good on all levels.  Now it is just like the old time when ASP.NET came aboard to replace the classic ASP in order to build web applications and not just web sites.  ASP.NET Core is slowly replacing ASP.NET in order to build applications that can run on all platforms, and not just on Microsoft platforms.  Nevertheless, it may be a short-term pain for the confusion and extra works for the developers, but from a long-term perspective, it should be good.
Roadmap of ASP.NET and ASP.NET Core
Will there be ASP.NET 4.7? 
For the future, it is appropriate to ask "Will there be ASP.NET 4.7?" since ASP.NET 4.6 is a mature framework while ASP.NET Core 1.0 does not contain SignalR or Web Pages (a replacement of Web Form) and has only a subset of full framework.  It would be interesting to see if it becomes a dilemma at all. On the one hand, you have ASP.NET Core 1.0 wants to replace the traditional ASP.NET track, but its framework is a strip-down version and lack of full featured like the ASP.NET 4.6.  On the other hand, you don't want to continue to maintain the traditional ASP.NET track since the cross-platform is the future way of application development.  We look forward to see if the ASP.NET 4.6 is kept alive and continues on its traditional path or to be retired soon.
 
The Unpredictable Microsoft Number
This is not the first time Microsoft has hard time to decide its version number.  For example, all of sudden, Windows 10 was released without going from Windows 9.  How about ASP.NET vNext?  Have you heard it before? I heard and was informed by the Microsoft team during a dev conference.  It was two years ago, about May of 2014, the vNext was suppose to be the next generation of .NET with a design mindset of unifying existing Microsoft technologies like ASP.NET MVC and Web API and hopefully be cross platform.  Anyways, Microsoft quietly dropped "vNext" and renamed to ASP.NET 5.  Well, I guess when everyone cannot agree on things, it's time to hit the reset button.  I believed that ASP.NET Core 1.0 will be permanent and stay with us for a long time.
 
Here are the details of the changes:
  • ASP.NET 5 is now ASP.NET Core 1.0
  • .NET Core 5 is now .NET Core 1.0
  • Entity Framework 7 is now Entity Framework Core 1.0 
0 Comments

Introduction to Programming: Understand Programming objects and Programming Languages

2/18/2016

0 Comments

 
Programming SimplifiedProgramming Simplified
This is our second lesson (How to Program) from the first series courses on How to become a web developer from scratch. 
Please watch our first lesson, Learn from Arthur's Burger Drive Thru, if you have not watched yet.
 
In the first lesson, we learned a great deals of identifying what are the programming objects.  In this lesson, we are going to show you how these objects are created, converted, displayed, and transferred and then how you can do programming by yourself.  But before we dive right into this topic, I want to describe to you on how we structure this lesson. We basically divide this lesson into 2 parts.  Since as you may have heard, there are just so many different programming languages and scripts out there.  It could be very confusing especially for people who are new to programming as it has become very diverse and continues to evolve in a really fast pace especially in the past 5 years.  But the good news about it is that you don't need to learn the old and inefficient ways of developing web applications and you can start learning the easier stuff since programming is evolving in a direction of becoming simplistic but powerful at the same time. 
 
On one hand, the hard part about being a web developer is that you cannot just learn one programming language and expect to do everything you need to do.  On the other hand, you don't need to learn every single language out there but you just need to learn a handful of languages to do the job.  It may be overwhelming at first, but I'm confident that after today's lesson you will have a big picture of what you need to learn. 
In a similar fashion, you can pick and choose certain programming languages and scripts from company like Microsoft or from programming communities to develop your web applications as long as they are compatible with each other!
 
So in the first part of this lesson, we will find out where we can see these programming objects from a browser, and how these objects are created and how the same object are manifest or represented by different programming languages with some sample codes. In the last part of the lesson, we will focus on one popular object- oriented programming language.  Once you master one language, it will be easier for you to master the other language since the concept is similar and only the grammatical syntax may be different.



​Part 2: Find Programming objects from web browser (See Below)
This video demonstrates how the web browser uses static information received from web server to make web page dynamic with its programming component hiding insides the html code. 

Part 3: How web browser works in terms of programming objects?
​This video show you how web browser works and manages to display various programming objects send from web server to the users.  It describes HTML, CSS, and JavaScript in terms of how they present the same information in their own ways and how they are able to manipulate information.

Part 4: Inline and External files style sheet and JavaScript
This video demonstrates two ways of writing the style sheet and JavaScript in web pages and discuss the advantages and disadvantages.  It shows the solution of browser's caching problem.

Part 5: Explain JSON and XML & Group Popular Programming Languages
This video describes data transfer objects and attempts to categorize all popular programming languages in terms of front end and back end and client-side/server-side and discuss about node.js as well.
I hope you already see some patterns about programming codes and you feel more comfortable of learning how to program next.
0 Comments

Demystify Programming by Learning From Arthur's Burger Drive Thru

2/7/2016

0 Comments

 
If you have not watched the introduction video to the courses, please watch How to Become a Web Developer from Scratch? first.

​In this very first lesson, we'll give you the power of seeing the world differently just like a programmer. We will learn how to define input and out and identify various objects in the object oriented programming language. 

​Learn from Arthur's Burger Drive Thru Part 1: Demystify Programming
In the second part of the lesson, we will translate what we see in the real world into a written format.
We now know how simple and easy the programming code can be written.  We will also define function in programming language and understand are functions, input and output, and how the equal sign is used in the programming language.
Picture
In Part 3 of the lesson, Use Case & Data Flow,  we learn how to document what we see in the real world.  Using Use Case Model diagram and data flow chart to document the interactions we see.  
In Part 4 of the lesson, we learn the concept of Systems.  We learn how to define the concept of system, framework, library of objects, and enterprise system in the programming world.  
In Part 5 of the lesson, we take a closer look at the object itself.   We learn how to identify an object's property and its attributes and actions.
In the last part of the lesson, we learn the need for storing data. We learn to understand the roles of database and tables in a database in programming.  Learn how programming objects are stored and retrieved from the database.
0 Comments
<<Previous

    Arthur Wang

    @ArthurWangLA
    MCSD App Builder
    MCSD Web Applications
    ​Member of Windows Insider Program & HoloLens Developer Community & Dev Center Insider Program

    Over 17+ years of  experience in web-based software development & management.  Specialized in Microsoft technology with c# language and its architecture design.  MCSD, MCSE, Microsoft Specialist, MCP + Internet, and B.S. from UCLA

    Archives

    August 2018
    March 2018
    January 2017
    December 2016
    May 2016
    April 2016
    March 2016
    February 2016
    April 2014

    Categories

    All
    API
    Arduino
    ASP.NET
    Cognitive
    CSS
    Database
    Deep Learning
    DevOps
    Electronics
    Flexbox
    HTML5
    IoT
    Katana
    Machine Learning
    Management
    .NET
    .NET Core
    Neural Network
    OWIN
    Programming
    Programming Tools
    Recognition
    Security
    SQL Server
    UWP
    Visual Studio
    Web API
    Web Developer

    RSS Feed

    Latest Articles

© 2014-2020 ArthurWiz.com All Rights reserved. | Home | About |
Protected by Copyscape