<wdg/> - Web Development General

Prev thread: → # →

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

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtube.com/watch?v=Zftx68K-1D4&feature=youtu.be [Open]

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

Attached: 1528516908003.png (822x552, 868K)

Other urls found in this thread:

youtu.be/eB9Fq9I5ocs
youtube.com/watch?v=qrIvv6OTN2Y
youtube.com/watch?v=Z1ktxiqyiLA
youtube.com/watch?v=c2uNDlP4RiE
tutsgalaxy.com/
freecoursesite.com/
github.com/gitname/laravel-homestead-tutorial
btholt.github.io/four-semesters-of-cs/
cs50.tv/2017/fall/#about,lectures
ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-00-introduction-to-computer-science-and-programming-fall-2008/index.htm
pastebin.com/QMD9DjZX
npmjs.com/package/avatar-generator
github.com/mozilla-services/react-jsonschema-form
twitter.com/NSFWRedditGif

Anyone use elasticsearch?

I am not allowed to have the same id in the same index even if they are in a different type?

My upload is dying at 25k rows which is exactly when it would start using id 1 again from a new table.

Shyeet, no one on?

What are everyone’s thoughts on js frameworks which one do you use? I’ve started learning nodejs and it’s pretty overwhelming to learn that there are so many frameworks of frameworks of frameworks. For example meteorjs is a nodejs framework which is a backend js framework (but meteorjs is also arguably a frontend framework of a framework as well). What the fuck?

What's going on? Why's it slow these past few days?

Could Browser gaming ever become as big as other gaming?

Aside from no one bothering to develop compilers for it what's stopping it from getting bigger? Limits on what browsers can do?

I just got my CS degree a month ago but I just got a job as a frontend developer (earning just $35k/yr).
I've seen senior developers earning triple of my current salary. How much experience do I need to be considered a senior developer?

Just learn one good stack that you really like and stick with it.

For me I stick with the MEAN stack. There's some really great videos from this guy's channel on it.

Here's how to build a restful API with MongoDB and Mongose
youtu.be/eB9Fq9I5ocs

Here's the second part where he builds the front end with Angular
youtube.com/watch?v=qrIvv6OTN2Y

Here's a login system from him. You can use the same database as your restful API
youtube.com/watch?v=Z1ktxiqyiLA

His channel has a lot of good shit on it. I like Angular especially because it still works with jquery, which I also use for jquery.ui and bootstrap.

Do you guys know any good quick resources for C# for someone who has an okay foundation in programming?

Have a coding challenge for an interview that wants me to write a frontend in React (ez) but the backend needs to be written in C# which I've never used before. Its just a simple API end point that sorts an array and in ascending or descending order.

>browsers rendering games at 60fps

>senior
+5 years

>+5 years
that's a shit load of time.
I am still a newbie in this world but I'll do my best to improve and be competent enough to do the job.
Are those online courses from udemy and treehouse good enough to learn new technologies or improve on the current ones I know? (I know the basics of javascript and have a little experience on c#)

the docs

yeah I was looking for the docs and they're actually pretty good

>Are those online courses from udemy and treehouse good
no, they are just a meme.
Someone post that pic of the user who tried to get a job as a developer with only weeks of watching pajeets and reading docs

Depends.

I've known seniors who got their title after as little as a year.
5 years is the default but you can talk your way into it. I turned down a senior position after 6 months experience because I'm an idiot.

Agar was huge and many people play "io" games. Node/socket make it pretty easy. If you want a framework then you could use Phaser. Takes like an hour to learn and is pretty cool.

Is ruby on rails a meme or can it get me a good job, so far I'm loving it but should I continue learning it?

I give up on trying to find freelance work. It's impossible unless you get incredibly lucky. I've been on every marketing forum's marketplace section and every freelance site for months now. I've done all the qualification tests but no one wants to hire anyone that charges more than a few bucks per hour. If your name isn't Pajeet and you don't think slapping Bootstrap on everything completes a project, you won't be hired.

>If your name isn't Pajeet
change your name?

I've been gamedeving the last couple of days instead of posting all day

it will, inevitably. nothing is stopping it anymore really, just needs a bit of time

>what is wasm and webgl
youtube.com/watch?v=c2uNDlP4RiE
this was 4 years ago

>freelancing websites
dude those are a fucking meme. They put fake profiles on there to entice people to buy their shitty currency so you can send out unlimited proposals. You have to do contract work if you want to get your name out there with actual companies.

>this was 4 years ago
>releasing games with an additional layer (browser) instead of targeting the hardware (currently)

How do you handle your ajax calls in react? Do you make a separate file for them or dump it all in your component?

This is how I'm doing it
// service file
export ThingsService = {
handleGetThings: () => {...},
handleGetThing: (id) => {...},
handlePostThing: (thing) => {...},
}

// component file
state = {...}
getList = () => { ThingsService.handleGetList().then(...) }
render() {...}


Also, I've used angular before and they do something similar to this but with dependency injection, which I'm guessing you don't need in react. What's the proper way to do this?

I have some input form that has labels over textboxes used as placeholders. When you focus the textbox the placeholder label shrinks and moves out of the way to the top of the textbox.
The problem is, I use .net MVC and the form calls a controller method which always returns that form (as a view) back, along with the input data. When the view is return, the input data is still there in the textbox, but the placeholder labels reset and go over that text in the textbox, until you click them to give them focus.
Anyone know how to go about fixing this?

is the MVC paradigm more than just put files in specific folders(folder for view files, js folder for js files, etc)?

yes

It's a pattern not a paradigm. It can be used with OOP or functional

if you're talking about WASM, then last time I checked the most popular game engine also uses an additional layer (the CLR) which seems to work fine
if you're talking about WebGL then I don't think it's any less direct than OpenGL

Has anyone used an API for free SMS sending?
It is worth to base a login for an app on SMS or I'm better using other approaches?

what's the trick behind html5 video sizes? how do I accomplish 100% width and 560px height without the video forcing it's own size?

video is already wide enough, I tried resizing the video manually, but it didn't do much

Yeah, those top 20 chinese females on those sites aren't actually chinese females operating independently.
Those freelance sites dont care because it's the only way they're making money.
Not a meme, go ahead and continue learning it. But recognize it won't be the only thing you learn.

magnet:?xt=urn:btih:fadd68cd66baf56593f01f07ce281aff64c14e10&dn=%5bFreeCourseSite.com%5d%20Udemy%20-%20Modern%20JavaScript%20From%20The%20Beginning&tr=udp%3a%2f%2f62.138.0.158%3a6969%2fannounce&tr=udp%3a%2f%2f87.233.192.220%3a6969%2fannounce&tr=udp%3a%2f%2f144.76.167.213%3a1337%2fannounce&tr=udp%3a%2f%2f151.80.120.112%3a2710%2fannounce&tr=udp%3a%2f%2f163.172.81.35%3a1337%2fannounce&tr=http%3a%2f%2f163.172.81.35%3a1337%2fannounce&tr=udp%3a%2f%2f211.149.236.45%3a6969%2fannounce&tr=udp%3a%2f%2f109.236.91.32%3a6969%2fannounce&tr=udp%3a%2f%2f83.208.197.185%3a1337%2fannounce&tr=udp%3a%2f%2f51.15.4.13%3a1337%2fannounce&tr=http%3a%2f%2f51.15.4.13%3a1337%2fannounce&tr=udp%3a%2f%2f185.82.217.160%3a1337%2fannounce&tr=http%3a%2f%2f185.82.217.160%3a1337%2fannounce&tr=udp%3a%2f%2f198.54.117.24%3a1337%2fannounce&tr=udp%3a%2f%2ftracker.zer0day.to%3a1337%2fannounce&tr=udp%3a%2f%2ftracker.leechers-paradise.org%3a6969%2fannounce&tr=udp%3a%2f%2fcoppersurfer.tk%3a6969%2fannounce

Udemy - Modern JavaScript From The Beginning: Released this year (2018, contains 118 videos)

nvm it's actually from late 2017, also, it's 2.95gb

How do I open this shit

torrent magnet, figure out how to add them in your torrent downloader.
In qBittorrent: CTRL+SHIFT+O -> paste

The Complete JavaScript Course 2018, a a bit more recent, way shorted, best seller in udemy:

magnet:?xt=urn:btih:ba972146276acd84023bde8a7306a731a7179f41&dn=%5bFreeCourseSite.com%5d%20Udemy%20-%20The%20Complete%20JavaScript%20Course%202018%20Build%20Real%20Projects!&tr=udp%3a%2f%2f62.138.0.158%3a6969%2fannounce&tr=udp%3a%2f%2f87.233.192.220%3a6969%2fannounce&tr=udp%3a%2f%2f111.6.78.96%3a6969%2fannounce&tr=udp%3a%2f%2f90.179.64.91%3a1337%2fannounce&tr=udp%3a%2f%2f51.15.4.13%3a1337%2fannounce&tr=udp%3a%2f%2f151.80.120.113%3a2710%2fannounce&tr=udp%3a%2f%2f191.96.249.23%3a6969%2fannounce&tr=udp%3a%2f%2f35.187.36.248%3a1337%2fannounce&tr=udp%3a%2f%2f82.45.40.204%3a1337%2fannounce&tr=udp%3a%2f%2f123.249.16.65%3a2710%2fannounce&tr=udp%3a%2f%2f127.0.0.1%3a6969%2fannounce&tr=udp%3a%2f%2f210.244.71.25%3a6969%2fannounce&tr=udp%3a%2f%2f78.142.19.42%3a1337%2fannounce&tr=udp%3a%2f%2f173.254.219.72%3a6969%2fannounce&tr=udp%3a%2f%2f51.15.76.199%3a6969%2fannounce&tr=udp%3a%2f%2f91.212.150.191%3a3418%2fannounce&tr=udp%3a%2f%2f103.224.212.222%3a6969%2fannounce&tr=udp%3a%2f%2f92.241.171.245%3a6969%2fannounce&tr=udp%3a%2f%2f51.15.40.114%3a80%2fannounce&tr=udp%3a%2f%2f5.79.83.194%3a6969%2fannounce

There's two schools of thought and I use both depending on the circumstance, though arguably I shouldn't.

The meme solution is to use fat/thin components where thin components are provided data in props and only present that data.

Fat components do all the fetch/axios/ajax etc and pass the data down to thin components to display.

Having a module for wrapping fetch/axios/ajax isn't a bad idea though I tend to stick it in the fat component instead.

For those interested in video tutorials from udemy and shit, i recommend looking at;
- tutsgalaxy.com/
- freecoursesite.com/

anyone with modern js/css/react question come to #Jow Forumswdg on rizon for answers

paste in your url bar, enter

Any of you know about a good tutorial for setting up Homestead from zero?

I have to get this shit working and I can't do it for shit.

got you senpai

github.com/gitname/laravel-homestead-tutorial

are there any good udemy courses on computer science?

I heard Gitlab has free private repositories, how easy it is to deploy from Gitlab to Heroku? Is it possible or does it only accept Github?

>4 semesters of computer science in 6 hours

btholt.github.io/four-semesters-of-cs/

awesome.

not him, but thanks

That looks like a 45 minute read at most.

did you do the exercises?

if you use angular with jquery you deserve to die of aids

There are also some free MIT and Harvard videos on intro to CS and a few other stuff

cs50.tv/2017/fall/#about,lectures
ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-00-introduction-to-computer-science-and-programming-fall-2008/index.htm

I'm using Ubuntu but I guess that will work.

Thanks.

thanks

Why are companies asking for developers with knowledge on Laravel?
What are the advantages against Zend(currently using this) or CodeIgniter? What's the learning curve with Laravel?

>PHP

hmm, no.

Laravel is ridiculously easy

Laravel has really good DX

any react experts here? I have a fetch() that i call in componentDidMount() and it works fine but then i try to call it again on a form submit but it doesnt work. Still gives me the same data as it did the first time it was called

component did mount only runs once.

i put the fetch in its own function and call it in componentDidMount()

but i also call it in an onSubmit function. For some reason it doesnt work when i do that. Only works in the componentDidMount

Post code

pastebin.com/QMD9DjZX

still not much farther with this one,

I used a container with 100% width, 85vh and object-fit: cover;, it gets the job done but crops the bottom half of the video,

If it works on component mount then that code is fine, how do you call it with onSubmit?

handleSubmit(event) {
event.preventDefault();
const newItem = {fname: this.state.fname, age: this.state.age, phone: this.state.phone, email: this.state.email, location: this.state.location};
fetch('/add', {
headers: {
'content-type': 'application/json'
},
method: 'POST',
body: JSON.stringify(newItem)
})
this.callData()
}

get mad :D

are you binding handleSubmit?

yeah

you realize that fetch is asynchronous(return a promise), right? this.callData will be called before that fetch is done.

i put this.callData() in .then after the fetch but still didnt work

i got it to work, thanks peeps

I'm sure this is stupid..

Select an image to upload:



function uploading() {
console.log('in upload function');
var input = document.querySelector('input[type=file]');
file = input.files[0];
if(!file || !file.type.match(/image.*/)) {
console.log('not an image');
return;
}

var fd = new FormData();
fd.append("file", file);

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");

xhr.onloadend = function(e) {
console.log('in onloadend function');
}
}

The function uploading is called correctly on clicking the upload button, but my server dosen't recieve the POST request (or seemingly any request).

Am I not sending the request properly?
Seems that the line
xhr.open("POST", "/upload")


is what isn't working like I expect it to.

YEP it was stupid.
Why do I always find the answer as soon as I ask for help?

xhr.send(fd)


is what I was missing.
Would delete this post but maybe the information will be useful to someone reading.

Ey /wdg/ how are avatars generated on some sites, the ones where you upload a picture and the site takes that picture, shrinks it and fits it within a circle or square with rounded borders? Any clue on how they do that would be fine, I can follow through with some research. Just need a starting point cos I have no idea at all what is used for this.

npmjs.com/package/avatar-generator

I mean ones which work from an image that the user uploads, not one which creates an image from scratch

nvm this, it's exactly how the fucker has done it, it's cropped at the bottom on the site I am copying it from too

Crop may be one keyword.

Looking to get my first domain and vps. One thing I want to do is run a personal pomf clone on it for temporarily sharing images when other websites go down. Are namecheap and digital ocean the places I should start off with?

Yup. I would recommend an image CDN though if you start pulling some serious numbers.

Ballsy though. I never allow image posts on my websites. Last thing I want is to get throw in jail because some turd posts some illegal shit there.

>Ballsy though. I never allow image posts on my websites. Last thing I want is to get throw in jail because some turd posts some illegal shit there.
I completely agree with you there. I would be the sole user of it and maybe a friend or two eventually. It'd be a side project out of convenience for when any of the temporary pomf clones go down. I only need the images up for ~24 hours and don't want to upload some of these to imgur or places where the image stays up permanently/until they run out of storage.

However, I'm working at another project that might involve users uploading an image to do calculations on it. I'm still a bit new to it so when I have more questions on it I'll probably come back. I don't really know much yet about processing images on the client side.

>All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
> Images uploaded are the responsibility of the Poster.

How in the hell do I upload multiple files to AWS S3 using react/express/mongo? I have a bunch of file inputs in one form, each file input is related to a text input. Basically this is my document tree

[
{
title: "title",
file: "url"
},
...
]


How do I get the url I want to be stored next to the title I want? I already managed to build component(s) in react that can basically send the state structured like that code up above, but the file string looks like this "C:\\fakepath\\1528882369902.png". Searching I saw that this is a "feature" to avoid servers to look up on my local filesystem, but don't I need the complete path for my server to actually upload it?

Look into Plupload. You can do client-side image manipulation like cropping and resize, then upload.

I used this
github.com/mozilla-services/react-jsonschema-form

to build a form in react js and then upload the files to AWS S3 to through the AWS API Gateway (sending a POST request with the files in the JSON body)

>Why are companies asking for developers with knowledge on Laravel?
It's a great PHP framework that allows developers to build something quick
>What are the advantages against Zend(currently using this) or CodeIgniter?
Depends.
Zend is focused on creating solutions for enterprises while Laravel is more focused on just web developing.
>What's the learning curve with Laravel?
Pretty fast. Once you understand how the blade templates work, you are good to go.

I've been paying for Laracasts for 2 years and never learned Laravel. lel

I had to learn CakePHP for work and now I never want to use PHP again.

Details

Is this the way to make a link like this in react router?

>why Lavarvel instead of Zend?

It's easier basically. I'm a Zend2 dev who has poked around in Laravel a little for a coding challenge but not actually learnt it.
It took me about half an hour to understand how it worked, it's much simpler than Zend2's complicated routing and module/config.php and module.php and plugins and loaders and shit.

There's probably some trade off about not being able to do quite as much though I didn't manage to find it in the time I was looking.

It also translates quite well from Zend2, it's basically just a simpler version. Blade templates are trivial to learn and again, simpler than Zend2 though it is an additional language to learn. Laravel is capable of using more traditional phtml-style templates too.

If you're using PHP then Imagick would be the keyword to search for, it supports very complex image manipulation/creation.

That (and accepting T&C/warning on upload) and a report button would probably protect you in any jurisdiction but it's the 'probably' that user probably doesn't like.

>Is this the way to make a link like this in react router?
Depends on what you want it to do.

>PHP then Imagick would be the keyword to search for
They said client-side

How do I make a batch file so when I double-click
"watchmode.bat" it would open up my terminal/cmd and run

webpack --watch

or test.bat would run
npm run test -- --watchAll

double-clicking is faster than typing so this would make my workflow even more turbo-charged faster than a thousand pajeets

google has the answer for this one.
stop being lazy, even when you want to be lazier.

>
no they didn't

I figured it was the same dude from just 30 minutes earlier asking about image manipulation.

Anyways, he should be using plupload so he doesn't have to take full-size images and do the processing on his servers. Might as well let the client do the work.

If you can't write a batch file then development of any kind is probably not for you.

Why do I need to create this FormData thing for uploading files?

if I wanna handle show something from an API but they have limited amount of api calls allowed wouldn't it be better to just make the request in my back end then display then let the user fetch request from my back end instead?

I have to ask because I´m fucking tired of tutorials, codecademy, freecodecamp and alike. I want to work with real web development environments. I´m using Ubuntu, since I guess that´s important for suggestions.

So far it seems that Homestead is pretty popular if you work with Laravel, but I´m unsure if going with that or plain LAMP stack. Only used XAMPP on W7.

Now, for the MEAN stack, what´s the way to go Node environment in Linux?

Also, I´m already having trouble setting up homestead but I´m sure it´s worth the effort and when I have both stacks running I can focus on doing projects, which I think is the way I will learn more.

It depends on the limit and how up-to-date the data needs to be. Caching it in the backend is a good solution but if the limits are large or the data gets stale quickly then you might want to do it client-side.

The problem comes when your client-side code needs access to the API key which you probably don't want to and are most likely not allowed to share.

>Now, for the MEAN stack, what´s the way to go Node environment in Linux?
You mean, what flavour of linux to install Node on? Ubuntu LTS would be fine, it's practically standard.

I think maybe you're asking if there's a distribution or build that is Ubuntu with Node etc already installed...there isn't a standard one though many hosting services have something home-made in their catalogue.

Node has such a trivial installation process that it's barely necessary though and all you need for a MEAN stack is Node and an nginx proxy (not mandatory either).

Simple question (a bit stupid):


Any useful tool for taking screenshots of your webpages?

I've seen some nice pictures where the responsive versions are captured in each their device -- any tool for this? pic related

I don't want to pull out the old drag and snap tools.

Attached: responsive-mockup-01.jpg (570x375, 20K)