#nextjs | Explore Tumblr Posts and Blogs

kitkatcodes · 11 months

Text

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

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

#codeblr #progblr #programming #tech #coding #resources #frontend #comp sci #studyblr #aesthetic #100daysofcode #Day 6 #vercel #nextjs #javascript #reactjs

112 notes · View notes

koshekdev · 10 months

Text

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

#codeblr #progblr #code #nextjs #full stack web development #webdevelopment #student #studyblr #tutorial #programming #computer science #backend #nodejs #women in stem

27 notes · View notes

devhubby · 10 months

Text

#nextjs #javascript #programming #programminglanguage #react developers #reactjs

23 notes · View notes

snaildotexe · 5 months

Text

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.

#javascript #react #nextjs #tailwind #codeblr #mypost #myproject

6 notes · View notes

algobuddy · 1 month

Text

youtube

#html #nextjs #reactjs #coding #artificial intelligence #machine learning #programming #javascript #web development #web developers #web developing company #Youtube

2 notes · View notes

boywholovescode · 1 year

Text

I built a social app please try it :)

Github Link

#html #reactjs #nextjs #coding #programming #codeblr #web developers #frontend #website #open source #code

22 notes · View notes

devcoder2 · 10 months

Text

Coming soon...

#technology #typescript #javascript #nextjs #reactjs #nodejs #web development #web developers #userexperience #webdesign #thumbnail

2 notes · View notes

analog-cafe · 1 year

Text

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.

#believeinfilm #community #comments #communication #social media #blog #webdesign #web developers #javascript #nextjs #reactjs #mongodb #film photography

8 notes · View notes

rehman-coding · 1 year

Photo

. . . . . . . . #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=

2 notes · View notes

coderight · 2 years

Text

CodeRight is an online front-end development course. We are visionaries who want every student to learn the right skills as a full stack Front-end Developer & be successful in the Respective path they choose in the industry. Our main focus is to give students the latest skills and technologies information which are deprived in the current education system.

#front end development #front-end developer courses #full stack web development #html css #learn html #htmlcoding #webdev #javascript #programming #reactjs #nextjs #virtual reality

5 notes · View notes

koshekdev · 4 months

Text

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) 💛

#codeblr #programming #nextjs #progblr #webdevelopment #full stack web development

8 notes · View notes

devhubby · 11 months

Text

#nextjs #react developers #reactjs #javascript #programmers #devhubby

22 notes · View notes

kingars · 2 years

Photo

E vamos codando! . . #nextjs #reactjs #javascript #developer #js #html #webdevelopment #css #coding #dev #webdeveloper #tech #programmer #website #programming #nextjsdeveloper #github #code #technology #coder #programmerlife #codinglife #git #vscode #fullstackdeveloper #fullstack #salvador #bahia #brasil #html #css . @adstelemedicina (em Salvador, Bahia, Brazil) https://www.instagram.com/p/CgmfMp-uTac/?igshid=NGJjMDIxMWI=

2 notes · View notes

prateekshawebdesign · 2 days

Text

Why You Should Use Import Aliases in Your Next.js Applications

What Is Import Alias In NextJS ?

An import alias in Next.js is a feature that allows developers to simplify the paths used in their import statements, making them shorter and more readable. Instead of using lengthy relative paths that can become cumbersome and hard to maintain, developers can set up aliases in their Next.js configuration file (next.config.js) that refer to specific directories or files within their project. For example, instead of writing import Button from '../../../../components/Button', an alias can let you import Button from '@components/Button'.

This not only enhances code readability and organization but also makes it easier to manage and refactor codebases as they scale. Import aliases are particularly useful in large projects where maintaining clear and manageable file paths is crucial for developer efficiency.

How Do Import Alias Improve Code Maintainability?

Import aliases significantly improve code maintainability in several ways. By allowing developers to replace lengthy and complex relative paths with simple, memorable identifiers, they reduce the likelihood of errors and make the codebase easier to understand and navigate. This is particularly beneficial in large projects where file structures can become complex.

Import aliases also facilitate easier refactoring, as changing the directory structure does not require updating paths in the import statements across multiple files—only the alias mapping in the configuration file needs adjustment. This centralized management of paths through aliases ensures consistency across the project, reducing the cognitive load on developers and making the project more maintainable.

Can Import Alias Be Used In Both JavaScript And TypeScript Projects In NextJS ?

Yes, import aliases can be used in both JavaScript and TypeScript projects in Next.js. The setup is similar for both languages; you configure aliases in the next.config.js file for JavaScript or additional configuration in the tsconfig.json file for TypeScript. This dual compatibility makes import aliases a versatile tool in the Next.js ecosystem, suitable for projects regardless of the chosen programming language.

The seamless integration in both environments further helps in maintaining a uniform development approach when switching between JavaScript and TypeScript within the same project or across different projects.