Text Shadows를 쉽게 만들어 보자 - Trendy CSS, mixfont

관련 자료

https://www.mixfont.com/generate

( https://www.mixfont.com/shadows )

글자 폰트와 그림자를 통해 세련된 페이지를 만들 수 있는 라이브러리이다. 

아래 그림들은 이 라이브러리를 이용해 만든 글자를 캡처해 보았다.

그리고 하이라이트 마지막으로 이 사이트에서 Generate(html, css, text)된 페이지를 만들어 주기 때문에 생각 없이 웹 페이지를 만들때 참고하여 빠르게 만들어 볼 수 있게 지원하고 있다.

https://www.mixfont.com/generate

위 링크를 타고 들어가면 바로 자동 생성된 페이지로 변환이 된다.

색상 찾기 - 어울리는 색상을 찾아보자

관련 자료

쉽고 간단하게 색상을 찾아주는 웹사이트이다. 색상을 고르기 어려울 때 이곳에서 마우스를 위아래로 움직이면서 색상을 고를 수 있게 되어 있다.

브라우저에서 particle을 만들어 보자

관련 자료

https://vincentgarreau.com/particles.js/#default

웹을 개발하면서 인트로나, 로그인 페이지의 배경으로 particle을 이용해 꾸며볼 수 있다.

RWDB - Responsive Web Design dB Web awards

관련 자료

웹을 완성도 있게 개발하기 위해서 디자인과 UI/UX를 완숙하게 보여주는데 필요한 라이브러리(javascript 포함)를 공유하는 사이트다.

RWDB는?

모바일 퍼스트

2009년 이후 스마트폰과 태블릿이 확산되며 모바일 퍼스트가 웹사이트 제작이 핵심이 되었고, 새로운 기기의 해상도를 지원해야 하는 이슈가 발생하고 있습니다. 이러한 문제를 해결하기 위해 하나의 소스로 다양한 디바이스를 한번에 지원(One Source Multi Use )하는 반응형웹에 대한 관심이 증가하기 시작하였습니다.

반응형웹

반응형웹은 모바일부터 데스크탑까지 한 가지의 소스로 다양한 종류의 기기에 최적화된 화면을 보여 주는 웹 기술입니다. N-Screen 시대에 맞추어 화면이 자동으로 재배치되며, 모바일과 PC홈페이지를 하나로 운영할 수 있어 편리한 장점을 가지고 있습니다. 더불어, 하나의 URL을 갖고 있어 검색과 노출에 유리하다는 장점을 가지고 있습니다. 모바일, 타블렛PC, 데스크탑을 동시에 지원하는 반응형웹은 새로운 이슈에 가장 빠르고 정확하게 대응할 수 있는 주요 해결 방안이 되었습니다.

RWDB 는 국내 환경의 개선과 우리의 동료들 모두에게 긍정적인 경험을 제공하기 를 좋아합니다.

이러한 반응형 웹 디자인은 다양한 디바이스를 지원하고자 하는 기업의 핵심 해결방안이 되었고 성공사례도 다수 확인되었지만 다수의 국내 기업은 여전히 반응형 웹을 적용하는데 어려움을 겪고 있는 것이 엄연한 현실입니다. 반응형웹을 이미 많이 사용하고 있는 외국을 비롯하여, 국내정서에 맞게 반응형웹을 제작한 회사들을 소개하여 점차 One Source Multi Use의 세상이 되길 바랍니다.

웹 리소스를 공유하는 사이트다

https://www.stockjo.com/

링크된 사이트를 타고 들어가다 보면 오디오, 비디오, 아이콘 등등 웹을 화려하게 할 수 있는 여러가지 리소스를 확인할 수 있다.

nextjs - service side react framework

관련 자료

NextJS는 서버사이드렌더링(SSR)과 code splitting 등을 지원하는 reactjs 전용 프레임워크다. 아래에는 크게 네가지로 NextJS의 특징을 간략하게 모아 보았다.

1. Server-Side Rendering Done Right

Take the pain out of creating Universal React apps with Next.js

2. File-System routing

3. Automatic code splitting

4. Static exporting

Static Sites, No Compromise

5. More ...

• Custom Server with ExpressSetting up a custom Express server to handle requests.See this example 
• PrefetchingHow to use the built-in page prefetching functionality.See this example 
• Styled ComponentsHow to use Styled Components for styling.See this example 
• Data FetchingUsing getInitialProps to fetch data on the server or on the client.See this example 
• Parameterized RoutingHow to set up custom routes, such as /blog/:id for posts.See this example 
• TypeScriptHow to set up the TypeScript type system for your components.See this example 
• ElectronHow you can use Next.js inside an Electron application.See this example 
• ReduxHow to use the well-known Redux for global state management.See this example 
• SSR CachingHow to cache the resulting HTML of a page to avoid re-rendering.See this example 
• Less, PostCSS, CSS ModulesHow to use Next.js with next-less plugin.See this example 
• Apollo GraphQLHow to use the Apollo framework for GraphQL data fetching.See this example 
• github.com/zeit/next.js150+ examples

preactjs - react의 subset, simple, lightweight library

Fast 3kB alternative to React with the same modern API

관련 자료

https://preactjs.com/

https://github.com/developit/preact/

https://www.slant.co/versus/10513/15409/~react_vs_preact

A different kind of library.

Closer to the Metal

Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety.

Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

Small Size

Most UI frameworks are large enough to be the majority of an app's JavaScript size. Preact is different: it's small enough that your code is the largest part of your application.

That means less JavaScript to download, parse and execute - leaving more time for your code, so you can build an experience you define without fighting to keep a framework under control.

Big Performance

Preact is fast, and not just because of its size. It's one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.

It even includes extra performance features like customizable update batching, optional async rendering, DOM recycling, and optimized event handling via Linked State.

Portable & Embeddable

Preact's tiny footprint means you can take the powerful Virtual DOM Component paradigm to new places it couldn't otherwise go.

Use Preact to build parts of an app without complex integration. Embed Preact into a widget and apply the same tools and techniques that you would to build a full app.

Instantly Productive

Lightweight is a lot more fun when you don't have to sacrifice productivity to get there. Preact gets you productive right away. It even has a few bonus features:

• props, state and context are passed to render()
• Use standard HTML attributes like class and for
• Works with React DevTools right out of the box

Ecosystem Compatible

Virtual DOM Components make it easy to share reusable things - everything from buttons to data providers. Preact's design means you can seamlessly use thousands of Components available in the React ecosystem.

Adding a simple preact-compat alias to your bundler provides a compatibility layer that enables even the most complex React components to be used in your application.

preact의 목표

Preact는 몇 가지 주요 목표를 달성하는 것을 목표로합니다.

성능 : 빨리고 효율적으로 렌더링
크기 : 작은 크기, (3.5kb 약) 경량
효율성 : 효과적인 메모리 사용 (재활용, GC 쓰레기 방지)
이해 : 코드베이스를 이해하는 데 몇 시간 이상 걸리지 않아야합니다.
호환성 : Preact는 반작용 API와 대부분 호환되도록하는 것을 목표로하고있다. preact-compat은 가능한 한 React와 많은 호환성을 달성하려고 시도합니다.

Azure Cloud Services

관련 자료

https://docs.microsoft.com/ko-kr/azure/cloud-services/cloud-services-choose-me

https://cuteprogramming.wordpress.com/2018/01/07/tcp-listener-on-microsoft-azure-for-iot-devices/

 Azure에서 VM말고 Managed된 환경에서 TCP/IP를 서비스할 수 있는 방법을 찾아 보게 되었다. 가용성과 분산 환경을 고려하면, VM 환경은 너무 무겁고 관리가 힘들기도 하여 Managed 서비스를 찾아보게 되었다. 그 중에 찾아 보다보니 Azure Cloude Services라는 서비스가 있는것을 알게 되었다. ( 이전 Worker Role 이라고 보면 된다 )

이제 이 서비스로 MAVLink 프로토콜을 통해 드론을 통제및 모니터링 하는 프로젝트를 만들어야 한다.

Dynamic Role-Based Authorization in ASP.NET Core 2.0

관련 자료

You already know how role-based authorization works in ASP.NET Core but what if you don't want hardcode roles in authorization attribute or create roles later and specify in which controller and action it has access without touching source code?

Introduction

You already know how role-based authorization works in ASP.NET Core.

Hide   Copy Code

[Authorize(Roles = "Administrator")] public class SomeController : Controller { }

But what if you don't want hardcode roles in authorization attribute or create roles later and specify in which controller and action it has access without touching source code?

Using the Code

Let's begin our journey. Create ASP.NET Core Web Application project and change authentication to Individual User Accounts.

제목

관련 자료

 4월 3, 4일 이틀에 걸쳐서 코엑스에서 Ignite Tour 세미나를 개최에 참석을 하였다. 이전과는 다르게 Kubernetes (docker orchestration )를 통한 Docker에 대해서 많은 시간을 할애 할것으로 보여진다.

 클라우드 환경이던지, 사내 환경이던지 모두 Docker에서 돌아 갈 수 있도록 개발하고 DevOps를 지원할 수 있도록 개발 플랫폼 환경을 구축해야 겠다는 생각을 하게 되었다.