Nguyễn Hữu Kim

Máy không hiện đúng font có thế do hai nguyên nhân sau:

1. Bạn đang config sai CSS dẫn tới là text không hiển thị đúng font bạn muốn
2. Máy bạn không cài font đấy và website của bạn cũng không cung cấp do đó không hiển thị đúng font

Do máy khác thì bị nhưng máy bạn lại không bị nên mình nghĩ lỗi có thể do config sai CSS như ở giả thiết 1. Bạn thì thử kiểm tra F12 xem web có request được file font về chưa. Nếu chưa thì có thể là đường link: url('../fonts/UTM-Avo.ttf') thật sự không tồn tại. Mình suy đóán là do máy bạn đã cài font UTM Avo trực tiếp trong máy nên dù web không load được font theo CSS config nhưng sẽ fallback trực tiếp font từ local. Do máy khác không có cài nên sẽ bị lỗi.

Và cũng có khả năng cao là máy bạn không có cài font đó và website của bạn cũng không cung cấp font. => Giải pháp là bạn hãy chèn thêm font UTM Avo vào website nữa nhé! Font này không có trên Google Fonts nên có lẽ bạn thử tải font UTM Avo đã Việt hóa theo link này xem sao nhé: https://taimienphi.vn/download-utm-avo-35806

Sau khi tải về thì bạn hãy đưa vào website và thêm font-face theo mẫu giống ảnh đầu tiên trong câu hỏi của bạn:

@font-face {
  font-family: "UTM Avo",
  src: url('../fonts/UTM-Avo.ttf') format('ttf');
}

@duongricky Viblo đang sử dụng editor là SimpleMDE để hỗ trợ người dùng trong việc viết bài theo cú pháp markdown. Khi sử dụng markdown thì bạn có thể chèn code vào trong các code block theo cú pháp mặc định của markdown nhé.

Ngoài ra, bộ markdown render của Viblo cũng được public trên github tại repository https://github.com/viblo-asia/sdk-js. Bạn có thể sử dụng bộ render này kết hợp với SimpleMDE là sẽ có editor y hệt như Viblo và thừa hưởng toàn bộ syntax mà Viblo support bạn nhé.

Với những thông tin như kia thì mình nghĩ vẫn thật khó để đánh giá được việc bạn tìm hiểu và học được là ở mức độ nào. Thước đo chính xác có lẽ mình khuyên bạn nên mạnh dạn và tự tin vào kiến thức của mình rồi đi phỏng vấn ở một số công ty. Sau khi phỏng vấn thường người phỏng vấn về kỹ thuật sẽ hỏi lại bạn xem bạn có câu hỏi nào dành cho họ hay không. Bạn có thể trao đổi về khả năng của mình lúc này và sẽ có các thông tin khách quan hơn từ người trực tiếp phỏng vấn bạn. Đi phỏng vấn cũng như đi học, bạn sẽ biết được bạn còn thiếu hay yếu ở những mục nào để về rèn luyện thêm cho bản thân. Phỏng vấn thì chắc chắn có người pass người bị fail. Nó rất đỗi là bình thường nên cứ mạnh dạn lên bạn nhé.

Mình nghĩ chắc là trong code Laravel bị lỗi gì đó nên có response 500. Bạn kiểm tra thư mục storage/logs, bootstrap/cache xem đã có quyền ghi chưa? Nếu có quyền ghi rồi thì bạn thử xem log lỗi của laravel trong file storage/logs/laravel.log thì sẽ biết nguyên nhân tại sao lỗi.

Solution 1: Use CSS3

Có rất nhiều giải pháp nhé. Mình suggest bạn một cách rất đơn giản mà hữu ích chỉ với CSS mà không phải thêm plugin nhé.

Khi tích hợp Facebook Messenger, trong đoạn code embed Facebook đưa cho mình sẽ bao gồm một thẻ div#fb-root, được facebook dùng để embed chatbox vào bên trong đó. Bạn chỉ thêm style cho cái div#fb-root là được. Nếu bạn dùng cái lib kia thì chắc nó cũng sẽ render ra #fb-root hoặc nếu khác thì bạn làm tương tự nha.

VD: Muốn ẩn chatbox khi ở màn hình có độ rộng nhỏ hơn hoặc bằng 1023px, thêm đoạn code như sau:

@media screen and (max-width: 1023px) {
  #fb-root {
    display: none !important;
  }
}

Ngoài ra, bạn có thể thêm javascript để lấy chiều rộng hiện tại của màn hình rồi thêm quyết định có render cái component messenger hay không.

Ưu điểm của việc dùng CSS:

• Dùng CSS3 nên thoải mái tùy biến theo độ phân giải màn hình
• Khi độ rộng màn hình thay đổi, xoay màn hình, thì CSS vẫn chạy tốt

Solution 2: Handle by JavaScript

@tuananhbfs Nếu bạn không muốn dùng CSS thì bạn có thể viết code JS như sau, cũng đơn giản và dễ hiểu:

1. Cài thêm package mobile-detect để kiểm tra thiết bị có phải là mobile không

yarn add mobile-detect

2. Viết plugin cho Nuxt.js

import Vue from 'vue'
import VueFbCustomerChat from 'vue-fb-customer-chat'
import MobileDetect from 'mobile-detect'

export default () => {
  const mobileDetect = new MobileDetect(window.navigator.userAgent)

  if (!mobileDetect.mobile()) {
    Vue.use(VueFbCustomerChat, {
      page_id: 'xxx',
      theme_color: '#6a9e10',
      locale: 'vi_VN',
    })
  }
}

3. Kích hoạt plugin của bạn

export default {
  ...,
  plugins: [
    ...,
    { src: '~/plugins/facebookMessenger', ssr: false },
  ]
}

Nhớ lưu ý là phải khải báo plugin với ssr: false nhé. Vì cái plugin này mình chỉ cần chạy dưới client thôi.

Theo mình thấy thì bạn đang thiên hướng làm về frontend thì phải. Trong thực tế, một dev frontend ngoài thuần thục sử dụng react thì cũng nên dùng cả vuejs nữa. Tất nhiên, vẫn nên tập trung học một cái là react trước như bạn đang làm là đúng hướng.

1. Tiếp theo, mình nghĩ bạn cũng nên thử dùng thêm các thư viện Frontend của react như ant.design, material design, bootstrap và cả tailwind nữa. Ngoài việc học tiếp về cắt PSD, HTML5/CSS3, nó là cần thiết với Frontend developer thì về JavaScript bạn cũng nên tìm hiểu thêm về syntax ES6, ES7... Như vậy là đã đi làm ổn rồi. Sau này, bạn luyện tập các skill JS + CSS3, mắt thẩm mỹ của bản thân cũng sẽ trau dồi qua từng dự án. Nếu bạn học thêm về typescript nữa thì ngon.

2. Về vấn đề strongJS, mình nghĩ đó là câu từ để HR nhấn mạnh rằng họ quan trọng JS nhiều. Bạn nên ghi là đã có kinh nghiệm làm những cái gì về JS, sản phẩm như nào, ghi link demo vào CV hơn là việc chăm chú vào phân vân ghi strongJS hay level bao nhiêu.

Trên đây là vài ý kiến của mình chia sẻ, chúc bạn thành công!

Thường thì các banner họ sẽ không dùng trực tiếp thẻ img mà sẽ đặt thành background của một thẻ div nào đó. Lợi ích của việc này là:

• Bạn có thể thêm các nội dung các đè lên trên ảnh một cách đơn giản và dễ làm.
• Khi kích thước div banner bị thay đổi khi co giãn thì khi set background sẽ hạn chế việc méo ảnh khi kết hợp background-size: cover

Bạn có thể chuyển ảnh thành background, phần nội dung bên trong bạn vẫn có thể thêm được như bình thường, CSS cho nó hiển thị ở bên trái banner. Mỗi ảnh là một cái div.banner, tùy thuộc bố cục của ảnh và nội dung ở vị trí nào mà bạn sẽ cần CSS. và CSS theo nhiều screen phổ biến để hỗ trợ responsive.

Bạn thử tham khảo giải pháp sau xem sao nhé. Đây là giải pháp mà mình đã research giúp bạn:

List<int> IdsToFind = new List<int>() {2, 3, 4};

db.Users
.Where(u => SqlMethods.Like(u.LastName, "%fra%"))
.Where(u =>
    db.CompanyRolesToUsers
    .Where(crtu => IdsToFind.Contains(crtu.CompanyRoleId))
    .Select(crtu =>  crtu.UserId)
    .Contains(u.Id)
)

Link: https://stackoverflow.com/questions/418609/how-to-do-a-subquery-in-linq

Có vẻ là việc sử dụng việc sử dụng theme được build sẵn thành file .css như kia thì mình nghĩ là không thể tránh khỏi được. Nếu theme của bạn có support SASS và viết tách biệt thành các component riêng thì bạn có thể làm theo hướng, import những component cần thiết, như thế thì lượng code không dùng sẽ giảm bớt đáng kể.

Bạn thêm một cái route default cho laravel, luôn render cái SPA view cho mọi URL, khi render ra SPA rồi thì dưới frontend, vue-router sẽ tự render page tương ứng.

Route::get('*', 'SPAController@render');

Hơi ít thông tin để đoán được lỗi bạn đang gặp phải, chẳng hạn như bạn đang deploy docker ở Swarm mode hay không? Deploy docker trên mấy node, đã setup NFS giữa các node chưa? Web chạy proxy hay dùng web server nào: nginx, apache...

MÌnh thử đoán mò, chắc ý bạn là web không hiển thị được ảnh và style nhỉ? Mình gợi ý bạn thử check lỗi bằng cách sau:

• Bạn thử access vào trong container xem đã có các file css, js, img được mount vào trong container chưa, mount có đúng folder chưa?
• Web server đã chạy hay chưa?

Rất có thể là bạn chưa mount được hoặc mount sai đường dẫn vào trong container nên không request được các file static kia. Để thuận tiện cho việc deploy mình suggest bạn dùng docker-compose thay vì deploy bằng docker cli.

1. Sửa API lấy dữ liệu, để hỗ trợ phân trang, trong Laravel bạn có thể dùng paginate của Query Builder:

$query = User::posts()->where('published', true);
$users = $query->paginate(10) // 10 item mỗi trang

Sau khi gọi paginate, bạn sẽ có một số thông tin gọi là meta như: page hiện tại, tổng số page. Tham khảo thêm trong document của Laravel nhé. Bây giờ bạn hiển thị link với số page tương ứng trên web thôi. Nếu hiển thị danh sách trang trong modal thì bạn listen các nút chuyển trang, khi click thì sẽ gọi api để lấy dữ liệu cho trang mới.

2. Sửa API lấy dữ liệu, phân trang kiểu Infinity Loading, tức là bạn cuộn hết danh sách thì gọi API lấy thêm dữ liệu cho tới khi API trả về trống thì là ko gọi nữa. Làm kiểu này thì ban đầu bạn sửa code cách 1 như sau:

$lastItemId = $request->query('last_item_id');
$query  = User::posts()->where('published', true);
$query->when($lastItem, function($query) use ($lastItemId) {
    $query->where('posts.id', '<', $lastItemId);
});

$users = $query->take(10);

3. Nếu ko sửa API thì bạn phân trang bằng javascript nhé.

Bạn thêm quyền ghi cho thư mục storage nhé:

sudo chmod -R 777 storage

Bác dùng component Select thì listen cái event onPopupScroll để khi cuộn cái list thì fetch thêm data về. Nên check khi cuộn gần tới cuối thì fetch more items về. Giả sử định nghĩa gần tới cuối dùng cách tính như này chẳng hạn:

Quãng đường đã cuộn được > 3/5 chiều cao của danh sách

Code sẽ có dạng như sau:

function async handleScroll(e) {
  const isEndOfList = e.target.scrollTop > 3/5*e.target.scrollHeight;

  if (isEndOfList) {
    fetchMoreItems({ last_item_id: 20, per_page: 20 })
      .then(...)
  }
}

<Select
   ...
   onPopupScroll={handleScroll}
>
  {children}
</Select>

Bạn tham khảo thử nhé.

Bạn thử kiểm tra lại như sau coi có giúp được gì không nhé:

• Kiểm tra lại request payload, đã chắc chắn server nhận được username, password mà bạn gửi lên hay chưa?
• Nếu server đã nhận được payload, bạn kiểm tra model User coi có thêm mutator nào cho trường password không. Chẳng hạn như User đã có mutator để tự động hash password trước khi lưu vào database, nhưng khi tạo User bạn lại hash password một lần nữa như này:

User::create([
  'email' => $email,
  'password' => bcrypt($password),
]);

dẫn tới khi Auth::attempt thì lại thành ra password không khớp. Hoặc nếu không có mutator trên thì liệu bạn đã hash password lúc tạo user như ví dụ trên hay chưa?

• Bạn thử check xem dự án của bạn, config hashing là gì, bcrypt, argon... có khớp với kiểu mà bạn đang dùng để hash password lúc tạo User hay không, vì nếu lúc tạo hash một kiểu, lúc attempt hệ thống lại dùng một kiểu khác thì password cũng không khớp.

Có vẻ là server node chưa chạy lên được rồi bạn ạ vì khi chạy npm run start nó bị lỗi như kia. Chắc là cái server nodejs đang chạy trùng port 80 rồi (Nginx đang chạy ở port 80, 443). Bạn sửa code để cho nodejs chạy ở port khác, VD: 3000, rồi dùng nginx làm reverse proxy để handle request từ nginx:80 tới nodejs:3000 xem sao nhé.

Khi bạn muốn ghi đè style cho một class đã có, bạn cần chú ý về các mức độ ưu tiên sử dụng CSS. Một số lưu ý cơ bản:

• Chú ý viết style mới phải được thêm vào phía dưới style đã có. Bao gồm:
  • <link stylesheet> mới ở đặt dưới <link stylesheet> cũ nếu bạn tách các file css.
  • Nếu style mới, cũ cùng một file css, thì các style mới phải viết ở dưới phần style cũ. Nếu ko thì nó vẫn nhận style cũ. TH này muốn nhận style mới thì phải thêm !important - nên hạn chế dùng cái !important này thì hơn.
  • Nếu dùng sass, css mới và cũ nằm khác file, thì file chứ style mới cũng được được import sau khi đã import file cũ.
• Ngoài ra, bạn cũng chú ý về kỹ năng debug CSS. Khi inspect element lên, bạn chú ý tab computed coi nó đang nhận CSS ở chỗ nào, từ đó dễ phát hiện lỗi hơn.

Cái lỗi này là lỗi cơ bản nên bạn cố gắng tư debug để nâng cao skill debug lên nhé. Còn nếu ko được thì bạn thử thêm như này coi sao:

.new-class {
  left: unset;
  right: 0 !important;
}

@Trungdao Em thấy từ IOS10 trở đi mới có support thì phải bác ạ. Bác thử làm theo hướng dẫn này xem sao nhé:

• https://viblo.asia/p/setup-rich-push-notification-ios-maGK7MEDlj2
• https://hackernoon.com/whats-new-in-ios-10-rich-notification-1350f267fe57

Ngoài ra, bác có thể thể search Google với keywords:

• Rich text in push notification ios
• Rich notification ios

Chúc bác thành công!

Mình thấy bạn request API để lấy json data về, chỉ cần kiểm tra nếu API return statusCode lỗi như: 401, 403, 500 thì bạn hiển thị một cái thông báo đỏ lên màn hình để báo lỗi là được rồi. Làm như bạn đang nghĩ mình thấy không hợp lý cho lắm. Góp ý chân thành tới bạn.

Bạn thử tham khảo bài viết sau xem sao nhé:

• https://wisdmlabs.com/blog/create-settings-options-page-for-wordpress-plugin/
• https://developer.wordpress.org/plugins/settings/custom-settings-page/

Theo đó thì bạn dùng sử dụng hook register_setting để đăng ký trang setting:

function myplugin_register_settings() {
   add_option( 'myplugin_option_name', 'This is my option value.');
   register_setting( 'myplugin_options_group', 'myplugin_option_name', 'myplugin_callback' );
}

add_action( 'admin_init', 'myplugin_register_settings' );

Rồi thực hiện một vài thứ khác nữa để add input field vào trang đấy.