#Nextjs

[vulshokbersrker]

More Updates on Bray Archive

So I did a lot of work on the site in the past few days, and it is looking good. I got the home page finally working. You can see I have a moving home banner and the grid tiles for a hub of links.

Multiple Device Support

I have started the fun/annoying/hard work on adding mobile and 4K support to this project.

When you start adding multiple devices to worry about, you also have to rework the original design of a project. Which is what I had to do. I reworked a lot of the entry pages and stuff to keep their old look while making it dynamic with phones and 4K monitors.

Here is one example: (The wide boy, also icon didn't load in time for the mobile view)

I am getting closer to getting this thing "finished."

So far I have done some smaller phones, 720p monitors, 1080p monitors and 4K monitors. Still need to add tablet and larger phone support.

Before I go, let me leave you with my first thought when I was the screen shot for the Untethered Edge Hood.

[kitkatcodes]

100 Days of Code - Day 6 ・゜゜・．

✧*6/28/2023*✧

finally added a much wanted feature to my todo app! ( ◡̀_◡́)ᕤ

!!!saving tasks in local storage!!!

⁽ᴵ ᵃˡˢᵒ ᵃᵈᵈᵉᵈ ᵃⁿ ᵃᵈᵈ ᵗᵃˢᵏ ᵇᵘᵗᵗᵒⁿ ᵇᵘᵗ ᵗʰᵃᵗˢ ⁿᵒᵗ ᵃˢ ⁱᵐᵖᵒʳᵗᵃⁿᵗ⁾

so when you refresh or close the page and come back to it your tasks still stay there wooooo ৻( •̀ ᗜ •́ ৻)

it still looks absolutely terrible but its one step forward!!

next steps/future features:

✧ delete task button ✧ rearrange tasks

. • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆

. • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆ . • ☆ . ° .• °:. *₊ ° . ☆

[koshekdev]

Project update (Next.js) + little API routing tutorial

So my last post was about setting up my back-end using Node.js and Sequelize. After setting everything up it was time to create needed routes and queries. I didn't look too much into how to do it, just made an api folder, made a .ts file for every table I have in my database and filled it with CRUD operations + whatever additional query was needed.

After writing all of this I wondered how do I define links for all of these operations? Well as it turns out, when you put files in an api folder in Next.js, they generate by themself, meaning all of my crud operations were now under the same /api/file_table_name link. Obviously that's bad news. It took me 2 days of rearranging (it wasn't hard, just boring XD) and I got this structure

(This is not an entire structure, just a snippet because the whole structure is kinda big and pointless for demonstration)

So now for getting host/api/tag we have an index.ts file which carries the createTag function which requires just a body that contains new tagName.

For host/api/tag/id we have the [id].ts which carries getTagById and DeleteTag function. Now how do we differentiate between those two operations when they are on the same link?

At the end of your file you should have a handler function for which you write the cases in which certain operation happen. In this case it only depends on the http method, but it is possible to add other cases such as potential query string (the on that start with ? in the link ex. api/posts?sort=asc). Here's the code example from my /stickerpack/[id].ts file

So this means the link is going to be host/api/stickerpack/id?type="".

What surprised me was that you don't fetch id with req.params.id, but you fetch everything with req.query, and Next.js I guess just figures out what is a parameter and what is not based on the file name. Another surprising thing is the obvious "id as any" situation XD. It did not work any other way. No idea why. I'll look it up when I get the energy.

That's my wisdom for today, if you have any questions feel free to ask me anywhere XD I'm no professional tho lol

[themesflat]

-Is your IT service website too slow? 🤔

🚀 Power Up Your IT Services Website with #innovationTechbe! 🚀

Techbe – the premier React & NextJS template crafted for IT services and technology businesses.

🔹 Cutting-edge design 🔹 Fast and responsive performance 🔹 Effortless customization

Transform your tech business and captivate your audience with Techbe. Ready to lead the future? 🌟

See Demo & Download : https://1.envato.market/anyBYq

[snaildotexe]

Simple react/next js todo list

Modeled after this tutorial by Web Dev Simplified, but using Next.js and Tailwind

I think following a plain react tutorial while using next js is what gave me some issues, especially being my first react project. I probably should have learned some basic react first before going into frameworks, but oh well.

Trying to line up the text with the CSS paper was a huge pain. I still don't like how it looks but at least it's not floating through the lines anymore lol.

The data persistence gave me the most trouble (took me like FIVE hours 😭). The way it was done in the video did not work for me at all, so I had to figure it out. Local storage can't be accessed during server-side rendering, so accessing localStorage has to be done during client-side rendering, using the useEffect hook. But, as I've learned, the useEffect hook doesn't have a return value, and hooks can only be called at the top level. Then I found out that React intentionally calls useEffect twice and that was resetting my local storage with the empty initialization value -_- But in the end i got it working :)

Now I wanna add some more features; a delete all, clear selected, maybe edit note.

[boywholovescode]

I built a social app please try it :)

Github Link

[devcoder2]

Coming soon...

[analog-cafe]

Hey friends, I'm building a community commenting system from scratch and would love your input on how it will operate.

Here are some rules I'm playing with:

1. Contributors will be auto-approved. 2. After one approved comment, all subsequent comments will be auto-approved (but I'll suspend offending users). 3. Max 90 comments per post. 4. Post authors can push that to 100. 4. Max 3 comments/user/article. 5. Limit input to 500 chars text-only.

What do you think?

BTW,

Contributors are people who previously submitted an article and have it published, here's who they are: https://www.analog.cafe/about

Also, a note on why I'm building this thing in-house: performance and privacy. 3rd party commenting tools track you across the web. They also slow down website performance. I use privacy-based analytics (Fathom) with no behaviour data ever stored or collected on anyone.

[rehman-coding]

. . . . . . . . #reactjs #reactjsdeveloper #reactjsjobs #react #nextjs #nextjsdeveloper #nextjsconf #codinglife #softwareengineer #javascript #webdevelopment #js #html #webdev #frontend #javascriptdeveloper #art #meme #memes #😂 #interview #python https://www.instagram.com/p/CmuKq-Pj2W9/?igshid=NGJjMDIxMWI=

[jujuthewulfpup]

1. Video games: Factorio, Satisfactory, Overwatch 2, Hogwarts Legacy, Hollow Knight, …

2. I am a software engineer by trade and do volunteer coding and personal coding in my free time. I just don’t have posting to social media as a reaction to … anything related to those things.

I am currently/still looking for more coding/software engineering content! Feel free to share tags/blogs you like.

I am very much on my computer a LOT as a consequence of these hobbies.

[kitkatcodes]

┊ ➶ ｡˚ ° todo app progress ° ˚｡

I have notifications! So far they just show up when you enter the page and when you complete all 3 todos ヽ(*・ω・)ﾉ

It still has a long way to go but im super pleased with it so far (ᵔ◡ᵔ)

Here is the github if you're curious about the code!

[koshekdev]

I want to do a programming update so bad but all the stuff I worked on is so boring and I know there is no use to even make tutorials for them cuz they are such specific things and codeblr is just too broad and general for that kind of content...I'll try to make some next.js good practices post soon maybe since I see a lot of interest for web dev and a lot of people are learning by themselves with no mentors, there is def a lot of knowledge that is way more easily gained through talking to more experienced devs, and is very hard to acquire from tutorials and practice (unfortunately). I know that from the experience :/ learning everything by yourself is hard as hell and I really want to congralute everyone who are still on their programming journey (or whatever other journey hehe, everything is hard to perfect) 💛

[themesflat]

Big sale at the end year https://themeforest.net/user/themesflat/portfolio

[justnshalom]

Building a Component Library for NextJS: A Guide to Reusable UI

Building a Component Library for NextJS: A Guide to Reusable UI Have you ever found yourself rewriting the same UI components over and over again in your NextJS projects? Have you struggled to maintain consistency and efficiency across multiple applications? If so, it’s time to consider building a component library. A component library is a collection of reusable UI elements that can be shared…

[aakashweb]

Looking for a #gatsbyjs or #nextjs like equivalent for #WordPress ? "Git it write" might help. It is a plugin using which you can publish posts from Github ! More info - https://wordpress.org/plugins/git-it-write/