/wdg/

Ctrl+f "Web Development General" not found edition

Copy paste your JS code to jsfiddle.net/ if you want people to help you.

Attached: 3a508eee5b4004d3ced105846c9de6b1.jpg (655x900, 262K)

Other urls found in this thread:

github.com/K1rakishou/chat-project
css-tricks.com/clipping-masking-css/
sitepoint.com/css3-transform-background-image/
iconscout.com/blog/optical-effects-in-user-interfaces/
ipinfo.io/json
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
twitter.com/NSFWRedditImage

Is there any good Express tutorials? Is Express needed at all for a small project or is plain Node.js good enough?

recommend me some good js books. my goal is typescript and angular.

it's all on the express site dude.

Plain html/css/js is enough for a small project. If you want to use npm ecosystem then probably build the thing in vue.js or nuxt for the friendliest learning curve.

why should I pick postgresql over mysql or vice versa?

>it's all on the express site dude

It really isn't.

Anyway I want to learn Node.js (Express) and React so I'm going to get and make data through a REST API from an earlier project. How can I use Express to achive this? How can I make React work with Express?

Attached: ShortHopeStatus.jpg (800x450, 44K)

create 2 'apps', your api/express app and then your react app. query your api from axios or w/e in react. vue/nuxt is better than react though like the other user suggested.

What is the backend language and why its PHP?

Please do not post a picture of my wife in her love-making clothes again. Thank you.

Hello /wdg/uys, I'm starting a course of webdev. Before memes, what should I learn FIRST?

No future.
No jobs.

HTML, CSS, JS and look into SQL

see this is why OP is a total faggot for not making the thread with usual copypasta
is it retarded to start with JS and then go into html+css?

So I'm writing a simple chat with encryption and shit. And know I want to add the ability to send images inlined in the messages. So I came up with two different ways and don't know which one to choose.
1. When a user sends a message to the backend with an image - send that image to every one in the chat room inside the message packet. (Packet's size increased, have to store all images on the chat backend until they are removed from the chat history)
2. Implement a separate file backend for images (http). So when a user sends a message to the chat backend with an image, instead of sending it to everyone - store it to that other file backend and send just a link to that image to everyone in the chat room. (Packet's size remains small, have to store them on a separate backend, hard to synchronize two separate backend).

What would you do in this case?

dude, setting up express is like a few lines of code, after that it's all routing and response request handling, just learn promises, async function and it's gonna be a landslide

>is it retarded to start with JS and then go into html+css?

why should it be, you can start with eloquent js, do some basic programming exercises using js only, after that JS with html and css is gonna be easy for you

>is it retarded to start with JS and then go into html+css?
yes

which is it then?
I know a simple "yes" is often a meme response, but please elaborate if it's not in this case

Postrgresql used to suck hard. Then it got better and MySQL got bought by Oracle. I'd choose Postrgresql for a greenfield project these days.

Why would you ever use JS without HTML/CSS?

You might definitely use HTML/CSS without JS, but the other way around is a shitty meme. JS belongs in the browser and is inherently tied to the DOM (not just in my opinion, but objectively and historically provably). Learning JS without learning how to first create a DOM and then work with it is ass-backwards.

I mean you CAN learn JS before HTML/CSS but why the fuck would you ever do that?

I know the very basics of both JS and HTML/CSS is just kill myself tier boring

Well what the fuck is your goal? Do you want to learn JS or do you want to learn webdev? If you want to learn webdev, HTML & CSS are fundamental parts of it, and you better get the fuck to work.

If you just want to learn JS then just like learn JS. If you want to dick around, dick around.

You can't be a webdev (at least and especially frontend dev) without knowing HTML and CSS. Learning them after learning JS is just doing it the wrong way with literally no benefits.

1.HTML
2.CSS
3.JS
4.PHP (or node or express or whatever other meme it is now)
5.Mysql (or Postgres or mongo)
5?????????
6. Profit

I would host the imgs somewhere and display the link in chat as the src of an img

I hope I'm not making a brainlet suggestion.

Dudes I love web development but hate offices and office culture, is there a future for me in the webdev biz

Join some startup with beanbags and a ball pit.

give me domain ideas for an image hosting website

What you've suggested is literally the second one

why are web developers so fucking stupid? he is created an encrypted chat. talking about "packet size" in reference to webdev. i gaurntee this retard wont use crypto correctly. whther that be retard key exchange or something else. not encrypting images in ur "encrypted" chat is retard too. clearly you shoulding be serveing unencrypted images directly from src of img html. like wtf. what i would do is create some cdn/file host for binary encrypted blobs. client download it. decrypt. insert into html. dont send it over websocket or whatever retard autism you are doing.

What are some good tools that Jow Forums recommends for testing webpage performance?

I know of google pagespeed tools but wondered if there are some better options for doing this?

Well that's what I'm planning to do. Before sending the image to the server it's being encrypted with client's private key and then uploaded.
Everyone in the chatroom has public keys of each other (you automatically exchange the keys upon joining a chat room unless you added someone's key to your whitelist, then it just checks whether the key has changed since the last time and if it did you will see a notification (well it's not implemented yet)) so they can decrypt it without a problem.
I don't use html nor websockets. You can actually see the code if you are interested - github.com/K1rakishou/chat-project

Attached: 1503936868029.png (750x634, 202K)

I think I readed that wrong, now that I've paid more attention I would suggest number 1 since it gets rid o fthe image in the long run. But sending everyone an image seems a little bit overdoing it imo. Idk I'd probably choose a third party server like imgur to host the junk files for me if I would do it and use the img src method.

So, we're all agreed that Reason is the future of web development? Good.

>Before sending the image to the server it's being encrypted with client's private key and then uploaded.
you dont encrypt content with private keys. you encrypt symetric keys with private keys.


>Everyone in the chatroom has public keys of each other (you automatically exchange the keys upon joining a chat room
how? are you trusting the server gave you the correct keys?


>unless you added someone's key to your whitelist
sounds like a blacklist


>I don't use html nor websockets. You can actually see the code if you are interested - github.com/K1rakishou/chat-project
ye no i dont want to see some idiots failed attempt. just use tox

-upic
-youpic
-pic.you
-pic.u
-imgu
-uimg
-u.img

You on crypto

Attached: Untitled.png (640x513, 91K)

i have two divs with background image in each

i want to diagonally hide the first div and then show the second div in place of where the first div has been subtracted

i thought about rotating the div but that would change the orientation of the image

spot on. well done /wdg/.
6th step could be one of the most popular libs/frameworks, if you want to get a job doing that kind of stuff. so react/angluar/vue/ember/whatever-the-fuck

Attached: 1533847923360.png (460x337, 271K)

>i want to diagonally hide the first div and then show the second div in place of where the first div has been subtracted
I have no idea what you mean by this, could you put it in a more understandable way?

btw how do you a/b +c/d = x/y in java?

Attached: 1535563533542.jpg (367x446, 41K)

freelancing, startups, top-10s, NEET

tried drawing this if it helps

so for example you have div A and div B each have a background image and i want a way to show div A while simultaneously masking off div B as div A grows in size eventually taking the space of div B

i can handle the animation timings myself just don't know how to do mask off without using some clip path svg shit i want tp do it as simply as possible with css and js

Attached: drawing.png (917x362, 8K)

position relative
z-index

how do i keep the image orientation normal while having a slant on both divs though? i can't use rotate

wait

position absolute on one,
z-index

that still wouldn't work it's like a peel animation

1.put the two divs inside a containing div
2.give the containing div some border (so you can see the edges) and the desired with and height (of the clipping path)
3. once you got everything working set the containing div to css attribute overflow:hidden;

how did you set the thing up?


backgroundpic1 position relative, z-index: 1,
bacgkroundpic2 position absolute, z-index: 0,

have the animation on the picture that is on top

by default img1 stays on top of img2 (as long as they are in that order)

thanks for the replies but i still have no idea how i would hide and show the divs along a diagonal

rotate
animatex
animateY

yes but the image still needs to stay positioned in portrait

Oh I see you are trying to keep them still?
Like 2 still pictures one on top of eachother and then peeling from one to another diagonally by animating the clipping path? I have no idea how that's done, but if you just plan on pushing one image on top of the other that's easyer

css-tricks.com/clipping-masking-css/
?

i originally said i didn't want to use this wondering if there is anything else

maybe like this?:
sitepoint.com/css3-transform-background-image/

nope, I don't think there is, you can clip shit with svg for maximum browser compatibility, but clip-path is the easiest way,

you can do it in combination with keyframes

Thots bruvs?
Gonna be making a site with free html/css shit like this soon.

Attached: Screenshot_1.png (1693x537, 26K)

I think those icons don't have the same visual weight making the composition unbalanced

>API gives a list of JSON objects
>React doesn't want to do .map

If the list itself is a object how can I loop over its contents?

Attached: 1537279079551.jpg (2257x1314, 214K)

Ah, how about centrally with bigger icons

Attached: Screenshot_2.png (1729x569, 28K)

for (let o in obj) {}

Object.keys()

Object.values()

Object.entries()

etc

Actually just got what you were saying, laptop icon is visually smaller than the rest

>Be noob at web development

Is it true that you can build websites the fastest with JS using a framework? And if so what should I use?

yep, that's not correct, they have different weight and that makes the composition unbalanced

Attached: this.png (1693x537, 33K)

try scale until everything is equivalent

iconscout.com/blog/optical-effects-in-user-interfaces/

You can choose between writing everything by yourself or using express. What makes express great in this aspect is that you have some middlewares that can save some time

now that I think about it, try a different set of icons, that one seems low quality? what set is it?

>php
>write something
>wow it works
>write another thing
>wow it works

not sure if this is comfy or I'm gonna kill myself doing it

Attached: 800px-Alexander_Pope_by_Michael_Dahl.jpg (800x994, 89K)

Cant use for in React

it does hold your hands quite a bit, which will become a hindrance later on.

PHP is the comfiest language, using JS for backend is one of the most stupid trends in web history

Thanks, this helps.

They're FontAwesome icons. Here's a different set.

Attached: Screenshot_3.png (1583x551, 30K)

I think those icons are much better, I'd go with this setup still
only the icons centered. But get different opinions first so your choice is more solid.

or perhaps just go with the first option and just scale the ball a tiny bit up and the laptop another tiny bit

try this one just with the p text not centered

and the link on the bottom also to the left

Thanks guys, appreciate the feedback.

But why? From what I gather, MySQL is faster on the same hardware but postgresql has more features and is more acid compliant. But MySQL is used by companies like Facebook where acid compliance hasn't seemed to affect them. I am used to MySQL and prefer it but don't want to get stuck rewriting 100+ queries...

Whats the point of closing ports of a server?

I know it prevents softwsre that listens to that port from communicating. But I assume (correct me if im wrong) that someone still needs to log in to do anything. Unless there is a vulnerability in the software.

>What's the point of locking windows of a house?
>[...] someone still needs to break in to do anything [...]

not the original user you are replying to but, pls explain for brainlets

I just spent 3 hours debugging an issue which turned out to be caused by large integers which fuck up on 32-bit systems (aka my cheap ARM server). At least it works now...

What language, what other type of var did you use instead?

i dont get it. how retarded are the people in this thread. do they really need to be spoon fed everything. here you go retard. i googled "Whats the point of closing ports of a server?" for you


Open ports on a server are a security vulnerability that can potentially allow a hacker to exploit services on your network. If those services are unpatched, a hacker can easily take advantage of the system by running a simple port scan using free software like nmap to discover the open ports. It’s important that you understand some basics about port security and how to manage ports with the principal of least privilege.

Securing your network is simplified when you incorporate the principal of least privilege. fiber_optic_cable_connections.pngWhat this principal suggests is that every module (such as a process, a user, or a program) is only allowed to access the information and resources that are necessary for legitimate purposes. Let’s look at an example of least privilege that will make it easier to understand. Image an office building where all the doors are locked. You have a key that will unlock your office but nothing else because you don’t have permission to access the other offices rented by other tenants. Now think of the janitor of that building. The janitor must have access to all the rooms to clean them. The janitor gets all the keys and privilege to all the offices because he has a legitimate purpose of cleaning them. Since you do not have a legitimate purpose to use the other offices, your privilege to open doors is limited to only your office and the shared restroom.

“A Closed Port is a Safe Port”

If you don’t know why a port is open, determine what service is running on it, and if there engineer_documenting_network.pngis no business need, shu

PHP, normally it wouldn't be a problem but it was in a third-party lib that just returned empty strings on error and I have a uniqueness loop that queries the database, so once there was an empty string in the DB it just looped forever. strace is really useful for these things.
It's used to generate content IDs, so for now I'll just use UUIDs since this is a staging server and the real one is 64-bit.

why doesn't this work
let imageURL = null;
const values = Object.values(req.files);
const promises = values.map(image => cloudinary.uploader.upload(image.path));

Promise
.all(promises)
.then(results => imageURL = results[0].url);


if I do console.log(results[0].url) I get the url of the image I uploaded, but when I try to assign it to a variable it doesn't work. Can you not do assignments in arrow functions like that?

Attached: 1514631708707.png (556x430, 81K)

I already know PHP and Javascript pretty well.

But I want to start with Node.js and React, how much will I take to learn it to be solvent?

ACID compliance depends on how much you care about your data. If your data is disposable trash (Facebook) then MySQL is fine. If it's actually worth something to you, you'll want Postgresql.

7 days

maybe the promise is not fulfilled when you check the variable? it's async, it could happen

If I have a front end only app, how would I get a users city/state/country?

isn't that what .then is supposed to do? wait for previous function to finish, then execute?

I don't think you can without some sort of service. You can use a free API, like ipinfo.io/json though.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

navigator.geoLocation

Promises are async. Try async/await, I've never done it with multiple promises though but should not be a problem, just skip the Promise.all and do it in a for-loop instead.

but the promise has to be fulfilled before .then() executes, or maybe I'm misunderstanding

Attached: 1509670433551.png (801x297, 22K)

Yeah but .then() could never be executed, and you wouldn't know that because you don't have a .catch()

The value of imageURL will remain null until the promises resolve, but the function will still continue.

If you try to use imageURL immediatly after the .then it will give null because the promise hasnt resolved yet. that is where you can use async/await or just put any code that uses imageURL in the .then

like this?
async results => imageURL = await results[0].url

No, the whole containing function must be async.
async function whatever () {
let imageURL = null;
const values = Object.values(req.files);
const promises = values.map(image => cloudinary.uploader.upload(image.path));

const results = await Promise.all(promises);
imageURL = results[0].url;
}

Beware that the return value of an async function will be a promise

I see, that finally made it work. thanks anons

Attached: 1511424591065.jpg (680x544, 30K)