CodemySite_Web development

  F ullscreen scrolling website is popular nowadays for one-page showcase projects, such as the product showcase or portfolio and so on. One step is to apply it with fullPage.js, you are all set. Official Github document Step1: import the library with npm or CDN npm install fullpage.js or <script src=” https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js " integrity=”sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script> CSS: <link rel=”stylesheet” href=” https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css " integrity=”sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==” crossorigin=”anonymous” referrerpolicy=”no-referrer” /> step2: HTML sections should be inside the “fullpage”, and the slide is under the section for slider effect. “.active” is the one showing now. step3: CS...

  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I li...

  E arly bird just learned the react tutorial from Dev Ed. I love his course, he always slowly explains the knowledge step by step(sometimes feeling overwhelmed by others’ tutorials with many knowledge points). Here is his  youtube tutorial . But I still gonna record what I learned here. Step1: building a react project with npx (nodejs environment) npx create-react-app my-app For the motion, use the  framer React library  here. npm install framer-motion Step2: fetch the movies data from   TMDB . Sign up for the account to get the API key and finding at  https://www.themoviedb.org/settings/api  . App.js fetch API data “movies ”  is an array with results inside. When loading the page, show all the popular movies. App.js import We need  two components :  Movie.js  and  Filter.js Move.js Every movie card contains a title and an image. the  image URL  is  https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg...

  Photo by  Fahim Muntashir  on  Unsplash As a front-end developer, you have to grasp the knowledge about how to fetch the API. But there is a question coming, where the API comes from? Why I can fetch data with a simple URL link and a private API key for some of them. Occasionally, I found a video about it. The curiosity leads me to find out further. Here is the  link . I am gonna record what I learned. F irst, you have to make an app with node.js. Make sure Node.js is installed on the PC. In the project,  npm install express request request-promise nodemon In the package.json file, change the scripts for running. so, you can run the terminal with  npm run dev  or  yarn dev  to run the live server. In the  index.js  file, we begin to build the code. require express and request. the port default is 5000 the home page is the sentence: Welcome to... When the port is 5000, the app listens and runs. For doing a  ScraperAPI , I...