const sidebarScroller = document.querySelector(".sidebar__scroller");
const state = {
pageYOffset: 0
}
window.addEventListener("scroll", function (e) {
const scrollMaxSideBar = sidebarScroller.scrollHeight - sidebarScroller.clientHeight;
const procent = 3;
const procentScrollSideBar = Math.round(procent * scrollMaxSideBar / 100);
const scrollTopSideBar = Math.round(sidebarScroller.scrollTop);
if(state.pageYOffset > window.pageYOffset){
sidebarScroller.scrollTop = scrollTopSideBar - procentScrollSideBar;
} else if(state.pageYOffset < window.pageYOffset){
sidebarScroller.scrollTop = scrollTopSideBar + procentScrollSideBar;
}
state.pageYOffset = window.pageYOffset;
});const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const connect_and_query = () => {
const db = new sqlite3.Database('./db.db');
return new Promise((resolve, reject) => {
db.serialize(() => {
db.all("SELECT * FROM table ORDER BY id;", (err, rows) => {
if(err){
reject(err)
} else {
resolve(rows)
}
});
})
}).finally(() => {
db.close();
});
}
const f = () => Promise.all([sleep(1000),connect_and_query()]);
export default f;f().then(res => console.log(res));
В среднем, насколько хороша поддержка next13 среди всех библиотек для react/next?- всё что работает на реакте, работает и на нексте, в том числе и на 13
Насколько она готова для production разработки?- такое себе, баги есть но не критичные, если не умеешь свой ssr писать и если очень в нём нуждаешься, можешь занырнуть
Если не 13, то какую версию лучше выбрать?- все версии проблемные, идеальных нет, последняя версия с app директорией является самой продвинутой и гибкой, если уж писать на нексте что-то, то писать на последнем 13+
app/blog - можешь создать layout.tsx, а все вложенные папки это и будут children которые попадают в этот layout.tsx - типа вложенных страниц, но на самом деле не так, layout.tsx - это просто обёрткаconst BlogLayout = ({ children }) => {
return (
<section>
<SomeComponent/>
{children}
</section>
)
};
export default BlogLayout ;><div class="box">
<div class="l">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro ex cum nesciunt non itaque perspiciatis odio reiciendis voluptates optio excepturi? Reprehenderit ut illo harum quia minima odio vel cupiditate repudiandae?</div>
<div class="r"> <div class="r__inner">Этот текст должен быть высотой не выше левой стороны, должен уходить в скролл, если надо. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div></div>
</div>.box {
display: flex;
border: 1px solid red;
}
.l {
flex: 0 0 75%;
}
.r {
flex: 0 0 25%;
overflow-y: auto;
position: relative;
}
.r__inner{
position: absolute;
top: 0;
left: 0;
}
.l, .r {
border: 1px solid blue;
font-size: 30px;
}<div>
<span>123</span>
<p>Какой-то текст</p>
</div>body{
background: gray;
}
div{
margin: 50px auto;
width: 200px;
height: 140px;
background: radial-gradient(40px 40px at center top, transparent 100%, red 100%);
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 20px;
}
span{
width: 65px;
height: 65px;
border-radius: 50%;
color: firebrick;
background: aqua;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -32px;
}RouterProvider, он может всё что и BrowserRouter и даже больше
location / {
allow 33.33.333.333;
deny all;
root /var/www/test/client/public;
try_files $uri $uri/ /index.html;
}const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext('2d');
document.body.append(canvas);
let img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.pinimg.com/originals/87/48/07/874807f8cb45e17f44312eb761261ad9.jpg";