CSS Battle có miễn phí không?

Từ Đăng ký đến Bán hàng, các hành động kỹ thuật số sẽ không thể thực hiện được nếu không có các nút. Chúng là bản chất của sự tương tác giữa con người và máy tính. Với gói này, hãy mang đến cho trang web của bạn một luồng gió mới, chưa từng có ha. Xem thêm

Nếu bạn đang học phát triển Web hoặc đã là một nhà phát triển Web chuyên nghiệp, khả năng rất cao là bạn đã từng viết CSS ít nhất một lần trong đời. Nó là một khối xây dựng rất cơ bản của bất kỳ trang web nào. Giữa tất cả các cuộc thảo luận và yêu và ghét CSS, chúng tôi giới thiệu với tất cả các bạn — CSSBattle ?⚔️

CSSBattle là nền tảng đánh gôn mã đầu tiên dành cho những người yêu thích CSS mà tôi và bạn tôi, Kushagra Agarwal, đã tạo ra. Mục đích của trò chơi này rất đơn giản - bạn có một mục tiêu hình ảnh mà bạn cần sao chép bằng mã CSS nhỏ nhất có thể (và HTML nhẹ nếu bạn muốn). Kết hợp trực quan hơn và ít byte hơn giúp bạn có điểm cao hơn. Và đó là cách bạn leo lên bảng xếp hạng trong CSSBattle. Đây là một ví dụ về màn hình mục tiêu

Mục tiêu số 9 màn hình chơi

Một số thống kê thú vị

Tại thời điểm viết bài này, chúng tôi đã ra mắt được 10 ngày. Và đây là một số thống kê thú vị mà chúng tôi đã thu thập được

• Hơn 13000 người chơi trên toàn thế giới
• Hơn 100 nghìn lượt gửi mã
• Số byte tối thiểu được sử dụng trên một mục tiêu. chỉ 54 byte. ?
• Một diễn đàn cộng đồng đáng yêu gồm hơn 140 người chơi và hơn 40 cuộc trò chuyện

Phát triển sản phẩm

Chúng tôi đã quyết định xây dựng và khởi chạy CSSBattle trong một tháng để tránh bị cuốn vào vòng lặp vô tận của việc bổ sung và đánh bóng các tính năng. Chúng tôi đã lập một danh sách các mặt hàng thực sự cần thiết để ra mắt và tập trung vào nó

Trong quá trình phát triển, chúng tôi đã đưa ra rất nhiều ý tưởng mới để triển khai trên trang web, những ý tưởng này chúng tôi luôn ghi lại. Tôi tự hào rằng chúng tôi có thể cưỡng lại thôi thúc thực hiện những ý tưởng thú vị đó và cuối cùng sẽ ra mắt sau một tháng nữa

ngăn xếp công nghệ

Ngăn xếp công nghệ của chúng tôi khá chuẩn cho sản phẩm ngày nay. Chúng tôi có React (sử dụng ứng dụng tạo phản ứng làm trình bắt đầu) trên giao diện người dùng được triển khai trên Zeit Now. Đối với phần phụ trợ, chúng tôi sử dụng Firebase. Vì cả hai chúng tôi chủ yếu có kinh nghiệm thiết kế/giao diện người dùng, nên Firebase hóa ra là một lựa chọn tuyệt vời để dễ dàng triển khai mọi thứ chúng tôi có trong đầu đồng thời đạt được khả năng mở rộng và bảo mật tốt nhất mà không cần quản lý bất kỳ máy chủ nào

Thuật toán chấm điểm

Một trong những điều thú vị nhất khi phát triển CSSBattle là thiết kế thuật toán tính điểm. Chúng tôi đã ngồi hàng ngày để thảo luận và thử các công thức khác nhau. Chúng tôi muốn rằng một trận đấu trực quan hơn sẽ luôn mang lại điểm số cao hơn. Và tất nhiên, với cùng một tỷ lệ trùng khớp, điểm số sẽ tăng lên khi giảm số byte mã. Ngoài ra, chúng tôi muốn tiến trình điểm nhanh hơn đối với các byte thấp hơn sau khi bạn đạt 100% trận đấu, để mang lại nhiều phần thưởng hơn cho những người chơi đổ mồ hôi với mỗi byte bị loại bỏ

Cuối cùng, chúng tôi hài lòng với những gì chúng tôi nghĩ ra. Có lẽ chúng tôi sẽ viết một bài riêng về thuật toán tính điểm. )

ra mắt

Ban đầu chúng tôi dự định ra mắt vào ngày 5 tháng 4, nhưng chúng tôi phải ra mắt trước đó một ngày. Chúng tôi đã mời nhiều nhà phát triển CSS nổi tiếng dùng thử CSSBattle trước khi ra mắt công chúng. Và “may mắn thay” Jonathan Snook đã tweet về chúng tôi một ngày trước khi chúng tôi dự định ra mắt, gửi một lượng lớn các nhà phát triển đến với trò chơi. Và vì vậy chúng tôi quyết định chuẩn bị ra mắt. )

Chúng tôi bắt đầu với thông báo trên ProductHunt trong đó CSSBattle là sản phẩm số 1 trong ngày. Ngay sau đó là một cơn sốt Reddit. Và sau đó, dòng tweet lớn và thực sự đáng khích lệ của Lea Verou

Kể từ đó, đó là một chuyến đi điên rồ đối với cả hai chúng tôi khi chứng kiến ​​cộng đồng phát triển, vui chơi, học hỏi và cạnh tranh. Mỗi ngày chúng ta thấy người chơi phá vỡ giới hạn của sự sáng tạo và trí tưởng tượng với CSS

Hãy đến tham gia với chúng tôi

Chúng tôi có một cộng đồng rất đáng yêu bao gồm các nhà phát triển khiêm tốn và sáng tạo tuyệt vời trên Spectrum, nơi bạn có thể giao lưu và tìm hiểu một số Thủ thuật CSS

Vậy, bạn còn chờ gì nữa? . // cssbattle. dev
(Chúng tôi cũng đã thấy những người muốn học CSS chỉ để chơi trò chơi này. )

⚠️ Cảnh báo công bằng

CSSBattle rất thú vị và gây nghiện. Chúng tôi đã chứng kiến ​​nhiều người mất ngủ, có những giấc mơ kỳ lạ, trễ hẹn với bạn bè, chửi bới, bỏ qua thời hạn dự án và những điều không như vậy. Vui lòng tự chịu rủi ro khi nhập. ?

Ngoài ra, chúng tôi cảm thấy có trách nhiệm nêu bật rằng ngoài các cách tiếp cận sáng tạo, CSSBattle yêu cầu bạn khai thác cách trình duyệt phân tích cú pháp CSS (và HTML). Điều quan trọng là phải hiểu rằng CSS bạn viết ở đây không phải là cách bạn sẽ viết trong một dự án thực tế. Các mẹo và thủ thuật bạn học được khi chơi ở đây chắc chắn sẽ giúp bạn hiểu rõ hơn về CSS, nhưng hãy luôn cảnh giác và tò mò về hack là gì và hack là gì

Chúc CSS-ing vui vẻ

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Trận chiến CSS hoạt động như thế nào?

Làm thế nào để thực hành HTML và CSS?