Before ChatGPT or DeepSeek existed, successfully completing a coding task was a very fulfilling experience, even if it took a long time. Now that things can be done quickly, the sense of accomplishment feels diminished.
Lihui Zhang commented: In China, Baidu and Bing can be used normally. I often read technical articles on Zhihu and CSDN(Chinese Software Developer Network). +0
Chris Hüneke commented: Yes, sir. Keepin it real since 2010. SEO is fighting Google, like David was fighting Goliath back in the days. +0
ASubhan commented: No, it cannot. Human cannot replace by Ai. +0
QuintinFields commented: I think he will definitely be able to replace the coders. +0
John_165 44 Junior Poster
I want to display name,description and image in GridView.
export default function NFTViewer({
}) {
const [galleryList, setGalleryList] = useState([]);
const metadata = [];
const cardActions = [];
const [data, setData] = useState()
useEffect(() => {
const getNFTDetails = () => {
fetch("http://localhost:4000/getDetails").then(response => {
return response.json()
})
.then(posts => {
setData(posts)
})
.then((err) => {
console.log(err);
})
}
getNFTDetails()
}, []);
useEffect(() => {
handleData();
}, [data])
const handleData = async () => {
const list = [];
for (const a in data) {
metadata[a] = await fetchIpfsJsonFromCid(data[a].cid);
metadata[a].image = makeGatewayURL(metadata[a].image);
console.log("image url " + metadata[a].image)
list.push(
<Card
style={{ width: 200 }}
key={data[a].name}
title={
<div>
{data[a].name}
<a target='_blank' rel='noreferrer'>
</a>
</div>
}
>
<img src={metadata[a].image} style={{ height:50,width: 130 }} />
<div style={{ opacity: 0.77 }}>{data[a].description}</div>
</Card>
);
}
setGalleryList(list);
};
return (
<div
style={{
maxWidth: 820,
margin: 'auto',
marginTop: 32,
paddingBottom: 256,
}}
>
<StackGrid columnWidth={200} gutterWidth={16} gutterHeight={16}>
{galleryList}
</StackGrid>
</div>
)
}In console, I can see it print https://dweb.link/ipfs/bafybeicyb5zpppsdyu5fxxx/image.png,which is valid image link, but display blank in web page.
But if I remove these two lines code,and put the valid image url, it able to display the data.
These 2 codes removed
metadata[a] = await fetchIpfsJsonFromCid(data[a].cid);
metadata[a].image = makeGatewayURL(metadata[a].image);and replace valid image url from
<img src={metadata[a].image} style={{ height:50,width: 130 }} />to
<img src={https://dweb.link/ipfs/bafybeicyb5zpppsdyu5fxxx/image.png} style={{ height:50,width: 130 }} />It able to display
How to fix?!
John_165 44 Junior Poster
Why header background not changing to red and font style not changing to coiny?
index.js
import Head from 'next/head'
import Image from 'next/image'
export default function Home() {
return (
<div className="min-h-screen h-full w-full flex flex-col bg-brand-light overflow-hidden">
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className='bg-red-700'>
<h1 className='font-coiny'>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
</main>
</div>
)
}tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {
fontFamily: {
coiny: ['Coiny', ...defaultTheme.fontFamily.sans]
},
}, colors: {
'brand-purple': 'var(--clr-purple)',
'brand-pink': 'var(--clr-pink)',
'brand-yellow': 'var(--clr-yellow)',
'brand-blue': 'var(--clr-blue)',
'brand-green': 'var(--clr-green)',
'brand-light': 'var(--clr-light)',
'brand-background': 'var(--clr-background)'
},
},
plugins: [],
}global.css
@import url('https://fonts.googleapis.com/css2?family=Coiny&family=Open+Sans:wght@400;500;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--font-family: 'Open Sans', sans-serif;
--clr-light: #f0e9e9;
--clr-purple: #9b5de5;
--clr-pink: #f15bb5;
--clr-yellow: #fee440;
--clr-blue: #00bbf9;
--clr-green: #00f5d4;
--clr-selection-bg: #cb3d92;
--clr-selection-text: #f4f0f0;
--clr-background: #06070a;
}
html {
scroll-behavior: smooth;
font-family: var(--font-family);
background: var(--clr-background);
}
::selection {
background: var(--clr-selection-bg);
color: var(--clr-selection-text);
}_app.js
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
package.json
{
"name": "nft-minting-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "13.0.5",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"tailwindcss": "^3.2.4"
}
}Output
dmacdougall commented: Listen to your parents. The science is clear. +0
John_165 44 Junior Poster
I notice a bug..
This post is not written by Dani, but it shows Dani is the writer ?
John_165 44 Junior Poster
I've been code for android/ios using flutter more than a year. Now I would like to learn new things by using software to create image instead of just getting icons from google material design (just like image below).
Any recommended ? Thanks.
Dani commented: You’re active on Dream In Code? +0
John_165 44 Junior Poster
rproffitt commented: Here's what I read fagul is "the ugliest thing possible. ugly, horrible, nasty, horrid, Nar!" So VB6? +15