Nguyễn Hữu Kim

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.

Ý họ nói là nếu trong trường hợp bạn dùng input[type="checkbox|ratio"] mà không có thẻ label đi kèm thì cần reset cái thuộc tính position về giá trị mặc định là static. Bằng cách thêm cái .position-static cho cái checkbox. Bởi vì cái .form-check-input nó đang có position: absolute. Nếu không reset về static thì sẽ bị lỗi giao diện giống @dao.thai.son nói ở dưới.

Để làm hiệu ứng này thì bạn cần sử dụng javascript để xử lý nhé. Mình sẽ bắt sự kiện mousemove, fire khi con chuột di chuyển. Con chuột di chuyển một khoảng bao nhiêu thì mình sẽ cuộn cái menu một khoảng bấy nhiêu. Lười viết code nên mời bạn tham khảo code mẫu mình kiếm được ở trên mạng nhé:

Bạn dùng thử cách này xem:

RewriteEngine On

RewriteCond %{HTTP_HOST} ^(www\.)?example\.com$ [NC]
RewriteRule !^public/ /public%{REQUEST_URI} [L,NC]

Với lại bạn có chắc là đã enable mod Rewrite lên chưa bằng cách vào trang dashbash của CPanel xem info của php. Nếu chưa thì bạn tích chọn để enable mod rewrite cho hosting lên nhé.

Cái này cũng hơi khó, không biết bạn đang phỏng vấn ứng tuyển vào vị trí nào. Bởi mỗi vị trí bạn ứng tuyến thì nhà tuyển dụng sẽ hỏi những câu hỏi khác nhau tới bạn. Việc phỏng vấn một bạn vào thực tập sẽ khác phỏng vấn một bạn junior hay senior nữa. Nhưng dựa vào cách đặt câu hỏi thì mình đoán bạn là fresher. Do là newbie phỏng vấn về kỹ thuật thì bạn nên nắm chắc:

• Các kiến thức nền của web như HTTP, Restful API, Session/Cookie.
• Các kiến thức nền của PHP như các khái niệm cơ bản về biến, hằng số, namespace.., về lập trình hướng đối tượng - OOP, design partern, và nắm cơ bản một framework nào đó mà công ty đó đang dùng.
• Các kiến thức cơ bản về frontend như CSS, CSS3, HTML5, Ajax, Javascript/ES6, nếu biết dùng cơ bản về một thư viện nào đó như Vue.js, React.js mà công ty đó đang sử dụng.
• Mốt số kiến thức về security cơ bản như XSS, SQL injection...

Nếu là fresher thì mình nghĩ vậy là khá ổn để bạn tự tin hơn rồi.

Bạn có thể show nội dung file config/database.php của bạn được không? Mình nghĩ bạn có thể đang cấu hình sai, có thể đang chạy mysql với socket chứ không phải tcp ở port 3306 nên không connect được tới mysql. Hoặc bạn thử đổi database host về 127.0.0.1 xem sao?