🟡 🟢 toy app using naver open-source egjs 📐
- tech stacks : Vue, Webpack, Node.js(express), egjs, eslint-config-naver
- goals
- use Vuejs X Webpack X Express
- use eslint-config-naver
- use egjs
- deploy site : http://naver-egjs.tk:3000/
desktop | mobile |
---|---|
- array-element-newline [naver guide 4-6]
- operator-linebreak [naver guide 15-6]
- Navigator Interface
- get User Information
- Dark Mode ref : FEConf's Dark mode session
- webView
- userAgent privacy Issue ref: zdnet article
- others
- pre tag
- css -webkit-fill-available
- move, scale Element in static range
- various examples ✅
- I added dynamic range, bounce when zoomed (why?
transform
doesn't change the actual dom size.)
const CIRCLE_SIZE = 100;
const zoomRatio = e.pos.zoom;
const axes = new Axes({...})
axes.axis.panX.range = [
(CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
size[0] - CIRCLE_SIZE - (CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
];
axes.axis.panX.bounce = [
(CIRCLE_SIZE * zoomRatio) / 5,
(CIRCLE_SIZE * zoomRatio) / 5,
];
axes.axis.panY.range = [
(CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
size[1] - CIRCLE_SIZE - (CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
];
axes.axis.panY.bounce = [
(CIRCLE_SIZE * zoomRatio) / 5,
(CIRCLE_SIZE * zoomRatio) / 5,
];
- observer
- bind this
- when register(on) multiple events, trigger each callback all
- so, when instance is destroyed, unregister(off) event
export default {
mounted() {
egComponent.on("CHANGE_COMPONENT2", this.changeComponent2.bind(this));
},
destroyed() {
egComponent.off("CHANGE_COMPONENT2");
},
methods: {
changeComponent1() {
egComponent.trigger("CHANGE_COMPONENT1");
},
changeComponent2() {
console.log("trigger change component2");
const randomColor = generateRandomColor("0123456789ABCEF");
this.$refs.wrapper.style.backgroundColor = randomColor;
},
},
};
- touch 📱
- infinite carousel
- scroll 💻
- grid, masonry (ref : css new grid option - masonry)
- gallery test log?
- scroll event (compare intersection observer API)
- dependency : egjs/component
- snapshot
- usage typo
- localstorage
- images frame -> make 3d
- 3d panorama image viewer
- intersection observer
- CSR + SSR -> history fallback!
const express = require("express");
const server = express();
const path = require("path");
server.use("/", express.static(path.join(__dirname, "./dist")));
server.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "/dist", "index.html"));
});
server.listen(process.env.NODE_ENV === "production" ? process.env.PORT : 8080);