WebDev
-
Best practice migrating NAS server OS
Hi everyone, I have an old gaming PC that I had repurposed to be my nextcloud and plex server using TrueNAS, but I recently found CasaOS and I would like to migrate my server to use this instead. What are some best practices that I should observe when installing a different OS into a server? My server is installed on an M.2 drive and I have two 1TB HDD setup in raid.
-
When launching a new website, to what search engines do you submit the URL to, and how?
Whenever I launch a new web project I go to Google Search Console and Bing Webmaster Tools to flag that the new website exists. The idea is to start getting SEO seniority / attention as early as possible.
Is there any other tool I should be registering my website in, or are these the major two?
-
www subdomain returns 401 despite using documented DNS settings
Crossposted from https://lemmy.world/post/19723787
> My Gitlab Pages site works well under domain.com but not under www.domain.com. The www subdomain leads to a 401 message: "You don't have permission to access the resource." > > My DNS has a CNAME entry for www pointing to domain.com. When I asked the DNS provider what the problem might be they said "Please contact your hosting provider and provide us with the record needed to be set for www in the DNS zone. The changes should have worked already." > > The reason I need this is that some old-school people visiting our website still type www. into the URL bar.
-
A website flourished from a good friendship
fredrocha.net A website flourished from a good friendship - fredrocha.netThis website we're now launching started off as a good friendship. That slowly brewed into a partnership.
In which I explain how a freelance gig was born out of a sincere friendship, and how the website went through idea, process, implementation and delivery.
-
Shared VR space over P2P
YouTube Video
Click to view this content.
https://github.com/positive-intentions/chat
the code related to the video is a faily basic implementation using BabylonJS. it can be found here.
id like to see if i can get handpose-estimation to work well enough to be able to add to the BabylonJS render engine.
im working on something i hope will work like the 8thwall demo here. i couldnt find an open-source alternative to this so i thought id have a crack at it myself. my progress so far is as described here. i dont have much experience in creating games or graphics, so any guidance/help/advice is appriciated.
FAQ:
- why should i use it? - its a proof-of-concept app. for testing and demo purposes only.
- why create it? - it is a hobby project and i can be creative with the approach. its fun to work on.
- what is it? - maybe this article helps.
-
Pure css charts based on html tables
cross-posted from: https://slrpnk.net/post/11983122
> I just found about the rather experimental chaarts. It enhances the standard html <table> and turns it into different charts. Complete with hover text and animations. > > It seems to be pretty accessible. And if the user agent doesn't support the fancy css it degrades gracefully to the original <table>
- dev.to 11 Tools To Improve Your Developer Experience by 10x š
There are numerous tools designed to make development seamless and efficient for developers. As a...
- dev.to Things I wish I knew before I started an open-source project
New to the world of open source? Youāll likely make a few mistakes in your first open-source project...
-
Introducing Meaning-driven Development
fredrocha.net Meaning-driven Development - fredrocha.netConsider whether your current job aligns with your guiding principles and values. Start practicing Meaning-driven Development.
I wrote a post detailing why I use meaning as the criterion for selecting my next web development project.
-
XMLHttpRequest (XHR) Vs Fetch API
cross-posted from: https://programming.dev/post/13268260
> Hi, > > I discovered this webpage \ > https://developer.mozilla.org/en-US/docs/Glossary/XMLHttpRequest > > Where it say > >The Fetch API is the modern replacement for XMLHttpRequest. > > Without further explain on why so... > > Did you (yourself) migrated from XHR to The Fetch API ? > and is it better ? > or do you know any (not bias) article about it ? > > What about performances etc.. > > Thanks
-
-
Content Licensing and Attribution Section?
When using dependencies such as NPM packages, Composer packages. Weather you use a CDN or host the packages on the web server, don't many packages out there require you to display the licenses of the package being used and show attributions?
How would one place this on their website? I even went to several websites to see how they do this and could not find a section and I am sure these website use packages that require the license to be listed and list the attributions.
I can find the licenses and attributions of packages used in many applications on desktop and mobile, usually in the apps "about" page.
- tailwindcss.com Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS
We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.
cross-posted from: https://programming.dev/post/11085588 >We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.
-
ActivityPub in a single PHP file
shkspr.mobi Updates to ActivityPub in a single PHP fileA few weeks ago, I built an ActivityPub Server in a Single PHP File. It's a proof of concept showing how easy it is to turn a website into a full-featured Fediverse participant. After a bunch of feedback and testing, I've added a some features to make it slightly more useful. A single PHP file [...]
I've built a toy ActivityPub server. A single file of about 50KB.
-
Impact of EU DSA on Magento PWAs and iOS 17.4 Changes
YouTube Video
Click to view this content.
cross-posted from: https://lemmy.ml/post/12252980
> Magento, a company based in Berlin offering hosting and e-commerce platform, posted a video illustrating to their EU customers the significant impact of removing PWA support in iOS 17.4 on their services. > > Source: https://twitter.com/mysk_co/status/1760585742655308077
-
cross-posted from: https://programming.dev/post/10271471 >It weighs only 181 bytes. Nice.
-
How To Draw Radar Charts In Web
smashingmagazine.com How To Draw Radar Charts In Web ā Smashing MagazineA radar chart ā also commonly called a spider chart ā is yet another way to visualize data and make connections. Radar charts are inherently geometric, making them both a perfect fit and fun to make with CSS, thanks to the `polygon()` function. Read along as Preethi Sam demonstrates the process and ...
-
Web Development Is Getting Too Complex, And It May Be Our Fault
smashingmagazine.com Web Development Is Getting Too Complex, And It May Be Our Fault ā Smashing MagazineAn overwhelming number of frameworks and tooling available today gives the impression that web development has gotten perhaps too complex. Juan Diego RodrĆguez explores if web development really is that complex and, most importantly, how we can prevent it from getting even more difficult than we alr...
-
Techniques to deal with forms and browser history
Hello all!
I'm a beginner in web development. I'm building a simple small library application for learning purposes that has processes such as:
- The landing page is an main index page with links to people page, books page, etc.
- Suppose the user clicks "books", it will be redirected to a page with a list of all registered books, let's call it "books index".
- The user can edit one of the books or click the "new" link. Both choices will redirect they to "edit-book" page, with a simple form that can be submitted.
- After submission, the user is redirected to the "books index" to edit or add another book.
In summary:
[1: index] -> [2: books index] -> [3: edit book form] -> [4: books index]
In step 4, if the user clicks the "back button" in browser, it is redirected to the form page. If they edited 20 books, they will be redirected to the form page 20 times. It is rather confusing, so I want they to be redirected to the main index page if they are on the books index page.
It seems I cannot just remove things from browser history with Javascript.
Do you have any suggestion? I'm thinking about just adding a "back" button in the page which works differently from the browser button, but it would still add stuff in history, which could make things even more confusing.
Thank you very much.
-
The Complex But Awesome CSS border-image Property
smashingmagazine.com The Complex But Awesome CSS border-image Property ā Smashing MagazineThe CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstrates different approaches for using `border-image` to create clever decorative accents and shapes.
-
The State of Tweet Mockups
does anybody have/know of any still-working apps/services for creating mocked-up images of single Tweets?
It occurs to me that I'm late in addressing this and panicking a little bit lol... Given the state of things, it definitively no longer makes sense to embed them imo... (
publish.twitter.com
stopped working a few weeks back, anyway, which was a real wakeup call lol.)... but obviously, I still come across Twitter content I absolutely want to retain every day.
(if you're still not sure what I'm talking about - the exact same function as Re:Toot's exclusive purpose, but for Tweets instead of Mastodon posts.)
I've inadvertently spent more than an hour this morning going back through my favorite old methods and loosely classifying their current states. lmk if anyone desires more details on that.
-
Help with understanding MySQL column and row size limits
To preface, Iām currently rewriting a personal webapp to use MySQL instead of storing everything in hundreds of JSON files. Iām currently in the testing phase of generating tables with the data from the JSON files, destroying the tables, adding more columns and data, repeat, all to make sure everything is working as intended.
My issue is that occasionally Iāll create too many columns and then I get an error saying something about the row being too large? Iāve also noticed that if I change the parameters of what data is allowed to go in the column, I can generate more columns. I know there is some relationship between number of columns, the data that can go in a column, data size, and row size but I donāt know whatās going on. Iād appreciate it if someone could broadly go over how row length(?) can affect number of columns.
Thank you
-
Bruno: A git-friendly Postman alternative
This looks like a great alternative to Postman/Insomnia and git integration would be really handy for teams.
-
Cocktail DB New object from 2 arrays
First off, thank you to @[email protected] for the initial help regarding the API in my original post
Iāve managed to use the Sheets API to pull in JSON of my spreadsheet. I am now struggling to pair the data to use in cards on my front end.
Here is my code
``` const API_KEY = "APIKEY"; const CLIENT_ID = "ID"; const HEADERS_ID = "tab1!A2:CE2"; const VALUES_ID = "tab1!A3:CE"; const URL =
https://sheets.googleapis.com/v4/spreadsheets/${CLIENT_ID}/values:batchGet?ranges=${HEADERS_ID}&ranges=${VALUES_ID}&key=${API_KEY}
;async function getData() { const RESPONSE = await fetch(URL);
const DATA = await RESPONSE.json();
const COCKTAILHEADERS = DATA.valueRanges[0]; const COCKTAILHEADERSOBJ = Object.assign({}, COCKTAILHEADERS.values[0]); const COCKTAILVALUES = DATA.valueRanges[1]; const COCKTAILVALUESOBJ = Object.assign({}, COCKTAILVALUES.values);
// console.log(DATA); // console.log(COCKTAILHEADERS.values[0]); console.log(COCKTAILHEADERSOBJ); // console.log(COCKTAILVALUES.values); console.log(COCKTAILVALUESOBJ); }
getData(); ```
My spreadsheet is set up like thisā¦
- ROW 1 = Headers for cocktail name in column A and ingredients in B through CE
- All other ROWs = Column A is the cocktail name and B through CE is the measurement
When I log
COCKTAILHEADERSOBJ
I get an object with each ingredient name in an array and when I logCOCKTAILVALUESOBJ
I get an object with nested arrays, each array has the name and the measurement. If the drink does not contain the ingredient, I have an empty string.``` Example of COCKTAILHEADERSOBJ [0] = Cocktail Name [1] = Lime [2] = Tequila
Example of COCKTAILVALUESOBJ [0] [0] = Margarita [1] = 1oz [2] = 2oz [1] [0] = Old Fashioned [1] = 0oz [2] = 0oz ```
My goal is to have an object for each cocktail that looks like this
"drinks": [ { "cocktail name": "Margarita", "lime": 1, "tequila": 2 } ]
If the value is zero, I donāt want the ingredient added to the new object for that drink.
Any suggestions on how I can loop through each item in COCKTAILVALUESOBJ and assign the correct COCKTAILHEADERSOBJ label to it so I can make a new object with each drinks recipe and then pull that new object into the DOM?
Feels like I should be able to use Array Map to get them into a single object, but Iām a little lost on how to do it with 2 objects.
Still incredibly new to JS and struggling with tutorials, hoping this project helps me learn and I appreciate any advice to help me search out the answer.
-
Searchable cocktail recipe project tutorial help
Iāve been learning frontend on and off for a few years and I keep trying to find a good project to help further my knowledge. My amazing wife created a Google Sheets database of cocktails we learnt to make over the pandemic. Columns are ingredients and rows are measurements in ounces.
Iād love to create and self-host a frontend for this data. Trying to use the Sheets app on our phones has driven us to drink (š).
I have a server running OMV and Docker, Iād like to host a searchable webpage on my network (maybe one day host it externally) and utilize the data in this Sheets doc.
My Google-Fu is failing me, I donāt know what to search to make a start. Someone on Reddit suggested just using the Sheets doc and doing an API call to that file. Iām not opposed, Iām also happy to look into some sort of database software to broaden my skills (MongoDB etc).
Any suggestions or tutorial recommendations to help me create a searchable frontend using the data in my Sheets doc?
-
cross-posted from: https://lemmy.ml/post/4867982
> Developers, itās time for you to choose a side: will you help rid the web of privacy-invading tracking or be complicit in it?
-
Java/Spring Boot vs .NET
Let's suppose that you didn't know either technology and were offered the chance to work with one or the other. Time for you to get up to speed on the technology was built into the project.
Which technology would you work with and why? Which would have more options in the future?
Yes, this is a real life situation I'm confronting. I'm deep in a Java training course but a .Net opportunity has come my way. Do I toss Java/Spring Boot aside for .Net? Or do I continue with Java/Spring Boot and decline the .Net opportunity?
-
Free TypeScript course on Udemdy
I saw the creator of this course sharing it on LinkedIn and figured others might want to give it a shot! I've had very good experience with Udemy courses in the past, they are extremely comprehensive and well made.
-
I cannot list items vertically in columns using display: grid
cross-posted from: https://lemmy.world/post/2692134
> SOLVED: by @[email protected] using
columns
property > > TL;DR: I want to achieve this behavior for the menu layout, but all I can get is this; note the different menu options order. > > Two days ago I asked for help for implementing the current behavior without hardcoding the menu height for each resolution step, and there were two suggestions to trydisplay: grid
. It looked promising and after reading some documentation I was able to get something very close to what I'm looking for. > > The only difference being that I want the chapters to be sorted vertically (as in the current version), but what I got sorts the chapters horizontally. > > Here it is (what I think is) the relevant code: > > #menu ul { > display: grid; > grid-template-columns: 1fr 1fr 1fr 1fr; > grid-auto-flow: row dense; > } > > Sorry, I don't have thedisplay: grid
version online. > > I did a quick search for display grid multiple columns vertical sort and saw this StackOverflow post: CSS Grid vertical columns with infinite rows which, if I understand correctly, says it's not possible. But I'm pretty sure I'm not understanding it correctly. > > Any help will be welcome, thanks! > > EDIT: I also triedgrid-audto-flow: column
(as suggested here) but it just renders a single row. Probably because I'm missing something... > > #menu ul { > display: grid; > grid-template-columns: 1fr 1fr 1fr 1fr; > grid-auto-flow: column; > } > > EDIT-2: I was told that forgrid-audto-flow: column
to work I need to specify the numbers of columns. If I understand correctly, then that doesn't really help. The original issue is that I need to edit the CSS file every time a new chapter is added. Which would be the same if I have to hardcode the number of rows. > > I mean, it's a bit cleaner to hardcode the number of rows than the height in pixels, but I was looking for a solution that doesn't require magic numbers in the CSS. -
Open Source Webhooks-as-a-Service
github.com GitHub - svix/svix-webhooks: The enterprise-ready webhooks service š¦The enterprise-ready webhooks service š¦. Contribute to svix/svix-webhooks development by creating an account on GitHub.
-
Help with responsive menu layout
cross-posted from: https://lemmy.world/post/2566953
> Hi, I'm an old webdev who is rusty in CSS; I learn about
calc()
recently and never really learntdisplay: flex
properly. > > I made some webs with a responsive menu layout (relevant CSS code posted on bottom). I tried using flex but I still had to do one ugly hack: I have the menu heights for the different resolutions hardcoded and I have to update them manually every time a new chapter is added. It's not a big deal, but I would like to know if there is a proper way to do this. > > Some alternatives I've thought about: > - The newround()
, but it's too new and not supported by most browsers. > - JavaScript > > ... but I feel like there must be a clean CSS-only way to achieve this. > > Thanks! > > Relevant CSS code (link to full stylesheet in case I missed something). > > ul { > display: flex; > flex-direction: column; > flex-wrap: wrap; > height: 624px; /* =27x23+3 | 23 = 91/4 / > margin: 0; > padding: 16px 16px 4px 16px; > vertical-align: top; > } > @media screen and (max-width: 1000px) { > ul { > height: 840px; / =27x31+3 | 31 = 91/3 / > } > } > @media screen and (max-width: 582px) { > ul { > height: 1245px; / =27x46+3 | 46 = 91/2 */ > } > } > @media screen and (max-width: 400px) { > ul { > height: auto; > } > } > ul li { > list-style-type: none; > margin: 2px 16px 2px 4px; > font-size: 120%; > } > ul li a { > display: inline-block; > background-color: #3fa79e; > color: #d2e7e2; > text-decoration: none; > padding: 2px 8px; > border: solid 1px #d2e7e2; > } > ul li a:first-child { > width: 106px; > margin-right: -3px; > } > ul li a:hover { > background-color: #144c48; > color: #fff; > border: solid 1px #fff; > } > -
When did Tinyurl start using Cloudflare?
I'm getting Cloudflare's JavaScript-based screening page when trying to hit tinyurl.com with curl and extract the real link. Anyone know if this has been going on for a while?
-
SuperTinyIcons of many popular services
github.com GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logosUnder 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos - GitHub - edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of y...
-
How to recreate this website? (Beginner adivce, Best Practices)
TLDR: explain how to rebuild x.ai to me, like I'm a 5 year old.
Hi everyone, I'd like to improve my Web dev skills and am looking for advice on how to get started and make it work. So my idea is to recreate this website as it currently is x.ai for starters (including the animated background). And later on, build up my personal website on that style. I simply want to use it as a base for following websites. I want to start by the mobile first approach.
How do I start? Should I try building it from scratch by hand (html,css,js) or rather use a framework (I had Gatsby in mind)? What is the best practices to make this a sustainable and reusable project?
Please bear with me, I can do figma quite confidently but I have little to no skills in web development yet. So if there is any word of advice for a beginner, I'll be grateful! Thanks!
- web.dev New CSS color spaces and functions in all major engines
Start using HD color to bring vibrancy to your designs.
CSS now supports color spaces that allow us to access colors outside of the sRGB gamut. This means that you can support HD (high definition) displays, using colors from HD gamuts. This support comes with new functions to make better use of color on the web.
We already have a number of functions that allow us to access colors within the sRGB gamutārgb(), hsl(), and hwb(). Now supported in browsers is the color() function, a normalized way to access colors within any RGB color space.
You can see some examples in the following CSS:
css .valid-css-color-function-colors { --srgb: color(srgb 1 1 1); --srgb-linear: color(srgb-linear 100% 100% 100% / 50%); --display-p3: color(display-p3 1 1 1); --rec2020: color(rec2020 0 0 0); --a98-rgb: color(a98-rgb 1 1 1 / 25%); --prophoto: color(prophoto-rgb 0% 0% 0%); --xyz: color(xyz 1 1 1); }
-
Anyone want to help me design a website to help get users from reddit over to lemmy?
I'm working on a website (https://www.go2lemmy.com), which, with just a few clicks, would allow a user to automatically modify all their old comments & posts on reddit to be ads for lemmy. It's using oauth. Anyways, the backend code is pretty much finished, I just suck ass at design, so if anyone wants to work on it with me, you can add me on Discord: indictevolution
Should only take an hour or two I imagine for the design, not much to the site at all.
- www.figma.com Introducing Figmaās New Dev Mode | Figma Blog
Learn about our new interface, and how we're making Figma better for developers