/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:

s.4cdn.org/image/contest_banners/*.gif
github.com/npm/registry/issues/255
discord.gg/wdg
devcenter.heroku.com/articles/custom-domains
jsfiddle.net/ate76grh/
hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5
freecodecamp.org/challenges/build-a-personal-portfolio-webpage
codepen.io/freeCodeCamp/full/YqLyXB
facebook.github.io/flux/docs/overview.html#content
kirupa.com/react/simple_todo_app_react.htm
laracasts.com/skills/laravel
jsfiddle.net/cxh5fm9e/
twitter.com/SFWRedditVideos

Still looking for advices on this one Also angular 1 vs angular 2? Which should I invest myself into longtermwise?

If you use Angular then the newer Angular 2/4/5.
There is still a lot of AngularJS/1 code used by companies, but that will get less and less over time.

If I were you I would code the basic add/complete/remove feature first, before worrying about UI extras like being able to drag and drop.

anyone could recommend good reading material/courses on php or jscript?

Same question, just for react. And please, no chakra courses. Thanks.

>If I were you I would code the basic add/complete/remove feature first, before worrying about UI extras like being able to drag and drop.
Thanks. I've seen some grid angular libraries which can position elements according to row and column, so I thought maybe something like that can help me save the state. Still thinking about which backend will I use, probably something lightweight like flask.

Going through angular 2 tutorials right now to get some sense on the platform.

Any opinions on 'debug' vs 'pino' as general purpose debugging/logging libraries?

Will the overhead be negligible in production, when only a very low debug-level is defined?

Hi, I'm using `filter: box-shadow()` for the shadow around the chart, however I don't want the yellow shadow on the sides and bottom of the chart, what can I do about this?

hide the overflow

thanks man

oh god why did i do my project in vanilla javascript and canvas when i couldve ported everything with unity3d->webgl?

fuuuuuuuuuuuuuucking shoot me

these seem like very different things

No I've used ocanvas to help draw objects but couldve done everything with unity which is 10x easier.

what js or css to hide board banner ;_;

div.boardBanner {
display: none;
}

I set myself a goal of learning front-end to an employable level during the next 12 months.

Problem is, I'm in my 30s with no degree or experience. I don't want to give up on a dream but I'd rather know from the start if its simply impossible. Its hard to motivate for something as gruelling as learning dev when there are no guarantees it will pay off.

Live in UK btw, don't want to move to London if at all possible

the thing in pic related user, those obnoxious screamers that link to other boards

just an opinion but I think that the spread on your shadows are way too big

or can i block s.4cdn.org/image/contest_banners/*.gif somehow from even loading?

...

I think I will just go with Winston after all.

cosmetic filter in ublock.
If you have ublock installed you can just rightclick and select block element.
>those obnoxious screamers that link to other boards
what?

>what?
like the ones for /o/ and /s4s/

>:(

page 10

Is there a way to have values sourced from localStorage update on their display on the page without page refresh? I know there is AJAX but from what I understand XmlHTTPRequest only works with files, while I want a live sort of thing to interact with localStorage.

github.com/npm/registry/issues/255

NPM INC IS FINISHED

It is just one fucker removing his packages again lol.

Nah, npm users can't unpublish packages any more after left-pad-gate

This looks like a database problem more than anything.

Those things have nothing to do with each other.
How do you think a HTTP request is going to fetch an item from localstorage?

localStorage.setItem("foo","bar")
localStorage.getItem("foo") // "bar"


That info is literally one click away on google.
Would be a serious problem if you cant figure shit like this out.

great start to the year so far

Can someone post the Chappelle meem from the thread I didn't save it

>not backing up every npm package you use (different versions included) locally in case shit like this happens

yarn and newer version of npm keep a local cache by default, so your existing projects should never break in this way.

>50 new posts in just 2 minutes

this is why nobody respects node.js developers

If I wanted to just build a minimal website with prior programming experience, but no experience whatsoever with web frameworks and the like, what would be the best language/framework to get it done?

I've been looking at Flask but all I need is literally just a backend to talk to some API. I've tried using RoR in the past but it felt a little clunky and convoluted.

WEW

Bro you didn't understand what I meant. What I meant was

>new value is stored to localStorage
>retrieve new value
>WITHOUT refreshing the page

Any ideas?

Dude you are the archetype of the person I dislike. The kind of guy who immediately resorts to a framework with no actual plan of what they want to make.

HTML and CSS with JavaScript are the three base languages. No frameworks.

you don't need to refresh the page to run code or interact with localStorage.
Just copy&paste that code into the dev-console and see for yourself.
You can run any JS code at any time on your page.

Though I can't think of a scenario where you would save to localStorage and retrieve it again right away.
The value is still assigned to some variable that you can use instead right?
localStorage is rather useful in a scenario, where you want to restore a previous state after page load, before the normal code picks up with the previously saved data.

I know what I want to make and I'm already familiar with HTML/CSS/JS. I need a backend to talk to an API and store it to a database.

If you know Python then sure use Django or Flask.
Ultimately doesn't really matter what language you use most likely.
JS, Python, C#, Go, PHP
>what would be the best language/framework to get it done?
Absolutely horrible question user. You should know better.

how do i into colors

colors.js

I have a similar question: I'm planning to make a website with Java and MySQL on my backend. How I do database programming? I have a plan on what the database stores, how its columns and tables interact, etc. but I don't actually how to actually write this into my software.

Is "real" web design done by hand? As in you write the html files themselves. Or do professionals typically use some layout editor and then write out any specifics?

I'm good at writing code but I can't conceptualize a good design in html tags. Am I a brainlet?

At my workplace the graphics/UX guy typically makes up some concepts in Photoshop and approves them with the PO or customer before they get passed to a developer.

Then we get to figure out which part does what because none of those 3 people really thought about it.

It depends on the website, but generally, if it isn't written by hand, that just means it's a site with a large dynamic database, and somewhere along the line, the HTML code and web design was in fact written by hand, one way or another.

>I can't conceptualize a good design in html tags.
That's fine, html is primarily there to represent the information structure. CSS will decide the design part.

>Is "real" web design done by hand? As in you write the html files themselves.
It's important to make a distinction between "web design" and "web development", slightly more often than not web designers do not write a line of code or markup. Usually there's a hand-off to a web developer like talks about.

And most the HTML will be written by hand BUT not as a whole, rather composed of numerous templates and/or components.

>Or do professionals typically use some layout editor and then write out any specifics?
Never. The closest you'll see to that is the use of CSS libraries like Bootstrap to jumpstart the layouting and styling of a project.

Well I guess I should just get my clients to be more specific then. They'll tell me stuff like "I want my portfolio on this page, my music on that page, and an email list option" and I just sit there waiting for some direction in how they want it to look. I'll end up making something super minimalistic that just looks kind of cheap without some concept art.

Like color theory?

The /wdg/ discord server, for those interested in joining. We've amassed a great deal of free learning resources and links and we're willing to share them.

discord.gg/wdg

Join a freewheelin' webdev chat.

alternatively #Sup Forumswdg on irc.rizon.net

Fuck off.
This is the slowest general on Sup Forums and you have no qualms making it slower by telling people to join your shit discord server of ego-tripping namefag mods instead.

How do you guys know where your site needs improvement/new features?

The OP should probably have a link to W3Schools for posters like you, but then again, it already has a bunch.

No, see, I WANT the value to automatically update without refreshing the page!

Maybe if I express myself with greentext it'll come across better:

>user's health points = 10
>user's current health points is saved to localStorage, so it is persistent
>the display directly grabs the value from that localStorage entry
>user does something that decrements health points, so NOW user's health points = 9
>localStorage entry is updated
>-> HERE IS PROBLEM: how to get the value without refreshing the page???????????

when da big bossssssss man says it needs a new feature

From observing said UX guy's process, he usually starts out with a very abstract layout with empty boxes standing in for header, navbar, content, footer elements, etc. and proceeds to figure out the color scheme, typography and such so that they work well with the customer's branding.
Then he spends a few hours moving text around, tweaking the colors, splitting/merging boxes and drawing in some mock content to make it look interesting.
If the UI is non-trivial it may help to define some requirements before doing this, like "When I view thing X I want to see other users that have done things with the thing".

I feel retarded please help.

I purchased my-name.com from Namesilo. I have a Heroku app I want to use at my-name.com.

Heroku gave me a DNS Target ("my-name.com.herokudns.com"). I tried entering the DNS Target into Namesilo and get this error. Help!

devcenter.heroku.com/articles/custom-domains

>the display directly grabs the value from that localStorage entry
That is the wrong approach.
You already have the users health in some other variable.
Like
let user = {
name: "david",
health: 9,
mana: 20
}

maybe.
So you don't need to read from localStorage to get it, except during the initial page load.
>how to get the value without refreshing the page???????????

I've done exactly as the heroku docs described. I think it's a problem with namesilo being a piece of shit.

Well, hopefully you can transfer to Namecheap or something. I think I actually had a DNS issue like this when I ran BIND9 on a home server before, though.

Well that sounds sensible. Thank you for your help.

...

So this is my code so far...
jsfiddle.net/ate76grh/
how do put these in one container so I can add a color for it.

They are in the same container, but the floats do not stretch it.
If you really want to use floats for this in 2018, add an element with "clear: both;" to the end of the container.
Or give it an :after pseudo-element with a similar effect.
Many float grid frameworks have a "clearfix" style for this.

Time for FUD
hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5

Stop using floats.
Start using flexbox.
Google flexboxfroggy to learn by doing.

Ok, well how do I put a border around the container?

What does your design team hand of to you and the other devs?

At my work we get one desktop design and one mobile design, and a few general notes about what some things should do on hover, if there's parallax somewhere, etc. It's really not too helpful.

Do you guys get more stuff handed off to you? I'm trying to get them to switch to Adobe XD or Sketch and start designing at a few other resolutions, as well as provide more mockups of different states of things and hover/active/focus effects and whatnot.... That's not overkill or anything is it? I'm not sure what is normal compared to other companies :(

I figured it out, I just needed .event { overflow:auto; }

Learning on freecodecamp.

Got to this challenge: freecodecamp.org/challenges/build-a-personal-portfolio-webpage

They expect me to build something similar to : codepen.io/freeCodeCamp/full/YqLyXB

All I know so far is bootstrap, basic css, html.

Change to the editor view.

What am I looking at within the JS editor on the codepen site? Is this bootstrap?

Also what am I looking at withing the HTML editor? Why are there no tags?

Everything looks so odd. For those that finished the freecodecamp thing, how did you approach this "challenge"?

>What am I looking at within the JS editor on the codepen site? Is this bootstrap?
you looking at JQuery abd bootstrap.


click on the pen settings and you can what libraries are being use to show that code

>Also what am I looking at withing the HTML editor? Why are there no tags?
because they are using an HTML pre processor (PUG)

Is there any particular reason why PayPal would limit the length of your password? What's the advantage?
I usually use phrases for my passwords that goes a bit beyond 20 chars.

I'm trying to make an auth system w.e you call it on sinatra, when trying to verify a user/password with incorrect info I get this, any idea on what's going on?

>I get this,
you get what? post the error

Thank you.

It's a mess of a challenge considering nearly 3/4 of whats used in that example page wasnt taught to us.

I know you probably don't care, I'm just typing outloud to myself but Im gonna try working through the bento.io course suggested in the wiki and look up documentation for jquery and bootstrap. Im not gonna focus much on that PUG thing for now.

Thanks again. :)

BTW I really appreciate all the posters in here, really good content everyone.

I purchased a domain on google domains so I can try and work through some different concepts as I learn more and realized they dont do web-hosting, they just sell you the domain. Oops.

Anyway, what can I do about this, are there any widley regarded services as "reliable" and cheap? I dont need much reliability or space, as I will have like 0 traffic. but Yeah.

Alternatively is there something I can build at home? to host my site?

>Is there any particular reason why PayPal would limit the length of your password?
the reason is that they are fucking retarded

How can I select every 2nd div element on this html?



blah>
$40>


blah>
$45>


blah>
$50>


blah>
$70>

A NEET needs help, anons. Big time.

I used to design websites a few years ago, even got a degree in interactive media, but due to depression and sheer uninterest I stopped paying attention to web development completely. Now I'm nearly 30 and I never even had a job. I want to get back into reality, leave my parents house, get a career started, but I have no fucking clue where to get started.

What skills/languages should I learn in the next six months to be able to land a decent job? Ideally as a front-end developer. I understand basic HTML5, CSS3, and Wordpress.

Initially I really wanted to be a graphic designer but I realized it gives me too much anxiety. Having my work trashed with their suggestions, which in turn makes me not even try knowing they'll want it changed anyway. While when I code I'm very relaxed and can work on a project for 16 hours straight and not even notice the time. I feel extreme satisfaction fixing bugs, solving problems, and organizing code (do gamedev in my "spare" time). I think it's the binary nature of it. The site either works efficiently or not. No room for open-ended opinions.

Please give me advice/direction.

Desc>
Price>


blah>
$40>


blah>
$45>


blah>
$50>


blah>
$70>

not that, this code

Just use a class lmao
for example:

asd asd


and in the css or style tag just type:

.yournameclass{
attributes etc etc etc
}

It's not my code, I'm trying to scrape the partners page from Uber, to get a sum of all my earnings.

ul/li[position()>1]/div[2]/text() to get the text then just strip the '$' and sum

I'm being asked at my job to add shit to some web app using Laravel 5 Framework, I know little PHP because web apps aren't really my thing. What am I in for?

ul li div:nthchild(2){

}

or somehting like that, look up :nthchild() psuedo selector

Whats a good eCommerce thing to get started on as someone who mainly does LAMP pages.

I need your advice Sup Forums

I work on some webapp in React and it grew in size without much problems. But now I got to the point where I'm working on user input and need to update app state. The thing is that I need to elevate state from components, eg. when I change username in user panel, I also want it to be updated on user list in different component and also username in navbar, etc. Passing lots of update function down to every component below some top level ones seems like pitfall. Should I give Redux a try? Or maybe I should make my own global state like I used to, using singletons with set/get functions and some callbacks.

Flip a coin and choose either React or Angular, you should also learn basics of back-end (AJAX, HTTP methods, etc). Front-end changed a lot in past few years, people don't want simple HTML and CSS pages anymore, web apps are the hot shit right now.

use redux if your team already knows it. its not gonig to end up well if you will use your real project to learn it.

if not you can employ a simple flux archiecture.

facebook.github.io/flux/docs/overview.html#content

Likely because they figured, that the support costs for more people forgetting their pw would outweigh potential security improvements.
> 3/4 of whats used in that example page wasnt taught to us.
Doesn't really matter. You don't even have to look at the pages source since they say to "Build a CodePen.io app that is functionally similar to this".
Doesn't matter if it's using vanilla HTML, Pug or Handlebars or any kind of specific framework.
You would just recreate it in any way you see fit from the stuff you learned so far.
>What skills/languages should I learn in the next six months to be able to land a decent job? Ideally as a front-end developer.
Don't think anything beats Angular when you compare frameworks by employer demand.
Maybe React, if it's some area with lots of startups.
>What am I in for?
PHP with Laravel
wtf are you even asking
This is like those retarded posts on Sup Forums or Sup Forums
>hey guys, just about to watch/play [insert title here], what should I expect?
Why not just watch or play the fucking title and find out?

My team doesn't know it, but it's just 2 other people and we all do want to solve this problem.
The project isn't that large at this moment, for now the state would contain only two paginated lists and metadata about current user.
But if React is good solution for the problem I mentioned before, we will go for it, I guess. There are other teams who use it and I don't think anyone use flux here.

You should be able to build that just with React.
Go through one of the examples for building a to do list like this:
kirupa.com/react/simple_todo_app_react.htm

Then just adapt it so you can move the boxes.

I mean, is it good for anything or are they just asking me to use it because they have less of an idea than me?

It's definitely achievable. Just set yourself goals and use projects to keep motivated.

Go through the HTML,CSS and Javascript courses on CodeAcademy then go through the simple website buiding ones.

Once you've got some understanding of the languages try setting up your own simple website, that will get you using things like NPM and Grunt.

Aim to do a simple stack of using HTML/JQuery/SASS, minifying the files and running your local server through Grunt.

Once you've build a few simple websites that look nice, try and build some to do something cool like dynamically changing elements with javascript, or using AJAX API calls to get information to display.

A common one people do is building their own homepage, so showing things like their local weather report, traffic report, news headlines, daily top NASA photo etc.

Don't feel you need to be an expert to get a job, just build a few cool things that you're happy to show off and that should be enough.

It's all just boxes bro, boxes next to boxes, inside boxes.

You do the design then break it down into how best to build the HTML

I neither use Laravel nor know much PHP at all really.

Maybe they chose it, because some other things were built with Laravel already or they think it's easier to maintain with the people they have, than some other framework.
People who use it generally seem to like it from what you read on here from time to time though.

Laracasts has lots of videos of which many are free as well, which might be useful in your situation.
laracasts.com/skills/laravel

You don't need to use floats, just use inline-bock

jsfiddle.net/cxh5fm9e/

A lot of people say just use Flexbox but it's still not fully working in IE, so if you care about cross browser compatibility it's not the best solution.

Digital Ocean is usually recommended but honestly if you don't need any features like email accounts or ddos filtering just go with whatever is cheapest.

You don't need to know a framework to get a job. You already know some HTML and CSS so start from that, get more familiar with it and learn some Javascript. People do still use Wordpress but not nearly as much as a few years ago. Do some vanilla Javascript courses, then Jquery, then look at learning ES6 Javascript. ES6 is good and sounds good to an employer but it's still not widely used.

If you like the binary nature of something working or not you should look at getting more into databases/servers, maybe even devops.