Digital Ocean Hackathon 응용 프로그램: 스타일 및 (추가) 연구

우리가 어떤 방식으로 어떤 교체를 할 것인지를 결정할 때, 우리는 스타일 디자인을 할 수 있고, 데이터 원본 (특히 영문 텍스트/채팅 사전) 을 찾을 수 있다.

스타일링

지난 글에서 우리는 따를 수 있는 디자인을 제시했는데, 지금 우리는 이렇게 할 수 있다.지금이야apply it to the website
데스크톱 모드에서 Grid를 사용하여 입력 상자와 단추를 만들 수 있습니다. 이것은 모든 내용이 수직으로 표시되기 때문에 모바일 장치에서 매우 간단합니다.

핸드폰 좋아요!
대형 모니터에 대해 우리는 두 열과 두 줄을 포함하는 간단한 격자를 만들어야 한다.열은 같은 폭을 가지며, 그 내용에 맞게 자동으로 조정할 수 있다.
화면의 폭이 600px를 초과할 때, 우리는 큰 화면을 사용할 것이다.

테이블도 괜찮아 보여요!
이것들은 작은 CSS 변경 사항이지만, 아주 멋있게 적용됩니다. 왜냐하면 저는 FlexBox, 격자, 특이한 포지셔닝을 사용했기 때문입니다.자!나는 유일하게 진정으로 CSS를 좋아하는 사람이 아니다!
기타 몇 가지 스타일 결정:

단락의 폭을 60ch로 제한하여 가독성을 높인다.

글꼴 크기를 늘리고 안감 없는 선을 사용합니다.

HTML 내용을 약간 다른 방식으로 구성합니다.

아직 결정을 기다려야 한다.

팔레트.

스타일이 더 잘 어울려요.

추가 기능 및 옵션 스타일

꼬리/꼬리의 외관.

미시적 상호작용

너무 많지 않을 수도 있지만, 이미 몇 가지 상호작용이 추가되었습니다. 역할 수량은 변경할 때 업데이트되고, 상자의 색깔은 제출할 때 변경됩니다.
이것들은 모두 자바스크립트로 완성된 것으로 작아 보일 수도 있지만 결국 중요한 것은 이런 작은 일들이다.

사전.

하나 찾았어요text/chat dictionary on the Webopedia.그것은 정말 완전해 보이지만, 나는 여전히 얼마나 많은 효과가 있는지, 그것들이 모두 가치가 있는지 볼 필요가 있다.
그 외에 다른 간단한 간략한 텍스트는 숫자이다.흔치 않은데, 그것들의 숫자는 항상 자모보다 짧다.

One ==> 1 (gain 2)
Ten ==> 10 (gain 1)
Twenty ==> 20 (gain 4)
...

숫자는 문자 수를 줄일 수 있지만, 그것들은 무한하니, 우리는 그것들을 제한해야 한다
이 도구의 목표는 트위터에서 사용하기 때문에, 나는 다른 사전이 아마도 유명인과 유명인일 것이라고 생각한다.만약 그들의 트위터 문맥이 그들의 이름보다 짧다면, 우리는 그것을 바꿀 수 있다.
Wikipedia has a list of 50 및이것은 많은 편은 아니지만, 지금은 그런대로 괜찮다.

Barack Obama ==> @BarackObama (gain 0)
Cristiano Ronaldo ==> @cristiano (gain 7)
Justin Timberlake ==> @jtimberlake (gain 5)
...

이것 또한 이 사람에게 꼬리표를 붙이게 할 수 있어 화가 날 수도 있다.나중에 결정해야 될 것 같아서요.그렇게 지도 모른다, 아마, 아마...
또 다른 대체 기회는 회사 이름이다.우리는 그들의 트위터 계정에 라벨을 추가하거나 달러 기호(라벨이 없고 일반적인 트위터?)를 붙일 수 있다.주식 기호로 바꿔 주세요.

Google ==> $GOOG (gain 1)
Southwest Airlines ==> $LUV (gain 13)
Visa ==> $V (gain 2)

나는 표준 플로나 500대 기업 명단을 쓸 수 있다...하지만 대체품을 보고 나니 알겠다.많은 곤혹과 문제가 나타났다.
회사 이름 옵션은 선택할 수 있는 옵션일 수 있습니다.

JavaScript

내가 계속하기 전에 코드를 좀 조정해야 한다.지금까지 모든 변수와 함수는 전 세계적으로 좋은 조직이 없었다.나는 모든 물건을 한 대상에 넣었기 때문에 필요한 원소와 함수는 모두 봉인되었다.
아마도 큰 진보는 아니었을 것이다. 그러나 나는 지금 모든 것이 더 좋고 조리 있게 보인다고 생각한다.그 밖에 다른 함수/변수 이름과의 충돌도 피했다.

const dwindle = {
  // the DOM elements needed   
  elements: {
    button: document.querySelector("#dwindle-button"),
    fromBox: document.querySelector("#text"),
    toBox: document.querySelector("#result"),
    fromCount: document.querySelector("#text-count"),
    toCount: document.querySelector("#result-count")
  },
  // the reduction/dwindling function
  dwindle: function (text) {
    return text.replace(/ one /ig, " <span class='key' data-original='one'>1</span> ");
  },
  // component initialization: add events, load data, etc.
  init: function () {
    dwindle.elements.button.addEventListener("click", function (e) {
      const originalText = dwindle.elements.fromBox.value.trim();
      if (originalText !== "") {
        const transformedText = dwindle.dwindle(originalText);
        dwindle.elements.toBox.innerHTML = transformedText;
        dwindle.elements.toBox.classList.add("processed");
        dwindle.elements.toCount.textContent = dwindle.elements.toBox.textContent.length;
      } else {
        dwindle.elements.toBox.innerHTML = "";
        dwindle.elements.toBox.classList.remove("processed");
        dwindle.elements.toCount.textContent = "0";
      }
    });

    dwindle.elements.fromBox.addEventListener("input", function () {
      dwindle.elements.fromCount.textContent = dwindle.elements.fromBox.value.length;
    })
  }
}

// initialize the object
dwindle.init();

또 다른 결정은 대체어는 서로 다른 JSON 파일에서 언어로 구성된다는 것이다. 키워드는 대체할 단어이고 값은 대체할 단어이다.

{
  "one": "1",
  "two": "2",
  "three": "3",
  ...
}

이 숫자들 어때요?제이슨은 영어일 거예요.
이렇게 하면 페이지를 가져오고, 페이지 불러오기가 완료되고 프로그램이 초기화될 때 이 JSON 파일의 불러오기를 터치할 수 있습니다.일을 더욱 효율적으로 하다.(모든 컨텐트에는 JavaScript가 사용됩니다.)
나는 또 게임기를 할 수 있다.나는 색깔, 그룹, 표 등 다른 컨트롤러 옵션을 테스트하기 위해 바보짓을 하고 싶었다.보통 일이 아닐 수도 있지만 재밌는 해킹 경기라서...

콘솔 색상!

운율학

최근의 변화 후에 우리는 Lighthouse와 Wave를 운행했고 우리는 여전히 좋은 지표를 얻었다.

숫자가 여전히 크다
Wave와 같은 도구는 액세스 가능성에 관한 몇 가지 문제만 포착합니다. 어떤 사람은 20%, 어떤 사람은 30%입니다. 중요한 것은 다른 수동 테스트(예를 들어 키보드나 화면 판독기 사용)를 실행하는 것 외에 우리는 그것들을 주목해야 합니다.

결과는 좋으나, 그것은 간단한 응용 프로그램이다
이제 이 숫자들을 계속합시다!

디지털 해양

나는 이 플랫폼에서 그들이 무엇을 하고 무엇을 해야 하는지 탐색하고 시도해 왔다.
나는 마지막으로 통찰 부분을 살펴보았다.이것은 약간 기본적인 것 같아서 모든 지표가 무엇을 대표하는지 잘 모르겠다.다른 장과 마찬가지로 빠른 정보/상세한 정보를 제공할 수 있다면 정말 좋겠다.

들어가다화가예요?
농담은 그만두고, 그것들은 도량 기준을 제공했다. 이것은 매우 좋다.외부 코드를 추가하지 않아도 된다. (프로그램의 간단함과 무료함을 유지하기 위해 이 코드를 추가하고 싶지 않다.)

하루의 총결산

긍정적인 측면:

코드를 재구성하여 이해하기 쉽게 했다

콘솔 메시지 재생

비동기적으로 로드할 데이터 가져오기

교체 기능이 완전히 바뀌었습니다. 이제 일을 시작합니다!

그다지 낙관적이지 않다.

아직 할 일이 많아

7일밖에 안 남았어요!