/wdg/ - Web Development General

What are you doing to build the web Jow Forums?
What are you working on?

I'll start: I have read some benchmarks about golang, particularly that it can handle a much higher number of concurrent connections, and has a faster access to sql databases. So over the next couple weeks I will be porting the core pages of wiby search to golang (currently using php). The peripheral pages will remain php. Will report back if there are any real performance improvements. I like php, but its good to try new things every once in a while.

Attached: 1496425230629.png (824x553, 731K)

Other urls found in this thread:

nadbm.github.io/react-datasheet/
wiby.me/json/
udemy.com/javascript-es6-tutorial/
lmgtfy.com/?q=What do sockets have to do with REST?
gelbooru.com/*
gelbooru.com/*
stackoverflow.com/questions/38533580/nodejs-how-to-promisify-http-request-reject-got-called-two-times
twitter.com/NSFWRedditGif

What's a good way way to combine arrays like this?

['a', 'b','c']
['Ape', 'Bear', 'Cobra']

to

[{id:'a', name: 'Ape'}, {id:'b', name: 'Bear', ...]

if you're 100% sure that both arrays are a 1:1 relation:

const arrOne = ['a', 'b', 'c'];
const arrTwo = ['Ape', 'Bear', 'Cobra'];

const result = [];
for (let i = 0; i < arrOne.length; i += 1) {
result.push({
id: arrOne[i],
name: arrTwo[i],
});
}
console.log(result);

I have a class project this week where I have to combine a few apis and incorporate a js library... Any rad library / API suggestions?

Make a web 1.0 style Jow Forums viewer using the Jow Forums api

Here's some if you want to use React:

• create react app for starting up a react app with no configuration
• styled-components (react based components with CSS scoped only to the component itself)
• material-ui (prebuilt material UI components for react)
• preact-cli and prerendering
• react-lazyload around content that can be lazy loaded until the user can scroll to the component (e.g. images).
• Axios (or just fetch) for requesting data from servers and displaying it on your UI
• Storybook - allows you to view/debug your react components in an isolated environment

This is called zip. Underscore or lodash likely implement it.

The shortest way is probably:
let ids = ['a', 'b', 'c'];
let names = ['Ape', 'Bear', 'Cobra'];
let result = ids.map((id, i) => ({ 'id': id, 'name': names[i] }));


Although that extra set of parentheses around the object literal is a bit opaque, since they're only necessary to stop it from being considered the start of a function block.

I'm only slightly experienced in web development and I have a project of turning a complicated set of spreadsheets, for engineering cost estimations, into a react app.

One of the main views will aggregate data from form inputs, a user submitted .csv, and an interactive spreadsheet. I have found libraries for parsing .csv files and creating react spreadsheets.

My main concern here, is working with the data from the spreadsheet as the user wants to be able to modify the records on the fly. I suppose I could add a key to each record somehow? I'll need to dig deeper into the component.
nadbm.github.io/react-datasheet/

I'll give /wdg/ updates on my project as I work on it. If you guys have any thoughts, let me know, as I am still learning.

Attached: unknown.png (720x757, 375K)

Just set length to min of both lengths.

This reminds me a thing I made for practice with symfony a while ago. The page received a csv and you got a table related to your user out of it.
I ended using AJAX calls to edit the components against an API I did for it.
It worked so when the user clicked the part he wanted to edit the field would turn into an input, and when clicked out of it or pressed enter, it would send the update request based on the column and the row id.

It was a mess as my first attempt at doing APIs, and I don't know if that's the answer you're looking for but that's how I dealt with changing records on the go.

I want to add a site search. It's been years since I've created a site and the last time I did it I I used a Google script. Is there an open source program I can run on my server to power my own site search?

thanks user, that example gave me something to think about.

Yes.

And it's called?

BUMP

is Jow Forums working again?

Why the fuck wont this work? I have a javascript function that creates a form on a webpage, and sets the enctype of the form as "multipart/form-data", but whenever I run this function in Opera browser, it mangles it and turns it into "multipart/ form - data", and no longer works. This issue doesnt occur for Chrome or Firefox.

What do i do to fix this?

I'm new to unit testing. My job is react/redux so now I need to unit test an application.

Currently using Mocha with Chai.

```
describe('Account', function () {
it('should log in', function (done) {
controller.login('username', 'password')
expect(store.getState().appState.token).to.not.be.null
})
})
```

controller.login sends out an API call, and if the result is a token, it will dispatch an action to set the token in the state, which does happen but the test fails:

```AssertionError: expected null not to be null```

how do I make this test async if controller.login does not return a promise?

post jsfiddle

post the error

I am not receiving an error from it. here is the code

x = document.createElement("form");
x.setAttribute("method", "POST");
x.setAttribute("action", "q.php");
x.setAttribute("enctype", "multipart/form-data");
y.appendChild(x);

Whoever asked for a json output for wiby yesterday. You probably wont see this or forgot, but here you go.:

wiby.me/json/

When i wanted to use some php library it used to be easy, i just unziped it into a folder and then required the main class file.
But now like every single file references something called composer which seems pretty stupid and bloaty, what the fuck is up with that?

are you the owner of the website?

I am really confused. WTF is const in JS? I am pretty sure in OOP languages, const means its immutable but I've seen it all over with my work in Angular and React.

I just got my first developer job which wasn't working for myself or for my aunt. God Bless lads, thank you for helping me along the way.

let and const are new ES6 syntax.
It means the variable can't be reassigned, not that the data is immutable.
In the case of an object or array, you can modify properties and items, but you couldn't change the reference of the variable to a new object.
This sometimes causes confusion, when people think, that const would somehow freeze the object or something like that.

const in JS is a piece of shit. It is still mutable and not really a const.

For some reason people like to use this everywhere to show how "current" they are.

> const a = 12
> a = 23
TypeError: Assignment to constant variable.


?

you can mutate arrays and objects you nonce

the OP is literally the only good thing in this general and you ruined it, i was looking for the learning web development links for a friend

Where were those links in the wdg sticky?? I'm looking for the best javascript course on udemy. I've already completed a bootcamp but I want moar

> const aa = [1,2,3,4]
> aa
[ 1, 2, 3, 4 ]
> aa = [1,4,5,6]
TypeError: Assignment to constant variable.


?

Okay so you don't know the difference between reassign and mutate.

Absolute state of JS devs.

?

There are other good courses out there but Stephen Grider is the gold standard.
udemy.com/javascript-es6-tutorial/

Thx for the suggestion user

He means you can push shit into it, and remove shit, but not reassign it to a new value like you're trying to do example
const arr = [1,2,3,4]
arr.push(5)
// arr is [1,2,3,4,5]

>difference between reassign and mutate.
>Absolute state of JS devs
Do you? If you don't want help, don't post. No need to be a snarky little cunt.

user, you can't reassign or redeclare a variable one it has been declared a const. Const makes the variable immutable(unchangeable).

I have a layout with these, squares are all same size and landscape ones are all same size

I put them all the same height and it looks nice but there's (1) too many and no matter how I put it it looks retarded because of the odd number

I have to also have the first image being a square one because if not my fucking layout goes ape shit because I'm using 2 different sizes and when (if) I resize the page when they're small then they just fucking ignore my entire layout, I can force it to refresh but it fucks up the entire browser width when I do that so it has to be a fucking square

I'm unironically considering putting something there just to make it a nice even number so the odd 1 out doesn't look so fucking dumb, it looks bad at every fucking breakpoint and resolution

FUG!!

Attached: MY FUCKING LAYOUT.png (1324x714, 21K)

post jsfiddle newfriend

>JS developer in charge of knowing what pointers are
ABSOLUTE state of JS devs

>when /wdg/ discusses const

Attached: 1521042306398.png (800x800, 84K)

>when /wdg/
I'm already annoyed.

I can't be fucked it's like 600 lines of jsx and it's all over the place in components & props and shit and 300 of css to get it how it is now but I'm just triggered I can't have it be perfect

just being angry but maybe there's someone out there with some 200 iq solution to such a problem

post a fiddle / pen / etc my man, can take a look.

Real talk, it's going to suck ass, but take it back from ground zero. Look at what you've done, and think through if there's a better way to do it. Refactor it and move from there. Do it a few more times if need be. Anything layout related you've got to get some spit shine on or you're just going to flip your shit later on when one thing needs to be changed.

Majority of layout problems are due to overthinking the solution and going into trial and error mode. It's why inspiration and references on hand is so important, you can see how they did it and go "oh I'm a fucking idiot they just centered it" or whatever.

What do sockets have to do with REST?
I can't see a logical connection between the two..

lmgtfy.com/?q=What do sockets have to do with REST?

I'm about to get my ass kicked by Codibility. What do?

give a quick rundown

Yet, here you are, faggot.

epick

solo kanban keeps devolving into waterfall

waterfall keeps biting me in the ass for obvious reason

what do?

REST: HTTP
WebSocket: WS

they are two different technologies on the same OSI layer

>const in JS is a piece of shit. It is still mutable and not really a const.
What language are you using where const (or the equivalent) does any more than making the variable un-reassignable?

How would you resolve things like declaring an array, and then assigning a reference to it to a const? Would you not be able to mutate it when referenced through the const, but be able to do so normally via any other reference to it? That seems arbitrary.
e.g.
let mutArr = [1, 2, 3];
const immArr = mutArr;

mutArr.push(4); // this is ok
immArr.push(5); // yet this is not?


Anyway, if you want immutability, look into Object.freeze

const a = Object.freeze([1,2,3,4,5])
a.push(2)
// Uncaught TypeError: Cannot add property 5, object is not extensible

?

cringe

Attached: Image (1).png (223x311, 129K)

Post a screenshot of what your text editor looks like

Attached: scrot.png (1654x1706, 364K)

>Cobra
const cannot be reassigned
you can only mutate their state with methods
only if they are data structures
push, slice, filter ,etc

just use grid.io user

Object.freeze() stops the functionality of being able to add/remove items from the const.
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

such website doesn't exist

I don't think anyone was talking about Object.freeze

i know how to do a single https request in node.js

https.get(url, function(res){
var body = '';
res.on('data', function(chunk){
body += chunk;
});
res.on('end', function(){
try{
var response = JSON.parse(body);
console.log(response);
}
});
}).on('error', function(e){
console.log("Got an error: ", e);
});


but how do i do multiple, and then do something when all of them have finished successfully?

Promise queue?

Attached: code.jpg (879x698, 78K)

.then

Gelbooru is "disabling" images for adblock users, so I made this Greasemonkey script to get them working again.

// ==UserScript==
// @name Gelbooru image unblocker
// @version 1
// @grant none
// @match gelbooru.com/*
// @match gelbooru.com/*
// ==/UserScript==

Array.from(document.querySelectorAll('img[data-original]')).forEach(function(e) {
e.setAttribute('src', e.getAttribute('data-original'));
});

Attached: 1303122672795.jpg (702x645, 43K)

So I am trying to build a website purely in react. I made a favicon that I ended up saving over with a new vector art one. However, every time I 'npm start' the local site, the old favicon still shows up even though it was written over. I've tried rebuilding and clearing my cache but it keeps showing up. Anyone have any ideas?

noice

can't you do the function like

Array.from(document.querySelectorAll('img[data-original]')).forEach((e) => {
e.setAttribute('src', e.getAttribute('data-original'));
});

You can indeed. Old jQuery habits die hard.

granted you remove 4 characters, I don't really see why this matters? Or are you just showing you know arrow functions? If it's genuine curiosity, I apologize.

if two things are the same (same functionality), i just choose the one with less characters (less to type)

do you even need Array.from()?
querySelectorAll returns a NodeList, which seems to have a forEach() method on its object already

Array.from(document.querySelectorAll('img[data-original]')).forEach(e => {
e.setAttribute('src', e.getAttribute('data-original'));
})

saved you another 3 keystrokes, you're welcome.

Array.from(document.querySelectorAll('img[data-original]')).forEach(e=>{e.setAttribute('src',e.getAttribute('data-original'));})

Where we are going, we don't need whitespace.

>Array.from
isn't that the same as
document.querySelectorAll('img[data-original]').split('').forEach(e=>{
e.setAttribute('src', e.getAttribute('data-original'));
})

too much whitespace. Do the needful and please fix thusly

i dont really understand where to put the promise in this context. if i wrap that code in a function and have it return a promise at the end it never finishes.

function one(){
https.get(url1, function(res){
var body = '';
res.on('data', function(chunk){
body += chunk;
});
res.on('end', function(){
try{
var response = JSON.parse(body);
console.log(response);
}
});
}).on('error', function(e){
console.log("Got an error: ", e);
});
return new Promise(resolve => {
resolve();
});
}

function two(){
https.get(url2, function(res){
var body = '';
res.on('data', function(chunk){
body += chunk;
});
res.on('end', function(){
try{
var response = JSON.parse(body);
console.log(response);
}
});
}).on('error', function(e){
console.log("Got an error: ", e);
});
}

function run(){
one.then(() => two());
}


not really sure what i'm doing wrong, this is new to me.

stackoverflow.com/questions/38533580/nodejs-how-to-promisify-http-request-reject-got-called-two-times

split is a string method, and this is a NodeList

But speaking of, how did no one point out that NodeLists are already array-like iterables, and therefore forEach already works on them.

They're the same (for the most part, but this-binding doesn't matter here anyway), but arrow functions have less browser support since they're ES6. Granted we're only talking about Firefox anyway, and IE is the one that tends to hold us back from using modern standards. But still, it's something to consider, in general.

But anyway, I suppose the thing I should be emphasizing is that bikeshedding is stupid.

>But speaking of, how did no one point out that NodeLists are already array-like iterables, and therefore forEach already works on them.
I've only been working in javascript for a year and the job I have has me jumping technologies every sprint. Friday is my last day.

()=>{a='data-original';
document.querySelectorAll('img['+a+']').map(
e=>e.setAttribute('src',e.getAttribute(a))
)}()


shave dem bits

oh, Node 10 and NPM 6 is out..

Attached: node.png (642x1083, 58K)

Man postgresql is fucky as shit. Why can't it be as straight forward as mysql.

Does anyone have a good suggestion on a fake SMTP service I can run locally? I have a client with a project that isn't delivering some emails based on a broken add-on to the CMS.

I'm having a hell of a time to getting Mailcatcher to work in my local vagrant box of this project. I can't get it to catch email nor can I get it to properly forward the web client to my host machine.

I just want a fucking monitoring CLI tool that dumps incoming email from an SMTP port to the console or a file so I can figure which and why some emails are firing in the CMS. This is all in an Ubuntu VM.

I'm learning node and express on node 8. Should I worry about learning 10 since it's LTS?

What is giving you issues?

>Object.freeze()
OK we fell for the bait

What's a good web development language for forms and what not.
PHP is shit.

Your image makes no sense. No one gets that incensed about node.js.

PHP

All of it (I'm new to it though). It just seems un-necessarily complicated compared to the simplicity of mysql.

Except for me
REEEEEEEEEEEEE

Attached: Untitled.png (503x353, 9K)

aw shit nigga

Attached: 1510528841169.png (419x354, 275K)

I had to edit that to get it to run:
(()=>{a='data-original';
document.querySelectorAll('img['+a+']').forEach(
e=>e.setAttribute('src',e.getAttribute(a))
)})()


NodeList doesn't have a map method, so you do have to use forEach. And I had to add parentheses around the closure arrow function to get it to execute; unless I'm doing something wrong.

So with the overhead of the closure, the variable trick actually ends being a character larger than the post you replied to, sans Array.from (assuming I counted correctly).

I added a couple tweaks like format strings, and a single dont-care argument to replace the parens, then I removed the whitespace to minimize it to the maximum:
(_=>{a='data-original';document.querySelectorAll(`img[${a}]`).forEach(e=>e.setAttribute('src',e.getAttribute(a)))})()

You could probably change the selector to use * instead of img, but I'm not sure if that would be cheating, as it could hypothetically change the NodeList returned, though it probably wouldn't.

I also tried adding a 'etAttribute' variable (for get and set), but that turned out to be too much overhead.

Node isn't changing much between versions, they're mostly adding new features. When you do end up upgrading, you'll almost certainly be able to switch from 8 to 10 and not even notice.

>he wants someone to push his shit in