웹 디자이너 및 개발자를위한 새로운 리소스 (2017 년 10 월)
이번 달 Fresh Resouces는 이전 달과 조금 다릅니다. Google은 웹 개발자로서 급변하는 산업에서 생계를 꾸리고 있으며 Google, Microsoft, Firefox 및 PHP와 같은 일부 대형 IT 회사의 발표를 보았습니다. 인터넷.
이 기사에서는 목록의 절반이 이러한 발표에 관한 것입니다. 미래에 대해 인사 할 준비를하십시오.!
필수 이미지 최적화
그것은 웹용 이미지를 최적화하는 철저한 기사 Addy Osmani가 쓴. How-To를 중심으로하는 다른 글쓰기 나 Do not and Don'ts 만하는 것이 아닙니다..
이 기사는 실제로 기술적 세부 사항은 물론 최적화 뒤에 과학. 또한 여러 최적화 방법과 이미지 형식에 대한 철저한 정보를 얻을 수 있습니다., 도구, 팁 및 실제 사례.

PHP 7.2
포괄적 인 PHP 7.2에 대한 참조. PHP 애플리케이션 성능을 향상시키는 추가 기능 외에도 PHP 7.2도 함께 제공됩니다. 감가 상각으로 몇 가지가 제거 될 것입니다. 더 이상 사용해서는 안됩니다..
PHP 7.2에서 deprecated 될 두 가지 함수가 있습니다. create_function ()
과 __autoload ()
. 웹 개발자라면, 코드를 검토하고 필요한 사항을 변경하십시오.. 나는 아직도이 두 가지 기능을 사용하는 수많은 WordPress 플러그인을 보아왔다..

웹 공유 API
솔직히이 API가 웹에 표시되지 않습니다. 그러나 웹에서의 상호 작용의 절반은 “나누는”, 이 API는 웹 개발자가 네이티브 공유 환경을보다 쉽게 만들 수 있습니다., 특히 모바일 플랫폼에서.
이 API는 현재 데스크톱 및 Android 용 Chrome에서만 사용할 수 있습니다. 이 YouTube 동영상을 확인해보세요..

이미지 비동기 속성
웹에 혁명을 일으킬 또 다른 일은 비동기
img 요소의 속성 글을 쓰는 시점에서 몇 가지 접근 방법이 있습니다. 이미지를 비동기 적으로로드합니다. 약간의 JavaScript 트릭이 필요합니다.. 곧 추가 할 수있게 될 것입니다. async = on
에 img
요소.

파이어 폭스 퀀텀
모질라는 파이어 폭스에 대한 업데이트를 적극적으로 추진하고있다. “프로젝트 퀀텀”. 여기에는 Quantum CSS가 포함되어 있습니다. 매우 빠른 CSS 렌더링, 새 UI 및 새로운 DevTools.
릴리스는 웹 개발자의 인기를 얻다. 일부는 이미 기본 브라우저를 Firefox로 전환했습니다. 이 프로젝트에는 Quantum DOM과 WebRender를 비롯한 많은 것들이 있습니다. Firefox Quantum 엔진을 기반으로 Node.js 경쟁자를 볼 것입니까? 음, 아마도 예.

iOS 및 Android 용 MS Edge
Microsoft는 방금 발표 한 최신 브라우저 인 Edge, iOS 및 Android 출시. 즉, 테스트 할 웹 사이트를위한 브라우저가 하나 더 있어야합니다..

구텐베르크
WordPress는 현재 구텐베르크 (Gutenberg)라는 야심적인 프로젝트에 참여하고 있습니다. 구텐베르크는 거의 전적으로 JavaScript로 작성된 WordPress 편집기로의 안면 성형.
이 시점에서 구텐베르크는 React로 만든 그러나 프로젝트는 Preact, Vue 또는 다른 것과 같은 또 다른 프레임 워크를 고려하고 있습니다. 지금은 복잡한 상황입니다. 따라서 WordPress 개발자가 테마와 플러그인을 작성하려면 프로젝트를 계속 주시하십시오. 우리가 WordPress를 영원히 구축하는 방식을 바꿀 것입니다..

FoitFout
FoitFout은 FOIT와 FOUT라는 두 가지 다른 접근 방식을 비교할 수있는 편리한 도구입니다. 웹에 사용자 정의 글꼴로드. 이 도구를 사용하면 두 가지 접근 방식을 에뮬레이트하고 사이트에 가장 적합한 접근 방식을 결정할 수 있습니다..

Vuera
Vuera는 Vue와 React를 함께 사용할 수있는 JavaScript 라이브러리. Vue 구성 요소를 포함 할 수 있습니다. .vue
또는 Vue에서 React 구성 요소를 사용하십시오. 팀이 될 수 있습니다. 모든 프레임 워크로 생산성 향상 그들이 선호하는 것은.

드래그 가능
“드래그 가능” Shopify에서 환상적인 도서관입니다. 네이티브 브라우저 위에 구축되었습니다. Drag-n-Drop API를 사용하면 광범위한 API를 사용할 수 있습니다.. 당신이 필요로하는 것을 제공하지 않는다면, 기능 확장을위한 맞춤 모듈. 데모를 확인하여 작동 방법을 확인하십시오..

흐름도
이름에서 알 수 있듯이 FlowchartJS는 PowerPoint와 같은 순서도를 작성할 수있는 라이브러리. 마찬가지로 원, 타원, 정사각형, 다이아몬드, 삼각형 등 다양한 모양의 차트를 만들 수 있습니다..

QuickBill
경량 및 간단한 웹 응용 프로그램으로 인보이스 작성. 네이티브 브라우저 기술과 API를 사용하여 계정이 필요하지 않습니다. 웹 사이트로 이동하여 항목을 송장에 추가하고 PDF 파일을 생성하십시오. 그게 다야.!

모카
Mocka는 웹 사이트 프로토 타입 제작에 사용할 수있는 콘텐츠 자리 표시 자. 500 바이트로 완벽하게 사용자 정의 할 수 있습니다. Sass mixin을 사용하여 프로젝트의 CSS 파일에 쉽게 포함시킬 수 있습니다..
그만큼 CSS는 여러 클래스를 제공합니다. 포함 멍청이
이미지 자리 표시자를 만드는 방법, 멍청이
헤딩 만들기 창녀 문안
임의의 텍스트를 만드는 방법.

VueStar
VueStar는 아이콘을 클릭하면 반짝이는 효과를 추가하는 Vue 구성 요소, 트위터가 “심장” 모바일 앱의 아이콘 구성 요소는 다음과 같은 새 요소를 도입합니다. vue-star
웹 시대에 추가 할 수 있습니다. 그리고 너 끝났어.!

그리드 놀이터
CSS Grid는 웹상에 새로운 개념을 도입하여 레이아웃을 구현합니다..
GridPlayground는 기본적으로 CSS 그리드를 가르치고 CSS 그리드 채택을 추진하는 모질라 이니셔티브. Firefox조차도 DevTools에 그리드 레이아웃을 검사 할 수있는 새로운 도구를 제공합니다.

스 니펫 관리자
“스 니펫 관리자” 간단하다. 코드 스 니펫을 저장하고 관리하는 앱. 새 항목을 만들고 코드를 붙여넣고 점을 설정할 수 있습니다. 이 시점에서 너무 멋진 것은 아니며 NPM을 사용하여 컴파일해야하는 소스 코드 만 제공합니다..

탭 인터페이스
위대한 JavaScript 사용을 최소화하면서 점진적이며 접근 가능한 탭 탐색 기능을 구현. 접근성 높은 디자인에 대해 더 많은 것을 알고 자하는 사람들을위한 훌륭한 자료.

SwissInCSS
SwissInCSS는 CSS를 제외한 고전적인 스위스 포스터 디자인을 전시하고 있습니다. 소스 코드는 CodePen에서 사용할 수 있습니다..
