Home Blog Page 207

Thấu hiểu các JavaScript Closure: Phương pháp tiếp cận thực tiễn

Thấu hiểu các JavaScript Closure: Phương pháp tiếp cận thực tiễn

Học một ngôn ngữ mới yêu cầu đến một loạt các bước, để thành thạo cần có sự kiên nhẫn, thực hành, sai lầm và rút ra kinh nghiệm.

Một số developer sẽ có đủ kiến thức để cung cấp các tính năng theo nhu cầu của khách hàng, nhưng phải mất nhiều thời gian hơn để trở thành developer tốt.

Một developer tốt là người cần có những kiến thức nền tảng về ngôn ngữ

Hôm nay chúng ta hãy nhìn sâu vào JavaScript closure và hy vọng rằng kiến thức bạn học sẽ có lợi trong các dự án.

Tuyển dụng Javascript lương cao mới nhất

JavaScript closure là gì?

JavaScript Closure là khi một inner function có quyền truy cập tới các thành viên của outer function (lexical scope) ngay cả khi thực thi bên ngoài phạm vi của outer function.

Vì vậy, chúng tôi không thể đủ khả năng để nói về closure trong khi bỏ ra các functions và scope.

Scope trong JavaScript

Scope đề cập đến mức độ hiển thị của một biến được xác định trong một chương trình. Các cách để tạo ra scope trong JavaScript là thông qua: try-catch blocks, functions, let keyword  với } trong số những thứ khác. Chúng tôi chủ yếu có hai biến thể: global scope và local scope.

var initialBalance = 0 // Global Scope

function deposit (amount) {
  /**
   * Local Scope
   * Code here has access to anything declared in the global scope
   */
  var newBalance = parseInt(initialBalance) + parseInt(amount)
  return newBalance
}

Mỗi function trong JavaScript tạo ra local scope riêng của nó khi được khai báo.

Điều này có nghĩa là bất cứ điều gì được khai báo bên trong local scope của function thì không thể truy cập từ bên ngoài. Xem xét minh hoạ dưới đây:

var initialBalance = 300 // Variable declared in the Global Scope

function withdraw (amount) {
  var balance // Variable declared in function scope

  balance = parseInt(initialBalance) - parseInt(amount)
  return balance
}
console.log(initialBalance) // Will output initialBalance value as it is declared in the global scope
console.log(balance) // ReferenceError: Can't find variable: balance

Lexical Scope

JavaScript Lexical Scope được xác định trong giai đoạn biên soạn. Nó xác định scope của một biến để nó chỉ có thể được gọi / tham khảo từ bên trong khối mã mà nó được định nghĩa.

Một function được khai báo bên trong một function block xung quanh có quyền truy cập vào các biến trong lexical scope của function xung quanh.

var initialBalance = 300 // Global Scope

function withdraw (amount) {
  /**
   * Local Scope
   * Code here has access to anything declared in the global scope
   */
  var balance = parseInt(initialBalance) - parseInt(amount)

  const actualBalance = (function () {
    const TRANSACTIONCOST = 35
    return balance - TRANSACTIONCOST /**
     * Accesses balance variable from the lexical scope
     */
  })() // Immediately Invoked Function expression. IIFE

  // console.log(TRANSACTIONCOST) // ReferenceError: Can't find variable: TRANSACTIONCOST
  return actualBalance
}

Gọi một inner function bên ngoài enclosing function của nó và vẫn duy trì quyền truy cập vào các biến trong enclosing function (lexical scope) tạo ra một JavaScript Closure.

function person () {
  var name = 'Paul'  // Local variable

  var actions = {
    speak: function () {
    //  new function scope
      console.log('My name is ', name) /**
      * Accessing the name variable from the outer function scope (lexical scope)
      */
    }
  } // actions object with a function

  return actions /**
  * We return the actions object
  * We then can invoke the speak function outside this scope
  */
}

person().speak() // Inner function invoked outside its lexical Scope

Closure cho phép sử dụng một giao diện cộng đồng trong khi cùng một lúc ẩn và bảo vệ các xâm phạm từ phạm vi bên ngoài.

Một số mẫu thiết kế JavaScript sử dụng closure.

Module Pattern

Một trong những mô hình được triển khai tốt này là module pattern, mô hình này cho phép bạn mô phỏng: private, public và privileged member.

var Module = (function () {
  var foo = 'foo' // Private Property

  function addToFoo (bam) { // Private Method
    foo = bam
    return foo
  }

  var publicInterface = {
    bar: function () { // Public Method
      return 'bar'
    },
    bam: function () { // Public Method
      return addToFoo('bam') // Invoking the private method
    }
  }

  return publicInterface // Object will contain public methods
})()

Module.bar() // bar
Module.bam() // bam

Từ module pattern mô tả ở trên, chỉ các phương pháp công khai và thuộc tính trong đối tượng trả về sẽ có sẵn bên ngoài ngữ cảnh thực thi của closure.

Tất cả các thành viên private sẽ vẫn tồn tại khi bối cảnh thực hiện của họ được bảo vệ nhưng bị che giấu khỏi outside scope.

Thêm ví dụ về Closures

Khi chúng ta vượt qua một function trong setTimeout hoặc bất kỳ kiểu gọi lại nào. Function vẫn còn nhớ lexical scope vì closure.

When we pass a function into a setTimeout or any kind of callback. The function still remembers the lexical scope because of the closure.function foo () {
  var bar = 'bar'
  setTimeout(function () {
    console.log(bar)
  }, 1000)
}

foo() // bar

Closure và loop

for (var i = 1; i <= 5; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i)
    }, i * 1000)
  })(i)
}
/**
* Prints 1 thorugh 5 after each second
* Closure enables us to remember the variable i
* An IIFE to pass in a new value of the variable i for each iteration
* IIFE (Immediately Invoked Function expression)
*/
for (let i = 1; i <= 5; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i)
    }, i * 1000)
  })(i)
}
/**
* Prints 1 through 5 after each second
* Closure enabling us to remember the variable i
* The let keyword rebinds the value of i for each iteration
*/

Tôi tin rằng bây giờ chúng ta có một sự hiểu biết về closure và có thể làm như sau:

  • Minh hoạ các trường hợp sử dụng của nó hoặc xác định nó trong ngữ cảnh chúng ta không bao giờ biết
  • Giữ bối cảnh thực hiện như dự đoán
  • Triển khai code trong module pattern của JavaScript
  • Sử dụng closure trong code của chúng tôi, với sự hiểu biết rõ ràng

TopDev via Scotch

Tham khảo thêm các vị trí tuyển ngành CNTT tại đây

Sử dụng ứng dụng HTTP Client của Angular v4

Sử dụng ứng dụng HTTP Client của Angular v4

Với việc phát hành Angular v4.3 vào tháng 7, một số tính năng mới vừa được giới thiệu, trong số đó là HttpClientModule,  @angular/common/http thay thế @angular/http nhỏ gọn hơn, dễ dàng hơn và là một thư viện để thực hiện các yêu cầu HTTP.

Một dịch vụ HttpClient mới cũng đã có trong HttpClientModule và nó có thể được sử dụng để bắt đầu yêu cầu HTTP. Trong hướng dẫn này, tôi sẽ chỉ cho bạn triển khai ứng dụng mới này và kiểm tra một số tính năng của nó.

Chúng tôi đã nói về HTTP Client theo chiều sâu trong một bài viết trước: Angular 2 HTTP Requests with Observables

TLDR

Dưới đây là những thay đổi bạn cần thực hiện từ phiên bản cũ (trước phiên bản 4) sang phiên bản mới (v4+)

Để nhập vào một NgModule:

// below v4 ==========================================
import { HttpModule } from '@angular/http';

...
@NgModule({
    imports: [
        HttpModule
    ]
})
...

// v4+ ===============================================
import { HttpClientModule } from '@angular/common/http';

...
@NgModule({
    imports: [
        HttpClientModule
    ]
})
...

Và để sử dụng bên trong dịch vụ:

// below v4 ==========================================
import { Http } from '@angular/http';

...
constructor(private http: Http) {}
...

// v4+ ===============================================
import { HttpClient } from '@angular/common/http';

...
constructor(private http: HttpClient) {}
...

Chúng ta hãy xem xét sâu hơn.

Cài đặt Angular v4

Để bắt đầu cài đặt Angular CLI sử dụng Node và NPM nếu bạn chưa cài đặt nó.

npm install -g @angular/cli@latest

Các -gchuyển đổi để cài đặt nó trên toàn cầu và @latest cho phiên bản mới. Sau khi quá trình cài đặt hoàn tất, hãy chạy lệnh sau để chèn một ứng dụng mới

ng new httptutorial

Thao tác này sẽ tải template của dự án và cài đặt tất cả. Cấu trúc thư mục dự án sẽ giống như thế này.

// end-to-end-tests
|- e2e/
  |----- app.e2e-spec.ts
  |----- app.po.ts
  |----- tsconfig.e2e.json

// npm dependencies
|- node_modules/

// public facing app. built things go here. this wont show until we run a build
|- dist/

// where most of the work will be done
|- src/
  |----- app/
      |----- app.component.css|html|spec.ts|ts
      |----- app.module.ts
  |----- assets/
  |----- environments/
      |----- environment.prod.ts|ts
  |----- favicon.ico
  |----- index.html
  |----- main.ts
  |----- polyfills.ts
  |----- styles.css
  |----- test.ts
  |----- tsconfig.app.json
  |----- tsconfig.spec.json
  |----- typings.d.ts

// overall configuration
|- .angular-cli.json  // the main configuration file
|- .editorconfig      // editorconfig which is used in some VS Code setups
|- .gitignore
|- karma.conf.js
|- package.json
|- protractor.conf.js
|- README.md
|- tsconfig.json
|- tslint.json

Mở tập tin package.jsonvà cập nhật sự phụ thuộc vào phiên bản 4.3.6. Vì vậy, dependencies và devDependenciessection của tập tin như thế này:

"dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.3.6",
    "@angular/language-service": "^4.3.6",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Tiếp đó, chạy file project directory

npm install

Điều này sẽ kéo các dependences vào file package.json. Để xem nếu mọi thứ hoạt động đúng, bắt đầu chạy development web server:

ng serve

Điều này bắt đầu phát triển web server tại http://localhost:4200. Truy cập link url, và bạn sẽ thấy một cái gì đó như sau:

Cài đặt HTTP module

Tiếp theo, nhập HttpClientModule vào phần mô-đun gốc của ứng dụng tệp src/app/app.module.ts và thêm nó vào thuộc tính imports. Vì vậy, các tập tin trông như thế này:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bây giờ các HttpClient để được sử dụng trong các component, nó cần phải được tiêm vào các nhà xây dựng lớp học. Trong src/app/app.component.ts nhập HttpClient sau đó đưa vào constructor như hình dưới đây:

import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor( private http: HttpClient ) { //dependency injection, creating an instance of HttpClient called http

  }
}

Bây giờ bạn sẽ có thể thực hiện các hoạt động CRUD và thực hiện các yêu cầu HTTP. Các phương thức HTTP khả dụng là post, put, delete, patch, head và jsonp.

HTTP GET

Để tìm ra phương pháp, chúng tôi sẽ truy hồi giả REST API. Đi qua link http://jsonplaceholder.typicode.com/ và cuộn xuống Resources. Bạn sẽ thấy một trang như sau:

Sau đó nhấp vào Resources/posts

Lưu ý rằng chúng ta thấy nhiều các đối tượng json ở đây, mỗi trong số đó có bốn thuộc tính: userId, id, title and body. Vì vậy, khi chúng tôi nhấn vào link url: http://jsonplaceholder.typicode.com/posts từ ứng dụng Angular, chúng tôi sẽ nhận được kết quả trên. Các phương pháp HTTP khác cũng hoạt động như mong đợi.

Bây giờ, chỉnh sửa src/app/app.component.ts như sau:

import { Component, OnInit } from '@angular/core'; // importing the OnInit interface

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { // implementing OnInit
  title = 'app';

  constructor( private http: HttpClient ) {

  }
  ngOnInit(): void { // adding the lifecycle hook ngOnInit
    this.http.get('http://jsonplaceholder.typicode.com/posts').subscribe(data => {
      console.log(data); // using the HttpClient instance, http to call the API then subscribe to the data and display to console
    });
  }

}

Ở đây chúng ta đang call đến điểm cuối API trong vòng đời ngOnInit. Hook này được gọi ra khi thành phần của chúng ta đã được khởi tạo. Đầu tiên chúng ta nhập giao diện OnInit, sau đó thực hiện giao diện này trong định nghĩa class. Sau đó chúng ta gọi phương thức ngOnInit, bên trong chúng ta gọi HttpClient instance http, chúng ta đã tạo ra trước đó trong constructor.

Chúng tôi gọi phương thức get từ trường hợp này, dự kiến URL của điểm cuối API mà chúng ta quan tâm. Phương thức get trả về một giá trị có thể quan sát được vì vậy chúng ta cần phải đăng ký với thông tin này để được thông báo khi đáp ứng đến, điều này được thực hiện bằng cách gọi phương pháp subscribe. Trong phương pháp subscribe, chúng ta đưa một trình xử lý sự kiện nhận dữ liệu, sau đó chúng ta có thể nhập vào bảng điều khiển. Đầu ra được hiển thị trong bảng điều khiển của trình duyệt sẽ giống như sau:

Đây là những đối tượng json được kéo từ url: http://jsonplaceholder.typicode.com/posts.

Để truy cập vào từng thuộc tính của đối tượng trả lời, ví dụ như thuộc tính data.userId, chúng ta cần phải gán đối tượng phản ứng vào một kiểu chứa các thuộc tính tương ứng. Để làm điều này, chúng ta hãy xác định một giao diện. Nhập các tệp tin sau vào tệp  src/app/app.component.ts ngay sau khi các câu lệnh nhập:

interface DataResponse {
  userId: string;
  id: string;
  title: string;
}

Tiếp theo, chỉnh sửa lệnh get call để sử dụng giao diện DataResponse:

this.http.get<DataResponse>('http://jsonplaceholder.typicode.com/posts/1').subscribe(data => {
      console.log('UserId: ' + data.userId);
      console.log('Id: ' + data.id);
      console.log('Title: ' + data.title);
      console.log('Body: ' + data.body);
    });

Bây giờ chúng ta có thể truy cập các thuộc tính userId, title và body riêng biệt. Đầu ra giao diện điều khiển sẽ giống như sau:

Chúng tôi có thể muốn hiển thị thông báo lỗi khi yêu cầu http thất bại. Để thực hiện việc này, đầu tiên hãy nhập HttpErrorResponse từ @angular/common/http sau đó tạo một hàm xử lý lỗi bằng cách thêm một callback vào phương thức subscribe, sau đó xác định một tham số kiểu HttpErrorResponse cho hàm xử lý lỗi:

import { HttpClient, HttpErrorResponse } from '@angular/common/http';

// ...

this.http.get<DataResponse>('https://jsonplaceholder.typicode.com/posts/1').subscribe(data => {
      console.log('UserId: ' + data.userId);
      console.log('Id: ' + data.id);
      console.log('Title: ' + data.title);
      console.log('Body: ' + data.body);
    },
    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        console.log('Client-side error occured.');
      } else {
        console.log('Server-side error occured.');
      }
    }
  );

HTTP POST

Cũng như trước, chúng tôi sẽ sử dụng dịch vụ JSONPlaceholder để trình bày HTTP POST. Tuy nhiên, lưu ý rằng vì đây là một dịch vụ giả, dữ liệu không liên tục nhưng API đáp ứng như thể một API thực được gọi. Điểm cuối của yêu cầu POST là http://jsonplaceholder.typicode.com/posts. Nếu bạn truy cập url này, bạn sẽ thấy rằng chúng tôi có bốn tài sản có sẵn cho chúng tôi:userId, id, title và body. Để sử dụng điểm cuối này để tạo một bản ghi mới, thêm một cuộc gọi thứ hai bên trong vòng đời của ngOnInit :

this.http.post('http://jsonplaceholder.typicode.com/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1
    })
      .subscribe(
        res => {
          console.log(res);
        },
        err => {
          console.log('Error occured');
        }
      );

Phương pháp post  trả lại một lần nữa có thể giám sát vì vậy chúng ta cần phải đăng ký nhận xét này như trước, điều này được thực hiện bằng cách gọi phương thức đăng ký. Với phương pháp đăng ký, chúng ta hiểu một trình xử lý sự kiện nhận dữ liệu, sau đó chúng ta có thể in vào bảng điều khiển. Sau đó, chúng ta thêm trình xử lý lỗi để in thông tin nếu xảy ra lỗi. Đầu ra được hiển thị trong bảng điều khiển của trình duyệt sẽ giống như sau:

HTTP Interceptor

Một tính năng mới khác của mô đun HTTP Client là các interceptor. Interceptor nằm giữa ứng dụng và một backend API. Với interceptor chúng ta có thể đưa một yêu cầu đến từ ứng dụng trước khi nó thực sự được gửi và gửi đến backend. Cuộc trò chuyện cũng đúng, đó là phản ứng từ phía backend có thể thay đổi trước khi nó được gửi và xử lý bằng đơn của chúng tôi. Để thực hiện điều này, chúng tôi sẽ đánh chặn các thông tin tiêu đề đến từ yêu cầu nhận được để http://jsonplaceholder.typicode.com/posts/1. Trường header chúng ta sẽ thay đổi là trường Accept-Language đến từ API. Tạo một tệp mới src/app/typicode.interceptor.ts  và nhập mã sau:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/observable';
@Injectable()
export class TypicodeInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Accept-Language', 'Test')
    });
    return next.handle(authReq);
  }
}

Đầu tiên chúng ta nhập injectable từ @angular/core sau đó import HttpEvent, HttpInterceptor, HttpHandler từ @angular/common/http. Cuối cùng, gói Observable  được import từ rxjs/observable.

Tiếp theo chúng ta thêm vào @injectable , sau đó tạo ra class TypicodeInterceptor thực thi giao diện HttpInterceptor. Sau đó chúng ta bổ sung phương thức interceptor trong việc thực hiện class.

Phương pháp này lấy một yêu cầu, thay đổi nó, trước khi chuyển nó sang cho việc xử lý tiếp đến ứng dụng của chúng tôi. Do đó chúng tôi đang đi qua hai tham số vào phương pháp này; yêu cầu bản thân của kiểuHttpRequest<any> và một tham số được gọi là next  đó là kiểu HttpHandler. Phương thức trả về một kiểu quan sát được của HttpEvent<any>

Tiếp theo chúng ta gọi phương thức req.clone() để nhân bản yêu cầu HTTP ban đầu. Bên trong phương pháp này chúng ta thay đổi trường tiêu đề được thực hiện bằng cách gọi phương thức req.headers.set(). Ở đây chúng ta thay đổi trường Accept-Language bằng cách thay đổi giá trị của nó thành Test.

Cuối cùng, đối tượng yêu cầu vừa được tạo ra (có header bao gồm) được chuyển tiếp để xử lý tiếp bằng cách sử dụng phương thức next.handle.

Người cung cấp Interceptor 

Để lấy interceptor để chúng tôi sử dụng chúng, chúng ta phải chỉnh sửa tập tin src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { TypicodeInterceptor } from './typicode.interceptor';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: TypicodeInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ở đây chúng tôi đã nhập khẩu HTTP_INTERCEPTORS từ @angular/common/http và TypicodeInterceptor class chúng tôi tạo ra trước đó trong src/app/typicode.interceptor.ts. Tiếp theo, chúng ta chèn một đối tượng mới vào mảng được gán cho thuộc tính provider của @NgModule. Đối tượng này có ba thuộc tính:

  • provide: cần được đặt thành HTTP_INTERCEPTORS để xác định rằng một máy chủ chặn HTTP được cung cấp
  • useClass: cần phải được thiết lập để loại interceptor class của chúng tôi
  • multi: cần được đặt thành multi để nói với Angular rằng HTTP_INTERCEPTORS là một mảng các giá trị, chứ không phải là một giá trị duy nhất

Để xem interception này, hãy nhấp vào tab mạng, tải lại trang, sau đó chọn yêu cầu HTTP trên bảng điều khiển bên trái và các header HTTP sẽ được hiển thị trên bảng điều khiển bên phải. Yêu cầu chúng tôi quan tâm là yêu cầu nhận được gọi url: http://jsonplaceholder.typicode.com/posts/1.

Kết luận

Mô-đun HTTP Client giúp dễ dàng xử lý các giao diện HTTP backend như của REST API. Để recap chúng ta đã đề cập đến các thiết lập cơ bản của HttpClientModule, đưa ra cách sử dụng phương thức get và post và chỉ ra cách sử dụng tính năng interceptor mới. Bạn có thể nghĩ đến một vài trường hợp sử dụng được các tính năng này sẽ được yêu cầu. Cũng hãy xem dự án này trên Github. Nếu bạn có bất kỳ thắc mắc hoặc băn khoăn gì, đừng ngần ngại gửi chúng dưới đây.

Topdev via Scotch

TopDev ra mắt giải pháp tuyển dụng ứng dụng trí tuệ nhân tạo

TopDev vừa ra mắt giải pháp tuyển dụng tích hợp trí tuệ nhân tạo (AI ) đầu tiên tại Việt Nam. Tích hợp AI vào mạng quảng cáo việc làm cho phép tin đăng tuyển dụng được hiển thị đến đúng đối tượng, vào đúng thời điểm thích hợp, dựa trên những phân tích thói quen sử dụng Internet của ứng viên. Nhờ đó, gia tăng cơ hội tìm kiếm được ứng viên phù hợp cho nhà tuyển dụng, tiết kiệm được hơn 50% chi phí cũng những thời gian tìm kiếm ứng viên.

Theo thống kê của bộ TT&TT, Việt Nam cần khoảng 1,2 triệu nhân lực CNTT vào năm 2020, trong khi toàn bộ hệ thống cung cấp nhân lực về CNTT trên cả nước chỉ có khả năng đáp ứng quá nửa con số ấy. Sự thiếu hụt nhân sự CNTT không chỉ khiến doanh nghiệp loay hoay trong việc triển khai phát triển, mà còn dẫn tới tình trạng bất ổn định trên thị trường lao động.

Giờ đây, khi mà các giải pháp tuyển dụng thông thường không còn hiệu quả và tốn rất nhiều thời gian, chi phí, thì đã đến lúc cần một giải pháp tuyển dụng thay thế, hiệu quả và tối ưu hơn. Đây là lúc vai trò của AI được phát huy.

Developer quan tâm tới Java chỉ nhận được các Job liên quan đến Java ( giao diện trên Desktop)

Ứng dụng AI vào tuyển dụng đã được áp dụng khá phổ biến trên thế giới, gần đây nhất là sự kiện Google ra mắt bộ công cụ tìm kiếm việc làm dựa vào trí tuệ nhân tạo. Nhưng ở Việt Nam hiện nay, TopDev được xem là platform tuyển dụng đầu tiên tích hợp AI vào tuyển dụng, đây là một bước đột phá mới giúp nhà tuyển dụng tìm kiếm ứng viên phù hợp với chi phí tối ưu trong thời gian tối thiểu.

Công nghệ AI tự động phân tích và hiểu người dùng, từ đó tin tuyển dụng được phân phối và hiển thị đến đúng đối tượng, đúng thời điểm; gia tăng cơ hội tìm kiếm được ứng viên phù hợp cho nhà tuyển dụng, tiết kiệm được hơn 50% chi phí cũng những thời gian tìm kiếm ứng viên.

Hiển thị Job trên giao diện Mobile

Ví dụ đơn giản như một digital marketer sẽ chỉ thấy các job liên quan đến digital marketing, một lập trình viên web sẽ chỉ nhìn thấy các quảng cáo job liên quan đến lập trình web. Nhờ đó mà việc tìm kiếm sẽ trở nên hiệu quả hơn cho các bên khi không phải mất thời gian với các quảng cáo không phù hợp.

Có hệ thống mạng lưới liên kết rộng khắp với các website và fanpage lớn, có độ phủ sóng đến hơn 90% lập trình viên hiện nay cùng với các hoạt động xây dựng cộng đồng như chuỗi sự kiện Vietnam Mobile Day, Vietnam Web Summit…thu hút hàng chục ngàn lượt người tham dự, TopDev nhanh chóng trở thành một trong những chuyên trang tuyển dụng IT hàng đầu hiện nay, là đối tác tin cậy của nhiều công ty tập đoàn lớn trong và ngoài nước.

Việc ra mắt giải pháp mới ứng dụng AI vào quy trình tuyển dụng là một trong những nỗ lực của TopDev nhằm giải quyết triệt để bài toán tuyển dụng lập trình viên đang khá nhức nhối trước làn sóng khởi nghiệp mạnh mẽ ở Việt Nam và sự phát triển công nghệ của thế giới.

TopDev đã xây dựng mạng lưới với hơn 50 publisher, trong đó có các website thuộc hàng top trong lĩnh vực công nghệ như Techtalk.vn, Freetuts.net, ddth.com…

Kết quả đem lại từ các publisher trong ngành IT hiện nay rất khả quan khiến chúng tôi mạnh dạng mở rộng sang các ngành nghề khác trong tương lai gần.

Hiện nay, TopDev đang thực hiện mở rộng hệ thống mạng lưới hiển thị nội dung trên nhiều Blog/Website chuyên về công nghệ, Design, Marketing (tương ứng với đối tượng tuyển dụng là các Developer, Designer và Marketer ) với nhiều chính sách, hỗ trợ hấp dẫn. Cụ thể đối với các Publisher, chủ của những website/blog có nhiều lượt truy cập, việc tích hợp mạng quảng cáo này sẽ giúp tạo thêm giá trị cho user, đồng thời đem lại nguồn doanh thu khá tốt bên cạnh các quảng cáo của Google Adwords. Việc tích hợp mạng quảng cáo rất đơn giản, chỉ cần nhúng mã Javascript vào Website/ Blog là ngay lập tức, trang web có thêm tính năng hiển thị việc làm tại những nơi tùy ý.

Nguyễn Hữu Bình – CEO của TopDev

Theo ông Nguyễn Hữu Bình, CEO của TopDev, cho biết “Giá CPI, CPM và CPA trả cho các publisher sẽ cao ít nhất gấp đôi Google Adwords do chỉ chuyên về mảng việc làm. Việc hiển thị cũng sẽ rất tinh tế, không phản cảm và như là một thành phần tiện ích thêm cho user.”

TopDev đã xây dựng mạng lưới với hơn 50 publisher, trong đó có các website thuộc hàng top trong lĩnh vực công nghệ như Techtalk.vn, Freetuts.net, ddth.com…

Với những nỗ lực của mình TopDev tham vọng trở thành một trong những lựa chọn hàng đầu về tuyển dụng lập trình viên ở Việt Nam.

“TopDev.vn sẽ là nơi cho những người chủ động vào tìm việc, bên cạnh đó, mạng hiển thị quảng cáo việc làm mới sẽ mở ra nhiều cánh cửa tiếp cận đến ứng viên tiềm năng ít chủ động tìm việc, chúng tôi kỳ vọng sẽ giải quyết tình trạng mất cân bằng cung cầu, tình trạng thừa người nhưng khó tuyển, tuyển không phù hợp, cũng như đem đến những cơ hội việc làm tốt hơn cho những người không chủ động tìm kiếm cơ hội mới” – Anh Bình kết luận.

Tham khảo các vị trí tuyển dụng việc làm ngành trí tuệ nhân tạo AI lương cao.

TopDev

Các xu hướng JavaScript đáng để theo dõi ( Phần 2)

Các xu hướng JavaScript năm 2018 đáng để theo dõi ( Phần 2)

Trong phần 1, ta để điểm sơ qua một vài xu hướng Javascript hàng đầu năm 2018, trong bài viết này, ta sẽ đến với những xu hướng còn lại.

Prettier

Như tên gọi của nó, Prettier là một định dạng mà làm cho code của bạn dễ đọc hơn.

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

trở thành…

foo(
 reallyLongArg(),
 omgSoManyParameters(),
 IShouldRefactorThis(),
 isThereSeriouslyAnotherOne()
);

Với hơn 18.000 đánh giá star trên Github, các nhà phát triển đang dành nhiều quan tấm đến dự án đơn giản và có giá trị này.

Nó cũng được sử dụng trên nhiều dự án khác mà có thể bạn đã yêu thích, như Webpack, React, Next.js, Babel,…

Một lần nữa, bạn chỉ cần trở thành một Go develper và thậm chí không cần phải cài đặt nó.

Jest and Enzyme

Khi nói đến testing JavaScript, Jest đã chắc chắn là sự lựa chọn dẫn đầu, với Enzyme như một sự bổ sung tuyệt vời khi xây dựng các React app.

Như bạn có thể thấy, Jest hiện đang chiếm ưu thế hơn Jasmine trong việc tải về.

Tính năng Snapshots của Jest đã được tung ra vào năm 2017, làm cho nó để với thử nghiệm. Hãy xem cuộc nói chuyện này từ React Conf 2017 để tìm hiểu về nó.

Enzyme, do team engineering của Airbnb tạo ra, là một thư viện JavaScript để testing React component. Nó đã bùng nổ tới 12.000 đánh giá star trên Github kể từ năm 2016.

Hình ảnh Snapshots của Jest và API cực kỳ đơn giản của Enzyme để testing React component tạo ra một kết hợp thử nghiệm tuyệt vời sẽ tiếp tục phát triển lên trong năm 2018.

Webpack

Webpack đã trở thành gói asset bundler phổ biến nhất. Webpack cũng đã có một năm KHÔNG TƯỞNG.

Thời gian này năm ngoái, Webpack hầu như không có tài liệu và hầu hết các developer không biết làm thế nào để bắt đầu với nó.

Sau đó, vào đầu năm, tôi đã viết về việc Webpack đã tăng 15.000 đô trong 3 tháng (và chúng tôi hạnh phúc như thế nào khi là một trong những nhà tài trợ sớm nhất) để hỗ trợ dự án. Hiện nay họ có hàng trăm ngàn đô la tài trợ.

Webpack không chỉ mở đường cho việc tương lai của các dự án mã nguồn mở có thể phát triển như thế nào, nhưng sự phát triển của dự án đã duy trì động lực to lớn trong suốt cả năm.

Và Sean Larkin may mắn dẫn đầu phong trào Webpack, thực sự khó có thể đưa ra những gì Webpack có khả năng đạt được tiếp theo.

Bởi vì nó hỗ trợ tốt dự án này (và họ quan tâm đến cộng đồng của mình), làm xu hướng nó trở thành dễ đoán nhất năm 2018.

Parcel

Nhưng với mọi xu hướng, một lực lượng các developer không hài lòng ngày càng tăng.

Parcel, một nhà cung cấp dịch vụ vận chuyển, đang nhanh chóng đạt được 12.000 đánh giá star trên Github vào năm 2017 và đi ngay sau Webpack.

Parcel và các gói khác đã trở nên quá cồng kềnh, trong khi Parcel hoạt động nhanh gấp hai lần gói thành Webpack (nhanh hơn 10 lần khi sử dụng bộ nhớ cache).

Nó cũng đi sau khi cài đặt cấu hình hơi khó hiểu của Webpack, như với Parcel, không cần cấu hình.

“Chỉ cần điểm nó ở vị trí vào của ứng dụng của bạn, và nó làm điều đúng.”

Mặc dù đơn giản hoá cấu hình và cải thiện tốc độ là cả hai cải tiến lớn, tôi sẽ không ngạc nhiên nếu Webpack không sao chép những cải tiến này vào nửa đầu năm 2018.

Tương tự như Vue vs React, nó sẽ luôn đổi mới nhanh hơn, nhưng đến với sẽ được truyền cảm hứng bởi sự đổi mới và cải thiện dự án.

Bạn có thể theo dõi toàn bộ cuộc tranh luận ở đây.

Gatsby

Gatsby là một static site generator cho React được xây dựng bởi Kyle Mathews.

Kể từ khi Kyle dành toàn bộ thời gian cho Gatsby, thực sự đáng để đón nhận.

Không có bằng chứng nào tốt hơn về điều đó so với thực tế là trang web React được xây dựng bằng Gatsby.

Gatsby là về hiệu suất và cung cấp trải nghiệm web nhanh nhất có thể trong React.

Sơ đồ này từ trang web này cung cấp cách ý tưởng hoạt động:

Gatsby cũng sử dụng công nghệ web tiên tiến tìm nạp trước tài nguyên cho các trang khác, do đó, trình duyệt với tốc độ rất nhanh.
Mặc dù Gatsby không thống trị ngành công nghiệp bất kỳ phương tiện nào, đó là một giải pháp tuyệt vời để xây dựng các trang web tĩnh sẽ tiếp tục trở nên phổ biến.
Để biết thêm về Gatsby, hãy đọc bài đăng này.
Chúng tôi cũng sẵn sàng tài trợ để phát triển cho Gatsby trong năm nay.

Babel

Babel không cần giới thiệu vào thời điểm này và duy trì là một xu hướng thiết yếu.

Trong tất cả, đây là năm tốt cho Babel, chủ yếu tập trung vào việc xây dựng Babel 7 (hy vọng tung ra đầu năm 2018). Quan trọng nhất, họ đã viết một bài hát 🙂

Mối quan tâm duy nhất của Babel hiện nay (ngoài người bảo trợ phi thường của nó, một khoảng thời gian không rõ ràng / mơ hồ từ dự án), giống như Reason trở thành xu hướng chủ đạo.

Nhưng bây giờ, Babel sẽ tiếp tục mạnh mẽ trong suốt 2018.

Chúng tôi cũng rất vui khi tài trợ cho Babel trong năm.

Flow & Typescript

Typescript và Flow là cả hai lựa chọn tuyệt vời dành cho các nhà phát triển JavaScript để sử dụng để cải thiện chất lượng code của mình.

Chúng ta có thể sẽ không thấy người kia tàn phá như thế nào vào năm 2018, vì cả hai đã sống sót cùng nhau, phục vụ các mục đích khác nhau.

Flow được xây dựng bởi Facebook là sự lựa chọn ưa thích của các nhà phát triển React vì nó dễ dàng tích hợp với Babel,  thường được sử dụng trong các dự án React.

Typescript, được xây dựng bởi Microsoft, phổ biến trong số các nhà phát triển Angular 2+ vì đó là ngôn ngữ chính.

Năm 2018 có thể sẽ trở nên tồi tệ nếu xét về tiến bộ từ hai lựa chọn này, và câu hỏi thực sự trong những năm tới sẽ trở thành một cái gì đó như Reason có thể thay thế cho cả hai.

Immutable.js

Tôi thích cách một redditor mô tả Immutable.js:

“immutableJS đảm bảo rằng các nhà phát triển trên các nhóm lớn không làm điều gì đó ngu ngốc.”

Đơn giản: Immutable.js, một dự án khác của Facebook, đảm bảo rằng nhà nước không bị biến đổi bởi các đối tượng không thay đổi (không thay đổi).

Như một redditor đã chỉ ra, điều này có thể được vô cùng hữu ích trong một team lớn các developer có thể gây thất bại.

Dữ liệu được đóng gói trong một đối tượng Immutable.JS không bao giờ bị biến đổi. Một bản sao mới luôn được trả lại. Điều này ngược lại với JavaScript, trong đó một số thao tác không làm biến đổi dữ liệu của bạn (ví dụ: một số phương pháp Array, bao gồm bản đồ, bộ lọc, concat, forEach,…), nhưng một số khác (pop, push, splice, array).

Có một số hạn chế lớn để sử dụng Immutable.JS, nhưng những hạn chế có thể không quan trọng tùy thuộc vào nhu cầu của bạn. Bạn có thể đọc thêm về chúng tại đây.

Với 20.000 star trên Github hiện tại, Immutable.js đã tăng vào năm 2017 và có dự kiến sẽ tiếp tục tăng trong năm 2018 khi các developer bắt đầu dành thời gian để hiểu khái niệm và cân bằng.

Popmotion

Popmotion là một thư viện chuyển động JavaScript nhanh chóng đạt được các đánh giá trên Github.

Hãy suy nghĩ về cách Flash đáp ứng jQuery.

Bây giờ, tôi nhận ra bằng cách sử dụng hai từ trong cùng một câu không giúp nó trở nên phổ biến.

Nhưng khi bạn càng lún sâu vào dự án này, bạn càng khám phá ra một nhóm những người có sự nhún nhường với cả jQuery và Flash và đơn giản là cần thiết để làm tốt hơn.

Và Popmotion thực sự là một trải nghiệm tốt với rất nhiều đổi mới về web animation. Đây chắc chắn là một năm đáng chờ đợi.

Kiểm tra trang web của họ để bắt đầu bị trêu chọc.

React Native & Electron

React Native cho phép bạn xây dựng ứng dụng React cho thiết bị di động, trong khi Electron cho phép bạn tạo các ứng dụng JavaScript cho máy tính để bàn.

Cả hai đều trở thành các framework thành công trong năm 2017 và cả hai đều là những giải pháp tuyệt vời cho JavaScript đến một ứng dụng gốc.

Một số ứng dụng đáng chú ý được xây dựng bao gồm: Slack, Atom, Github Desktop và Discord.

Và các ứng dụng phổ biến được xây dựng với React Native bao gồm: Facebook, Instagram, Airbnb và UberEATS.

Bạn cũng có thể tạo các ứng dụng React Native cho Windows.

Bất kể, đây là thời điểm tốt để trở thành nhà phát triển JavaScript vì bạn có thể tạo ứng dụng cho cả desktop và mobile dễ dàng hơn trong quá khứ.

Bonus: Web Assembly

Với tất cả 4 trình duyệt hiện hỗ trợ Web Assembly, chúng ta gần như ở đó. Vẫn còn quá sớm để gọi nó là xu hướng cho năm 2018, vì vậy chúng tôi sẽ cập nhật bạn trong 12 tháng.

Xem thêm tuyển dụng javascript lương cao cho bạn

TopDev via Hackernoon

Các xu hướng JavaScript đáng để theo dõi ( Phần 1)

Các xu hướng JavaScript năm 2018 đáng để theo dõi ( Phần 2)

Nếu bạn đang chôn chân trong các dự án trong suốt năm 2017, đây thật sự là bài viết dành cho bạn.

Rất nhiều thứ đã xảy ra vào năm 2017 khiến cho 2018 cho rất nhiều đổi mới.

Bạn cũng có thể sử dụng bài viết này như một hướng dẫn để lên kế hoạch cho sự phát triển vào năm 2018 để giúp bạn có được những dự án sáng tạo hơn.

React vs. Vue.js

Chúng ta hãy đón nhận những điều tốt đẹp: Không ít người tin rằng Vue sẽ trở thành đối thủ lớn của React, nhưng không thể bỏ qua Vue trong năm nay, thậm chí bỏ qua Angular vì sự phát triển của nhà phát triển.

Khi nhìn về phía trước đến năm 2018, chúng ta sẽ bắt tay vào cuộc chiến kéo dài 2 năm đầy những sự phát triển cho Vue.

React vẫn có sự hỗ trợ về tài chính từ một trong những công ty giàu nhất trên thế giới, chưa kể đến một số nhà đầu tư vô cùng tài năng.

Nhưng Vue đang làm tất cả những điều khiến cho các nhà phát triển thực sự thoải mái:

Vue nhẹ, dễ học, có các công cụ đặc biệt, quản lý nhà nước tuyệt vời và định tuyến tích hợp sẵn,…

Cộng đồng của Vue chắc chắn không lớn như của React, nhưng các cộng đồng phát triển dựa trên việc nhóm có những người tuyệt vời và lắng nghe cộng đồng của họ (cả hai đều có sẵn).

Khi nói đến làm hài lòng các nhà phát triển, chúng ta đừng quên việc Facebook đã thất bại với BSD + Patents license snafu đối với thực sự tốt với các nhà phát triển.

Chúng tôi đã thực sự đạt đến vị trí mà bạn cũng có thể bắt đầu mọi dự án với Vue để đơn giản hóa cuộc sống, và đó là một thành tựu ấn tượng của nhóm.

Dưới đây là một bài viết về React vs. Vue vs Angular trong năm nay.

Nếu bạn là một nhà phát triển Angular, người chỉ từ chối học React, Vue.js sẽ nhanh chóng trở thành lựa chọn tốt hơn cho con đường sự nghiệp của bạn khi các cơ hội góc cạnh chết đi (vì Vue có một số cú pháp tương tự như Angular 1).

Mỗi nhà phát triển JS vẫn nên xem xét việc học Vue.js, vì nó được tạo cơ hội đủ lớn đến nơi mà chúng tôi bắt đầu thấy các yêu cầu được thuê của các nhà phát triển của Vue.js, có nghĩa là bạn có thể tạo ra một số giá trị cho chính mình ít nhất trong ngắn hạn.

Next.js

Và rồi có Next.js, ngôn ngữ chúng tôi sẽ gọi là ‘insurance for React.”

Ngay cả khi Facebook không bao giờ vượt trội trong cuộc đua hay sự đổi mới cùng một thời gian như Vue, React cùng với Next.js giúp bạn gần gũi hơn với Vue về công cụ, chia tách code, định tuyến và quản lí, cho phép bạn giữ lại và hỗ trợ hệ sinh thái React.

Tiếp theo cũng hữu ích cho các ứng dụng được hiển thị ở phía máy chủ được xây dựng trong React, với xu hướng ngày càng tăng.

Hơn nữa, hãy thêm vào Now.js (tạo bởi cùng một nhóm) và bạn có một cách nhanh chóng để triển khai các ứng dụng React.

Khi cuộc chiến giữa Vue vs React vẫn cứ tiếp tục, chúng ta mong đợi rằng sẽ ngày càng có nhiều sự chấp thuận của Next  với React để làm cho người dùng React cảm thấy thoải mái hơn.

Angular

Bất chấp những khó khăn ngày càng nhiều của Angular, nó vẫn sẽ tiếp tục là một framework được sử dụng rộng rãi vào năm 2018.

Nhiều công ty đã chấp nhận Angular 1.0 và khi họ chuyển sang một thứ gì đó tốt hơn vào năm 2018,19, họ sẽ xem React hoặc Vue.js là những lựa chọn thay thế tốt hơn cho Angular 2.

Những người ủng hộ còn lại của Angular đã đưa ra quan điểm rằng Angular sẽ là JS framework được lựa chọn của nhiều doanh nghiệp, nhưng điều này vẫn chưa được chứng minh và có thể sẽ không được nhắc đến vào năm 2018.

Reason

Reason luôn luôn có giá trị chú ý đến mọi thứ mà Facebook đang sử dụng trong sản xuất.

Facebook hiện đang sử dụng Reason (OCaml đã được thiết lập sẵn) cho phiên bản web của Facebook Messenger, trong số các dự án khác (WhatsApp, Instagram, Quảng cáo, v.v.).

Năm 2017, họ cũng phát hành reason-react, thứ đã tạo ràng buộc với React để bạn thực sự có thể viết Reason code để biên dịch thành ReactJS.

Vì vậy hãy tưởng tượng không cần phải cài đặt Babel (+ nhiều plugin), Flow, v.v … và chỉ cần sử dụng sức mạnh của OCaml + Reason (hiện hỗ trợ kết hợp React). Đó là một xu hướng lớn đang chuẩn bị bùng nổ trong năm tới.

Reason đã thu hút được sự chú ý của năm 2017 trong lĩnh vực JS so với hầu hết các ngôn ngữ lập trình khác, do đó chắc chắn là một để tiếp tục xem với năm 2018.

GraphQL

GraphQL là một ngôn ngữ truy vấn cho các API (think: a modern take on REST).

GraphQL đã rất thịnh hành vào năm 2017, vì các công ty lớn như Yelp, Spotify, Github, Walmart, NYTimes, v.v … đều dựa trên API GraphQL.

Một số các API này thậm chí còn độc quyền GraphQL, và không có tùy chọn REST nào có sẵn. Nói một cách đơn giản: các công ty sáng tạo đang đặt cược vào GraphQL.

Các API này chắc chắn sẽ không còn tồn tại, nhưng một lần nữa, nhìn vào xu hướng khởi động của các công ty mới, GraphQL là một lựa chọn phổ biến.

Mặt khác, các giải pháp thay thế như Falcor hầu như chưa bao giờ được thảo luận nữa.

Đây chắc chắn là thời gian để bắt đầu học GraphQL nếu bạn muốn có được việc làm tại các công ty sáng tạo.

Redux, Relay Modern và Apollo

Redux là dự án của Dan Abramov / Andrew Clark mà nổi tiếng đã trở thành giải pháp cho việc quản lí của quản lý nhà nước và thu thập dữ liệu trong React.

Nhưng GraphQL đã thực sự gây rắc rối cho Redux, đặc biệt là khi tìm kiếm dữ liệu.

Bây giờ chúng ta đã có Relay Modern (tạo ra bởi Facebook) và Apollo, client framework GraphQL cho phép bạn lấy và truyền dữ liệu GraphVN vào ứng dụng React của bạn hiệu quả hơn Redux.

Giống như một nhà phát triển chỉ ra về Relay / Apollo / Redux:

“Những framework và lợi ích của chúng không phải là loại trừ lẫn nhau. Trong thực tế, sử dụng cùng nhau có thể cung cấp một sự tách biệt tốt đẹp của mối quan tâm đó là rất quan trọng trong phát triển web.”

Điều này có nghĩa là bạn vẫn có thể sử dụng Redux song song với Relay, sử dụng Redux cho trạng thái cục bộ và một số trạng thái phi máy chủ phức tạp và sau đó dùng Relay để nạp lại.

Nhưng cộng đồng đang lo lắng cho một cái gì đó để đơn giản hóa điều này (và cho đến nay các phản ứng duy nhất là Vuex / Vue.js / Apollo hoặc Cashay).

Storybook

Storybook là một môi trường để tìm, phát triển và thử nghiệm các thành phần UI.

Nó bắt nguồn từ thực tế đã chết vào đầu năm, để phổ biến rộng rãi vào giữa năm 2017 nhờ vào nỗ lực lớn từ cộng đồng. Đây là một câu chuyện đầy cảm hứng về cách làm việc với mã nguồn mở đáng để đọc.

Nó vô cùng hữu ích (và thậm chí thú vị khi sử dụng), cho phép bạn xây dựng và thử nghiệm thành phần giao diện người dùng một cách độc lập. Nó giống như một UI style guide mà cung cấp giá trị thực cho nhà phát triển.

Bạn đã có thể gặp một dự án mã nguồn mở bằng cách sử dụng Storybook đã có, nhưng để xem nó trong hoạt động không, hãy kiểm tra Storybook bằng date picker của Airbnb.

Nếu bạn muốn nổi lên như một nhà phát triển vào năm 2018, hãy thể hiện bằng Storybook với dự án gần đây nhất của bạn.

Bonus: Kiểm tra react-bluekit, một Storybook thay cho các team kĩ sư tại Netflix đang sử dụng cho các components library.

Còn tiếp…

Techtalk via Hackernoon

Tham khảo các vị trí tuyển dụng Javascript hấp dẫn tại đây

Machine Learning góp phần cải thiện chiến lược Digital Marketing của bạn như thế nào?

Machine Learning góp phần cải thiện chiến lược Digital Marketing

RankBrain – một công cụ Machine Learning mới được Google tung ra đã góp phần không nhỏ vào kết quả tìm kiếm, khiến nhiều người băn khoăn về những tác động của Machine Learning trong việc tối ưu hóa kết quả tìm kiếm – Search Engine Optimization (SEO).

Chưa bao giờ ngành công nghiệp công nghệ cao đạt tốc độ phát triển ” điên cuồng” như hiện nay, với trí tuệ nhân tạo ( AI), xử lý ngôn ngữ tự nhiên ( NLP), Machine Learning và Chatbots,.. Điều quan trọng nhất trong lúc này là cần phải biết những công nghệ nào? Nó diễn ra ở đâu? Và sẽ tác động như thế nào đến Digital Marketing nói riêng và toàn ngành Marketing nói chung?

Bài viết này sẽ giải thích các khái niệm cũng như chia sẻ một số lời khuyên về cách để thích ứng với Machine Learning.

Sự phát triển và phổ biến của Machine Learning, AI

Thực tế, Machine Learning không còn xa lạ trong giới công nghệ. Khái niệm Machine Learning xuất hiên lần đầu tiên vào năm 1950 và bây giờ đã phát triển thành một công nghệ xây dựng hệ thống thuật toán dựa trên những data trends (xu hướng dữ liệu), models ( mô hình) và các pattern (mẫu) mà nó đã học được từ trước. Với các dữ liệu này, Machine Learning sẽ mô phỏng các quá trình ra quyết định của con người bằng cách phân tích dự đoán.

RankBrain thực sự ghi dấu ấn của mình trong giới công nghệ, các công ty khác cũng bắt đầu quan tâm vào việc thu thập và lưu trữ dữ liệu, khiến Machine Learning trở nên gần gũi với người sử dụng. Đó là chưa kể đến những công cụ Machine Learning mới hiện đang được triển khai và thiết kế để dễ tiếp cận hơn. Với ý nghĩ đó, các công ty lớn đã bắt đầu áp dụng Machine Learning vào việc kinh doanh và tự động hóa tiếp thị.

Tuy nhiên trước khi tiến sâu hơn vào thế giới của Machine Learning cũng như tìm hiểu cách mà nó ảnh hưởng đến Marketing, phải lưu ý rằng Machine Learning không giống với AI. Mặc dù chúng đang được sử dụng thay thế cho nhau, rõ ràng là có những điểm khác biệt giữa hai công nghệ này. Dưới đây là một số điểm khác biệt:

Sự khác biệt giữa Machine Learning và AI?

Trí tuệ nhân tạo là một khái niệm về máy móc có khả năng thực hiện những công việc mà con người cho rằng đó là thông minh. Nói một cách khác, trí tuệ nhân tạo là khi máy móc có thể thực hiện được những công việc tương tự như con người, hoặc thậm chí là tốt hơn cả con người.

Machine Learning là một tập hợp con của AI, bằng cách cung cấp cho máy móc những dữ liệu, sau đó nó học theo cách của riêng nó. Thay vì được lập trình để làm điều gì này, máy móc được cung cấp thông tin mà chúng cần để tự làm. Đơn giản hơn, Machine Learning là một trong những ứng dụng sẽ điều hướng phát triển của AI. Với tư tưởng đó, điều quan trọng là chúng ta phải dạy được máy móc học sao cho đúng, qua đó chúng ta có thể phát triển được trí tuệ nhân tạo.

Tham khảo thêm: Việc làm machine learning job in vietnam lương 3000 USD

Machine Learning và Digital Marketing

Bởi vì Machine Learning đang được sử dụng để giải quyết các vấn đề lớn với sự giúp đỡ của dữ liệu, các kênh truyền thông, nội dung và bối cảnh, cũng như các nhà tiếp thị, chúng ta được hưởng lợi từ thông tin này cũng như toàn bộ quá trình này. Nhưng, khi mà thông tin chúng ta thu thập được ngày càng nhiều hơn, Digital Marketing sẽ được thay đổi.

Tối ưu hóa công cụ tìm kiếm

Từ cách nhìn của một SEO, từ khóa có thể ít quan trọng hơn. Các công cụ tìm kiếm tạo ra nhiều giá trị quảng cáo hơn họ cung cấp cho người dùng những nội dung có chất lượng cao hơn. Kết quả là, các thuật toán họ sử dụng cần phải tập trung vào việc cung cấp cho mỗi người dùng với những nội dung có mục đích cụ thể hơn là việc đưa ra một số lượng lớn những từ khóa chính xác. Do đó, bạn cần phải bắt đầu suy nghĩ về chất lượng nội dung như là một yếu tố xếp hạng trên các công cụ tìm kiếm.

Chiến dịch Pay Per Click

Việc Google tung ra những tính năng thông minh mới như Google Smart Bidding, Smart Display Campaigns và In-Market Audience để giúp các doanh nghiệp tối ưu hóa sự chuyển đổi, rõ ràng rằng tương lai của PPC nằm trong Machine Learning.

Để đưa chiến dịch PPC của bạn lên một tầm cao mới, bạn nên:

Nắm vững những số liệu có giá trị với doanh nghiệp của bạn

Hiểu được những trở ngại có thể xuất hiện trong quá trình đạt được mục tiêu

Biết rõ chương trình điều khiển cơ bản được thực hiện để có thể đưa ra những quyết định chiến lược.

Content Marketing

Mặc dù vẫn giữ vị trí vô cùng quan trọng, Internet đã bão hòa với quá nhiều nội dung. Như đã đề cập ở trên, để thành công, bạn cần phải tạo ra nội dung có giá trị với độc giả. Để làm được điều này, bạn cần phải nắm rõ xu hướng tiêu dùng.

Những công cụ Machine Learning cho phép giảm bớt số lượng thời gian bạn dùng để theo dõi dữ liệu, cũng như cho phép bạn giải mã các dữ liệu tốt hơn, vì vậy, bạn có thể tạo ra những chiến dịch có thể dẫn đến thành công. Quan trọng hơn, điều này có thể áp dụng rất tốt cho chiến dịch email marketing.

Xây dựng liên kết

Sau khi Google công bố các thuật toán Penguin, nhiều người nghĩ rằng xây dựng liên kết sẽ ngừng hoạt động bởi vì Penguin sẽ phạt bất kì doanh nghiệp nào mua bán backlink. Tuy nhiên, thay vì việc biến mất, xây dựng liên kết đã phát triển trở lại. Là một nhà tiếp thị, bạn cần phải tìm kiếm nội dung để công nhận thương hiệu, đẩy mạnh việc đề cập thương hiệu của bạn, và nghiên cứu nội dung cho các bài viết thay vì chỉ đơn giản là mua các liên kết của bạn.

Các vấn đề và cơ hội của Machine Learning cho nhà tiếp thị

Các công cụ của Machine Learning hiện nay khá tốn kém, trong khi đó thực tế là các nhà tiếp thị cảm thấy khó khăn trong việc đáp ứng việc thuật toán đang thay đổi liên tục từ phía Google cũng và các công cụ tìm kiếm khác. Tuy nhiên, cơ hội cho các marketer là không giới hạn. Đây là một trong số chúng:

Dữ liệu không giới hạn

Machine Learning có thể thu thập được những dữ liệu từ các nguồn tin hầu như không giới hạn. Với điều này, bạn có thể điều chỉnh thông điệp thương hiệu dựa trên hành vi của người tiêu dùng, cho phép tự động hóa và cá nhân hóa quy trình tiếp thị bằng việc để công cụ máy móc đưa ra các quyết định về nội dung, thực hiện và thậm chí là cả thiết kế trong thời gian thực.

Phân khúc khách hàng

Phân khúc khách hàng vô cùng quan trọng và là một công việc chiếm nhiều thời gian. Machine Learning được sử dụng để xác định các phân khúc trong thị trường mục tiêu của bạn cũng như tạo ra các micro-segments dựa trên các mẫu hành vi. Dữ liệu này giúp tạo ra một dự đoán để tiếp cận đến phân khúc khách hàng, cho phép bạn tiếp cận khách hàng thông qua quá trình mua bán của khách hàng.

Giá trị trọn đời của khách hàng

Giá trị trọn đời khách hàng được đánh giá dựa trên nhân khẩu học, lịch sử mua hàng, sự tương tác của họ với chiến dịch marketing, cũng như các hành động họ tương tác trên nền tảng. Machine Learning tính toán giá trị trọn đời khách hàng một cách chính xác, do đó nó cho phép bạn tối ưu hóa tương tác với khách hàng theo cách phù hợp nhất.

Tương lai của Machine Learning

Các nhà nghiên cứu tin rằng Machine Learning sẽ tiếp tục phát triển trên nền tảng thị trường di động, sẽ xuất hiện trong hầu hết các ứng dụng, thiết bị trợ giúp kỹ thuật số và AI cũng như trong toàn ngànhcông nghệ. Nó thậm chí có thể gia nhập vào lĩnh vực máy bay không người lái và ô tô tự lái.

Tuy nhiên, nhu cầu cần nhiều hơn dữ liệu và thuật toán đang tăng cao, bạn có thể mong chờ những công cụ Machine Learning trở nên có sẵn. Đây là một tin tốt với một số người, tuy nhiên điều quan trọng vẫn là chúng ta luôn phải học hỏi từ những gì đang có để có thể điều chỉnh chính xác quy trình marketing cũng như tránh những rủi ro có thể xuất hiện.

Lời khuyên cho việc thích ứng với Machine Learning

Machine Learning đang trên đà tăng trưởng, cùng với nó, những công cụ mới và thuật toán cũng đang được tung ra mỗi năm, chính vì vậy, điều quan trọng là những doanh nghiệp phải biết điều chỉnh quy trình cho phù hợp. Tầm quan trọng của nội dung, xây dựng liên kết, chiến dịch PPC và SEO đều đã được đề cập ở trên, tuy nhiên để có thể tận dụng được tất cả các cơ hội, bạn cũng phải:

Tạo một trang web tương thích với mọi thiết bị

Có một respontive web với thời gian tải nhanh, hỗ trợ nhiều medias, và thân thiện với mobile là rất quan trọng đến xếp hạng trên Google. Nghiên cứu đã chỉ ra rằng việc cải thiện thiết kế web có thể tăng đáng kể lưu lượng truy cập của bạn. Phải đảm bảo rằng bạn thực hiện được nhiều loại kiểm tra trên trang web và giữ được người sử dụng mọi lúc.

Tối ưu hóa tìm kiếm địa phương

Để xếp hạng cao trên Google, bạn cần phải tối ưu hóa tìm kiếm địa phương. Điều này có nghĩa là nên tập trung vào danh sách kinh doanh với tên chính xác, địa chỉ, đường dẫn website, và các thông tin chi tiết của công ty trên một loạt các nền tảng, đáng chú ý nhất là Yelp, Google My Business và Yellow Pages.

Sẵn sàng cho việc tìm kiếm từ khóa bằng giọng nói

Sự kết hợp của Machine Learning và tìm kiếm bằng giọng nói đã tạo nên một Conversational Search Term, thứ mà doanh nghiệp nào cũng phải có nếu muốn được xếp hạng cao trên Google. Ngoài việc xếp hạng những từ khóa dài, cũng cần cân nhắc việc tạo nội dung để giải đáp những câu hỏi của khách hàng thông qua đàm thoại.

Tham khảo thêm: Việc làm machine learning job in vietnam lương 3000 USD

Luôn cập nhật xu hướng mới

Công nghệ thay đổi không ngừng, điều quan trọng nhất lúc này là luôn giữ cho mình được cập nhật những tin tức mới nhất, nếu không muốn bị bỏ lại phía sau.

Sự kiện DIGITAL MARKETING 2018 LANDSCAPE sẽ đem đến cái nhìn toàn diện cho các Marketer thông qua các chủ đề:

🔆Topic 1: Xu hướng Digital Marketing 2018 và thực trạng truyền thông số ở Việt Nam
🔆 Topic 2: Công việc thực sự của một Digital Marketer và đánh giá hiệu quả của chiến dịch Marketing
🔆 Topic 3: Sử dụng Machine Learning để tối đa hóa doanh thu từ Digital Marketing như thế nào?
🔆 Topic 4: Ứng dụng Marketing Automation vào việc cải thiện tỉ lệ chuyển đổi

 

Những sự kiện đáng chú ý của Meet Up

👑 All about Product Management

👑 Dùng React Native làm một ứng dụng như Uber/Grab trong 3 giờ: https://meetup.vn/e/qIW

👑 Digital Marketing 2018 lanscape: https://meetup.vn/e/bpa

👑 Bắt đầu nghiên cứu Big Data từ đâu và như thế nào? https://meetup.vn/e/1lH

👑 Bắt đầu nghiên cứu AI từ đâu và như thế nào? https://meetup.vn/e/auG
👑 Facebook Marketing 2018: https://meetup.vn/e/CAs

👑 Thiết kế hệ thống E-Commerce yêu cầu ổn định và khả năng mở rộng: https://meetup.vn/e/XKV.

 

TopDev

Developer Việt đang ở đâu trên bản đồ năng lực lập trình thế giới?

Theo nghiên cứu mới nhất của HackerRank, Việt Nam xếp thứ 23 thế giới về năng lực developer, còn theo kết quả mới nhất trên đấu trường CodeFights thì developer Việt Nam cũng đang chiếm giữ nhiều vị trí dẫn đầu. Có thể khẳng định một điều chắc chắn rằng, năng lực của developer Việt Nam không hề thua kém bạn bè quốc tế.

Với sự phát triển vũ bão của công nghệ đã mở ra một thị trường vô cùng tiềm năng cho các developer phát triển. Trong đó, Việt Nam luôn được đánh giá là một trong những “mỏ vàng” về nhân lực IT trẻ, chất lượng. Do đó, ngày càng có nhiều công ty về công nghệ đã “chọn mặt gửi vàng” tại thị trường Việt Nam, và IT Consultis – công ty chuyên cung cấp giải pháp kỹ thuật số đa quốc gia, cũng đã lựa chọn như vậy.

Cùng TopDev trò chuyện cùng Mr Thomas Guillemaud – Co-founder & COO của IT Consultis phân tích những ưu – nhược điểm của developer Việt Nam hiện nay.

1. Anh có thể giới thiệu đôi nét về bản thân cũng như về IT Consultis được không?

Tôi là Thomas Guillemaud – Co-founder & COO của IT Consultis, là một digital agency được thành lập vào năm 2011 bởi 3 thành viên là Yoan Rigart-Lenisa, Aurelien Rigart và tôi. Chỉ trong 6 năm, IT Consultis đã phát triển nhanh chóng với đội ngũ hơn 60 chuyên gia trong  lĩnh vực digital, đến từ nhiều quốc gia trên thế giới. Hiện nay, công ty có 3 văn phòng ở TP. Hồ Chí Minh – Việt Nam, Thượng Hải – Trung Quốc và Singapore. Chúng tôi đã xây dựng văn phòng tại Việt Nam từ 18 tháng trước và đã có mặt tại Singapore từ tháng 11 năm 2017.

IT Consultis chuyên nghiên cứu và cung cấp các dịch vụ như triển khai giải pháp digital, tư vấn chiến lược cho dự án, phát triển toàn diện website, ứng dụng mobile, thương mại điện tử và trải nghiệm điểm bán hàng. Khách hàng của công ty đều là các tổ chức và thương hiệu đa quốc gia như: GAP, Zara, Porsche, Decathlon, Budweiser, Leica, v.v

Công ty cũng đặt kì vọng sẽ trở thành Digital agency độc lập hàng đầu cho các thương hiệu quốc tế tại Châu Á vào năm 2020.

2. Anh có thể giới thiệu một sản phẩm nổi bật mà công ty hiện đang làm?

Như các bạn đã biết là IT Consultis vốn có văn phòng chính tại Trung Quốc, một trong những sản phẩm nổi bật mà IT Consultis từng tham gia là WeChat, một ứng dụng cực kì nổi tiếng tại thị trường Trung Quốc và trên thế giới, với nhiều tính năng nổi bật cũng như tích hợp các mini web bên trong nó.

WeChat là một siêu ứng dụng bởi nó có rất nhiều hệ thống kết hợp với nhau từ gọi taxi cho đến cả việc mua hàng online. Nói cách khác, người dùng có thể làm rất nhiều thứ chỉ với một ứng dụng. Cụ thể nhiệm vụ của chúng tôi chính là thực hiện các sản phẩm bên trong siêu ứng dụng Wechat này đồng thời đảm bảo sản phẩm trở nên bắt mắt người dùng. (cười)

 

3. Tại sao IT Consultis lại chọn Việt Nam là điểm đến thứ 2 ?

Đầu năm 2016, công ty tìm kiếm một thị trường đa dạng và năng động, đặc biệt là nơi có nguồn lao động chất lượng để mở rộng quy mô kinh doanh, đa quốc gia, vươn ra Châu Á. Và Việt Nam trở thành một lựa chọn tuyệt vời bởi con người, văn hóa cũng như những chính sách kinh doanh ở đây.

4. Theo anh ưu điểm của thị trường developer Việt Nam là gì?

Việt Nam và Trung Quốc khá gần nhau do đó mà khung giờ làm việc cũng không có quá nhiều khác biệt giữa hai văn phòng. Chính vì vậy, dù làm việc ở văn phòng nào thì vẫn có thể hoạt động như một team thật sự và việc quản lí cũng trở nên hiệu quả hơn. Hơn nữa tôi cũng cực kỳ yêu mến đất nước và con người Việt Nam.

Bên cạnh đó, ở Trung Quốc vấn đề chủ yếu là từ hệ thống giáo dục. Bởi nhà trường tập trung vào Java, .Net trong khi IT Consultis thì chọn làm việc với những công nghệ open source như React. Do đó để thuê những developer chuyên về các ngôn ngữ “hiếm” trong thị trường Trung Quốc sẽ tốn chi phí rất cao. Và như vậy IT Consultis không còn lựa chọn khác ngoài nâng giá dịch vụ, và điều đó hoàn toàn không có lợi cho khách hàng.

5. Công ty của anh có gặp khó khăn gì trong việc tuyển dụng tại Việt Nam?

Tôi nghĩ vấn đề tìm kiếm một ứng viên phù hợp luôn rất khó tại mọi thị trường chứ không riêng gì ở Việt Nam. Khi so sánh với thị trường Trung Quốc thì tuyển dụng tại Việt Nam dễ dàng hơn, do ở Việt Nam, các bạn đã có kinh nghiệm làm việc outsource với các dự án của nước ngoài nên các ứng viên thường thích nghi tốt hơn so với thị trường Trung Quốc.

Chúng tôi có mở văn phòng tại Singapore tập trung vào tìm kiếm khách hàng và mở rộng thị trường trong khi văn phòng Việt Nam thì tập trung vào việc phát triển sản phẩm và thu hút nguồn nhân lực giỏi tại đây. Tôi tin rằng Việt Nam sẽ phát triển rất nhanh nhờ vào các chính sách hội nhập rất tích cực.

Vấn đề khó khăn nhất nằm ở việc giao tiếp đòi hỏi các ứng viên phải có khả năng nói tiếng Anh bởi IT Consultis là công ty đa văn hóa với hơn 14 quốc tịch khác nhau, nên việc tìm kiếm được một ứng viên vừa có kĩ năng đồng thời lại thành thạo ngoại ngữ cũng cần thời gian.

IT Consultis hiện có 60 nhân viên với 14 quốc tich khác nhau,với 3 văn phòng tại Việt Nam, Trung Quốc và Singapore, đồng thời có đại diện làm việc tại New Zealand và Pháp.

Dù vậy,  IT Consultis hiện tại rất hài lòng khi chiêu mộ được nhiều tài năng chủ chốt phù hợp với yêu cầu và văn hoá làm việc của công ty.

6. Anh có lời khuyên nào cho developer tại Việt Nam không?

Tôi nghĩ rằng lời khuyên tốt nhất mà tôi có thể dành cho các bạn là hãy luôn tò mò, bạn cần liên tục cập nhật kiến thức, xu hướng thị trường. Bạn nên nghiêm túc và đam mê công việc của bạn. Và đó là cách bạn có thể vừa có niềm vui mà có thể phát triển sự nghiệp của mình. Bởi vì nếu bạn vẫn còn thiếu định hướng bạn sẽ không thể tồn tại và theo kịp sự phát triển của ngành. Bạn phải luôn luôn học hỏi và áp dụng nhanh hơn những người khác. 

7. Vậy anh đánh giá cao những kỹ năng nào ở một developer?

Công ty luôn rất chú trọng vào giá trị sản phẩm và con người thế nên yếu tố hàng đầu là tinh thần trách nhiệm. Mặt khác, IT Consultis rất quan tâm tới chất lượng sản phẩm bởi sự đòi hỏi gắt gao từ phía khách hàng. Mỗi developer cần phải hiểu rõ vì sao họ cần phải thực hiện những yêu cầu công việc với tiêu chuẩn cao như vậy. Ngoài ra khả năng đưa ra quyết định cũng rất quan trọng. Việc mắc sai lầm không phải điều trầm trọng bởi các bạn sẽ học và cải thiện từ những trải nghiệm này.

Các bạn cũng phải luôn có mặt và hỗ trợ cho team theo tinh thần làm việc nhóm.

Công ty luôn hướng tới cái mới, liên tục phát triển và thay đổi, do đó khi đứng trước các công nghệ tiên tiến, IT Consultis luôn sẵn sàng và hoàn toàn có thể ứng dụng ngay lập tức.

Chính trực cũng là một phẩm chất vô cùng quan trọng, bởi các bạn làm việc trong một nhóm nên việc các thành viên tin tưởng và tôn trọng lẫn nhau là cần thiết.

Cuối cùng là các developer cần phải hoà nhập với văn hoá công ty bởi sự đóng góp nhỏ bé của mỗi thành viên sẽ tạo nên những thay đổi vô cùng mạnh mẽ và quan trọng

8. Câu hỏi cuối cùng, theo anh vì sao các bạn developer nên chọn IT Consultis là nơi làm việc lý tưởng ?

IT Consultis vẫn đang tìm kiếm những bạn developer tài năng, thông qua các sự kiện và hội thảo trong ngành IT nhằm có thể thu hút nhiều ứng viên đa dạng hơn cũng như tạo thương hiệu và mang hình ảnh công ty – một trong những nơi làm việc hàng đầu đến gần với ứng viên hơn. Ngoài ra, công ty cũng duy trì và cải tiến nhiều chính sách phúc lợi đặc biệt nhằm giữ chân nhân tài cũng như tạo động lực cho các bạn phát triển và cống hiến cho công ty như: các phúc lợi được bảo đảm, văn hóa làm việc cởi mở, năng động, cơ hội được làm việc trong môi trường đa quốc gia, du lịch thường niên, và tham gia các khóa đào tạo kỹ năng nội bộ … Không chỉ là nơi làm việc, IT Consulits quan tâm đến mỗi cá nhân và thành viên trong tổ chức, sự phát triển của bạn là sự phát triển của công ty, và bạn sẽ nhận được tương xứng với những nỗ lực và đóng góp của mình. IT Consultis chính là gia đình thứ hai của bạn.

Cảm ơn anh về những chia sẻ thú vị của mình

TopDev

5 tip về GitHub cho lập trình viên

GitHub là gì? Những lợi ích GitHub mang lại cho lập trình viên

Tháng 10.2017 là kỷ niệm 5 năm làm việc tại GitHub.  Cách đây 5 năm, tôi là một kế toán viên nhiệt tình, người không biết gì về lập trình, hãy để tôi nói về việc sử dụng Git và GitHub.

Bây giờ tôi là một nhà khoa học về dữ liệu, người biết rất nhiều điều về Git & GitHub. Đó là một phần nhờ vào việc học những công nghệ này mà tôi đã thực hiện chuyển đổi nghề nghiệp này.

Mẹo số 1: Thay text editor mặc định kết hợp với Git

Đối với nhiều người, trình text editor mặc định khi sử dụng Git từ thiết bị terminal là VIM. VIM có thể rất tệ hay đáng sợ đối với những người mới hoặc thậm chí là với các hacker mới vào nghề. Hoặc thậm chí đối với các hacker có nhiều kinh nghiệm @ laacked

Nếu bạn gặp phải vấn đề (bạn sẽ thấy ở tip 4), bạn sẽ bị đuổi ra khỏi VIM để khắc phục sự cố và bạn cần phải biết các lệnh VIM cụ thể để chỉnh sửa tài liệu doc. Trong hơn một năm tôi đã có một sticky note tại nơi làm việc để nhắc nhở các lệnh VIM cơ bản như i (chỉnh sửa) và: wq (lưu và bỏ). Để tránh những giọt nước mắt tiềm ẩn, bạn chỉ có thể thay đổi trình text editor mặc định.

Để thay đổi trình text editor của bạn sang Atom, Sublime, hoặc TextMate, hãy thực hiện theo các hướng dẫn trong GitHub Help này.

Bạn cũng nên chắc chắn rằng các phím tắt của bạn được thiết lập để bạn có thể mở các tập tin trong trình text editor ưa thích của bạn trực tiếp từ thiết bị đầu cuối sử dụng sử dụng subl . hoặc atom .Hãy kiểm tra các tài liệu này để thiết lập truy cập Atom từ thiết bị đầu cuối của bạn và các tài liệu này để thiết lập Sublime.

Tham khảo việc làm GIT lương cao tại TopDev

Mẹo số 2: Thay đổi dotfile

Tôi đã không tìm hiểu về dotfile cho đến khi tôi hack và sử dụng Git & GitHub trong nhiều năm. Tôi vẫn hối tiếc rằng tại sao không biết về điều này sớm hơn!

Dotfiles cho phép bạn tùy chỉnh terminal prompt để bạn có thể nhìn thấy những gì git branch của bạn đang ở & nếu bạn có thay đổi không được yêu cầu. IT’S GENIUS! Tôi lấy my dotfiles từ đồng nghiệp (John Nunemaker) nhưng nếu bạn tìm kiếm GitHub cho ‘dotfiles’, bạn sẽ tìm thấy nhiều tùy chọn.

Mẹo số 3: Cài đặt Hub

Hub là một công cụ dòng lệnh làm cho nó dễ dàng hơn để sử dụng GitHub. Thường thì tôi sẽ làm việc trên một terminal của tôi nhưng muốn xem các vấn đề hoặc kéo các yêu cầu về GitHub. Vì vậy, tôi sẽ mở một tab trình duyệt, sau đó bị quấy rầy bởi email / twitter / a puppy – và mười phút sau, hãy gõ vào địa chỉ terminal GitHub.

>>> Xem thêm: GitHub là gì? Những lợi ích GitHub mang lại cho lập trình viên

Bằng cách gõ  hub browse trong terminal, nó sẽ tự động mở ra url của terminal trực tiếp trong trình duyệt của bạn để GitHub-ing phân tán miễn phí. 

Mẹo số 4: Thực hành hợp nhất các xung đột

Tôi phải thừa nhận rằng, đôi khi mình không thành thật về điều này. Tôi không thể nhớ số lần mà tôi đã từ bỏ một dự án hoặc kéo yêu cầu bởi vì tôi gặp phải nhiều vấn đề. Các tài liệu về cách sửa chữa chúng làm tôi sợ, và sau đó khi tôi đã ở trong VIM tôi chỉ muốn từ bỏ (xem hướng dẫn số 1).

Sau đó, tôi nhận ra rằng tôi cần phải đối mặt với nỗi sợ hãi của mình vì vậy tôi bắt đầu kho thực tiễn, tạo ra xung đột hợp nhất và dọc lướt qua các tài liệu hoặc xem video trên YouTube về cách khắc phục xung đột hợp nhất. Tôi đã làm điều đó một vài lần. Giờ đây bạn cũng có thể khắc phục các xung đột đơn giản trong giao diện người dùng GitHub do đó tiện dụng.

Bây giờ khi tôi gặp rắc rối với xung đột, tôi đỡ sợ và bình tĩnh thực hiện theo cách của tôi để loại bỏ từng vấn đề, biết rằng nhờ kiểm soát phiên bản, tôi không thể gây rối lên quá nhiều.

Practice

Mẹo số 5: Tạo trang GitHub

Trang GitHub là một trang web cá nhân hoặc dựa trên dự án mà GitHub sẽ lưu trữ miễn phí! Nó luôn giúp có một dự án thực tế để thúc đẩy GitHub để thực hành với các kỹ năng về Git và GitHub của bạn.

Tạo một trang web đơn giản sử dụng HTML, CSS và JavaScript từ một hướng dẫn code sau đó làm theo các bước để lưu trữ nó trên GitHub ở đây hoặc bạn có thể kiểm tra video này tôi đã làm một thời gian trở lại với hướng dẫn từng bước. Hoặc thử phương pháp Fork and Go.

Nguồn: TopDev via Freecodecamp

Tìm việc IT lương cao, đãi ngộ tốt trên TopDev ngay!

Tạo lại bố cục bài viết của Medium với CSS Grid

Khi nghĩ về CSS Grid, mọi người thường hình dung cách bố trí ảnh với Grid và các trang web hoàn thiện. Tuy nhiên, CSS Grid thực sự là một công nghệ tuyệt vời để đặt ra các bài báo hay, vì nó cho phép bạn làm những điều mà trước đây khó khăn để đạt được.

Trong bài viết này, tôi sẽ giải thích cách tạo lại bố cục của những bài viết nổi tiếng trên Medium bằng cách sử dụng CSS Grid.

Nội dung

Chúng ta sẽ bắt đầu với một tệp HTML cơ bản, chứa đựng loại nội dung mà bạn thường tìm thấy trong bài viết Medium. Ví dụ: tiêu đề, đoạn văn, phụ đề, hình ảnh, trích dẫn … Đây là một ví dụ:

<article>
<h1>Running any NPM package in the browser locally</h1>
<p>JavaScript has never had any official solution for distributing packages, and every web platform (Rails, Django etc) has their own idea of how to structure and package JavaScript. In the last few years NPM has started becoming the canonical way of distribution, with Webpack as the build system, but there’s no way to load NPM packages in the browser without a server-side component.</p>
<blockquote>
<p>Scrimba is a platform for interactive coding screencast where         
you can run the code at any moment in time.</p>
</blockquote>
<figure>
<img src="https://mave.me/img/projects/full_placeholder.png">
</figure>

Nếu bạn mở tệp này trong trang web mà không điều chỉnh bất kỳ bố cục nào, nó sẽ giống như sau:

Không thật sự đặc biệt. Vì vậy, hãy sửa nó bằng CSS Grid. Chúng tôi sẽ thực hiện từng bước để bạn có thể làm theo.

Thiết lập cơ bản cho lề

Điều đầu tiên chúng ta cần làm là đưa lưới vào bài viết và chia nó ít nhất thành ba cột.

article {
    display: grid;
    grid-template-columns: 1fr 740px 1fr;
}

Các cột đầu tiên và cuối cùng phản hồi và hoạt động như lề. Chúng sẽ chứa những khoảng trắng. Cột giữa được cố định ở 740 điểm ảnh và sẽ giữ nội dung của bài viết.

Lưu ý rằng chúng tôi không xác định các hàng bởi vì chúng sẽ đơn giản là cao để cần phải được để phù hợp với nội dung của họ. Mỗi khối nội dung trong bài viết (đoạn, hình ảnh, tiêu đề) sẽ có hàng riêng của nó.

Bước tiếp theo là đảm bảo tất cả nội dung trong grid bắt đầu ở dòng cột thứ hai theo mặc định.

article > * {
    grid-column: 2;
}

Bây giờ chúng ta có kết quả sau:

Chúng ta có thể thấy ngay sự khác biệt, vì khoảng trắng ở mỗi bên giúp cho văn bản dễ đọc hơn.

Tuy nhiên, hiệu ứng này có thể đạt được cũng dễ dàng bằng cách đặt thuộc tính lề trái và phải để tự động. Vậy tại sao lại phải sử dụng CSS Grid?

Bởi vì, vấn đề phát sinh khi chúng tôi muốn bắt chước các tính năng hình ảnh của Medium. Ví dụ: tạo hình ảnh có chiều rộng đầy đủ, như hình:

Nếu chúng ta đã sử dụng tự động lề là 0, điều này sẽ buộc chúng ta phải áp dụng lề âm lên hình ảnh để làm cho chúng chiếm toàn bộ chiều rộng trang web.

Với CSS Grid, chúng ta có thể dễ dàng chia ra, vì chúng ta sẽ chỉ sử dụng các cột để đặt chiều rộng. Để làm cho hình ảnh của chúng tôi chiếm toàn bộ chiều rộng chúng tôi sẽ chỉ cho nó cuộn từ dòng đầu tiên đến dòng cột cuối cùng.

article > figure {
    grid-column: 1 / -1;
    margin: 20px 0;
}

Chúng tôi cũng đặt lề trên đầu và cuối. Và sau đó chúng ta có một hình ảnh đẹp với toàn chiều rộng:

Mở rộng với nhiều cột hơn

Tuy nhiên, điều này không mang lại cho chúng ta tất cả, vì Medium có một vài bố cục khác mà chúng ta cần phải tính đến. Hãy nhìn vào một vài trường hợp điển hình:

Hình ảnh cỡ trung

Đây là tùy chọn hình ảnh giữa chế độ bình thường và chế độ toàn bộ chiều rộng, chúng ta sẽ gọi là một kích thước trung bình. Ví dụ:

Quote

Ngoài ra,Medium cũng đặt một đường thẳng đứng ở phía bên tay trái của bài viết nếu bạn thêm một lời dẫn:

Điều này đòi hỏi một cột nhỏ ở phía bên tay trái của grid. Để làm cho mọi thứ cân đối, chúng tôi cũng sẽ thêm một cột tương tự ở phía bên tay phải.

Vì vậy, để hỗ trợ cả quote và hình ảnh mid-sized, chúng ta cần chia toàn bộ chiều rộng thành bảy cột thay vì ba, như sau:

article {
    display: grid;
    grid-template-columns: 1fr 1fr 10px 740px 10px 1fr 1fr;
}

Nếu chúng tôi sử dụng Chrome inspector , chúng tôi thực sự có thể thấy các đường grid bên dưới (xem hình bên dưới). Thêm vào đó, tôi đã thêm các con trỏ để thực hiện để làm cho nó dễ dàng hơn để nhận ra các cột khác nhau.

Điều đầu tiên chúng ta cần làm là làm cho tất cả các mục mặc định bắt đầu ở dòng cột thứ tư thay vì ở thứ hai.

article > * {
    grid-column: 4;
}

Sau đó chúng ta có thể tạo hình ảnh cỡ trung bằng cách:

article > figure {
    grid-column: 2 / -2;
    margin: 20px 0;
}

Đây là cách mà Chrome đã hoạt động:

Các quote dễ dàng được tạo ra bằng cách làm như sau:

article > blockquote {
    grid-column: 3 / 5;
    padding-left: 10px;
    color: #666;
    border-left: 3px solid black;
}

Chúng tôi làm cho nó kéo dài từ thứ ba đến thứ ba cho dòng cột thứ năm. Chúng tôi cũng thêm padding-left: 10px; để văn bản dường như bắt đầu ở dòng cột thứ tư (cột thứ ba rộng 10 pixel). Đây là cách nó trông trên grid.

https://cdn-images-1.medium.com/max/1000/1*SiTYghcUyboIplQOfFQTqA.png

Sidemark

Medium có một cách khá tốt đẹp để báo hiệu nội dung nào trong bài viết cần làm nổi bật nhất. Văn bản chuyển thành màu xanh lá cây, và nó sẽ là một điểm nổi bật nhất ở phía bên tay phải.

Các văn bản nổi bật hàng đầu sẽ rất khó để tạo ra nếu chúng ta sử dụng margin: 0 auto; thay vào đó là CSS Grid. Điều này là do yếu tố hoạt động khác với tất cả các yếu tố khác trong bài viết. Thay vì xuất hiện trên một đường thẳng, giả sử xuất hiện ở phía bên tay phải của phần tử trước đó. Nếu chúng ta không sử dụng CSS Grid thì có lẽ chúng ta phải bắt đầu lộn xộn với position: absolute; để làm cho công việc này.

Nhưng với CSS Grid thì thật đơn giản. Chúng ta sẽ làm cho loại nguyên tố đó bắt đầu trên dòng cột thứ tư.

.aside {
    grid-column: 5;
}

Việc này sẽ tự động đặt nó ở bên phải của bài viết:

Lưu ý: Tôi đã không đánh dấu văn bản màu xanh lá cây,

vì điều đó không có gì liên quan đến CSS Grid.

Và đó là nó! Bây giờ chúng tôi đã tạo lại hầu hết cách bố trí bài viết của Medium bằng cách sử dụng CSS Grid. Và nó đã được thực hiện khá dễ dàng. Tuy nhiên, lưu ý rằng chúng tôi đã không chạm đến những phản hồi, vì điều đó đòi hỏi toàn bộ bài viết mới.

Nguồn: TopDev via Freecodecamp

Dialogflow – Đưa Chatbot dự báo thời tiết lên tầm cao mới (phần 1)

Cố gắng làm hài lòng tất cả mọi người là điều không thể

Trong bài viết đầu tiên, tôi đã giới thiệu với chúng ta các khái niệm Agent, Intent, Entity, và ở bài viết thứ hai là cách để tạo một Chatbot dự báo thời tiết rất, rất đơn giản từ các Prebuilt Agents. Trong phần một bài viết này, tôi muốn quay lại với các khái niệm quan trọng khác trong Dialogflow bao gồm:

  1. Fulfillment
  2. Context
  3. User say
  4. Action và Parameter

Nào hãy cùng nhau bắt đầu!

Fulfillment

Như hình ở trên, trong nội dung các intents về thời tiết, phần response là hoàn toàn trống rỗng, nên mỗi khi người dùng hỏi Chatbot thì nó không có gì để trả lời lại:

Và tôi đã phải bổ sung một vài “biện pháp nghiệp vụ” (code) thì sau đó mọi thứ đã tốt hơn

Theo định nghĩa của từ điển, FULFILLMENT là danh từ có nghĩa là thực hiện, hoàn thành, đáp ứng. Trong tài liệu của Dialogflow, Fulfillment (hay Webhook) là một API ở Backend mà chúng ta cần cung cấp để Dialogflow gọi đến khi cần xử lý nghiệp vụ trước khi Dialogflow trả lời lại cho người dùng.

Tuy nhiên, với cách mà tôi đang thực hiện việc Fulfillment cho Chatbot dự báo thời tiết hoàn toàn khác với cách ở trên, cách mà tôi đang thực hiện là

Theo tôi cách thực hiện Fulfillment nào cũng có cái hay của riêng nó.

Context

Theo từ điển, CONTEXT có nghĩa là bối cảnh, ngữ cảnh, phạm vi. Lấy ví dụ trong Chatbot, người dùng vừa hỏi “Thời tiết ở Hà Nội” và đã nhận được câu trả lời, họ đặt tiếp thêm một câu hỏi nữa “Vậy ở Đà Nẵng thì thế nào?”, trường hợp nếu không có context Chatbot không thể nào hiểu được người dùng đang hỏi vấn đề gì liên quan đến Đà Nẵng, còn trường hợp có context Chatbot sẽ biết ngay người dùng đang hỏi tiếp về thời tiết của Đà Nẵng.

Trong một Intent của Dialogflow có input context và output context như hình dưới đây:

Input context có nhiệm vụ giúp Dialogflow xác định Intent này chỉ được thực hiện khi đang có các context tương ứng

Mặc định, một context của Dialogflow sẽ hết hạn sau 5 lần requests hoặc 10 phút kể từ khi nó được tạo ra. Như trong hình, số 2 ở context weather có nghĩa là context này sẽ hết hạn sau 2 lần requests (hoặc sau 10 phút)

User say

Có 2 loại user say trong Dialogflow

  • @ Là những mẫu (template) văn bản
  • “ Là những ví dụ (example) mà người dùng sẽ có thể nói

Mặc dù Dialogflow hỗ trợ cả hai loại hình trên, nhưng khuyến cáo chúng ta chỉ nên sử dụng loại số 2 (example) vì nó giúp cho việc học cũng như xử lý của Dialogflow hoạt động nhanh & tối ưu hơn.

Ngoài ra, chúng ta hãy ghi nhớ khi tạo intents, nếu nhập được càng nhiều các ví dụ ở user say thì càng giúp cho Chatbot càng “thông minh” hơn.

Action và Parameter

Trong source code Chatbot dự báo thời tiết củ chuối lần trước, nếu người dùng gửi nội dung không liên quan đến thời tiết thì luôn gặp lỗi

(Chắc có vài bạn đọc đã *b*e*e*p* rồi đúng không nào?!)

Lý do là tôi đã luôn cho rằng mọi văn bản mà người dùng đưa vào đều là hỏi thời tiết mà bỏ qua việc kiểm tra.

Action (hành động) chính là giá trị mà Dialogflow hỗ trợ để giúp lập trình phân biệt được trong trường hợp này đâu là các văn bản liên quan đến thời tiết và đâu là các văn bản khác. Đi kèm với Action là các Parameter (tham số)

Mỗi tham số là giá trị được trích xuất từ văn bản của người dùng thông qua việc sử dụng các entities tương ứng, ví dụ:

  • Tham số address, kiểu @sys.location, khi đó, trong văn bản của người dùng có Hà Nội, hay Đà Nẵng, Tokyo, New York, Paris,… thì sẽ được Dialogflow xử lý để gán vào cho tham số address
  • Tham số date-time, kiểu @sys.date-time, khi đó, trong văn bản của người dùng mà có Ngày mai, Thứ 6 này, Tuần tới,… thì sẽ được Dialogflow xử lý để gán vào cho tham số date-time
  • …

Khi định nghĩa các tham số, có các thông tin mà chúng ta cần quan tâm (^^ Để ý nhé)

  • Constant: Là giá trị mà chúng ta nhập vào ô value, tham số sẽ luôn luôn mang giá trị này
  • Default: Là giá trị mặc định được gán cho tham số nếu trong văn bản của người dùng không đề cập đến
  • IsList: Ví dụ người dùng hỏi thời tiết của Hà Nội, Đà Nẵng và Paris ngay trong một văn bản, thì IsList giúp Dialogflow xác định cả 3 giá trị sẽ được gán vào cho cùng 1 tham số
  • Required: Khi required được lựa chọn, nếu trong văn bản của người dùng mà Dialogflow không tìm được giá trị để gán vào cho tham số, Dialogflow sẽ đánh dấu để yêu cầu người dùng đưa vào.
    • Ví dụ tham số address là required, nhưng người dùng chỉ nhập vào là: Ngày mai thời tiết thế nào? Thì Dialogflow sẽ đánh dấu văn bản này chưa đầy đủ, còn thiếu địa chỉ.

Bắt đầu thấy rối rồi! Tập trung nhé, vì các tham số là cái mà chúng ta sẽ lập trình để xử lý. Sai con toán là bán luôn cái máy tính…

  • Kiểu @sys.date rất đặc biệt, khi văn bản của người dùng có ngày không đầy đủ, ví dụ Thứ 6, hay ngày 2 tháng 3,… thì Dialogflow sẽ tìm ngày trong tương lai gần nhất với văn bản. Tuy nhiên, bạn có thể chỉ định thêm các thông tin như:
    • $date.recent, trường hợp này Dialogflow sẽ tìm ngày gần nhất trong quá khứ
    • $date.partial, trường hợp này Dialogflow sẽ trả về dữ liệu ngày mà không có những thông tin thiếu, ví dụ ngày 2 tháng 3 thì Dialogflow sẽ trả về giá trị “UUUU-03-02”

Khi backend của bạn xử lý các tham số, sẽ có những trường hợp

  • Original: Ví dụ tham số của bạn kiểu @sys.number, khi người dùng nói “Hai” thì giá trị bạn nhận được là số 2, còn giá trị ở original vẫn là chuỗi “Hai”
  • Để lấy một tham số đã được lưu ở context thì sử dụng cách #context_name.parameter_name

Tham khảo thêm các vị trí tuyển dụng lập trình it lương cao tại Topdev.

Nguồn: Dialogflowvn

Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 1)

JS Template literals

Template literals là gì? Nó cho phép lập trình viên có thể nhúng biểu thức JavaScript (hoặc multi-line string, biến, hàm…) bên trong chuỗi string một cách dễ dàng. Thông thường cú pháp khai báo string là dấu ' hoặc " , đối với template literals thì ta khai báo bằng dấu ` gọi là dấu back-tick. Nó giúp chúng ta làm việc với string dễ dàng hơn trước, muốn sử dụng nó thì dùng ${bien} . Xem ví dụ bên dưới:

var fName = 'Peter', sName = 'Smith', age = 43, job= 'photographer';
var a = 'Hi, I\'m ' + fName + ' ' + sName + ', I\'m ' + age + ' and work as a ' + job + '.';
var b = `Hi, I'm ${ fName } ${ sName }, I'm ${ age } and work as a ${ job }.`;

Điều này giúp code của bạn dễ đọc hơn. Bạn có thể đặt bất cứ điều gì bên trong của dấu ngoặc nhọn: biến, phương trình, hoặc các function call.

Block Scoping

Trong JS, scope đề cập đến ngữ cảnh hiện tại trong code của bạn. Scope có thể được xác định trên globally hoặc locally . Hiểu về scope trong js là chìa khóa để viết code chống lỗi và trở thành developer tốt hơn. Bạn sẽ hiểu được ở đâu variables/functions có thể được truy cập, có thể thay đổi scope của ngữ cảnh trong code của bạn, nói nôm na là có thể viết code nhanh hơn và dễ maintain hơn, cũng như debug dễ dàng hơn.

  • Block Scoped là phạm vi trong một khối, nghĩa là chỉ hoạt động trong phạm vi được khai báo bời cặp {...}.
  • ở Es6 người ta sử dụng biến let và const để khai báo cho biến trong cặp {}

Xem việc làm javascript đãi ngộ tốt trên TopDev

Khai báo ‘Let’

Điều này cũng tương tự như var nhưng có một vài khác biệt đáng chú ý. Vì với phạm vi một khối, một biến mới có cùng tên có thể được khai báo mà không ảnh hưởng đến các biến bên ngoài.

var a = 'car' ;
{
    let a = 5;
    console.log(a) // 5
}
console.log(a) // car

Vì nó bị ràng buộc thành một block scope, nó giải quyết câu hỏi này:
“Đầu ra là gì, và làm thế nào bạn sẽ làm cho nó hoạt động như chúng ta mong đợi?”

for (var i = 1; i < 5; i++){
    setTimeout(() => { console.log(i); }, 1000);
}

Trong trường hợp này nó xuất ra “5 5 5 5 5” bởi vì biến i thay đổi trên mỗi lần lặp.

Nếu bạn chuyển var thành let sau đó tất cả mọi thứ thay đổi . Bây giờ, mỗi vòng lặp tạo ra một block scope mới với giá trị bị ràng buộc với vòng lặp đó. Đó là mặc dù bạn đã viết:

{let i = 1; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 2; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 3; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 4; setTimeout(() => { console.log(i) }, 1000)} 
{let i = 5; setTimeout(() => { console.log(i) }, 1000)}

Một khác biệt giữa var và let  là let không bị “hoisted” như var .

Note: hoisted nghĩa là trong Javascript bạn có thể định nghĩa một biến sau khi sử dụng nó, hay nói cách khác một biến có thể được sử dụng trước và định nghĩa sau.

{ 
    console.log(a); // undefined
    console.log(b); // ReferenceError
    var a = 'car';
    let b = 5;
}

Bởi vì hành vi của nó chặt chẽ và dễ dự đoán hơn, một số người đã nói rằng bạn nên sử dụng let thay vì var, trừ khi bạn đặc biệt cần hoisting hoặc looser scoping mà var khai báo.

Const

Nếu bạn muốn khai báo một biến không đổi trong JavaScript trước đó, nó đã được quy ước để đặt tên cho biến trong block cap. Tuy nhiên, điều này sẽ không secure biến – nó chỉ cho phép các developer khác biết rằng đó là một hằng số và không nên thay đổi.

Bây giờ chúng ta khai báo biến const.

{
    const c = "tree";
    console.log(c);  // tree
    c = 46;  // TypeError! 
}

const  không làm cho biến không thể thay đổi, mà nó chỉ gán cứng giá trị cho biến. Nhưng nếu bạn có một công việc phức tạp (object hay array), thì giá trị vẫn có thể được sửa đổi.

{
    const d = [1, 2, 3, 4];
    const dave = { name: 'David Jones', age: 32};
    d.push(5); 
    dave.job = "salesman";
    console.log(d);  // [1, 2, 3, 4, 5]
    console.log(dave);  // { age: 32, job: "salesman", name: 'David Jones'}
}

Vấn đề với block scoping function

Các khai báo Function bây giờ được chỉ định để ràng buộc block scoping.

{
    bar(); // works
    function bar() { /* do something */ }
}
bar();  // doesn't work

Vấn đề xảy ra khi bạn khai báo một function bên trong câu lệnh if.
Cùng xem xét điều này:

if ( something) {
    function baz() { console.log('I passed') }
} else {
    function baz() { console.log('I didn\'t pass') } 
} 
baz();

Trước ES6, cả hai khai báo function đã được “hoisted” và kết quả sẽ là ‘I didn\’t pass’. Bây giờ chúng ta nhận được ‘ReferenceError’, như baz luôn bị ràng buộc bởi block scope.

Spread

ES6 giới thiệu ... operator, được gọi là ‘spread operator’ (Spread Operator cho phép chuyển đổi một chuỗi thành nhiều argument (trong trường hợp gọi với hàm) hoặc thành nhiều phần tử (cho array). Thêm vào nữa nó cũng cho phép làm nhiệm vụ destructure. Operator này có syntax là 3 dấu chấm ...). Nó có hai cách sử dụng chính: truyền một array hay object vào một array hay object mới, và đưa nhiều tham số vào một array.

Trường hợp sử dụng đầu tiên là trường hợp bạn dễ gặp phải nhất, vì vậy chúng ta sẽ hãy xem xét nó đó đầu tiên.

let a = [3, 4, 5];
let b = [1, 2, ...a, 6];
console.log(b);  // [1, 2, 3, 4, 5, 6]

Điều này có thể rất hữu ích cho việc đẩy một tập các biến sang một function từ một array.

function foo(a, b, c) { console.log(`a=${a}, b=${b}, c=${c}`)} 
let data = [5, 15, 2];
foo( ...data); // a=5, b=15, c=2

Một object cũng có thể được truyền vào, nhập mỗi cặp giá trị quan trọng vào object mới.

let car = { type: 'vehicle ', wheels: 4};
let fordGt = { make: 'Ford', ...car, model: 'GT'};
console.log(fordGt); // {make: 'Ford', model: 'GT', type: 'vehicle', wheels: 4}

Một tính năng khác của spread operator là nó tạo ra một array hoặc object mới. Ví dụ dưới đây tạo ra một array mới cho b, nhưng c chỉ refer đến cùng một array.

let a = [1, 2, 3];
let b = [ ...a ];
let c = a;
b.push(4);
console.log(a);  // [1, 2, 3]
console.log(b);  // [1, 2, 3, 4] referencing different arrays
c.push(5);
console.log(a);  // [1, 2, 3, 5] 
console.log(c);  // [1, 2, 3, 5] referencing the same array

Trường hợp còn lại là thu thập các biến với nhau thành một array. Điều này rất hữu ích khi bạn không biết có bao nhiêu biến được truyền vào một function.

function foo(...args) {
    console.log(args); 
} 
foo( 'car', 54, 'tree');  //  [ 'car', 54, 'tree' ]

Tham số mặc định

Các Function có thể được định nghĩa cùng các tham số mặc định. Thiếu hoặc không xác định giá trị được khởi tạo với giá trị mặc định. Hãy cẩn thận – bởi vì giá trị null và false bị ép buộc là 0.

function foo( a = 5, b = 10) {
    console.log( a + b);
} 
foo();  // 15
foo( 7, 12 );  // 19
foo( undefined, 8 ); // 13
foo( 8 ); // 18
foo( null ); // 10 as null is coerced to 0

Giá trị mặc định có thể nhiều định dạng hơn – chúng cũng có thể là các biểu thức hoặc các hàm.

function foo( a ) { return a * 4; }
function bar( x = 2, y = x + 4, z = foo(x)) {
    console.log([ x, y, z ]);
}
bar();  // [ 2, 6, 8 ]
bar( 1, 2, 3 ); //[ 1, 2, 3 ] 
bar( 10, undefined, 3 );  // [ 10, 14, 3 ]

Phần 2: Mẹo với ES6 và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn

TopDev via Freecodecamp

Việc làm IT mới nhất trên TopDev

Tại sao bạn nên sử dụng Python Generator

Tại sao bạn nên sử dụng Python Generator

Generator đã là một phần quan trọng của Python kể từ khi được giới thiệu với PEP 255.

Generator function cho phép bạn tuyên bố một function hoạt động giống như một iterator.

Chúng cho phép các lập trình tạo ra một iterator một cách nhanh chóng và dễ dàng.

Iterator là gì, bạn có thể yêu cầu?

Iterator là một đối tượng có thể lặp lại (looped). Nó được sử dụng để phản ánh một container dữ liệu để làm cho nó hoạt động giống như một đối tượng iterable. Có thể bạn đã sử dụng một vài đối tượng có thể lặp lại mỗi ngày: các string, list và từ điển để đặt tên cho một số.

Một iterator được định nghĩa bởi một class thực hiện các Iterator Protocol. Giao thức này chỉ ra hai phương pháp trong class: __iter__ và __next__.

Quay lại. Tại sao bạn thậm chí muốn tạo ra iterators?

  71 trích đoạn code Python cho các vấn đề hàng ngày của bạn

Tiết kiệm không gian bộ nhớ

Các iterator không tính toán giá trị của mỗi mục khi khởi tạo. Chúng chỉ tính toán nó khi bạn yêu cầu nó. Đây được gọi là lazy evaluation.

Lazy evaluation thực sự hữu ích khi bạn có một bộ dữ liệu cực lớn để tính toán. Nó cho phép bạn sử dụng dữ liệu ngay lập tức, trong khi cả bộ dữ liệu đang được tính.

Giả sử chúng ta muốn nhận được tất cả các số nguyên tố nhỏ hơn một số cực đại.

Trước tiên chúng ta xác định hàm kiểm tra nếu một số là số nguyên tố:

def check_prime(number):
    for divisor in range(2, int(number ** 0.5) + 1):
        if number % divisor == 0:
            return False
    return True

Sau đó, chúng ta định nghĩa class bao gồm phương thức __iter__  và __next__ :

class Primes:
    def __init__(self, max):
        self.max = max
        self.number = 1
    def __iter__(self):
        return self
    def __next__(self):
        self.number += 1
        if self.number >= self.max:
            raise StopIteration
        elif check_prime(self.number):
            return self.number
        else:
            return self.__next__()

Primes được khởi tạo với giá trị lớn nhất. Nếu số nguyên lớn tiếp theo lớn hơn mức max, iterator sẽ tăng một ngoại lệ StopIteration, kết thúc Iterator.

Khi chúng ta yêu cầu các element tiếp theo trong Iterator, nó sẽ tăng number một đơn vị và kiểm tra xem đó có là một số nguyên tố. Nếu không, nó sẽ gọi __next__ một lần nữa cho đến khi number đó là số nguyên tố. Một khi đạt được, Iterator trả về số.

Bằng cách sử dụng một Iterator, chúng ta không tạo ra một danh sách các số nguyên tố trong bộ nhớ của chúng ta. Thay vào đó, chúng tôi sẽ tạo ra số nguyên tố tiếp theo mỗi khi được yêu cầu.

Hãy thử nó:

primes = Primes(100000000000)
print(primes)
for x in primes:
    print(x)
---------
<__main__.Primes object at 0x1021834a8>
2
3
5
7
11
...

Mỗi lần lặp của đối tượng Primes gọi __next__ để tạo ra số nguyên tố tiếp theo.

Iterator chỉ có thể được lặp lại qua một lần. Nếu bạn cố lặp lại primes một lần nữa, sẽ không có giá trị nào được trả về và điều này hoạt động giống như một danh sách trống rỗng.

Bây giờ chúng ta đã biết iterator là gì và làm thế nào để tạo ra chúng, tiếp theo là về generator.

  Chuyển đổi Unicode dựng sẵn & tổ hợp với Python

Generator

Nhớ lại rằng generator function cho phép chúng ta tạo ra các iterator theo một cách đơn giản hơn.

Generator giới thiệu câu lệnh yield cho Python. Nó hoạt động giống như return vì nó trả về một giá trị.

Vậy là chúng ta đã tiết kiệm được trạng thái của function. Trong lần tiếp theo function được gọi, vẫn tiếp tục từ nơi dừng lại, với cùng các giá trị biến mà nó đã có trước khi yielding.

Nếu chúng ta chuyển  Primes iterator thành generator, nó sẽ giống như sau

def Primes(max):
    number = 1
    while number < max:
        number += 1
        if check_prime(number):
            yield number
primes = Primes(100000000000)
print(primes)
for x in primes:
    print(x)
---------
<generator object Primes at 0x10214de08>
2
3
5
7
11
...

Bây giờ đó là pythonic! Liệu ta có thể làm tốt hơn không?

Vậy, chúng ta có thể sử dụng Generator Expressions, được giới thiệu với PEP 289.

Đây là danh sách comprehension equivalent của generator. Nó hoạt động chính xác giống như comprehension, nhưng biểu thức được đặt trong() và trái ngược với [].

Các biểu thức sau đây có thể thay thế generator function ở trên:

primes = (i for i in range(2, 100000000000) if check_prime(i))
print(primes)
for x in primes:
    print(x)
---------
<generator object <genexpr> at 0x101868e08>
2
3
5
7
11
...

Đây là khả năng của generator bằng Python.

Tóm lại

  • Generator cho phép bạn tạo các iterator theo cách rất pythonic.
  • Iterator cho phép lazy evaluation, chỉ tạo ra element tiếp theo của một đối tượng có thể lặp lại khi được yêu cầu. Điều này hữu ích đối với bộ dữ liệu cực lớn.
  • Iterator và generator chỉ có thể lặp lại được một lần.
  • Generator Function tốt hơn Iterator.
  • Generator Expressions tốt hơn các Iterator (đối với các trường hợp đơn giản).

Nguồn: TopDev via Freecodecamp

Xem thêm tuyển dụng lập trình python lương up to 20M

Hãy nắm vững nguyên tắc cơ bản nếu như bạn muốn trở thành bậc thầy thiết kế

Tuần trước, một độc giả đã đặt ra một câu hỏi: Làm cách nào để trở thành một designer bậc thầy?

Khi đang suy nghĩ về câu trả lời, đầu óc của tôi cảm thấy điều này giống như học tiếng Quan Thoại. Gần đây, tôi quyết định tự học thêm một ngôn ngữ mới. Khi nói đến việc học một ngôn ngữ mới, trước tiên bạn phải nắm vững các nguyên tắc cơ bản. Danh từ, đại danh và động từ là cơ sở cho việc có được những ý tưởng phức tạp hơn.

Ngôn ngữ là phương tiện mà mọi người giao tiếp với nhau. Visual design là một ngôn ngữ bằng thị giác. Và việc học visual design không khác gì việc học một ngôn ngữ mới.

Một visual design tốt không được sinh ra mà được tạo ra. Chìa khóa để trở thành designer tốt là sự nghiêm khắc. Bạn sẽ chỉ tiến bộ như là một designer nếu bạn có sự nỗ lực.

Đây là một số nguyên tắc cơ bản bắt buộc phải nắm vững nếu bạn muốn tiến bộ trong thiết kế.

Nguyên tắc # 1: Quay lại với kiểu chữ cơ bản

Kiểu chữ mà designer sử dụng nói lên rất nhiều điều. Bởi vì cách sử dụng phông chữ là một điều cơ bản cho thiết kế.

Bạn có thể tạo ra toàn bộ thiết kế chỉ bằng việc dùng text. Ngoài ra cũng có thể thiết kế đơn giản bằng theo chữ, chọn được sự tinh tế từ các phông chữ mà bạn chọn. Để cải thiện cách bạn typography, hãy bắt đầu bằng việc học những điều cơ bản đầu tiên.

Phát triển từ vựng để mô tả kiểu chữ. Tìm hiểu về các thuật ngữ như tracking, kerning, và leading mean. A Beautifully Illustrated Glossary Of Typographic Terms You Should Know  là một bài báo tuyệt vời để học các thuật ngữ này.

Tiếp theo, nếu bạn muốn có hiểu biết toàn diện về cách áp dụng typography vào webiste, hãy đọc Web Typography: The Elements ofTypographic Style Applied to the Web.

Cuối cùng, hãy học cách kết nối phông chữ với nhau. Một tài liệu tuyệt vời viết về điều này là FontWolf và FontPair. Việc kết hợp phông chữ với nhau sẽ làm thay đổi thiết kế của bạn.

Để tìm hiểu sâu hơn về typography, bạn có thể đọc bài báo của tôi: Typography can make your design… Or break it.

Nguyên tắc # 2: Dùng khoảng trống để tạo sự cân bằng

Khoảng trống tạo ra chuyển động dọc và ngang trong thiết kế. Nó là điều then chốt cho việc tạo ra hệ thống phân cấp thị giác và mối liên hệ giữa các yếu tố.

Bạn có thể nhìn vào các trang web như Behance và Dribbble để có được cảm hứng về cách dùng khoảng trống trong thiết kế. Sử dụng không gian thật sự quan trọng sử để tạo sự cân bằng và sự hài hòa thị giác.

Khi nghiên cứu về typography, bạn có thể nhận thấy tầm quan trọng của khoảng cách trong thiết kế. Điều chỉnh kerning và leading của phông là một bài tập tuyệt vời để phát triển khả năng dùng ngôn ngữ. Vì lý do này, tôi khuyên bạn nên thử KernType, một trò chơi để so sánh giải pháp kerning của bản thân với giải pháp của người khác.

Một bài tập khác sẽ giúp bạn phát triển mắt là: Dùng một thiết kế hiện có, vẽ trục x và y, đơn giản hóa mọi thứ thành các hình dạng cơ bản, phân tích sự cân bằng, và sắp xếp lại các phần tử. Đặc biết chú ý đến ảnh hưởng của “negative space” đến sự cân bằng của các phần tử.

Nguyên tắc # 3: Thay đổi kích thước để tạo ra phân cấp thị giác

Khi tạo ra hệ thống phân cấp thị giác, kích thước là yếu tố hàng đầu. Bằng cách thay đổi kích thước để truyền đạt các mối quan hệ thị giác giữa các phần tử, bạn có thể tạo ra dòng thiết kế.

Sizing là một trong những lý do giải thích tại sao Grid hữu ích. Bạn có thể sử dụng Grid để giúp bạn điều chỉnh kích thước theo tỉ lệ các phần tử để truyền đạt tầm quan trọng.

Một khi bạn đã xác định được kích thước cho một phần tử, giữ nó như nhau trong tất cả các trường hợp. Trong thiết kế, tính nhất quán là “King”.

Đây là một bài tập giúp bạn phát triển khả năng dùng kích thước:

Điều quan trọng nhất là yêu cầu feedback.

Phác hoạ hoặc wireframe một landing page. Sau đó nhờ một người bạn xem xét bằng cách giúp họ thấy các yếu tố nổi bật nhất để họ ghi số các yếu tố dựa trên visual weight. Liệu kết quả có phải những gì bạn mong đợi?

Khi thực hiện bài tập này, hãy nhớ những câu hỏi sau:

  • Mục đích chuyển đổi của landing page là gì? Làm thế nào bạn có thể tối ưu hóa để đạt được mục tiêu?
  • Mối quan hệ giữa các yếu tố khác nhau là gì? Bạn muốn nhấn mạnh yếu tố nào?
  • Bố cục của bạn có hướng dẫn người dùng qua trang này không?

Nguyên tắc # 4: Sử dụng màu sắc để truyền tải ý nghĩa

Màu sắc đóng vai trò trong nhiều phương diện khác nhau. Nó chuyển tải ý nghĩa, tạo cộng hưởng cảm xúc và mang lại sự thống nhất cho thiết kế.

Để hiểu sâu về vào màu sắc, bạn có thể đọc bài viết của tôi Designing in Color. Dưới đây là một số điểm chính.

  • Xác định mục đích thiết kế của bạn trước khi chọn một bảng màu. Thiết kế tốt là sự hòa hợp hoàn hảo của bảng màu với mục đích cần truyền tải.
  • Xác định đối tượng. Mọi người thường thấy màu sắc khác nhau. Thế nhưng có những tác động khác nhau đối với người dân dựa trên sở thích cá nhân của họ, văn hoá và kinh nghiệm.
  • Khi chọn một bảng màu, sự đơn giản chính là chìa khóa. Chọn màu nền trung tính. Sau đó chọn màu sắc chính và phụ. Cuối cùng dựa trên các màu khác, tìm ra lỗi và màu thành công cho các trạng thái giao diện khác nhau của bạn.

Một khi bạn có được sự nắm bắt tốt về những điều cơ bản màu sắc, màu sắc đến từ quá trình thử nghiệm và lặp đi lặp lại. Chủ động cố gắng thoát ra khỏi thói quen và thử bảng màu mới.

Đây là một bài tập giúp bạn phát triển khả năng dùng màu sắc:

Dành thời gian biên soạn bảng màu cho những thứ xung quanh như ảnh, tạp chí và chương trình yêu thích của bạn. Sau đó lấy một thiết kế hiện có và áp dụng bảng màu mới vào nó.

Hãy lưu ý cách màu sắc làm đổi tâm trạng của thiết kế. Nó có thay đổi ý nghĩa không?

—–

Và xem thiết kế của bạn như là một nghề thủ công, trong đó luôn có những thứ để cải thiện. Luôn có động lực để trở thành một nhà thiết kế tốt hơn.

Nguồn: TopDev via Freecodecamp

Câu chuyện về khát vọng chinh phục giải pháp không dây của một doanh nghiệp Việt

Theo thống kê, Việt Nam hiện đang có 49 triệu xe máy và khoảng 3,2 triệu xe ô tô (đã đăng ký). Tính theo con số sở hữu phương tiện thì cứ 1000 dân sở hữu 22 ô tô và đối với xe máy là 516 xe. Với tốc độ phát triển như hiện nay, đặt ra một thách thức lớn cho ngành giao thông vận tải của nước trong công tác quản lý và giám sát các phương tiện tham gia giao thông.

Việc quản lý giám sát trong doanh nghiệp vận tải là vô cùng cần thiết, không chỉ là để chủ xe có thể quản lý phương tiện của mình, mà còn là cách để nâng cao ý thức tham gia giao thông của các tài xế, không ít doanh nghiệp đã tìm tới các thiết bị định vị giám sát hành trình, phần mềm quản lý qua smartphone để theo dõi hành trình của lái xe. Đồng thời, đó cũng chính là quy định của chính phủ về điều kiện đăng kí kinh doanh vận tải ô tô.

(Nghị định 86/2014/NĐ-CP đã quy định về việc lắp thiết bị giám sát hành trình. Quy định đối với xe ô tô kinh doanh vận tải hành khách, xe ô tô kinh doanh vận tải hàng hóa bằng công – ten – nơ, xe đầu kéo kéo rơ moóc, sơ mi rơ moóc hoạt động kinh doanh vận tải và xe ô tô kinh doanh vận tải hàng hóa phải gắn thiết bị giám sát hành trình; thiết bị giám sát hành trình phải đảm bảo tình trạng kỹ thuật tốt và hoạt động liên tục trong thời gian xe tham gia giao thông.)

Xuất phát từ trăn trở về bài toán là làm sao để thực hiện tra cứu xe đi, xác định vị trí của xe chính xác ngay lập tức; lưu thông tin của các tuyến đường xe đi qua; giám sát chặt chẽ tiêu hao nhiên liệu của xe; xe dừng xe chạy; giám sát đóng mở cửa xe; giám sát tải trọng… Để giúp đỡ người quản lý trong công tác quản lý giám sát xe công ty TNHH A.D.A (Asian Dragon Company Limited) – với tên thương mại là Magiwan đã phát triển hệ thống các thiết bị giám sát hành trình không dây, chuyên cung cấp các giải pháp công nghệ Giám sát, Điều phối bao gồm:

–  Giải pháp Giám sát, Điều phối phương tiện vận tải Hành khách, Hàng hóa, Đường bộ.

–  Giải pháp Giám sát, Điều phối phương tiện Vận tải đường Thủy.

– Giải pháp Giám sát, Điều phối phương tiện trong doanh nghiệp sản xuất Bê tông tươi.

–  Giải pháp quản lý Nhiên liệu, Nhiệt độ, Tải trọng, ….

–  Giải pháp  Quản lý Nhân viên Mãi vụ

–  Giải pháp Quản lý phương tiện cá nhân

Magiwan tự hào là đơn vị tiên phong lĩnh vực cung cấp sản phẩm thiết bị giám sát hành trình hợp quy, sản phẩm đã và đang có mặt trên 63 tỉnh thành cả nước, mang lại những tiện ích to lớn cho các nhà quản lý doanh nghiệp vận tải, qua đó góp phần vào sự phát triển chung của lĩnh vực giao thông vận tải. Trong 10 năm trưởng thành và phát triển Magiwan tự hào là :

  • Một trong những công ty đầu tiên cung cấp giải pháp GPS tại thị trường Việt Nam từ năm 2007.
  • Liên tiếp nhiều năm liền nằm trong top các nhà cung cấp dịch vụ GPS tại Việt Nam có số lượng thuê báo lớn nhất qua các năm từ 2008 đến nay.
  • Là đối tác tin cậy của các đơn vị lớn như FAO (Tổ chức nông lương thế giới), VNPT, Viettel và hàng loạt các doanh nghiệp lớn như Techcombank, Southernbank, Sacombank, Lê Phan, BKC,…
Toàn hệ thống Magiwan đã có hơn 60 nhân viên, với mạng lưới phân phối trải rộng cả nước với 3 chi nhánh chính thức tại Hà Nội, Đà Nẵng, TP. HCM

Magiwan tập trung những nhân viên trẻ, năng động, ham học hỏi và khát vọng vươn lên để làm chủ khoa học công nghệ, hiện thực hóa sứ mệnh “Phát triển cộng đồng bằng giải pháp không dây”. Giá trị cốt lõi mà Magiwan luôn hướng tới là “Cải thiện môi trường nhân viên từng ngày”.Với tâm niệm thành công của mỗi nhân viên chính là thành công chung của toàn doanh nghiệp. Ở Magiwan chú trọng vào sự phát triển của từng nhân viên luôn là ưu tiên hàng đầu của doanh nghiệp. Phòng nhân sự phối hợp với công đoàn công ty, luôn quan tâm chăm lo cho đời sống công nhân viên, thường xuyên tổ chức các hoạt động giải trí hàng ngày, hàng tuần: câu lạc bộ bi lắc, bóng bàn, bóng đá, cầu lông, games (age of empire), cờ tướng; hàng tháng tổ chức “happy hour” để tăng tinh thần đoàn kết giữa các nhân viên trong công ty, ngoài ra công ty quy định hàng năm tổ chức 1, 2 lần tổ chức các hoạt động tham quan – du lịch cho nhân viên công ty.

Các hoạt động vui chơi thể thao thường xuyên được tổ chức
Du lịch là hoạt động thường niên của Magiwan

Trong thời gian tới Magiwan tiếp tục đầu tư hoàn thiện, nâng cấp các sản phẩm giám sát dành cho xe hơi, xe máy, đầu máy kéo,… Bên cạnh đó cũng phát triển các sản phẩm không dây phục vụ tốt hơn cho cuộc sống của con người như: thiết bị định vị cá nhân cho xe máy, chống trộm, thiết bị cá nhân trong lĩnh vực y tế chăm sóc sức khỏe người cao tuổi, chăm sóc sức khỏe cá nhân… và nhiều sản phẩm thú vị khác.

Hiện tại, Magiwan đang tìm kiếm những lập trình viên tài năng, mong muốn được làm việc trong môi trường chuyên nghiệp, không ngại thách thức, ham học và mong muốn tham gia vào toàn bộ quy trình tạo ra sản phẩm “ tạo ra những thay đổi cách mạng” trong lĩnh vực giao thông vận tải, cùng với đó là những quyền lợi hấp dẫn. Cùng Magiwan chia sẻ khát vọng không dây ngay hôm nay. Tìm hiểu thêm tại đây.

TopDev

18 designer hàng đầu dự đoán về xu hướng UI/ UX trong năm 2022

ux designer

Dưới đây là tổng hợp 18 designer hàng đầu cho bạn tham khảo. Hy vọng với thông tin dưới đây của Topdev sẽ góp nhặt thêm nhiều điều thú vị cho các bạn

1. Accessibility đóng vai trò quan trọng nhất, thứ 2 là ego (bản ngã)

“Tôi thực sự hy vọng 2022 sẽ là năm mà các designer cam kết thiết kế sẽ đi cùng với accessibility. Chúng ta cần phải ngừng sử dụng các màu xám cực nhẹ cho các yếu tố quan trọng, cần phải ngừng sử dụng các animation cho mỗi pixel chỉ vì nó đẹp, cần phải ngừng gây khó dễ cho người đọc để hiểu được content của 1 trang chỉ vì muốn chứng tỏ bản thân là designers”.

— Hubert Florin, Product Designer của Slack

2. Collaboration trong design sẽ góp phần đẩy mạnh tính kĩ thuật

“Dù designer có biết code hay không, với tôi các team design sẽ phải bắt đầu hợp tác nhiều hơn tương tự như các team kĩ thuật. Hợp tác có thể bao gồm review design giống như quá trình review code, thiết kế các tools có chức năng như code linters hoặc cải thiện về design patterns nguồn mở. Software sẽ ra sao nếu tất cả các dự án engineer nguồn mở có các nguyên tắc design tương đương thúc đẩy những chuẩn mực trong ngành về User experience hoặc Information design?”

— Jules Forrest, Senior Product Designer của Credit Karma

3. Designers sẽ tập trung vào ethics

“Hy vọng của tôi là các UX/UI designers đều nhận thức được ảnh hưởng của bản thân trong năm 2022, coi trọng các phân nhánh đạo đức trong những lựa chọn thiết kế dành cho các bên sử dụng sản phẩm của các designers”

— Tim Belonax, Lead Designer của Pinterest

4. Designers sẽ phụ thuộc lớn vào industry standard (chuẩn công nghiệp)

“Thật không may, sự phụ thuộc vào các hệ thống design theo quy định (như Material, Fluent) sẽ ngày càng tăng cao”

— Johan Ronsse, UI/UX Designer & Partner của Mono Design

5. Hiệu quả càng cao, trách nhiệm càng lớn

“Năm 2022, các công cụ design & lập trình sẽ tiếp tục hội tụ, với nhiều công cụ tập trung hơn hỗ trợ design & build các hệ thống làm việc được với bất kì công nghệ hay platform nào mà bạn cần. Frameworks, variables tùy chỉnh, CSS grid như Vue & React sẽ mang đến những cơ hội mới và hiệu suất tốt hơn cho quá trình thực thi design – hy vọng rằng điều này cũng tạo thêm không gian để thiết kế 1 cách có trách nhiệm và xây dựng được những trải nghiệm bao quát hơn”

— Diana Mounter, Design Systems Manager của GitHub

6. Chúng ta đang dần bỏ qua xu hướng mà chúng ta đều cần

“Dù không có khả năng sẽ thay đổi mạnh mẽ ngành design hay dẫn đầu xu hướng, nhưng xu hướng mà chúng ta đều cần chính là thiết kế phục vụ cho accessibility và inclusive design. Có rất nhiều việc cần phải và hiếm ai muốn đụng đến #accessibility”

— Matthew Morek, UI/UX Design Consultant

7. Design sẽ là kẻ nắm giữ cuộc chơi trong việc thay đổi xã hội

“Thiết kế có sức ảnh hưởng nhiều nhất chính là thiết kế giải quyết các vấn đề thực sự của con người. Trong tương lai, tôi nghĩ design sẽ đóng vai trò quan trọng việc giải quyết các vấn đề lớn, khó khăn trong xã hội. Design sẽ có tính chính trị hơn, dễ tiếp cận hơn và là 1 toolset mang đến những thay đổi thực sự”

— Michelle Morrison, Design Program Manager của Facebook

UI UX tuyển dụng nhiều vị trí, lương cao trên TopDev

8. Các công cụ Design sẽ giúp designer trở nên nổi bật so với tất cả mọi người

“Các công cụ design hiện đại sẽ đủ mức độ tiếp cận để nhiều người có thể đóng góp vào quy trình design 1 cách công bằng. Chúng ta sẽ đánh giá “designers” trong vai trò ít tách biệt hơn mà là công việc nhiều người có thể đóng góp vào”

— Noah Levin, Design Manager của Figma

9. Jason Schwartzman nói là đúng nhất

“Tôi có thể trích dẫn lại câu của Jason Schwartzman trong I Heart Huckabees không? Sự kết nối chắc chắn sẽ trở thành sự thật”

— Zachary Gibson, Material Design Creative Lead của Google

10. Đã đến lúc phải khách quan

“Chúng ta được “cảm thông” rất nhiều nhờ biệt tài phô trương trong vài năm qua và sắp tới chúng ta cần phải bổ sung vào đó bản tính “vô ngã” (egoless). Rất nhiều người vẫn cảm thấy không thoải mái khi nhắc đến “những người không phải designer” và nhận ra thiết kế tốt nhất của họ được tạo ra từ hơn 90% input của những người khác và 10% (hoặc ít hơn) là ý tưởng của chính người đó, nhưng các team & công ty thành công nhất đã biết đến điều này trong design từ rất lâu rồi”

— Nicole Tollefson, Lead Designer của Atlassian Buyer Experience

11. Kỹ năng sẽ đóng vai trò quan trọng hơn bao giờ hết

“Việc trau dồi kĩ năng ngày càng đóng vai trò quan trọng – đây cũng là vấn đề có nhiều thay đổi nhất. Điều này đồng nghĩa là chúng ta sẽ lắng nghe & hợp tác với nhau nhiều hơn; đảm bảo luôn có những ý kiến, tiếng nói đa chiều ở nhiều team khác nhau xuyên suốt quá trình làm việc; cải tiến môi trường tối ưu nhằm mang đến hiệu suất tối đa. Dưới mỗi vấn đề về Tech sẽ là vấn đề liên quan đến con người”

— Josh Silverman, Design Producer của Twitter

12. Đã đến lúc chủ động tương tác với môi trường

“Theo tôi, các thiết kế tương lai tích hợp với thế giới thực sẽ nắm vai trò chủ đạo. Dù đó là bằng các cảm ứng phần cứng, mô phỏng thực tế hoặc UI thay đổi theo ngữ cảnh (context-driven UI) thì các designers sẽ hiểu được thiết kế tồn tại như thế nào trên thực tế. Các thiết kế sẽ tương tác chủ động với môi trường xung quanh chúng cũng như tận dụng tối đa tiềm năng liên quan đến phần cứng”

— Linda Dong, Design Manager của Lyft

13. Các công cụ design tốt hơn sẽ mang đến khả năng branding tốt hơn bằng các design systems

“Khi các công cụ tiếp cận với những làn sóng phổ biến hiện nay đến từ design systems, việc hợp tác và đẩy mạnh cách thể hiện của 1 thương hiệu bằng 1 design system sẽ ngày càng dễ dàng hơn. Điều này cũng giúp các designer làm việc với lòng trung thành cao hơn trong phát triển sản phẩm nhờ khả năng cải thiện quá trình đưa ra quyết định và giảm chi phí cho ra đời các tác phẩm digital xuất sắc”

— Lucas Smith, Design Technologist của Airbnb

14. Các Design systems sẽ phục vụ con người, không phải sản phẩm

“Làn sóng chuyển dịch lớn tiếp theo trong thiết kế đòi hỏi chúng ta phải xem các design systems như 1 dịch vụ, không phải là product nữa. Chúng ta có khuynh hướng đánh giá 1 design system như 1 “sản phẩm phục vụ cho các sản phẩm khác” nhưng theo tôi, điều đó sẽ gây hại cho những mối quan hệ, những thỏa thuận, thỏa hiệp và tương tác giữa người với người – điều khiến quá trình làm việc với các hệ thống trở nên thách thức hơn & đáng tuyên dương hơn”

— Daniel Eden, Product Designer của Facebook

15. Các Design systems sẽ ngày càng quan trọng

“Làn sóng design systems ngày càng phát triển hơn đi cùng với quá trình scaling các team design, template hóa và sự phụ thuộc ngày càng cao vào nội dung dựa trên Machine Learning & AI. Các designer sẽ áp dụng kiến thức về phương pháp và tư duy thuật toán vào skillset của mình để đáp ứng nhu cầu và thể hiện được ước muốn của con người”

— Jerel Johnson, Sr. Product Designer của Backpack Health

16. Flat design sẽ ít được chú ý hơn

“Nhiều sáng tạo hơn về interfaces trong năm 2022 khi chúng ta rời dần flat design, thay vào đó tập trung vào interaction & accessibility”

— Una Kravets, Sr. UI Engineer của DigitalOcean

17. Các Design systems sẽ xóa nhòa khoảng cách giữa các phòng ban

“Các xu hướng thiết kế trong năm 2022 tới chắc chắn sẽ có những cải tiến liên quan đến design systems. Ngày càng nhiều công ty đang nghiên cứu lợi ích của việc hệ thống hóa thiết kế, đặc biệt là cách để khỏa lấp khoảng trống giữa product, design và engineering. Thêm nữa, tôi có cảm giác 3D modeling và 3D visualizations sẽ tiếp tục được nhiều người biết đến hơn. Tôi có thể tưởng tượng được việc thể hiện chiều sâu trong UI sẽ trở thành xu hướng – 1 trong những hệ quả của 3D modeling & 3D visualizations”

— Isha Kasliwal, Senior UI/UX Designer/Developer của Twitch

18. Những cải tiến về CSS sẽ ảnh hưởng đến thiết kế web theo những cách không ngờ được

“Có rất nhiều thứ hay ho thú vị về CSS – khả năng tích hợp những công cụ mới, như Grid & Custom Properties, với các tính năng hiện tại như Calc & Viewport Unites. CSS hiện đại cho phép mức độ interaction, responsive và data visualization mới mà trước đây cần phải có sự can thiệp sâu rộng của Javascript. Tôi rất vui khi thấy các xu hướng mới đang phát triển vượt xa công nghệ Javascript”

— Miriam Suzanne, Designer & Developer của OddBird

Nguồn: TopDev via blog.figma.com

Tạo ra HTML responsive bằng cách thêm một dòng CSS

Trong bài này, tôi sẽ hướng dẫn bạn cách sử dụng CSS Grid để tạo ra Image grid thay đổi tùy theo kích thước màn hình.

Và phần thú vị nhất: Tạo ra Responsiveness với một dòng CSS duy nhất.

Điều này có nghĩa là chúng ta không phải gây lộn xộn HTML với các class name xấu xí (nghĩa là col-sm-4, col-md-8) hoặc tạo các phương tiện query cho mọi kích thước màn hình.

Thiết lập

Trong bài viết này, ta sẽ tiếp dùng Grid đã sử dụng trong bài viết CSS Grid đầu tiên. Sau đó chúng ta sẽ thêm các hình ảnh vào cuối bài báo. Dưới đây là là hình ảnh ban đầu của grid:

Đây là HTML:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Và CSS:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

Lưu ý: ví dụ với một chút basic styling, mà tôi sẽ không nói ở đây, vì không có gì liên quan đến CSS Grid.

Nếu code này gây nhầm lẫn, bạn nên đọc Learn CSS Grid trong một bài viết 5 phút mà đã có những giải thích về cơ bản của layout module.

Cùng bắt đầu xây dựng các columm responsiveness.

Responsiveness cơ bản với fraction unit

CSS Grid đem lạimột giá trị hoàn toàn mới gọi là fraction unit. Được viết như  fr, fraction unit cho phép bạn chia tách container thành nhiều fraction như bạn mong muốn.

Hãy thay đổi từng cột thành một fraction unit wide.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

Điều gì xảy ra tại đây là việc Grid chia tách toàn bộ chiều rộng thành ba fraction và mỗi cột chiếm một unit. Đây là kết quả:

Nếu chúng ta thay đổi giá trị grid-template-columns thành 1fr 2fr 1fr, thì cột thứ hai sẽ rộng gấp hai lần so với hai cột khác. Chiều rộng bây giờ là bốn fraction unit, và cột thứ hai chiếm hai trong số họ, trong khi những cột khác chiếm một. Nó trông như thế này:

Nói cách khác, giá trị fraction unit giúp chúng ta rất dễ thay đổi chiều rộng của cột.

Responsiveness nâng cao

Tuy nhiên, ví dụ trên không đem lại tính reponsive như mong muốn, vì grid này sẽ luôn luôn được ba cột rộng. Chúng tôi muốn grid của mình có thể thay đổi số lượng cột với chiều rộng của container. Để đạt được điều đó, bạn sẽ phải biết về ba khái niệm hoàn toàn mới.

repeat()

Cùng bắt đầu với hàm repeat(). Đây là một cách quan trọng để xác định các cột và hàng của bạn. Hãy dùng grid ban đầu và thay đổi để dùng repeat ():

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

Nói cách khác, repeat(3, 100px) giống với  100px 100px 100px. Tham số đầu tiên xác định có bao nhiêu cột hoặc hàng mà bạn muốn và số thứ hai là về chiều rộng, vì vậy điều này sẽ chỉ cho chúng ta bố cục chính xác giống khi chúng ta bắt đầu với:

auto-fit

Tiếp theo là  auto-fit. Hãy bỏ qua số lượng cố định của cột, và thay vì thay thế 3 với auto-fit.

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

Điều này dẫn đến kết quả sau:

Grid giờ thay đổi số lượng cột với chiều rộng của container.

Nó chỉ đơn giản cố gắng để phù hợp càng nhiều cột rộng 100px vào container càng tốt.

Điều này dẫn đến kết quả sau:

Tuy nhiên, nếu cố đem code tất cả các cột chính xác 100px, sẽ không có được sự linh hoạt như mong muốn, vì chúng sẽ hiếm khi bổ sung thêm vào chiều rộng đầy đủ. Như bạn thấy trên gif ở trên, Grid thường để lại khoảng trắng ở phía bên phải.

minmax()

Và phần cuối cùng cần sửa được gọi là minmax(). Chúng tôi chỉ cần thay thế 100px với minmax(100px, 1fr). Đây là CSS cuối cùng.

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

Lưu ý rằng tất cả responsiveness xảy ra trong một dòng CSS.

Điều này dẫn đến kết quả sau:

Hoàn hảo. Hàm minmax() xác định một dải kích thước lớn hơn hoặc bằng min và nhỏ hơn hoặc bằng max.

Như vậy, các cột sẽ luôn có ít nhất 100px. Tuy nhiên, nếu có nhiều không gian hơn, Grid sẽ chia một cách bình đẳng cho mỗi cột, vì các cột biến thành một fraction unit thay vì 100 px.

Thêm hình ảnh

Bây giờ là bước cuối cùng là thêm các hình ảnh. Điều này không liên quan gì đến CSS Grid, nhưng chúng ta vẫn phải nhìn vào code.

Chúng tôi sẽ bắt đầu thêm một thẻ ảnh bên trong mỗi Grid item.

<div><img src="img/forest.jpg"/></div>

Để làm cho hình ảnh phù hợp, chúng tôi sẽ đặt nó như là rộng và cao như các item, và sau đó sử dụng object-fit: cover; Điều này sẽ làm cho hình ảnh bao gồm toàn bộ container, và trình duyệt sẽ cắt nó nếu cần thiết.

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Kết quả như sau:

Thật tuyệt! Bây giờ bạn đã biết một trong những khái niệm phức tạp nhất trong CSS Grid, vì vậy hãy tự hào về mình.

Browser support

Trước khi kết thúc, tôi cũng cần đề cập đến browser support. Vào thời điểm viết bài này, 77% lưu lượng truy cập trang web toàn cầu hỗ trợ CSS Grid, và nó đang tăng.

Tôi tin năm 2018 là của CSS Grid. Nó sẽ có đột phá lớn, và sẽ trở thành một kỹ năng phải có cho các nhà phát triển front-end. Giống như CSS Flexbox trong vài năm gần đây.

Nguồn: TopDev via Freecodecamp

Là nhân viên quèn bạn vẫn hoàn toàn có thể lãnh đạo người khác, thời nay lãnh đạo đâu cần đến chức danh

Người ta cho rằng để lãnh đạo được người khác, khiến mọi người làm theo ý mình ta cần tới chức danh, thực tế không phải như vậy khi một người lãnh đạo chân chính được xây dựng nên bởi lòng tin và sự tôn trọng.

Lại một ngày trôi qua, bạn làm rất nhiều việc trên văn phòng, từ dự án này tới đầu việc kia, làm hài lòng tất cả mọi người đặc biệt là sếp. Ngày hôm nay cũng như mọi ngày khác, hết yêu cầu đi họp, hỗ trợ đồng nghiệp, trả lời email, bê nước, thậm chí là pha trà, sếp yêu cầu bạn làm rất nhiều thứ.

Và rồi cuối ngày, khi mọi thứ qua đi bạn nhận thấy rằng mình chỉ đang làm việc dựa trên những yêu cầu của người khác. Hết giờ làm bạn gặp một người quen lâu năm, họ hỏi bạn công việc dạo này sao rồi? “Vẫn tốt thôi, như mọi ngày”, bạn trả lời. Thế chức vụ hiện tại của bạn là gì? “Tôi không biết, nhân viên?”.

Không cần tới chức danh quản lý, phó phòng, trưởng phòng hay giám đốc bạn mới có thể lãnh đạo người khác.

Đã bao giờ bạn tự hỏi mình rằng liệu bạn sinh ra có chỉ để làm những gì người khác bảo bạn phải làm?

Định nghĩa của sự lãnh đạo với nhiều người là khi bạn làm sếp, khi bạn mang trên mình chức danh lãnh đạo, khi người khác gọi bạn là lãnh đạo. Thế nhưng, là một nhân viên quèn, bạn có nhận thấy rằng rất nhiều người khác coi bạn là một lãnh đạo dù bạn chẳng có chức danh gì?

Lãnh đạo sinh ra từ tác phong làm việc và tính cách cá nhân

Giờ ai cũng có thể được gọi là lãnh đạo, một người đưa ra tầm nhìn cho người khác và sử dụng vài cách thức để người khác làm việc cùng mình được coi là lãnh đạo. Giả sử bạn yêu cầu một đồng nghiệp làm đầu việc cùng mình với một cái đích cụ thể, họ đồng ý làm theo. Xong! Bạn vừa lãnh đạo rồi đó.

Trước hết, hãy xác định bạn là lãnh đạo kiểu gì

Tùy thuộc vào mô hình công ty hay ngành nghề, có thể nơi bạn làm chẳng có lãnh đạo hoặc có những nơi ai cũng là lãnh đạo và bạn trở thành một lãnh đạo tinh thần, một người lãnh đạo tiềm năng.

Để nói về lãnh đạo, có 2 kiểu điển hình đó là người lãnh đạo có chức danh và người lãnh đạo quèn chẳng có danh phận gì nhưng ai cũng nghe. Dù là gì đi nữa, 2 kiểu trên cũng có những cách thức hoạt động rất tương đồng nhau.

Họ gắn kết mọi người chứ không phá hoại tập thể

Một người lãnh đạo sẽ biết lắng nghe vấn đề của người khác, xây dựng lòng tin và gắn kết mọi người. Cái đích cuối cùng chính là để gắn kết cả tập thể, mọi người làm việc cùng nhau mà không có bất kì mâu thuẫn nào.

Có những người lãnh đạo tạo ra sự cạnh tranh lẫn nhau trong tập thể, họ phá hoại sự gắn kết chung và rồi cuối cùng yêu cầu nhân sự làm việc theo ý mình. Đây là kiểu lãnh đạo độc tài hay người ta gọi với khái niệm “sếp”, những người chỉ muốn cấp dưới làm theo ý mình. Như vậy, nếu một người lãnh đạo đã biết mọi thứ, coi tất cả những gì mình làm là đúng, giá trị của nhân sự phía dưới ở đâu?

Họ động viên tinh thần cả tập thể

Lãnh đạo là điểm tựa tinh thần của cả tập thể, họ mang lại năng lượng tích cực để mọi người làm việc tốt hơn, môi trường làm việc thú vị hơn. Một người lãnh đạo thực thụ sẽ biết cuốn hút người khác và tạo không khí thoải mái cho tất cả mọi người.

Họ không bao giờ hoảng loạn

Một người lãnh đạo sẽ biết xử trí ra sao khi vấn đề xảy đến. Nhiệm vụ của họ là thống nhất cả tập thể để tìm ra phương pháp giải quyết, họ không ngồi một chỗ phó mặc mọi thứ hay kêu gào thảm thiết về những vấn đề gặp phải, họ nỗ lực để làm mọi thứ tốt hơn.

Họ được tôn trọng

Một người có chức danh lãnh đạo chưa chắc đã được tôn trọng. Sự tôn trọng không tới từ chức danh, nó tới từ tính cách và phương pháp họ làm việc. Một người lãnh đạo có thể nhận được sự tôn trọng qua những gì anh ta làm, thế nên đừng nói, hãy để kết quả làm nó thay bạn. Một khi xây dựng được sự tôn trọng lẫn nhau, không có rào cản nào dừng bước được tập thể của bạn.

Họ mang tới những gì mình hứa

Lãnh đạo có tầm nhìn về những gì tập thể làm, một khi họ thực hiện được tầm nhìn ấy, họ sẽ nhận được những phần thưởng xứng đáng. Nhiều khi không cần thiết là một phần thưởng giá trị, đôi khi nó chỉ là cảm giác thành công khi hoàn thành một vấn đề.

Lãnh đạo chẳng cần đến chức danh

Xem hết phần bên trên rồi chứ? Đó là những thứ mà một người lãnh đạo sẽ làm, chắc chắn rằng dù là một nhân viên quèn bạn cũng đã làm được rất nhiều điều trong số trên. Chính vì thế hãy cứ rèn luyện phong cách lãnh đạo của mình và đưa tập thể đến những cái đích mới.

Và hãy luôn nhớ rằng, một tập thể luôn được tạo nên bởi những người có thế mạnh và điểm yếu khác nhau. Tận dụng đúng thế mạnh của họ để tỏa sáng và tiết chế những yếu điểm bằng cách đưa họ vào những nhóm riêng biệt, những công việc đặc thù để điểm yếu kia không còn khiến họ lạc lõng.

Có rất nhiều thứ bạn chẳng thể làm được nếu không có chức danh, thế nhưng nhớ rằng lãnh đạo đa phần được xây dựng nên nhờ vào khả năng thiết lập mối quan hệ, sự gắn kết trong tập thể. Có khả năng truyền lửa và thuyết phục người khác là điều không phải ai cũng làm được, nó sẽ giúp ích rất nhiều trong cả công việc cũng như cuộc sống.

Nguồn: Cafebiz

JSON Web Token (JWT) là gì ?

jwt là gì

Jwt là gì? Trong bài viết này mình cùng tìm hiểu khái niệm JWT là gì , trước tiên hãy xem giải thích theo lý thuyết được định nghĩa bởi RFC 7519

Jwt là gì?

JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên Client – Server , các thông tin trong chuỗi JWT được định dạng bằng JSON . Trong đó chuỗi Token phải có 3 phần là header , phần payload và phần signature được ngăn bằng dấu “.”

jwt là gì
Credit: Toptal
  Tại sao phải sử dụng JSON Web Token (JWT) để bảo mật API
  API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth

Vậy theo lý thuyết trên thì mình sẽ có một chuỗi Token như sau:

header.payload.signature

Cấu trúc của JSON Web Token:

Như ở trên đã nói JSON Web Token bao gồm 3 phần, được ngăn cách nhau bởi dấu chấm (.):

  1. Header
  2. Payload
  3. Signature (chữ ký)

Header

Phần header sẽ chứa kiểu dữ liệu , và thuật toán sử dụng để mã hóa ra chuỗi JWT

{
    "typ": "JWT",
    "alg": "HS256"
}
  • “typ” (type) chỉ ra rằng đối tượng là một JWT
  • “alg” (algorithm) xác định thuật toán mã hóa cho chuỗi là HS256

Payload

Phần payload sẽ chứa các thông tin mình muốn đặt trong chuỗi  Token như username , userId , author , … ví dụ:

{
  "user_name": "admin",
  "user_id": "1513717410",
  "authorities": "ADMIN_USER",
  "jti": "474cb37f-2c9c-44e4-8f5c-1ea5e4cc4d18"
}
  Authentication nâng cao trong SPA (React/Vue) dùng JWT kết hợp Cookie

Lưu ý đừng đặt quá nhiều thông tin trong chuỗi payload vì nó sẽ ảnh hưởng đến độ trể khi Server phải xác nhận một Token quá dài

jwt là gì

Signature

Phần chử ký này sẽ được tạo ra bằng cách mã hóa phần header , payload kèm theo một chuỗi secret (khóa bí mật) , ví dụ:

data = base64urlEncode( header ) + "." + base64urlEncode( payload )
signature = Hash( data, secret );
  • base64UrlEncoder : thuật toán mã hóa header và payload

Đoạn code trên sau khi mã hóa header và payload bằng thuật toán base64UrlEncode ta sẽ có chuỗi như sau

// header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
// payload
eyJhdWQiOlsidGVzdGp3dHJlc291cmNlaWQiXSwidXNlcl9uYW1lIjoiYWRtaW4iLCJzY29wZSI6WyJyZWFkIiwid3JpdGUiXSwiZXhwIjoxNTEzNzE

Sau đó mã hóa 2 chuỗi trên kèm theo secret (khóa bí mật) bằng thuật toán HS256 ta sẽ có chuỗi signature như sau:

9nRhBWiRoryc8fV5xRpTmw9iyJ6EM7WTGTjvCM1e36Q

Có thể bạn quan tâm: Vị trí tuyển dụng lập trình Javascript lương cao

Cuối cùng

Kết hợp 3 chuỗi trên lại ta sẽ có được một chuỗi JWT hoàn chỉnh

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsidGVzdGp3dHJlc291cmNlaWQiXSwidXNlcl9uYW1lIjoiYWRtaW4iLCJzY29wZSI6WyJyZWFkIiwid3JpdGUiXSwiZXhwIjoxNTEzNzE.9nRhBWiRoryc8fV5xRpTmw9iyJ6EM7WTGTjvCM1e36Q

Như vậy các bạn cũng đã hiểu được các thành phần của một chuỗi JWT.

Khi nào nên dùng JSON Web Token?

Authentication: Đây là trường hợp phổ biến nhất thường sử dụng JWT. Khi người dùng đã đăng nhập vào hệ thống thì những request tiếp theo từ phía người dùng sẽ chứa thêm mã JWT. Điều này cho phép người dùng được cấp quyền truy cập vào các url, service, và resource mà mã Token đó cho phép. Phương pháp này không bị ảnh hưởng bởi Cross-Origin Resource Sharing (CORS) do nó không sử dụng cookie.

Trao đổi thông tin: JSON Web Token là 1 cách thức khá hay để truyền thông tin an toàn giữa các thành viên với nhau, nhờ vào phần signature của nó. Phía người nhận có thể biết được người gửi là ai thông qua phần signature. Và chữ ký được tạo ra bằng việc kết hợp cả phần header, payload lại nên thông qua đó ta có thể xác nhận được chữ ký có bị giả mạo hay không.

Có thể bạn muốn xem thêm:

Xem thêm việc làm IT tại TopDev!

17 sự thật đáng ngạc nhiên về tỷ phú Bill Gates, chắc chắn không có điều nào làm bạn thất vọng

Có vài điều mà ai cũng biết về Bill Gates: đó là ông là người giàu nhất thế giới, ông đồng sáng lập nên một trong những công ty công nghệ lớn nhất thế giới, ông là một nhà từ thiện hào phóng – ông cùng vợ của mình dã lập nên Quỹ Bill & Melinda Gates, với mục tiêu nâng cao chăm sóc sức khỏe toàn cầu và giảm đói nghèo, tăng cường giáo dục.

Danh sách còn dài lắm, và đây là 17 sự thật đáng ngạc nhiên khác về Bill Gates do Business Insider chọn ra. Có lẽ là nhiều trong số đó, bạn chưa từng nghe tới.

1. Khi vẫn còn là một cậu “teen”, Bill Gates đã viết phần mềm máy tính đầu tiên của mình trên một chiếc máy tính General Electric. Đó là một chương trình cho phép bạn chơi cờ tic-tac-toe với máy tính.

2. Trường khám phá ra khả năng lập trình của cậu Gates trẻ tuổi, họ đã để cậu viết chương trình máy tính sắp xếp lịch học cho từng học sinh. Cậu Gates láu cá đã thay đổi code của chương trình, tự đặt mình vào những lớp học “có những cô gái thú vị”.

3. Ông dã đọc toàn bộ series sách World Book Encyclopedia khi còn ở độ tuổi thiếu niên.

4. Ông đã đạt số điểm gần 1590 trên tổng số 1600 điểm có thể có trong những bài thi SAT của mình.

5. Giống như nhiều nhà khởi nghiệp công nghệ khác, Gates cũng bỏ dở việc học đại học. Ông rời Harvard vào năm 1975, để theo đuổi giấc mơ mang tên Microsoft.

6. Hai năm sau khi rời Harvard, ông bị bắt tại New Mexico. Lúc ấy ông đã vượt đèn đỏ mà bản thân còn chưa có bằng lái xe.

7. Có thời tại Microsoft, ông đã từng nhớ toàn bộ biển số xe của nhân viên Microsoft để biết họ đến và đi vào giờ nào. “Dần dần tôi cũng phải bỏ thói quen này, bởi kích cỡ công ty ngày càng lớn”, Bill Gates nói.

8. Ông là người thích xe Porsche và có một bộ sưu tập khá đồ sộ. Ông đã mua về chiếc xe thể thao Porsche 959, 13 năm trước khi chiếc xe này được Cơ quan Bảo vệ Môi trường Mỹ hay Bộ Giao thông Mỹ cho phép lưu hành.

9. Gates cũng đã từng là huấn luyện viên lái máy bay. Hiện tại thì ông đang di chuyển giữa các nước bằng chiếc phi cơ riêng ông đã mua về từ năm 1997.

10. Bill Gates còn có một tài sản giá trị khác, đó là Cổ thư Leicester – Codex Leicester, một bộ sưu tập tổng hợp những bản thảo viết tay của họa sỹ, nhà nghiên cứu khoa học, nhà phát minh Leonardo da Vinci. Gates đã mua lại cuốn cổ thư này trong một cuộc đấu giá năm 1994, với số tiền 30,8 triệu USD.

11. Dù bản thân sở hữu số tài sản khổng lồ, Bill Gates nói rằng con của ông, mỗi người chỉ được thừa hưởng 10 triệu USD mà thôi. “Để lại cho con cái một số tài khoản khổng lồ không phải là điều tốt với chúng”, ông nói.

12. Ngày nay, ông dành phần lớn thời gian chăm lo cho quỹ từ thiện của mình. Tuy nhiên, ông cũng nói rằng ông vẫn dành thời gian làm việc với Microsoft, cụ thể là dự án “Thư ký Cá nhân”, một thứ sẽ “ghi nhớ mọi thứ và giúp bạn tìm lại những thứ cũ, giúp bạn chọn ra một mục tiêu để mà tập trung làm”.

13. Ông nói rằng nếu như Microsoft không thành công, ông có lẽ đã đi nghiên cứu trí tuệ nhân tạo.

14. Tuy nhiên, ông cũng “chung chiến tuyến” với Stephen Hawking hay Elon Musk: họ đều e ngại về sự tồn tại của một siêu trí tuệ nhân tạo.

15. Ban nhạc yêu thích của Bill Gates? Đó là nhóm U2.

16. Ông đọc hết 50 cuốn sách một năm. “Việc đọc vẫn là cách thức chính của tôi để học thứ mới và cũng là để thử thách tầm hiểu biết của tôi”.

17. Bill Gates không biết ngoại ngữ nào, và ông thổ lộ rằng tính đến giờ, đó là điều hối tiếc lớn nhất đời ông.

Nguồn: Cafebiz

 

Tôi đã nghiên cứu AI như thế nào trong 2 tháng qua?

Trước tình cảnh mọi thứ đang thay đổi khá nhiều thì vai trò hiện tại của full stack developer thôi là chưa đủ. Trong 2 năm tới, full stack sẽ không còn là full stack nếu không có các kĩ năng AI.

Đây là thời điểm để hành động – trau dồi các kĩ năng của developer, cải thiện mindset của 1 người làm sản phẩm và khả năng đàm phán của 1 doanh nhân để chuyển dần định hướng sang vào data.

Spiros Margaris –  1 nhà đầu tư mạo hiểm, 1 leader có hiểu biết sâu sắc nổi tiếng về AI & Fintech đã từng nói với tôi:

Nếu startups và các công ty chỉ phụ thuộc vào các thuật toán AI & Machine learning Tân tiến để cạnh tranh với nhau sẽ không đủ. Ai không phải là lợi thế cạnh tranh mà là điều bắt buộc. Bạn đã từng nghe ai nói đến việc sử dụng điện để làm nhân tố cạnh tranh chưa?

Xây dựng neural network đầu tiên của mình

Photo by — Unsplash

Khuynh hướng nghiên cứu của tôi là thực hành nên tôi đã nghĩ là tại sao không thực hiện mạng neural của riêng mình?

Tôi không nhảy ngay vào neural nets vì có những cách học hay hơn mà cố gắng làm quen với những từ vựng trong domain.

Bài tập đầu tiên không phải là học, mà là làm quen

Với background thuần về Javascript & Nodejs, tôi đã không muốn chuyển đổi các stacks. Vì vậy, tôi đã tìm module neural net đơn giản tên là nn và sử dụng nó để implement cổng AND với input giả. Từ tutorial này, tôi đã chọn vấn đề mà với 3 input bất kì X,Y & Z thì output sẽ là X AND Y.

var nn = require('nn')
var opts = {
    layers: [ 4 ],
    iterations: 300000,
    errorThresh: 0.0000005,
    activation: 'logistic',
    learningRate: 0.4,
    momentum: 0.5,
    log: 100   
}
var net = nn(opts)
net.train([
    { input: [ 0,0,1 ], output: [ 0 ] },
    { input: [ 0,1,1 ], output: [ 0 ] },            
    { input: [ 1,0,1 ], output: [ 0 ] },
    { input: [ 0,1,0 ], output: [ 0 ] },
    { input: [ 1,0,0 ], output: [ 0 ] },
    { input: [ 1,1,1 ], output: [ 1 ] },
    { input: [ 0,0,0 ], output: [ 0 ] }
    ])
// send it a new input to see its trained output
var output = net.send([ 1,1,0]) 
console.log(output); //0.9971279763719718

Theo ý kiến cá nhân của tôi, đây chính là bước lập trình mà tôi tự tin thực hiên nhất. Khi output flash 0.9971, tôi đã nhận ra network đã biết được cách thực hiện operation AND và tự bỏ qua input bổ sung.

Đây cũng là ý chính của Machine Learning. Bạn đưa cho chương trình máy tính set data và nó điều chỉnh các thông số nội bộ để có khả năng trả lời các câu hỏi dựa trên data mới từ những gì nó quan sát được trong data gốc, với ít error hơn.

Method này cũng được biết đến như gradient descent.

Photo by — Sebastian Raschka

Rèn luyện trí óc sẵn sàng cho Artificial Intelligence

Photo courtesy — Unsplash

Khi đã có được sự tự tin bằng việc tự tạo chương trình AI đầu tiên, tôi muốn biết trong vai trò Developer thì bản thân có thể làm được gì nhiều hơn nhờ Machine Learning.

  • Tôi đã giải quyết vài vấn đề supervised learning như regression & classification.
  • Tôi đã sử dụng data set rất giới hạn để thử dự đoán đội nào sẽ chiến thắng 1 trận đấu IPL cho trước thông qua multivariate linear regression. (Các dự đoán đều sai nhưng khá là thú vị)
  • Tôi đã chơi với các bản demos trên Google Machine Learning cloud để xem thử những gì mà AI có thể làm hôm nay (đủ để xem những gì mà Google đang trong vai trò 1 sản phẩm SaaS)
  • Tôi đã bất ngờ biết được AI Playbook, 1 resource cực hay & tiện ích của Andreessen-Horowitz dành cho các developers & các nhà kinh doanh.
  • Tôi đã bắt đầu xem kênh của Siraj Rawal trên Youtube với nội dung xoay quanh Deep Learning và Machine Learning
  • Tôi đã đọc bài viết HackerNoon cực hay về các nhà sản xuất kiêm biên kịch của Silicon Valley đã xây dựng ứng dụng Not Hotdog ra sao. Đây là 1 trong những ví dụ dễ tiếp cận, dễ hiểu nhất dành cho chúng ta.
  • Tôi cũng đã đọc các bài blog của Andrej Karpathy, Director of AI của Tesla.
  • Tôi đã bắt đầu implement vài tutorials về Deep Learning theo đúng từng từ một (copy và paste), cố gắng train model & chạy code trên local machine của mình. Hầu hết thời gian, nó đều không ổn vì hầu như model nào cũng tốn thời gian training cao và tôi lại không có GPU.

Dần dần, tôi chuyển từ các công cụ của Javascript sang Python, và cài đặt Tensorflow trên windows machine của mình.

Toàn bộ quá trình này tập trung vào tiêu thụ các nội dung và xây dựng các bài tham khảo 1 cách thụ động trong tâm trí để sử dụng khi mình gặp phải vấn đề thực sự với khách hàng.

Như Steve Jobs đã từng nói, bạn chỉ có thể liên kết các Điểm quan trọng trong cuộc đời khi nhìn lại quá khứ

Theo kịp con tàu chatbot

Photo by — Unsplash

Là fan ruột của movie Her, tôi đã rất muốn xây dựng chatbots của riêng mình và thực sự đã làm được 1 chatbot bằng Tensorflow trong chưa đến 2 giờ. Tôi đã phác họa quá trình này và các yêu cầu business liên quan ở 1 trong số bài báo của mình

Thật may là bài viết này đã nhanh chóng được lan truyền trên TechInAsia, CodeMentor, và KDNuggets. Đây thực sự là khoảnh khắc tuyệt vời khi mà tôi chỉ mới bắt đầu viết Tech blog, cũng là cột mốc quan trọng trong hành trình nghiên cứu AI.

Từ đây tôi cũng quen được rất nhiều bạn trên Twitter & LinkedIn, cùng đàm luận về lập trình AI cả về chiều dài lẫn chiều sâu cũng như tìm kiếm sự trợ giúp khi gặp khúc mắc. Tôi thậm chí còn nhận được vài lời đề nghị làm các dự án tư vấn và trên tất cả, các developers & AI beginners trẻ bắt đầu hỏi tôi cách bắt đầu với AI.

Đây cũng là lý do tại sao tôi lại viết bài này, để giúp mọi người làm theo và có thể tự mình bắt đầu hành trình chinh phục AI.

BẮT ĐẦU LÀ 1 trong những phần thách thức nhất trong bất kì hành trình nào

Salt & pepper

Photo by — Unsplash

Việc học AI thật không dễ dàng. Khi gặp khó khăn với Javascript, tôi đã dành nguyên 1 đêm để nhảy sang học Python và biết được cách để code bằng Python. Tôi đã từng cảm thấy rất bực mình khi các models của mình không train được trên i7 machine hay thậm chí là sau nhiều giờ training, chúng vẫn trả lại những kết quả rác như khả năng chiến thắng 50-50 của 1 team trong trận Cricket. Học AI không hề giống học web framework.

Đó là 1 skill đòi hỏi khả năng nhận thức những gì Đang diễn ra ở cấp độ vi mô của các tính toán & tìm ra được đâu là thứ phải chịu trách nhiệm cho output – code hoặc data của bạn

AI không chỉ là 1 chủ ngữ, mà là umbrella term (để chỉ 1 từ hoặc 1 câu bao quát hết các concepts thuộc 1 lĩnh vực thông dụng) được sử dụng cho tất cả mọi thứ, từ các vấn đề liên quan đến hồi quy đơn giản đến các killer robots có thể sẽ hủy hoại chúng ta vào 1 ngày nào đó. Cũng giống như mọi nguyên tắc mà chúng ta phải tuân theo, bạn sẽ muốn cherry pick những thứ tương tự như vậy trong AI, bạn sẽ muốn thực sự giỏi về Computer vision hoặc Xử lý ngôn ngữ tự nhiên (Natural Language Processing) hoặc cả những việc đại loại như ngăn cản Chúa trời, chiếm lĩnh thế giới.

Trong buổi nói chuyện với Gaurav Sharma đến từ Atlantis Capital, doanh nghiệp nổi tiếng hàng đầu trong lĩnh vực AI, Fintech & Crypto, anh đã tiết lộ với tôi rằng:

Trong kỉ nguyên artificial intelligence, “trở nên Thông minh” đồng nghĩa với cái gì đó hoàn toàn khác biệt. chúng ta cần phải thể hiện khả năng phê bình, sáng tạo và suy nghĩ ở mức độ cao cấp và cả những công việc cao cấp đòi hỏi sự gắn kết cao về cảm xúc

Bạn sẽ phải kinh ngạc vì cách các máy tính bất chợt tự mình học được mọi thứ. Sự kiên nhẫn và thái độ ngạc nhiên sẽ là 2 nguyên tắc chìa khóa chính mà bạn nên nắm bắt.

Đây là 1 hành trình lớn, rất lớn. Tốn thời gian, mệt mỏi và dễ gây bực dọc.

nhưng điều tuyệt vời chính là, cũng giống như mọi hành trình khác trên thế giới, hành trình này cũng sẽ bắt đầu từ bước đi nhỏ đầu tiên

Nguồn: TopDev via hackernoon.com

1...206207208...230Page 207 of 230