/wdg/ - Web Development[disorder] General

>css frameworks
edition.

Previous:
>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] Web Development in 2018 - A Practical Guide (embed) {embed} - Web Development in 2018 - A Practical Guide

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

>PHP resources
pastebin.com/gfBPg24A

Attached: 1535399742142[1].png (822x552, 814K)

Other urls found in this thread:

pastebin.com/gfBPg24A
example.com'
kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http-equiv
thorium.pw/
color.adobe.com/explore/?filter=most-popular&time=month
webaim.org/resources/contrastchecker/
thorium.pw/databases/
thorium.pw/anime/
twitter.com/AnonBabble

guise

Attached: howdoishotweb[1].jpg (600x554, 79K)

is it okay to use mongodb as a caching layer for ~250 elements? Or should I learn Redis instead?

Use redis, it'll take you like ten minutes to figure out.

Bump limit is @ 300 posts, so we should make a thread by then, pic related

Attached: bullshit.png (1920x897, 188K)

how'd you guys land a junor developer job, what were the interview questions

Go back to 2010

pastebin.com/gfBPg24A

i'm here to answer PHP Questions.

Attached: 1535403648788.png (1305x4191, 575K)

if only

Attached: 1532798593111.jpg (598x477, 45K)

kys my man

create-react-app taking over 30 minutes (still counting) to build, why?

>>css frameworks
>edition.
This is the third thread in a row, get something new. My suggestion is "PHP shill pls go edition"

I think it's actually 310 or 315. And threads can exist past their bump limit; last one got to 362. A new thread should be created once bump limit is reached *and* the thread hits page 9 or 10.

react a shit

What step are you on?

react a shit
react a shit
all my niggas

react a shit

Attached: jayz.jpg (650x313, 152K)

nothing shows up, i just press npm build and its stuck there, maybe my bash is shit and doesnt give me the info, i use git bash

i had the same problem. i stopped using npm and went with Yarn.

never had that problem again.

yarn > npm

Investing 45 minutes learning basic Redis was the best decision I've made in the last 6 months. Redis is fucking cool.

So everyone's saying PHP is wack and to move onto something else. Is Golang a good choice future-wise? I heard most people don't use frameworks? How would it compare to Laravel, for example?

Also, I know some JS but I'm not particularly interested in it because I don't like working with it. Since it's industry standard now however I was planning on learning more of it anyway.

why does facebook need pass this variable every goddamn time? ref=logo

phone interview in 10 for an associate dev job. wish me luck boys

Attached: 1408147012253.jpg (1080x814, 422K)

hope you get it bb does it pay well?

>in 10
10 what ? hours? minutes?

GoLang is good, its actually great language, but i don't see much that GoLang ecosystem have to offer compared to PHP on the web, if you are choosing GoLang cause of the performance, you can use PHP Swoole which is faster than the golang HTTP server

good luck!

good luck user!

Attached: d095c72585c7d324e2f1b7ab2da78d5b5e60346e3be33ad5b64e697bfadb4b77.gif (429x338, 1.8M)

what's an option that is comparable to PHP swoole performance?

Java Netty framework, GoLang Server can outperform swoole in some cases.

i recommended swoole since it can be integrated in laravel or symfony, and zend have an official support for it on zend expressive

Yes, golang is a great choice, already being used by major players in areas where performance is a necessity but so is maintenance.
Most people do use frameworks. When you get large enough you roll your own. Unless you mean frameworks in Go, in which case yeah kinda?

went super well. 50-60k (on 1099) 3-6 months contract to >hire.
Dudes looking to expand from his team of one and interviewing from the living room, so i went for the throat when i saw his oculus rift. Got along very well.

Attached: 1294522113709.jpg (433x559, 63K)

>so i went for the throat when i saw his oculus rift.
you killed him???
u frikin monster

Sounds like a good foot in the door, polish it up on your resume and you'll get a nice gig in 6mo.

yeah the rift is mine now

>so i went for the throat when i saw his oculus rift
explain this, what di d you do?

I got cozy with him, mate. Connected over a common interest so he liked me more.

Well, off to my shit retail job at old navy now.

>Most people do use frameworks. When you get large enough you roll your own. Unless you mean frameworks in Go, in which case yeah kinda?
Yeah, I meant in Go, I've read a few articles and they were saying that they personally don't use frameworks for Go.

Idk, I think I might prioritize learning a front-end thing first, probably React to be properly full stack, and then I'll look into Golang.

I'm a freelancer anyway, but shit at finding clients... I just know one day I'll have to get a fucking job so I want to learn some shit to put on my ceevee/github/whatevs.

As always,
go fuck yourself.

how do i dump the contents of all variables to text/json?
i know how to get a list of keys and their values in the console but i don't want to click through thousands of carrots to examine their contents.
i tried to JSON.stringify everything but circular references halted that approach. so then i tried to use various wrappers that don't follow circular references, but now i'm getting the error "Uncaught DOMException: Blocked a frame with origin 'example.com' from accessing a cross-origin frame." so i guess i need to skip iframes, but i don't know how.
does anyone know of a tool/library that can help me.
i'm trying to do this so i can figure out how the page's content is update and what to grab and send back to a background scrip.
right now i just wait for tab updates, grab the url, and re-fetch the page so i can work with the initial, easy-to-parse page.

>using em's for margin and padding

the fuck is wrong with this industry stop this shit immediately

what are you supposed to use? percentages?

Are you retarded, my man?

Anyway, you should probably just use a mutation observer for this.

Spotted the NodeJs Hipsters who can't into vanilla JS.

px, %, vh, vw you mongol

kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

try console.log(variable)

pls tell me you aren't a webdev and are just a larping pos online
we truly dont need anymore of your shit handy work

>how to spot a newfag webdev

I bet you tried learning Node before Vanilla, TOP KEK.

You are all shit hahaha seriously what a meme using a font unit for structural things hahaha

There is literally no upside to using em's, while other units have many upsides over it. rem for font sizes, px for spacing is the way to do it. I guarantee if you linked me any site you made with em's it would suck ass and not scale correctly.

wow thanks for the 10 year old article I'm sure it has some real good and modern practices in it.

I can see why you use em if you think this is a good resource.

>Cause it's old, it must be bad

Least we know you're unemployed.

People resort to personal insults when they have no argument

Attached: 1437511637674.gif (500x500, 2.98M)

There are a small number of scenarios where it does make perfect sense to use ems, especially for things like margins and paddings. Basically you want to use ems (or rems) when your sizing should be relative to the font size. The process of actually making this distinction is the part that people usually fuck up. If you are never using ems, you're doing it wrong.

I fucking love tech fights.
em vs px GOGOGO

what about rem?

Attached: j9f492qgx2j11.jpg (1080x430, 98K)

pleasseee put 2em padding on a text holder and try to double your font size - what happens?

Attached: 1442009868959.gif (209x180, 1.18M)

I'll relent to you that em (or better yet rem) do work well for margin on the bottom of text elements, but generally you do not want margins or padding to increase at the same rate as your text. It's just nonsense and your website will be spaced out all fucked up when you want to increase font size for blind people and never pass design QA.

Exactly the thing I want to happen, which is that the padding also doubles relative to the size of the text?

It totally depends on the design and the particular element.

so you are essentially doubling the font size and halving the space that font gets housed in? wow so good

sometimes it works out, I'll give you that.

but the amount of juniors I see using em for literally EVERYTHING is unreal.

Jesus fucking christ I hate front-end. I hate async programming. I hate it. Why can't I just write PHP all day?
I have an element with a click handler. Well in one special circumstance when some other button on the page is clicked, I want to "override" that click handler with a new one. but it might be the case that I need to reattach the old click handler (if some validation fails in the second click event or the user decides they want to stay on the current page).
but yeah that's one thing out of like 50 that I'm handling on this page. Promises within promises within ajax calls within promises within ajax calls. Business logic. Business logic everywhere. Random bullshit I need to account for. Edge cases.
This is for one page. Just kill me.

lmfao @ the pic oh boy

oh yeah I mean to add for that click event bullshit I can't for the life of me figure it out.

what about it, what's even the difference between em and rem? what is rem good for
on a side note, my brain just clicked. em paddings are good for separating text paragraphs

I'm learning MERN stack. What else should I study? Should I study more computer science or pick up another language & framework?

What the hell does the "http-equiv" metadata thing do? Most sites are saying that it does something to the HTML header, but what exactly?

sort of. this is my first time doing any web stuff. and thank you, i checked out mutation observers but i haven't been able to figure out how to observe the entire state of the window.
i managed to get all key-value pairs to text but i couldn't find anything useful, so i'm not sure the data is even exposed. i don't think a 'solution' will justify the effort to reverse the site's scripts so i'm just going to stick with my workaround for now.

Is ffc bootstrap guide any good? Does anyone actually use it in real life?

rem doesn't stack on itself - so nested elements arent multiples of their parents em font size

>what a meme using a font unit for structural things
THE ENTIRE DOCUMENT IS BASED ON THE FONT UNIT
REEEEEEEEEEEEEEEEEEEEEE

It's short for "http equivalent". It let's you simulate HTTP response headers in your HTML code, which is helpful if you don't have access to the headers or something.

You give it the name of a response header, and a value for that header, and it acts the same as really having that header set would. I'm pretty sure it only actually works for a few headers though:
developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http-equiv

my personal opinion is that you are better off just conditionally rendering two different buttons. overwriting handler functions sounds like shit.

>Promises within promises within ajax calls within promises within ajax calls.
Isn't that all made fairly neat by chaining promises?

dumb question, but do you have a degree? Im looking for dev jobs but I dont have a degree.

whats a simple idea for implementing pic related using timelines?

Attached: animejs.png (1024x512, 68K)

Fix your user experience, bro. Whatever your building it's too confusing

How cancer is our colors?
thorium.pw/

Try stopping the app with ctrl/cmd + C then trying.

Colours are okay but the anime girl whore in the background needs to be darker/less transparent.

The square with Fastalts Generator is too close to the background colour.

>no tab icon
>has more than 2 base colours
>font-color is too light on bright background
>hard to read due to anime picture as background
>clicking the about button scroll too slow
>button colours are not consistent/well-defined (eg help and download)
>icon colours are too light
>questionable icon colours
>footer is not good
>its a template

>button colours are not consistent/well-defined (eg help and download)
He's just using a primary and secondary button, are you complaining about the colours of the concept of a secondary button? Download is a primary action and help is a secondary/tertiary action.

i need to learn django quick, any good tutorial? (1.11)

>no tab icon
yea no favico yet, currently re-working it.
>has more than 2 base colors
I don't know much about color design. I just chose a random color theme from adobe
color.adobe.com/explore/?filter=most-popular&time=month
>font-color is too light on bright background
Good to know! I will change that!
>hard to read due to anime picture as background
as said. I should make it darker or something
>clicking the about button scroll too slow
I will fix that
>button colours are not consistent/well-defined (eg help and download)
I'm color blind, but I could add some edge to the buttons
>icon colours are too light
That was my fear too... I guess I should change the color theme
>footer is not good
I agree.. Idk why I added that. Just wanted it to look a bit more "professional" I guess
>its a template
Yea

The problem is the download button demand most of the attention (hence, the well-defined part), leaving the help button as a blur.

Attached: suggestion.png (663x483, 24K)

return _.chain(items)
.map(...)
.reject(...)
.unique(...)
.value();

or
return _.chain(items)
.map(...)
.reject(...)
.unique(...)
.value();

?

I think the issue here is that the secondary button doesn't look enough like a button, if OP changed the border colour of the secondary button to white or an opaque white (try 70%) it would be clearer.

>I'm color blind
Then how did you not pick up the Fastalts Generator square? I'm also colourblind (Deutanomoly) and the backgrounds are very close for me.

It's a good idea to try and pass these standards:
webaim.org/resources/contrastchecker/

>We are often out of ideas
wtf why would you say that
>We welcome contributions, feedback, ideas, etc.

Meant to quote about the colourblind thing.

Java vert.x, Rust actix

I mean it's kind of just a meme website where we dumb random shit... we don't care much about security or wording.
I.e.
thorium.pw/databases/
thorium.pw/anime/
and so on
Ah yea! I will certainly change that then! Thanks man!
Should add an Icon! Noted

Holy shit 17 gb for a database

No, I mean move and replace the help button with a simple help icon button. This hopefully limit the probability of users clicking on the wrong thing by clearly defining the actions.

This is just a suggestion though. You could do what and see what works best.

>Felt depressed at uni
>Took 8 months off
>Basically only learned Django, How to actually design a front end in vanilla CSS and JS and deployed to a VPS
>Still not employable
>Only 1 side project done this whole time
I'm never actually going to make it am I?

well what icon would be good to replace help?
Just a question mark?

I wouldn't remove text accompanying an icon unless the icon was very clear.
I'd use fa-question-circle and reduce the padding on your icons a bit to compensate.

Duncepill me on iterators and generators in JS, when should they be used?

That or I assume the help icon is rarely accessed hence my initial suggestion. On the question of which icon, well a question mark seems to be the standard nowadays in denoting help so go with that.

Just build shit

I've been studying css for a month or 2 yet I can't copy this kind of generic SASS layout.

Which parts are you struggling with?

Peasant Tier (Child slaves in an Indian IT sweatshop)
>Wordpress
>Any CMS aside from Wordpress (Magenta, PrestaShop, Squarespace, etc)
>Any PHP framework that isn't Laravel (Symfony, Zend, LAMP, CakePHP, etc)

Yeomen Tier (Code Monkeys)
>Ruby (Rails, Sinatra, etc)
>Python (Django, Flask, etc)
>MEAN
>MERN
>Laravel + Vue
>Java frameworks that aren't Spring (Grails, Struts 2, Vaadin, GWT, etc )

Gentry Tier (Advanced Codemonkeys)
>VENoM (Vue, Express, NodeJS, MongoDB )

Merchant Tier (Well-paid boomers)
>Spring + Hibernate
>Elixir + Phoenix
>ASP.NET Core

Noble Tier (Experts and innovators with a bright future.)
>Kotlin
>Scala + Play

Royalty Tier (The supreme chads of web development)
>Go (Any framework, or none at all, because it doesn't need it.)

Royal Wizard Tier (Their skills are unquestionable, but how they apply it is. Resides in an Ivory tower)
>Haskell
>Dart
>Crystal (Amber, Lucky, etc)

Jester Tier (Oh shit nigger, what are you doing)
>Coldfusion
>Perl
>Haxe
>Clojure

Attached: DbQPQbkX4AMwu8o.jpg (1200x648, 125K)

great post

>>Dart
Fucking what mate