Frontend (56) 썸네일형 리스트형 Module System As the size of the project grows bigger, it becomes harder to navigate through the files. To solve this problem, many lagnuages separate the files into small chunk of files such as library of package. JavaScript uses module to solve this. A module is a group of functions stored separatly in a file to better manage codes. Let's see how we can create module Implementation Add the type="module" att.. Webpack With the ongoing development of the programming environment JavaScript has been adding new techniques periodically. To catch up with growing size of the modern application JS adapted module system. This led to the growth of the file sizes and the number of files. to solve this problem Webpack is introduced. Webpack is a static module bundler that creates a dependency map based on the relations o.. Toggle button with CSS Let’s make a toggle button with HTML and CSS Implementation Option 1 HTML CSS /* toggle */ label { height: 30px; width: 60px; border-radius: 30px; } input { display: none; } input:checked + span { background-color: gray; } input:checked + span::before { left: 30px; } .toggle-circle { height: 100%; width: 100%; display: block; border-radius: 30px; transition: 0.4s ease; border: 1px solid black; p.. Countdown with CSS Let’s see how to implement a countdown using CSS animation Implementation HTML Add numbers to countdown as needed 1 2 3 Go CSS Use CSS animation delay to show the counter in order. /* count */ .count { height: 50px; width: 50px; position: relative; margin: auto; overflow: hidden; } .count .num { height: 40px; position: absolute; bottom: -5px; left: 50%; transform-origin: bottom; transform: trans.. Data Request Let’s see how a request to the server is made in JavaScript. XML is an object that is supported in all most every browser. Before XML whenever there was a change in the data the browser had to reload to reflect the changes. XML separated handling of data from displaying contents on the screen which is handled by HTML by solely managing data making it possible to reflect changes without having to.. Day / Night Mode with JavaScript Lots of applications, nowadays, have a feature to change day and night modes. Let’s see how to make one using HTML, CSS, JS. This feature is quite straight forward so I am going to explain why to implement of what it does. Having said that let’s get into the code. (I tried to omit the unnecessary codes) Implementation HTML Custom welcome CSS /* html에 전역변수 지정 */ :root { --bg-light-alt: rgba(0, 0,.. How to Tell PC from Mobile in A Responsive APP A responsive application uses the same URL for both PC and mobile view so traditional way of differentiating between the PC and mobile using URL path cannot be used to implement desired features. In this writing I will show you a trick to go around this in a berry simple wayImplementationThe code we will use looks like below/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(na.. AOT (Ahead Of Time) Compiler Compiling Steps Code analysis Code generation Template type checking Creates a source sample but does not start compiling. Only records the syntax errors of the metadata Keeps analyzing the syntax errors of the metadata and shows the errors Checks the syntax of the binding in templates (Optional phase) To turn on the template type-checking option, add the following code in the angularCompilerOpt.. 이전 1 2 3 4 5 6 7 다음
