With the rapidly changing technologies, developers are being provided with incredible new tools and APIs. But it has been seen that out of the 100+ APIs, only 5% of them are actively used by developers.

Let’s take a look at some of the useful Web APIs that can help you skyrocket your website to the moon! 🌕🚀

1. Screen Capture API

The Screen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building a screen recorder a piece of cake.

You need a video element to display the captured screen. The start button will start the screen capture.

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>

const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}
startBtn.addEventListener("click", startRecording);

2. Web Share API

The Web Share API allows you to share text, links, and even files from a web page to other apps installed on the device.

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

NOTE: To use the Web Share API, you need an interaction from the user. For example, a button click or a touch event.

3. Intersection Observer API

The Intersection Observer API allows you to detect when an element enters or leaves the viewport. This is exceptionally useful for implementing infinite scroll.

NOTE: The demo uses React because of my personal preference, but you can use any framework or vanilla JavaScript.

4. Clipboard API

The Clipboard API allows you to read and write data to the clipboard. This is useful for implementing the copy to clipboard functionality.

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5. Screen Wake Lock API

Ever wondered how YouTube prevents the screen from being switched off while playing the video? Well, that’s because of the Screen Wake Lock API.

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}j

NOTE: You can only use the Screen Wake Lock API if the page is already visible on the screen. Otherwise, it would throw an error.

6. Screen Orientation API

The Screen Orientation API allows you to check the current orientation of the screen and even lock it to a specific orientation.

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}

7. Fullscreen API

The Fullscreen API allows you to display an element or the entire page in full screen.

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}

NOTE: To use the Fullscreen API too, you need an interaction from the user.

https://tapajyoti-bose.medium.com/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-12b737ccf594

인간을 성공으로 이끄는 가장 강력한 무기는
풍부한 지식이나 피나는 노력이 아니라 바로 습관이다.
왜냐하면 인간은 습관의 노예이기 때문이다.
아무도 이 강력한 폭군의 명령을 거스르지 못한다.
그러므로 다른 무엇보다도 내가 지켜야 할 첫 번째 법칙은
좋은 습관을 만들고 스스로 그 습관의 노예가 되는 것이다.
- 오그 만디노 (위대한 상인의 비밀)


일상 생활의 80%는 습관입니다.
습관은 무의식중에 우리 생활을 지배하고
그 결과에 따라 인격이 형성되며
더 나아가 운명을 결정하고 인생까지도 바꾸게 됩니다.
아무런 생각 없이 하는 행동 하나하나가 습관이 됩니다.
그리고 이것이 쌓여 인생을 성공으로도, 불행으로도 이끕니다.
오그 만디노는 스스로 좋은 습관을 만들어 실천하고
나쁜 습관을 몰아내면 재능이나 노력에 관계없이
인생을 성공으로 이끌 수 있다고 강조합니다.

도로시 할머니가
말을 계속 이어간다.
"나의 배움에 대한 열정은
늙어가는 법이 없답니다. 난 지금도
수업을 듣고 새로운 것을 배우는 일이
너무 좋아요. 사실 나이가 들수록 새로운 것을
더 많이 배우고 경험하고 싶어요. 지금은 볼룸
댄스를 배우고 있을 뿐 아니라, 중국 이민자의
자녀를 돌보기 위한 자원봉사를 하려고
중국어도 배우고 있어요."


- 크리스토퍼 필립스의 《소크라테스 카페》 중에서 -


* 누가 저에게
젊음을 유지하는 비법을 묻는다면
당당히 말씀드릴 수 있습니다. '끊임없는
배움의 열정'을 가지시라고. '세상에 대한
무궁한 호기심', '자연에 대한 깊은 사랑'을
가져보시라고. 눈앞의 편안함에 안주할 때,
더 이상 눈빛이 반짝이지 않을 때, 그때
비로소 노화가 시작됩니다. 배움은
사람을 늙지 않게 합니다.

이촌역 경의중앙선 평일 아침 7시 시간표

[카카오맵] 이촌역 경의중앙선
서울특별시 용산구 이촌로71길 42

http://kko.to/ucgJ3ZNicz

입력창 글자수 제한

<div class="form-group col-12" >
  <div class="textLengthWrap">
    <p class="textCount">0자</p>
    <p class="textTotal">/200자</p>
  </div>
  <textarea style="height:300px; resize: none;" maxlength="200" placeholder="텍스트를 입력하세요.">
  </textarea>	
</div>

$('#textBox').keyup(function (e) {
	let content = $(this).val();
    
    // 글자수 세기
    if (content.length == 0 || content == '') {
    	$('.textCount').text('0자');
    } else {
    	$('.textCount').text(content.length + '자');
    }
    
    // 글자수 제한
    if (content.length > 200) {
    	// 200자 부터는 타이핑 되지 않도록
        $(this).val($(this).val().substring(0, 200));
        // 200자 넘으면 알림창 뜨도록
        alert('글자수는 200자까지 입력 가능합니다.');
    };
});

1. keyup

키보드에서 손을 땠을 때 실행

2. keydown

키보드를 눌렀을 때 실행

키보드를 누르고 있을 때 한번만 실행됨

3. keypress

키보드를 눌렀을 때 실행

키보드를 누르고 있을 때 계속 실행됨

 

* Ctrl, Alt, Shift 키 등은 keydown에서는 작동하지만 keypress 에서 작동하지 않음

 

* keyCode ASCII code 값

keydown, keyup에서는 a = 65, A = 65로 동일하게 보여짐

keypress에서는 a = 97, A = 65로 다른 값이 보여짐

 -> Caps Lock 여부 체크, 대소문자 구분을 통한 로직 작성 가능

 

* FireFox 에서의 버그

event.keyCode 가 파이어폭스에서 동작안할 수 있음 따라서 keyCode 사용 시 아래와 같이 사용하면 됨

 

var keyCode = event.keyCode ? event.keyCode : event.which;

 







keydown, keypress 는 이전 누른 값을 가지고 있음

keyup 은 한글 처리 가능 및 현재 누른 값을 가지고 있음