/wdg/ - Web Development General

Previous Thread: >Free resources to get started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good introduction (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn
freecodecamp.com/
codecademy.com/

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Attached: 1568728740532.jpg (450x399, 140K)

Other urls found in this thread:

github.com/karrasankar158/TEXT_BOOKS-MATERIALS-API-DOC?files=1
npmjs.com/package/html-to-text
twitter.com/NSFWRedditGif

How do I use Bing?

If only Mr. Nagoor Babu could teach me webdev..

we DrugaSoft now

based OP

Gay OP

What does it mean when an API asks for a callback URL? I just want to get some data....

How do I become THE WEAPON OF JAVA, mr Babu Sir?

What started durgaposting? I've seen it randomly posted few months ago in some threads but recently it exploded

Unknown are the ways of memes. I've seen the Druga picture last year but it didn't really take off. It's time came.

Sir we are merely doing the needful

Do you wanna know why? Because there are CONSTANTLY new people here. Most of the people you see are probably only active a few months.
So these new people discovered this meme for the first time and made it huge.
I hope I didn't destroy your illusions.

Attached: 20190917190109.png (197x164, 9K)

It might mean the data you ask for cannot be provided quick enough. They might need to do some long running computation to generate the numbers.

So keeping the connection alive would unnecessarily consume resources which could be used to accept newer requests. Instead they ask for a callback URL which is an endpoint that you control where they can send the results once they have been generated.

Thanks. So how would I factor this in with, say, a userscript?

React Hooks are a fucking joke. Much less readable and more code than class components.

The exact opposite is true. Are you sure you're using hooks properly?

To create callback you will need to run a server. It can be done with JavaScript easily if you use server side stuff like nodejs.

Userscript would be JavaScript running in a web browser, and I don't think it would be possible to run a server on top of a browser.

be so kindful, do the needful, make me goodful

Blazor is the future

The callback URL needs to be accessible on the internet, so you'd need to write some serverside code to handle it. I'm not sure what a userscript is but I assume you mean like a browser extension?

I'd recommend writing a simple node.js HTTP web server that is also a websocket server (use socket.io or SignalR or something) that your userscript clients can make a persistent connection to, that can handle the callbacks from the API and forward them to the correct client over the websocket. This has the benefit of keeping this asynchronous via a proxy.

You could also ditch the websockets and just cache the API responses in a database, then write your own simple API that you can poll until the data is available.

Anyone else work with Wordpress?

>Gutenberg is a fucking nightmare but also pretty cool

>not posting /his/ tutorial as resources

Trying to understand React hooks and shit and I think that I'm just too stupid for this.
Say I had an array of cars and if I were to choose a car, I'd render a list of available colors, which change based on the model selected. Where do I even begin with this?
Map the array to get an id and then onclick that to a function that renders the available colors or something?

durga mean Jow Forums
Jow Forums mean durga
WEAPON OF DUR/G/A

Attached: WEAPON.jpg (600x634, 88K)

he's genuinely based and you are faggots

Someone aware me on this guy

best java teacher in the W O R L D

how do i into git workflows when working on a team?

Ask your teammates

fair enough

Attached: 1509997577917.jpg (314x400, 107K)

TypeScript based WASM framework are going to kill this only working well with .NET shit.

Learn vue.js hooks, there are much easier and saner to understand.

>TypeScript based WASM framework
What the fuck are you even saying?

AssemblyScript - TypeScript that's compiles to wasm.

Hello fellow Pajeets,

I will soon be developing upon my own Master program to display my excellent knowledge and workings of Web Design and Application Building for the finding of employment.

Please sirs, can you inform how much importance there will be placed upon my ability to integrate tests in my application? Although I feel very confidence in my abilities as Application Developer to work at Company, the making of these tests is such an extra hindrance upon me and I feel it quite burdensome.

Thank you I will expect your replies here.

jest

Yes sir, not very important
They are just checking your Application for how it looks and functions and not review your code
Glad i could help sir

Does anyone even bother with unit testing if they're working on a solo project?

>typescript types available for library
>everything is any

why do they even bother? this is worse than nothing

Attached: ada.jpg (579x329, 45K)

completely pointless. Javascript is just as fast. The whole point of Blazor is you can reuse your C# code on the front-end.

>They are just checking your Application for how it looks and functions and not review your code
Really, they don't actually look at the code? That's weak. But if it's true I don't need to put tests into my portfolio that's a relief. I'd have to spend a good amount of time learning Jest and of course it'd double my development time to actually USE it.

I usually type in any if I can't be arsed to type shit out and fix it once I'm done with the component. Sometimes I forget about it and the any's remain.

I'm considering it just to get into the mindset of having less things done at the end of the day. "I've been unit testing and it's been rough to be honest." Meaning, I didn't even do the unit testing properly, I'm just a lazy ass.

why not just omit it? misinformation is worse than no information

Python , Ruby or PHP?

Does Windows have anything like Snapcraft where you can just build desktop apps with shit like Node and Ruby?

I don't use Windows btw I'm just curious.

Is streaming a thing on the client side?

I'd like to create a rather large (think on the order of 20,000 x 10,000 pixels) PNG image on the front end for the user to save. It's normally something generated on the fly and only a small portion of it is rendered on a canvas, but I want to give an option for the user to download the whole thing.

For smaller images I can just use FileSaver.js, put it all in an offscreen canvas and do
offscreenCanvas.toBlob(blob => {
saveAs(blob, 'output.png');
});


But for an image this big this would explode the memory. The sensible thing, at least on the back-end, would be to stream/pipe the pixel data through some PNG encoder and then save the file (it ends up around 2-3 megabytes). But all the PNG encoding libraries I see on NPM.js look very much like like server-side stuff exclusively, and use Node's Writable streams / fs file streams in all examples.

I guess I could also send the client state to the back-end, render that shit there, and download a file from the server instead.

Exact same issue in Python, utter trash 'typing'

Streaming is from server to client. You can't stream when it's already on the client.

What would be the proper term for opening a fs.createReadStream on a JPG file (or some other representation), piping it through some PNG encoder, and saving to a file through fs.createWriteStream? I said streaming but this sort of thing is what I meant, the point is the much lower memory footprint than loading the whole initial file as pixel data, encoding it as PNG, then saving it.

I'm looking for a way to do something similar on the client side where I start with ImageData / some pixel representation (say a typed array) and save a PNG.

I can do it with small images through a canvas, but for large ones the memory use is too much even though the final product (a ~2 megabyte PNG file) is relatively small.

Recommend me a lightweight web framework. Language doesn't matter since I've been meaning to pick up a new one anyway.

look into StreamSaver.js but full disclosure I gave up on using it

shit is convoluted and depends on an weird polyfills

Nim Jester

This react tutorial has given me quite a challenge with little context to help me figure it out. Maybe it just wants me to do the needful and read all the react docs?

Please, Sirs.

It has me making a custom hook to handle a forms:
import {useState} from 'react'

export const useField = (type, name) => {
const [value, setValue] = useState('')

const onChange = (event) => {
setValue(event.target.value)
}

const reset = () => {
setValue('')
}

return {
type,
value,
name,
onChange,
reset
}
}

The reset function lets me clear the forms with a reset button and upon submit. It works, but it causes a warning because I'm using the spread operator to populate my various form components and React doesn't like the invalid prop for an tag.

The tutorial wants me to figure it out. I am guessing there's a way to change the state without returning the reset function as a property within the 'useField' hook... but HOW?

define lightweight

no bundled ORM, no enforced development paradigm, small base project size

>github.com/karrasankar158/TEXT_BOOKS-MATERIALS-API-DOC?files=1
The needful materials

Sanic.
>gotta go fast

Is there a way to make the console show everything? Pic related

Attached: 7.png (352x89, 16K)

almost finished with this /wsr/ (thank u Jow Forums user)please help with this need the open in new tab work for hitomi (nsfw) link (provided in the wsr) work for palemoon userscript because thank you

Yes that was me. One second.

you just described Go, you don't even need any lib or framework, just the stdlib will do

Figured it out. I just put a conditional in onChange(e) so that I could feed it junk and it would reset the state.

Kill yourself for that image.
So I'm trying to upload a react-native app to the google playstore (I know, not really web and a bad way to do things but wanted it on my CV) and the first build failed as I tired to upload an unoptmized apk, now that I've optimized it it fails as:
>You need to use a different version code for your APK or Android App Bundle because you already have one with version code 1.
I'm assuming this is becuase of the first failure? Is there a way to roll this back?

Yes

How?

Do the needful sir

When querying the Jow Forums API, the comments are returned in HTML markup, for example:
>>25490880Hello


How do I quickly turn the entire comment into readable plaintext, like:

Hello

Using Node.js?

nevermind, I figured it out
npmjs.com/package/html-to-text

Wait are you using Node?

I feel like if you don't know how to turn something to text you probably don't know what node is.

yeah first time using node

What is it you're attempting to do?

Just getting the text into a readable format, but I already figured it out

Attached: 1568784900.png (519x200, 21K)

Does Discord allow HTML? Never used it before.

No, the bot will print the HTML out literally, like this

Attached: 1568785039.png (293x28, 3K)

Just started learning html and css on my own for fun and then decided to looked up webdev as a job , how hard is it to actually learn other stuff required like javascript?

What are the most common IDEs for web dev? Do you usually rely on the IDE for testing? Obviously basic editors would not even support hosting/running your app to localhost.

I've worked with visual studio which was fine but I'm curious what else is out there. Options for linux too.

VSCode

100% agree

Jow Forums here
I need you Pajeets to give me an idea for a SaaS app

Get the fuck out of my thread cuck

VSCode for everything
Maybe jetbrains stuff if using a specific language and it supports it well

> Question(ajax, mysql)

Which way:
1. Create a page witch contains all data from mysql and then use javascript to search trough it
2. pass parameters from js, search mysql by it, generate ajax data page.

the fuck kind of larp is this

Attached: WFzhwRd_d.jpg (261x195, 5K)

>web d*vs mocking java pajeets

God the irony

How about a SaaS that gives SaaS ideas?

www.bing.com
I did it for you.

Has anyone else got suckered into the webdev part time meme?
I work for one guy for 4 days a week. Finish his stuff, now I do jobs once every never.
Find a second job, contract says 1 to 3 (read: 1) day a week and it says that I can't accept a job without bosses consent (read: it's in a different industry and doesn't consume more than the two remaining week days [unless he finds out about me keeping job 1]).
Do I seriously need three jobs with three websites + extras just to stitch together full time work?

How would I go about using websockets in my webapp? I built a REST API to serve some data at a url and have the webpage pull from it, but now I want to make the webapp update automatically when there are changes to the content at the url. Do I build a websocket on top of the API and have it see for changes in the content at the url, or do I make my websocket serve content directly?

Thanks

What back end language are you using?

node

We're not mocking. We love them.

socket.io client
socket.io server

you do something like this:


// socket.io

const server = require('http').Server(app);

const io = require('socket.io')(server, {
handlePreflightRequest: (req: any, res: any) => {
const headers = {
"Access-Control-Allow-Headers": "Content-Type, Authorization",
"Access-Control-Allow-Origin": req.headers.origin, //or the specific origin you want to give access to,
"Access-Control-Allow-Credentials": true
};
res.writeHead(200, headers);
res.end();
}
});

let users: any = {};

const socketHandler = (socket: any) => {

socket.on('disconnect', (data) => {


})

socket.on('connect', (data) => {


});

socket.on('reconnect', (data) => {


})

}

server.listen(8000);

io.on('connection', socketHandler.default);

>have to write some code yesterday
>say screw it I'll do it tomorrow
>open chat editor
>the code I need was written last week and I forgot about it

well, I'll be done with this in 5 minutes

It's not really hard, but it's a programming rather than a markup language, which means it requires an entirely different knowledge and skill base.

Anything Java -> IntelliJ
Anything Microsoft -> Visual Studio
Everything else -> Just use a text editor like Atom or Atom clones such as VSCode

>and it says that I can't accept a job without bosses consent
hahahahaha wtf nibba

Turns out it's legal.
I don't get why it's there. If I get other work and he says no then I quit working for him. Isn't that the expected outcome in all cases?

pretty standard
in my old employment contract it said that i wasn't allowed to take on extra work even outside of hours without prior written consent

everyone in the business had freelance work and nobody was punished or warned for it other than one guy who sat in work doing it like a retard.

you'll just have to separate time carefully and make sure none of your work affects the others time.

e.g what do you do about emergency responses (like the website being down)? it will affect whichever project you're on at the time...

I have a problem with object-fit and I just don't get it.



@supports (display:flex) and (object-fit:cover) {
ul {
width:100%;
max-width:800px;
margin:auto;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:stretch;
}

img {
width:100%;
height:100%;
object-fit:cover;
}

li:nth-child(1) {
width:calc(100% * 2 / 3)
}

li:nth-child(2) {
width:calc(100% * 1 / 3)
}
}


This code works perfectly in FF and Chromium. I a get a row of images where the first one is 2/3 of its parents width and the second is 1/3. I can simply add other rows and give every li its percentage and it works. The height of the row depends on which ever image is bigger.

But it does not in Chrome Mobile (on my device) even though the device *actually supports* object-fit (and flex of course). At least it does so based on the @supported rule and by debugging it actually applies the object-fit (but nothing changes).

What is my fuck up?