최상의 HTML, CSS, 자바 스크립트 연습 : Chrome 확장

Codecademy를 ​​방금 마친 사람들을 위해.

프로그래밍을 공부할 때 가장 효율적인자가 학습 방법은 제품을 개발하는 것입니다. 이 방법은 프로그래밍 기술을 향상시키기 위해 프로그래밍 과정을 수강하는 것보다 훨씬 빠릅니다.

일반적으로 사람들은 웹 프로그래밍에서 HTML, CSS 및 기본 Javascript로 프로그래밍을 배우기 시작하지만 서버 측에 도달하기 전에 의미있는 응용 프로그램을 만들기가 어렵습니다.

그래서 저는 항상 학생들에게 이런 식으로 설득하려고 노력했습니다.

서버 측을 배우고 일부 응용 프로그램을 시작하면 재미있을 것입니다. 제발 포기하지 마세요

그러나 많은 학생들이 HTML 및 CSS 단계에서 프로그래밍 학습을 중단합니다.

(아마도 사람들이 프로그래밍을 공부하도록 장려하기 위해 HTML로 시작하는 것은 좋은 생각이 아닙니다.)

어느 날, Chrome 브라우저를 열어 작업을 시작했습니다. 그런 다음 실제로 HTML, CSS 및 Javascript 만 사용하여 빌드 할 수있는 최상의 응용 프로그램을 사용하고 있음을 깨달았습니다.

기세

간단히 말해서 Chrome에이 확장 프로그램을 설치하면 새 탭을 열 때마다 매우 멋진 그림 위에 인사말 메시지가 표시됩니다. 다운로드 수는 이미 수백만입니다. 이것을 사용하지 않았다면 설치하는 것이 좋습니다. 새 탭당 2 ~ 3 초 동안 만이 애플리케이션을 경험할 수 있지만 잠시 휴식을 취할 수 있습니다.

이 응용 프로그램을 복제 해 봅시다!

1 단계 : 준비 할 사항

  • HTML
  • CSS
  • 자바 스크립트
  • 좋은 사진 : 튀지 않은 곳에서
  • manifest.json (Chrome에서로드)

응용 프로그램을 빠르게 개발 한 방식은 미래가 아니라 현재에 초점을 두는 것이 었습니다. 물론 독창적 인 프로젝트가 아닌 경우 구체적인 계획을 세우는 것이 중요합니다. 그러나! 자기 동기 부여의 수명은 매우 짧으므로 무언가를 개발하고 싶을 때 매우 빨리 완성하는 것이 좋습니다. 제품을 향상시킬 다른 옵션에 대해 생각하기 시작하면 프로젝트를 끝내지 않습니다.

간단하게 유지합시다.

우리는 하나의 큰 그림, 하나의 큰 인사 메시지 및 현재 시간으로 하나의 웹 사이트를 만들고 있습니다.

사진 찾기

Unsplash 웹 사이트로 이동하면 수많은 멋진 라이센스없는 이미지를 찾을 수 있습니다.

노르웨이에 있기 때문에이 사진을 사용하기로 결정했습니다.
감사합니다, Vidar Nordli-Mathisen. (재능을 인정하는 것이 항상 중요합니다.)

Unsplash에 Vidar Nordli-Mathisen의 사진

프로젝트 만들기

단순 단순 단순

하나의 HTML 파일, 하나의 CSS, 하나의 자바 스크립트 및 하나의 매니페스트 파일.

그게 우리가 필요한 전부입니다.

자, 이것은 첫 번째 버전입니다.

이것은 간단한 웹 페이지입니다. 이제 Chrome에서로드하려면 다음 manifest.json 파일을 추가해야합니다.

"chrome_url_overrides"는이 응용 프로그램에서 가장 중요한 속성입니다.

확장 페이지로 이동프로젝트 폴더 내부의 선택 버튼을 클릭하십시오우리의 겸손한 확장…새 탭을 열 때마다 간단한 웹 페이지가 표시됩니다.

거기서 첫 프로젝트를 마쳤습니다.

이 기능으로 만 사용할 수 있습니다. 어쩌면“불가능한 것은 아무것도 없다”,“그냥해라”,“우리는 세상이다”, 무언가와 같이 스스로 동기를 부여하고 싶은 것으로 텍스트를 편집 할 수 있습니다. 또는 가족 사진을 대신 넣을 수도 있습니다.

그러나 이것보다 더 나아지게합시다.

2 단계 : 추가 할 사항

  • 현재 시간
  • 이름 변경 기능
  • 사진 변경 기능

이 세 가지 새로운 기능을 포함시키기 위해 아래와 같이 HTML 파일을 변경했습니다.

CSS도 변경해야합니다.

그러면 새 페이지는 아래와 같습니다.

오, 나는 그것이 모멘텀이라고 생각했다 :)

manifest.json 업데이트

이제 두 가지 기능을 추가하겠습니다.

우선, 사람들이 이름을 붙일 수 있도록이 신청서에 입력 양식을 추가합니다. 이 양식을“Hello, Jungwon Seo”메시지 아래에 추가하겠습니다.

이게 못 생겼어 고치자

입력 태그의 새로운 스타일.

좋아, 훨씬 좋아

이제부터이 정보를 저장하는 방법에 대해 생각해야합니다.

'쿠키'를 사용하지만 Chrome 브라우저에서 HTML 파일 만 열면 '쿠키'를 사용할 수 없습니다. Chrome 확장 프로그램으로로드 한 후 테스트 해보십시오.

이전 게시물의 저장 권한에 대한 정보가 잘못되었습니다. '쿠키'를 사용하기 위해 '저장소'권한이 필요하지 않습니다.

또한 여전히 jQuery를 선호하므로 추가하겠습니다.

jQuery CDN을 추가하려고했지만…

걱정하지 마세요. manifest.json에 속성을 하나만 추가하면됩니다.

이제 script.js 파일로 코딩 할 준비가되었습니다.

내가 먼저하고 싶은 것은 :

  1. 사용자가 자신의 이름을 입력하게하십시오.
  2. 쿠키에 저장 (가장 인기있는 코드 만 사용)
  3. 입력 양식을 페이드 아웃하고 인사말 메시지를 페이드 아웃하십시오.

이제는 실제 개발자처럼 생각해야하는 것은 이번이 처음입니다.

사례 1 : 처음 열 때.
사례 2 : 이름을 입력 한 후 열 때

볼 수있는 것과 보이지 않아야 할 것을 결정해야합니다.

사례 1 :
시간 : 현재 시간
인사말 : 당신의 이름은 무엇입니까?
입력 양식 : 표시

사례 2 :
시간 : 현재 시간
인사말 : 안녕하세요, <이름>!
입력 양식 : 보이지 않음

그리고이 두 경우를 구별하는 방법은 쿠키에 'username'키가 있는지 확인하는 것입니다.

시간 업데이트 기능으로 새로운 script.js는 다음과 같습니다.

이름을 입력하기 전에이름을 입력 한 후

좋아, 그것은 작동하는 것 같습니다.

물론, 전환 효과와 같이 개선해야 할 사항이 있습니다.

그러나 나는 그것을 당신에게 줄 것입니다.

이제 또 뭐?

사용자가 사진을 변경할 수있는 기능을 추가해야합니다.

언 플래시 API

이 페이지에서 앱을 쉽게 등록하고 토큰을 얻을 수 있습니다.

Unsplash API를 사용하려면 개발자 페이지에서 응용 프로그램을 등록해야합니다.

‘새 애플리케이션’을 클릭하면 자신의 애플리케이션을 등록 할 수 있습니다.

데모 제품의 경우 시간당 최대 50 개의 요청을 사용할 수 있습니다. 그리고 그것은 우리에게 충분합니다.

그러나 아래 양식을 작성하십시오.

이름을 입력하십시오

애플리케이션을 만들면 리디렉션 된 웹 사이트에서 '키'부분이 표시됩니다.

이 응용 프로그램을 삭제 했으므로 시도 할 필요가 없습니다.

'액세스 키'를 복사하여 자바 스크립트 변수 'ACCESS_KEY'에 할당하면됩니다.

검색 API를 사용하겠습니다.

시나리오는 다음과 같습니다. 모든 사람들은 서로 다른 관심사를 가지고 있습니다. 먼저 관심사를 묻고 Unsplash API를 사용하여 해당 이미지를 검색하겠습니다. 그런 다음 12 시간마다 이미지를 동일하게 업데이트합니다 (동일한 키워드, 다른 사진).

따라서 AJAX 기능은 다음과 같습니다.

이 함수는 관심을 입력 한 후에 호출됩니다.

그런 다음 예상대로 다시 개발자가되어야합니다.

사례 1–1 : 처음으로
사례 1–2 : 이름 뒤에
사례 2 : 관심을 입력 한 후
사례 3 : 12 시간 후

자, 하나씩 결정합시다.

사례 1–1에서는 모든 이미지 관련 부분을 숨기면됩니다. 이것을 건너 뛰십시오.

사례 1–2에서는 관심 분야에 대한 입력 양식 만 표시합니다.

사례 2에서 AJAX에 전화하여 이미지 정보를 저장하십시오.

사례 3에서는 만료 시간을 12 시간으로 설정하고 쿠키가 비어 있으면 AJAX 요청을 다시 호출하십시오.

키워드 : 런던

예, 작동합니다.

3 단계 : 최종 마무리

사진가에게 반드시 신용을 요구하는 것은 아니지만 왜 그렇지 않습니까?

코드를 몇 줄 더 작성하고 사진사의 이름과 페이지를 왼쪽 상단에 표시 할 수 있습니다.

쿠키를 처음 확인할 때 사진사의 정보를 사용할 수 있습니다.

한 가지 더, 누군가가 관심을 바꾸고 싶다면 어떻게해야합니까?

사람들이 관심을 다시 입력 할 수있는 기능을 추가합시다.

버튼을 클릭하기 전에

당신은 간다. “새로운 관심사 선택”버튼을 클릭하면 이전에 관심 분야를 입력 한 입력 양식이 열리도록 트리거됩니다.

버튼을 클릭 한 후

4 단계 : 나만의 제품 만들기

나는 당신이 처음부터 끝까지 과정을 경험하기를 원합니다. 그래도 배운 기술을 실제로 흡수하려면 스스로 개발해야합니다.

무작위 사진을 선택하는 방법과 같이 포함시키는 것이 좋을 것이라고 생각되는 기능이 있어야합니다. 또는 내 코드 중 일부가 비효율적이라고 생각할 수도 있습니다. 더 나은 코드로 동일한 제품의 버전을 향상시킬 수 있습니다.

행운과 포기하지 마세요!

전체 버전은 여기에서 찾을 수 있습니다 : https://github.com/thejungwon/MyChromeExtension

이 이야기는 Noteworthy에서 발행되며 매일 10,000 명이 넘는 독자들이 우리가 사랑하는 제품을 형성하는 사람들과 아이디어에 대해 배우고 있습니다.

저널 팀이 제공하는 더 많은 제품 및 디자인 사례를 보려면 당사의 간행물을 참조하십시오.