Bài toán hóc búa của Google thu hút 3 triệu lượt xem

Bài toán điền dấu thú vị do Google giới thiệu thu hút gần 3 triệu lượt xem cùng hàng trăm người đưa ra câu trả lời.
Trong buổi ra mắt Nexus 7 tại Nhật Bản, Google thu hút sự chú ý của cộng đồng mạng nhờ bài toán điền dấu thú vị. Nó lan truyền nhanh chóng trên mạng xã hội với gần 3 triệu lượt xem trên Youtube.
Đề bài như sau:
Hãy sử dụng các số 1, 1, 5, 8 và các phép tính cộng, trừ, nhân, chia (+, -, x, : ) và dấu ngoặc đơn để tạo thành phép toán có kết quả bằng 10.
Bạn phải sử dụng tất cả chữ số trên, mỗi số một lần. Một phép tính có thể được lặp lại nhiều lần, ví dụ 1 + 1 + 5 + 8 và không nhất thiết phải dùng tất cả phép tính, dấu.
Lưu ý, bạn chỉ được dùng 4 phép cộng, trừ, nhân chia. Phép mũ, ví dụ, 8 + 1 + 1^5 là không hợp lệ.
Với trường hợp này, bạn giải quyết như thế nào?
Nguồn: zing.vn

Bài 11 - Khởi chạy cho đồng hồ bằng HTML Canvas (Canvas Clock - Phần 5 cuối)

Phần 5 - Khởi chạy đồng hồ

Để khởi chạy cho đồng hồ, gọi hàm drawClock trong các khoảng thời gian:

JavaScript:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//drawClock();setInterval(drawClock, 1000);
Xem demo »

Giải thích code trên:

Điều mà bạn phải làm bây giờ là start đồng hồ để cho nó chạy, gọi hàm drawClock ở các khoảng thời gian.

Thay thế:
drawClock();
Với:
setInterval(drawClock, 1000);
NoteKhoảng thời gian đơn vị là milliseconds. hàm drawClock sẽ được gọi cho mỗi giây, tức 1000 milliseconds.

Trương Đức Tài.

Bài 10 - Vẽ kim trên mặt đồng hồ bằng HTML Canvas (Canvas Clock - Phần 4)

Phần 4 - Vẽ kim đồng hồ

...Tiếp theo, Bài này mình sẽ hướng dẫn cách làm thế nào để raw được những chiếc kim chỉ giờ, phút, giây trên mặt đồng hồ.
Bước đầu tiên, tạo một hàm JavaScript như code bên dưới:

JavaScript:

function drawClock() {
    drawFace(ctx, radius);
    drawNumbers(ctx, radius);
    drawTime(ctx, radius);}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour    hour=hour%12;
    hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
Xem demo »

Giải thích code trên:

Sử dụng hàm  Date để lấy giờ, phút, giây của hệ thống:
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
Tính toán góc của kim giờ, và vẽ nó với độ dài bằng 50% của bán kính, và chiều rộng bằng 7% của bán kính đồng hồ:
hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
Sử dụng cùng kỹ thuật trên cho kim phút và kim giây.
Trong hàm drawHand() chứa các hàm và và thuộc tính chúng ta đã được học, do đó mình sẽ không cần phải giải thích thêm. Nó đơn giản chỉ vẽ một đường thẳng với chiều dài và chiều rộng đã cho.

Trương Đức Tài.

Tạo project MVC 6 đầu tiên P1

Trong bài hướng dẫn này sử dụng Visual Studio 2015.


Cài đặt Visual Studio and ASP.NET

Hưỡng dẫn cài đặt tại đây ASP.NET 5 and Visual Studio 2015.

Tạo web đầu tiên

Từ Visual Studio Start page, chọn New Project.
../../_images/new_project.png
Chọn File > New > Project.
../../_images/alt_new_project.png
Tạo một New Project
  • chọn như hình dưới Web > ASP.NET Web Application > OK
../../_images/new_project2.png

../../_images/p3.png
Một web site đơn giản đã được tạo ra. Bạn bấm F5 để chạy web hoặc Ctl-F5 để chạy chế độ không debug
../../_images/12.png
  • Visual Studio sẽ khởi động IIS Express để chạu web của bạn.
  • Chạy ở chế độ không debug Ctrl+F5 cho phép bạn sửa code và lưu file khi trương trình đang chạy
../../_images/debug_menu.png
  • Bạn có thể chạy chế độ debug bằng cách clck nút IIS Express
../../_images/iis_express.png
Và ta đã có giao diện web thân thiện với Mobile
../../_images/2.png
Cảm ơn bạn đã theo dõi. Bài sau tôi sẽ đi sâu hơn vào code.

Bài 9 - Tạo số trên mặt đồng hồ bằng HTML Canvas (Canvas Clock - Phần 3)

Phần 3 - Vẽ số trên mặt đồng hồ

...tiếp bài trước chúng đã được học cách để tạo ra mặt đồng hồ.

Trong bài này mình sẽ tiếp tục hướng dẫn cách làm thế nào để tạo những con số hiển thị trên mặt đồng hồ. Đầu tiền mình sẽ tạo một hàm JavaScript để vẽ những con số cho đồng hồ như sau:


JavaScript:

function drawClock() {
    drawFace(ctx, radius);
    drawNumbers(ctx, radius);
}

function drawNumbers(ctx, radius) {
    var ang;
    var num;
    ctx.font = radius*0.15 + "px arial";
    ctx.textBaseline="middle";
    ctx.textAlign="center";
    for(num= 1; num < 13; num++){
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius*0.85);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius*0.85);
        ctx.rotate(-ang);
    }
}
Xem demo »

Giải thích code trên

Thiết lập kích thước font (của đối tượng cần vẽ) bằng 15% của bán kính đồng hồ:
ctx.font = radius*0.15 + "px arial";
Thiết lập căn chỉnh text tới giữa của vị trí cần hiển thị:
ctx.textBaseline="middle";
ctx.textAlign="center";
Tính toán vị trí cần hiển thị (12 số) tới 85% của bán kính đồng hồ, xoay (PI/6) cho mỗi số:
for(num= 1; num < 13; num++) {
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang); 
}

Trương Đức Tài.

Soạn bài viết cho Blog cực nhanh với văn bản và ảnh chụp upload trực tiếp



Ưu điểm:
- Soạn bài cực nhanh.
- Ảnh được chụp và lưu trực tiếp lên server của mình (ở đây là tài khoản google drive của mình).
- Ảnh được lưu mãi mãi trong google drive.
- Có thể dùng một file google doc để soạn nội dung cho mọi bài blog, cứ mỗi lần soạn cho bài khác thì lại xóa nội dung cũ đi.
- Áp dụng post bài cho mọi nền tảng Blog.

Những thứ cần chuẩn bị:
- Một bài viết trên blogger hoặc nền tảng khác, cái này chắc chắn rồi.
- Phần mềm chụp ảnh/quay phim màn hình Snagit.
- Tạo một file google doc online.




Ngoài ra bạn có thể sử dụng công cụ Open Live Writer chuyên để soạn thảo cho Blog tại đây. Nhưng kinh nghiệm cho thấy nó tương đối chậm khi publish bài viết với 1 vài ảnh, và thực sự nó không thể tốt bằng cách ở trên.

Trương Đức Tài.

Bài 8 - Tạo mặt đồng hồ bằng HTML Canvas (Canvas Clock - Phần 2)

Phần 2 - Tạo mặt đồng hồ

Đồng hồ đương nhiên cần phải vẽ cho nó một cái mặt hấp dẫn phải không? Trong bài này mình sẽ tiếp tục hướng dẫn cách làm thế nào để xây dựng mặt đồng hồ bằng HTML Canvas. Hàm JavaScript dưới đây sẽ làm việc đó, chúng ta cùng bắt đầu nhé:

JavaScript:

function drawClock() {
    drawFace(ctx, radius);
}

function drawFace(ctx, radius) {
    var grad;

    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2*Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
    grad.addColorStop(0, '#333');
    grad.addColorStop(0.5, 'white');
    grad.addColorStop(1, '#333');
    ctx.strokeStyle = grad;
    ctx.lineWidth = radius*0.1;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
    ctx.fillStyle = '#333';
    ctx.fill();
}
Xem demo »

Giải thích code trên

Tạo hàm drawFace() để vẽ mặt đồng hồ:
function drawClock() {
    drawFace(ctx, radius);
}

function drawFace(ctx, radius) {
}
Vẽ một vòng tròn màu trắng:
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
Tạo một viền vòng tròn (vòng tròn có biên dày trong khoảng 95% và 105% so với bán kính thực của đồng hồ), để làm được điều này chúng ta làm như sau (các bạn có thể tham khảo thêm ở bài trước chúng ta đã được học):
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
Tạo 3 điểm dừng màu, tương ứng với trong, giữa và mép ngoài của vòng tròn:
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
NoteMục đích tạo 3 điểm dừng màu là tạo ra một hiệu ứng 3D.
Xác định độ biến thiên cho dải màu được thiết lập như thuộc tính dưới đây của đối tượng cần vẽ:
ctx.strokeStyle = grad;
Định nghĩa chiều rộng của đường viền của đối tượng vẽ (kích thước 10% của bán kính):
ctx.lineWidth = radius * 0.1;
Vẽ hình tròn:
ctx.stroke();
Vẽ phần tâm của đồng hồ:
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();

Trương Đức Tài.

[MVC 6 vNext] - Top 10 thay đổi lớn của ASP.NET 5 và MVC 6

1. ASP.NET on OSX and Linux

Linux and OSX
ASP.NET 5 ứng dụng có thể chạy trên Windows , OSX và Linux. ASP.NET 5 to run on Windows, OSX, and Linux changes everything. Giờ đây các lập trình viên có thể sử dụng trình soạn thảo riền của mình như Sublime Text và WebStorm  khi viết ứng dụng  ASP.NET apps mà không cần  Visual Studio .

2. Chính thức chia tay Web Forms
ASP.NET Unleashed
Với những lập trình viên kỳ cựu vẫn còn tiếc nuối hàng trăm thậm trí hàng ngàn giờ làm trang web của mình mà vẫn chưa muốn nâng lên nền tảng mới thì đây chính là thời điểm bạn nên quết định
Bạn có thể xây dựng Web Forms trên Visual Studio 2015 với nền .NET 4.6 . Tuy nhiên Web Forms không thể có được sự uyển chuyển và rất nhiều thứ tuyệt vời của ASP.NET 5 .

3. Không còn Visual Basic
Visual Basic
Đây cũng là thời điểm nói lời tạm biệt với Visual Basic. ASP.NET 5 chỉ hỗ trợ duy nhất C# và Visual Basic đã bị bỏ lại phía sau. Thật sự là tin không vui cho các lập trình viên sử dụng VB

4. Tag Helpers Tag Helper là một trong những điểm nổi bật, nó có tác động mạnh đến cách mà bạn tạo ra những cái view trong một ứng dụng ASP.NET MVC. Tag Helper là một sự lựa chọn tốt hơn so với việc sử dụng MVC helper truyền thống trước đây.

Xem xét view MVC dưới đây nó chứa đựng một cái form cho việc tạo một sản phẩm mới:
  1. @model MyProject.Models.Product
  2. @using (Html.BeginForm())
  3. {
  4.   <div>
  5.       @Html.LabelFor(m => p.Name, "Name:")
  6.       @Html.TextBoxFor(m => p.Name)
  7.   </div>
  8.   <input type="submit" value="Create" />
  9. }
Trong view ở bên trên, Html.BeginForm(), Html.LabelFor() và Html.TextBoxFor() helper đã được dùng để tạo ra một cái form. Nhưng những thẻ helper này sẽ không thân thiện với những nhà thiết kế HTML.
Còn đây cũng là một form tương tự nhưng lại được tạo ra bằng việc sử dụng Tag Helpers:
  1. @model MyProject.Models.Product
  2. @addtaghelper "Microsoft.AspNet.Mvc.TagHelpers"
  3. <form asp-controller="Products" asp-action="Create" method="post">
  4.   <div>
  5.       <label asp-for="Name">Name:</label>
  6.       <input asp-for="Name" />
  7.   </div>
  8.   <input type="submit" value="Save" />
  9. </form>
Chú ý rằng ở phiên bản mới này form chỉ chứa đựng duy nhât (những gì giống như) là những phần tử HTML. Cho ví dụ, form này chứa đựng một phần tử INPUT thay thế cho Html.TextBoxFor(). Một nhà thiết kế front-end sẽ làm việc tốt hơn với những trang như thế này.
Điều đặc biệt duy nhất về cái view này đó là thuộc tính asp-for. Những thuộc tính này được sử dụng dành cho những phần tử có chức năng từ phía server-side của ASP.NET MVC.
Bạn có thể xem qua ví dụ của Damien Edwards về việc sử dụng Tag Helpers ở link bên dưới:
5. View Components
Tạm biệt subcontrollers và xin chào View Components!
Trong những phiên bản trước đây của ASP.NET MVC, bạn đã sử dụng Html.Action() để gọi đến một cái subcontroller. Ví dụ bạn tưởng tượng bạn muốn hiển thị một banner quảng cáo trên nhiều view. Trong trường hợp đó, bạn sẽ tạo subcontroller cái mà chứa những xử lý logic cho việc trả về một banner quảng cáo cụ thể và gọi đến subcontroller bằng cách thông qua Html.Action() từ một cái view nào đó.
Subcontroller – Html.Action() không có trong bản beta hiện tại của MVC 6. Thay vào đó MVC 6 sẽ thay đổi bằng công nghệ khác được gọi là View Components.
Ví dụ bên dưới cho bạn thấy việc tạo một View Component để hiển thị một hoặc hai banner quảng cáo phụ thuộc vào thời gian trong ngày.
  1. using Microsoft.AspNet.Mvc;
  2. using System;
  3. namespace Partials.Components
  4. {
  5.   public class BannerAd : ViewComponent
  6.   {
  7.       public IViewComponentResult Invoke()
  8.       {
  9.           var adText = "Buy more coffee!";
  10.           if (DateTime.Now.Hour > 18)
  11.           {
  12.               adText = "Buy more warm milk!";
  13.           }
  14.           return View("_Advertisement", adText);
  15.       }
  16.   }
  17. }
Nếu thời gian mà trước 5:00 chiều thì View Compenent trả về một partial tên là _Advertisement với nội dung quảng cáo là “Buy more coffee!”. Nếu mà sau 5:00 chiều thì nội dung quảng cáo sẽ thay đổi là “Buy more warm milk!”.
Partial _Advertisement sẽ trong như sau:
  1. @model string
  2. <div style="border:2px solid green;padding:15px">
  3.   @Model
  4. </div>
Cuối cùng bạn có thể sử dụng BannerAd View Component trong view MVC như sau:
  1. @Component.Invoke("BannerAd")
View Component tương như như là subcontroller. Tuy nhiên, subcontroller luôn có gì đó hơi kỳ quặc. Nhìn thì có vẻ chúng tương tự với action của Controller nhưng thực tế nó không phải như vậy. Gọi là View Component dường như có vẻ chính xác hơn và tự nhiên hơn.

6. Hỗ trợ GruntJS, NPM và Bower
Phát triển font-end sẽ nhận được nhiều yêu mến trong ASP.NET 5 thông qua việc hỗ trợ cho GruntJS. (và cuối cùng là Glup).
GruntJS là một task runner nó cho phép bạn xây dựng ngồn front-end như là JavaScript và file CSS. Ví dụ, bạn có thể sử dụng GruntJS để kết nối vào nhau thành một và làm nhỏ đi file JavaScript của bạn, bất kỳ khi nào mà bạn thực hiện việc build trong Visual Studio.
Có hàng ngàn plugin của GruntJS cho phép bạn làm nhiều điều tuyệt vời bằng những task khác nhau (hiện tại có 4,334 plugin được liệt kê ra trong repository của GruntJS plugin):
Ví dụ, có nhiều plugin cho việc chạy unit test của JavaScript, kiểm tra chất lượng mã JavaScript của bạn (jshint), biên dịch những file LESS và Sass thành CSS, biên dịch TypeScript thành JavaScript, và giảm bớt hình ảnh.
Để hỗ trợ GruntJS, Microsoft cần hỗ trợ hai bộ quản lý package mới (ngoài Nuget). Đầu tiền, plugin GruntJS được phân phối như là NPM packages, Microsoft đã thêm những hỗ trợ cho NPM package.
Thứ hai, bởi vì có nhiều nguồn client-side như là Twitter Bootstrap, JQuery, Polymer và AngularJS đã được phân phối thông qua Bower nên Microsoft đã thêm vào việc hỗ trợ cho Bower.
Điều này có nghĩa là bạn có thể chạy GruntJS sử dụng plugin từ NPM và client resource từ Bower.

7. Hợp nhất MVC và Web API Controllers
Trong những phiên bản trước của ASP.NET MVC, controller của MVC khác biệt so với controller của Web API. Một controller của MVC được sử dụng bởi lớp cơ sở System.Web.MVC.Controller và một controller của Web API được sử dụng bởi lớp cơ sở System.Web.Http.ApiController.
Trong MVC 6, chỉ có duy nhất một và chỉ một lớp controller là lớp cơ sở cho cả hai MVC và Web API controller. Lớp duy nhất đó là Microsoft.AspNet.Mvc.Controller.
Controller trong MVC 6 trả về một IActionResult. Khi sử dụng như một controller của MVC, IActionResult có thể là một view. Khi sử dụng như là một controller của Web API, IActionResult có thể là dữ liệu (như là một danh sách các sản phẩm). Controller giống nhau có thể có những action trả về cả hai view và data.
Trong MVC 6, cả hai controller của MVC và controller của Web API sử dụng cùng một route giống nhau. Bạn có thể sử dụng cả hai, đó là convention-based route hoặc thuộc tính route và chúng ứng dụng đến tất cả những controller trong project.

8. AngularJS
AngularJS là một trong những framework client-side phổ biến nhất cho việc xây dựng Single Page Applications (SPAs). Visual Studio 2015 đã bao gồm những template phục vụ cho việc tạo module, controller, directive và factory của AngularJS.
null
Việc hỗ trợ GruntJS trong ASP.NET 5 làm cho ASP.NET là một framework server-side xuất sắc cho việc xây dựng những ứng dụng client-side bằng AngularJS. Bạn có thể kết hợp và giảm bớt những cái file của AngularJS một cách tự động bất kỳ khi nào bạn thực hiện việc build. Bạn có thể tương tác với một controller của MVC 6 từ một $resource của AngularJS sử dụng REST.

9. ASP.NET Dependency Injection Framework
ASP.NET 5 đã được xây dựng để hỗ trợ cho việc Dependency Injection và Service Locator pattern. Điều này có nghĩa là bạn không còn cần dựa vào những framework bên thứ ba như là Ninject hoặc Autofac.
Tưởng tượng, ở ví dụ này bạn tạo một lớp interface IRepository và một lớp EFRepository sẽ implement từ lớp interface. Trong trường hợp này, bạn có thể liên kết lớp EFRepository đến lớp IRepository trong phương thức ConfigureService() được viết trong lớp Startup.cs như thế này:
  1. services.AddTransient<IRepository, EFRepository>();
Sau đó bạn liên kết EFRepository và IRepository khi ấy bạn có thể sử dụng hàm khởi tạo denpendency injection trong những controller MVC của bạn (và bất kỳ lớp nào khác) sử dụng đoạn mã sau:
  1. public class ProductsController : Controller
  2. {
  3.   private IRepository _repo;
  4.   public ProductsController(IRepository repo)
  5.   {
  6.       _repo = repo;
  7.   }
  8. }
Trong đoạn mã trên, interface IRepository đã truyền đến hàm khởi tạo của ProductsController. Việc xây dựng ASP.NET Dependency Injection framework để mà truyền EFRepository đến ProductsController bởi vì IRepository đã liên kết đến EFRepository.
Bạn cũng có thể sử dụng Service Locator pattern. Bất kỳ nơi nào bạn có thể truy cập HttpContext, bạn có thể truy cập đến bất kỳ servicer nào đã được đăng ký. Ví dụ, bạn có thể nhận lại EFRepository bằng cách sử dụng đoạn mã bên dưới vào bên trong một MVC controller action:
  1. var repo = this.Context.ApplicationServices.GetRequiredService<IRepository>();


10. xUnit.net
Tạm biệt framework Visual Studio Unit Testing và xin chào xUnit.net!
Trong những phiên bản trước của ASP.NET MVC, mặc định framework về testing là Visual Studio Unit Testing Framework (đôi khi nó được gọi là mstest). Framework này sử dụng những thuộc tính là [TestClass] và [TestMethod] để mô tả một unit test:
  1. [TestClass]
  2. public class CalculatorTests {
  3.   [TestMethod]
  4.   public void TestAddNumbers() {
  5.       // Arrange
  6.       var calc = new Calculator();
  7.       // Act
  8.       var result = calc.AddNumbers(0, 0);
  9.       // Assert
  10.       Assert.AreEqual(0, result);
  11.   }
  12. }
ASP.NET 5 sử dụng xUnit.net như là một framework unit test giành cho nó. Framewrok này sử dụng thuộc tính [Fact] thay cho thuộc tính [TestMethod] và không còn thuộc tính [TestClass] nữa:
  1. public class CalculatorTests
  2. {
  3.   [Fact]
  4.   public void AddNumbers()
  5.   {
  6.       // Arrange
  7.       var calculator = new Calculator();
  8.       // Act
  9.       var result = calculator.AddNumbers(1, 1);
  10.       // Assert
  11.       Assert.Equal(result, 13);
  12.   }
  13. }
Nếu bạn nhìn vào mã nguồn cho ASP.NET 5 khi ấy bạn sẽ thấy rằng xUnit.net đã sử dụng để kiểm tra ASP.NET bao quát. Ví dụ về repository MVC chứa đựng unit test được viết bởi xUnit.net. Bạn có thể tìm thấy tại repository MVC (và unit test của nó) ở đây:
ASP.NET sử dụng một phân nhánh của xUnit.net đặt ở đây: