/wdg/ - Web Development General

>Previous Thread
>Free 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)
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
freecodecamp.com/
codecademy.com/
bento.io/
google.com - It's amazing, you should try it user

>Further resources
youtu.be/Zftx68K-1D4 - Web Development in 2018
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

Other urls found in this thread:

discord.gg/wdg
wesleyluyten.com/projects/vimeo-wrap
youtu.be/KPgyTzqDJhM?t=65
youtu.be/qMALm1VthGY?t=40
github.com/gorhill/uBlock
github.com/gorhill/uMatrix
2ality.com/2017/11/currying-in-js.html
udemy.com/the-complete-guide-to-angular-2/?
twitter.com/SFWRedditImages

How do I do server validation for a form in php when working with wordpress?Can I just have action in the form as empty and then have some check on the top of the php script if there's anything in the global post variable and then go on from there?

>tfw two threads in a row got archived before reaching bump limit

Anyway, how do I get better at web/UX/UI design? Where can I find good sources on those topics? I tried googling and only found shitty blog posts saying "just use right colors and fonts :^)".

I do multi tenancy with shared tables in postgres, e.g. most queries work with filtering for the user_id. It feels like such a hack and scared one day I will introduce some shitty bug and will leak sensitive data. What would be the correct way not to fuck this up?

Php + Laravel + Elephant.io > NodeJs

'for of' is stupidly slow in Firefox and .reduce() is slow in Chrome.
basically means unless you know the environment your code is running in like Node, you have no choice but to default back to a normal for loop, if you want your code to be efficient.

Is it that hard to optimize them both equally?
Each browsers dev team seems to have gotten one part of it right.

eh, you could read some design specs of different companies, like the ones for googles material design, but much of it just seems to be a matter of feeling and intuition, if it's not supposed to look like a clone of hundred other sites.

What's the css id of the firefox background behind a website before it loads.

I have dark themes and it flashes white every time it switches between webpages.

what I especially don't get is how for...of is >90% slower.
It's literally just syntactic sugar for a normal for loop, except that it gets the element of an iterable value right away.
Someone got any insight here?

.forEach() is also not that fast as the normal for loop as far as I know.

Why is it so damn hard to embed videos correctly?!?

I got a smaller site where I have to embed some Vimeo videos. But on some mobile phones (newer iPhones) you can't even play the videos.

I've already put a lot of effort into this, what's the correct way of doing it? Which HTML / CSS elements do you use for responsive videos?

Your daily dose of webdev free resources and memes.

discord.gg/wdg

Now in chillout edition.

hey guys, I had my first phone interview for a Python Developer position, did pretty well on that so I'm gonna do their technical interview tomorrow. They said it's a 6-hr long challenge, 2 problems to solve, not related to web-dev but just general coding and problem solving. Any useful tips to prep? Good sites not just with exercises but with tips and stuff like that?

apple doesnt support flash bro

Eh?

I'm not sure this is the point here.
First of all it works on some iPhones.
Also it should be HTML5 and not flash, amiright..?
I mean we have 2018, I'm sure Vimeo doesn't use flash..
Hehehe.

for loop is faster however a lot of the time this added performance won’t make a difference in your application, and using for over forEach() is premature optimization. Instead, optimize for code readability to ensure easier long term maintenance.

As for firefox... just don't . It lost the browser wars its not meant to be fast. Its a fashion browser funded with donations from literal google.

Webkit on mobile doesn't handle media too well, you still can't view webm as far as I know.

Mang, that feels bad.
My customer has zero tolerance because "how hard can it be to play a video on a mobile phone?!" - if you know what I'm saying..

Is there any viable option?
For example I've heard about this player:
>wesleyluyten.com/projects/vimeo-wrap

Anyone using golang? I'm going to have to pick it up for a job, what are the best resources I should look at? Ideally, project based tutorials. Thanks.

> >64232039
stop splitting the thread with your server spam
Yeah Safari support for many things is really dodgy. Not without a reason that it sometimes gets called the new IE.
yeah I guess. I mean JS is fairly fast already compared to other webdev languages and I don't have any performance issues.
>As for firefox... just don't . It lost the browser wars its not meant to be fast.
The new FF version improved performance quite a bit and no wonder that Chrome has such a massive marketshare with the reach Google has.

There are definite issues with Mozilla though, like them sending considerable amounts of money to political antifa-like activist groups for whatever reason.
youtu.be/KPgyTzqDJhM?t=65
Or the shit they pulled with force-installing that Mr.Robot tv-series browser extension recently.
Generally showing that they don't really give a fuck anymore about users, as long as their behavior is profitable for the company.
youtu.be/qMALm1VthGY?t=40

It's frustrating that there is no real alternative.
The best you can potentially use are things like Chromium or the various FF forks, but there is no real standalone browser committed to the simple principle of privacy and not fucking over people and shamelessly profiting from their data, while at the same time shipping with compatibility for modern HTML, CSS and JS features.
But I also know too little of Brave and Vivaldi to determine, whether they would be viable options.

It's true that nothing beats Chrome for webdev purposes currently at least.

start of the semester in which i create my senior capstone web development project -- what should i do?

How do these interview tech challenge things work? Can i look stuff up on stackoverflow? I mean, even at work i always look stuff up all the time. I may not know everything,but im damn hood at finding out

How should MPA react apps be structured? Should every page have its own root component that imports what's needed?

offline coding, aka whiteboarding. You will probably explain your ideas and throw up some (pseudo)code, they will help you with whether to use size or length and whether it is a function call or a property.

in 6 hours you will get different etaps, probably you will have to sketch up some system architecture too, e.g. here is this webserver/load balancer/db, but oh no, we have a problem with performance, how would you investigate, what components would you introduce/change to increase throughput, decrease latency etc.

you might get some puzzle questions think how many piano tuners in new york, or some algorithmic bullshit e.g. invert a binary tree or some stupid linked list pointer fuckery

cracking the code interview covers 90% of the questions I was asked in all my interviews and it really never mattered, because in 5 mins you will know whether they want you or just wasting your time. In the first case they will make excuses if you fuck up, because you explained your thoughts well and looks like a helpful teamplayer, in the latter you are capable but not a good fit and will be notified in a week


>what does this do
function f(a, b)
if b = 0
return a;
else
return f(b, a mod b);

>what does this do
computes the gcd (greatest common divisor)

in C, simple example
int gcd(int a, int b) {
return !b ? a : gcd(b, a%b);
}

just got hackerrankd one more time. BST and linked list fuckery, just as I expected. Always swear I will never fill another shittest, but need to get a job.

what's a good place to buy design resources that isn't themeforest

>cracking the code interview
Thank you for mentioning this I'm very nervous about interviews for my first position this helps me feel more prepared

Every fucking time I play javascript youtube video tutorials I get a fucking WIX add.
EVERY FUCKING TIME.
This is is trying to discorage me or what?
mother fuckers

>wix
>kode with karly
>grammarly
The future is nigh.

you gay

>grammarly

everything about those ads makes me see red

that shit helps you with your grammar, but you are giving to them everything you tipe?

Why aren't you using a good content blocker? You can support channels you like way more by other means.

>The future is nigh.
I changed path because what I was doing will be automated in 2 years and now i am learning web development because I dont want to be replaced...
;__;
I have to worry?

>using a good content blocker?
like adblock and that shit?
can i use different ones at the same time instaled in my browser?
Sorry for my ignorance

have you ever been fired from a web dev job?

github.com/gorhill/uBlock
uBlock Origin for blocking ads
github.com/gorhill/uMatrix
uMatrix if you don't mind the extra work to have more control over what resources your browser fetches from where.

>can i use different ones at the same time instaled in my browser?
probably, but why?

why did you get fired / why are you about to get fired?

MySQL or Azure table for my simple blog project? Which looks better to a prospective employer?

MySQL, simply because how popular it is.

I am going to start a blog. I want to design it myself, but I am a turbopleb when it comes to design. I am a programmer though. I've setup Jekyll and GitHub pages etc..
How do I make my own design?
This would be like a portfolio site+technical blog.

The portfolio is going to be a bunch of WebGL and we audio stuff btw.

just find a free template and modify it however you need to.

Steal other designs, or use a UI framework. I like Semantic UI

newbie developer here. Know react and rails. My father has a project he wants me to work on involving his business. Basically he wants a user to be able to answer questions which will then render out the users buying options.

It's simple enough sounds like a perfect project for react and I could build it out if I had data needed from his end.

The part that I'm lost by is how would I be dealing with users submitting credit card info and how would i even process such a transaction. Is this all way over my head??

Should I just give up on designing it from scratch?

Look at APIs for payment gateways.

Do the logic yourself, but if you're not a designer then nobody is going to judge you having someone else do your design work.

I work for a small web consultancy and every time we build some utility for a business's in-house use we just use AdminLTE for the early versions if not the finished product itself. It's free, looks good, works well (and its easy enough to pick apart if something weird is happening in the stock JS), and we don't have to pay a designer to keep making revisions while the spec is still in flux.

Like, right now the 3rd largest wholesaler of [REDACTED] in the US has an admin back-end that's just straight up AdminLTE because of us lol.

We're using Braintree for a couple projects at work and while I'm not the one tasked with implementing it, it seems p dope from what I've seen. Like Swipe and other CC processors, the CC info never touches your servers so you don't have to deal with any bullshit data security compliance. If a user wants to save his CC info, you get a key to reference a user's CC in Braintree's system. It's also css-stylable. I don't know what they charge though.

wtf am I doing

export function fetchBundler(actionType, fetch) {
let bundle = [];
let promise = null;

return store => next => action => {
if(action.meta && action.meta.bundle) {
if(!promise) {
promise = (async ids => {
await new Promise(res => setTimeout(res, 0));
bundle = [];
promise = null;
return await next(fetch(ids))
})(bundle);
}
bundle.push(action.payload.id);
return promise;
}
}
}

holy shit I didn't know you could write curried lamdas like that.
This changes EVERYTHING

...

Assuming that actually runs?

2ality.com/2017/11/currying-in-js.html

You mean function currying? Yeah, it's quite handy.

I don't know if it runs, but it should.

promise = (async ids => {
await new Promise(res => setTimeout(res, 0))
bundle = []
promise = null
return await next(fetch(ids))
})(bundle)

how is that supposed to work?
'ids' is a reference to 'bundle'. 'bundle' is set to [] and then passed on to next(fetch) as 'ids', which then can't fetch anything??

bundle's value isn't cleared. bundle variable will reference a fresh array, but ids will keep referencing old, populated array.

Calling all PHP developers.
I'm trying to calculate procent between two prices, and its not giving me multi-hundred procent prices.

((1 - $usdold / $usdnew) * 100)

So if $usdold = 70 and $usdnew = 1000, procentage = 93.000% when it should be 173.832%

Anyone know a way to get around this?

i have a pretty noob question. my images that are loaded with html and css disappear after maybe 10 minutes of inactivity and have to be moused over (or scrolled by) to reload. Anyone know why something like that would happen? Literally just loading images with tag or using backgroud-image.

ah yes,
In my head I just jumped directly to "arrays are passed reference" and then overlooked, that bundle isn't mutated, but gets a completely new object assigned to it.
nevermind

I don't know how to make a query.
I have a catalog with item ids, and users express preference between item a and item b, where a and b belong to the catalog.
So the set of possible choices is all combinations or order 2 of id column. The db also needs to remember decisions, so a third table remembering choices.
I was thinking about making a cross join with id itself and then a NOT IN in choice, but cross join gives me same tuples in a different order.

I came here to complain.

>Following "Pro MERN stack" book
>Everything is going fucking great, learning shit ton of new things
>Get to chapter 7: Modularization and Webpack
>Everything he says and does crashes application, doesn't work
>Try fucking with the webpack.config.js
>Compiles succesfully
>It makes 1000 new files, all weird as fuck
>Application no longer visable
>Errors in the console

This is the worst fucking feeling in the world. Spending 3 days going through a fucking book, only to get to a chapter that is outdated as fuck. Like I can't even finish this book now, it was almost a fucking waste. Stupid Indian author done fucked me up!

Anyone familiar with this shit?

first console error is:
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/home/user/code/issue-tracker/node_modules/react-dom/index.js'


Second:

Uncaught ReferenceError: process is not defined
at Object.emptyFunction (app.bundle.js:694)
at __webpack_require__ (app.bundle.js:638)
at fn (app.bundle.js:48)
at Object. (app.bundle.js:997)
at __webpack_require__ (app.bundle.js:638)
at app.bundle.js:684
at app.bundle.js:687


What the fuck.

So, extending on this:
I might have configured the webpack file correctly, as it compiles and shit....

It's pointing to node_modules, which I've deleted and reinstalled numerous fucking times.

export function fetchBundler(actionType, fetch) {
const bundles = new Map();
let promise = null;

return store => next => async action => {
if(action.meta && action.meta.bundle) {
const search = action.payload.search;
if(!promise) {
promise = (async () => {
await new Promise(res => setTimeout(res, 0)); // Schedule for next tick
const results = new Map();
for(const bundleSearch of bundles.keys()) {
const result = next(fetch(bundles.get(bundleSearch), bundleSearch));
results.set(bundleSearch, result);
}
promise = null;
bundles.clear();
return async (bundleSearch, id) => (await results.get(bundleSearch))[id];
})();
}
if(!bundles.has(search)) {
bundles.set(search, [action.payload.id])
} else {
bundles.get(search).push(action.payload.id)
}
return await (await promise)(search, action.payload.id);
}
}
}


It just gets better and betters.

wat

gimme your webpack.config.js

that's the problem with books.
But the file definitely exists on that path?

const webpack = require("webpack");
const path = require("path");

module.exports = {
entry: {
app: "./src/App.jsx",
vendor: ["react", "react-dom", "whatwg-fetch", "babel-polyfill"]
},
output: {
path: path.join(__dirname, "./static"),
filename: "app.bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.bundle.js"
})
],
module: {
loaders: [
{
test: /\.jsx$/,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
},
devServer: {
port: 8000,
contentBase: "static",
proxy: {
"/api/*": {
target: "localhost:3000"
}
}
}
};


Please keep in mind, I'm pretty new to this.

Happens all the time. I usually like figuring out workarounds when something goes wrong like this, but I'm completely clueless right now.
But yea, I'm pretty sure it does.

is there anything else I need to do on my end besides regular authorization stuff?

It's a generator for curried middleware generator that captures, collect and bundles fetches of given type during one js tick and then fetch them in bundles separated by search parameters and returns a promise to original dispatcher that resolves into requested resource.

Everything besides the processing would be on you, I think. You'd still need to send email confirmation, store the user's braintree key if they want to save their CC, all that shit.

Bitbucket's back up so I can peek on my coworker's branch and see what he's added to the DB schema:

create_table "payments", force: :cascade do |t|
t.string "name"
t.string "payment_method_token"
t.string "transaction_id"
t.integer "amount_in_cents"
t.integer "order_id"
t.boolean "store_card"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.datetime "completed_at"
t.index ["order_id"], name: "index_payments_on_order_id"
end


and then in the users table:

t.string "braintree_customer_id"

Taking a look at the checkout logic it all seems to be synchronous, so I doubt it'd be too difficult to implement. Seems to mainly be a matter of putting the data together and stuffing it into the classes Braintree provides you.

I got rid of one of the console errors after running:
node_modules/.bin/webpack-dev-server --port=8000 --content-base=static


Now all that remains is:
Uncaught ReferenceError: ReactDOM is not defined


in app.bundle.js

Looking for solutions now, if you have an idea, please respond. Thanks senpai.

Yoooo motherfuckers, I fixed it!!!! Forgot to include "import ReactDOM from 'react-dom'"; in app.jsx

What a fucking relief.

shouldn't you have some index.js or some plain-javascript file that acts as the entry point? It's been a minute since I've done any react, but I'm pretty sure ReactDOM needs to be imported in a plain JS file before you get to any JSX.

I could be totally wrong though.

welp nevermind then

Yes, m8 Awesome, you would have solved my problem instantly... that's rare in these threads, no one ever helps. Thanks man

Round #2:
This works on localhost:8000, but not localhost:3000.
Still get the console error, i.e. ReactDOM is not defined. Wtf?? :/

I am not doing it the same way, so I am not sure about out, but do you also load the vendor.bundle.js in your HTML in addition to the app.bundle.js?
What files are specified in the index.html ?

Hey Sup Forumsuys, newbie here.

What are the typical retarded security problems ones could make when making a web app that connects to a server, db ,etc?

I believe so, all of these files were generated via webpack.

basics would be preventing XSS and preparing the server to be able to handle any potential retarded user input without shitting itself.
>I believe so
but you can just check the index.html and see which JS files it's going to get from the server.

You may want to add some kind of cleaner plugin for the build folder, so old build files don't add up. Can get confusing otherwise if you don't know which ones are actually part of the recent build.

I have to write my first web application and never did anything like that. my main question is: do I have control over the frame rate?

I'm trying to learn angular.

Anyone have any information about how good this course is udemy.com/the-complete-guide-to-angular-2/?

It is very cheap right now i am thinking about trying it.

>udemy.com/the-complete-guide-to-angular-2/?
Never tried that course but as a Protip: Everything on Udemy is always ~90% off

Using Xampp on Win 8.1

So in my code, I started using absolute directories but since the website folder itself isn't the root directory, I've been putting href="/website/favicon.ico/"
I went to change the localhost root directory in httpd.conf itself so that I don't have to always put /website/. Now that I went and changed directories for everything, my .htaccess won't work with my 404 error page, and my favicon is the xampp favicon. What the hell.

>Never tried that course but as a Protip: Everything on Udemy is always ~90% off

What? Err, why?

So you FOMO any buy shit

How do i lazyload images on vue.js?


only the spinning loader gif is showing, not the dynamic image. the data-src attribute doesnt seem to work.

Anyone here? Pajeets? Guys at durgasoft?

ps: adv java means durga sir XD

what text editor does Sup Forums uses for web dev?

I use Visual Studio Code. Seems to work just fine, but then again i am just a beginner.

I use Atom

VS code like this anonNot a beginner; VS code is simply amazing. Also use sublime for the simplicity, and Vim for quick file edits

Sup Forums doesn't let me post code so much. Keep getting a connection error. Wtf?

is there any small and aesthetic css/ui framework?

Bulma

that looks like shit on dick

Webstorm by JetBrain

by the way this is totally free if you have access to a student email

WHAT IS ANGULAR CALLED NOW FOR FUCKS SAKE

Angular 2+ is called just Angular, Angular 1.x is called AngularJS.