<wdg/> - Web Development General

Prev thread: >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.com/watch?v=Zftx68K-1D4&feature=youtu.be

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

Attached: 1528738211609.png (822x552, 868K)

Other urls found in this thread:

jisho.org/search/日 #kanji
jsfiddle.net/pr415yz9/18/
devhints.io/css-system-font-stack
developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
indeed.com/cmp/Microsoft/jobs/Software-Engineer-Intern-e30c196a85aae25b
developer.mozilla.org/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video
css-tricks.com/almanac/properties/t/text-transform/
codepen.io/user/pen/PaKMaa
Jow
a.4cdn.org/g/catalog.json
twitter.com/SFWRedditImages

Thinking about picking up Angular, React, or Vue.

Anyone have experience with them?

>not using jquery
never gonna make it

What do you think I've been using? jQuery is started to become outdated and bloated, and I wanna be one of those hypetrain faggots.

Sorry for the brainlet question but how do I get the source for the stroke animation on this page?
jisho.org/search/日 #kanji
I tried to scrape it but I only get the empty canvas despite targeting the parent element. I don't see the source either.

lol that's not even close to the same thing

Can anyone give me the basic gestalt on the different CSS technologies (boostrap, sass, styled components, CSS modules, grid and flexbox, etc.)? When should I use one over the other? Do they interoperate? Is it even sensible to write vanilla CSS nowadays? Also, how do CSS frameworks fit in with front end frameworks like react/vue, if at all?

This shit is confusing as hell to a beginner.

Attached: 43634748.jpg (228x210, 9K)

CSS frameworks are basically a bunch of prewritten classes. Large ones like bootstrap or bulma can prevent you from writing a single line of CSS.

I think you should learn to create a simple css grid on your own using floats and then start using other css frameworks. A lot of modern frameworks are now flexbox based like Bootstrap and Bulma.
Frameworks are like said prewritten classes that have their own way of doing things and their naming conventions. It's not difficult to grasp them.

Sass is really easy to learn and currently I would scratch the styled components and css modules if you're just beginning.

Grid and flexbox are often used interchangeably, grid is often used for a 3 dimensional layout and flexbox for a 2 dimensional layout.

I can only speak of react but I believe that it's the same for other js frameworks, that you can use whatever css aproach you want. It's simple as linking to stylesheet or you could try a modular approach that is available to you for example in react.

You can write vanilla css if you're doing a small project or something personal.

But if you're confused, you should start small and build from there.

>jsfiddle.net/pr415yz9/18/

I'm trying to get the red and yellow boxes in the purple space. Can anyone help me achieve this?

Is there a simpler way of going about organizing those boxes in place?

Are you colorblind or something?

Nevermind I didn't see them on the bottom

>grid is often used for a 3 dimensional layout and flexbox for a 2 dimensional layout
>3 dimensional layout
What is this sorcery?

>Grid and flexbox are often used interchangeably, grid is often used for a 3 dimensional layout and flexbox for a 2 dimensional layout.
What about using grid to make a website layout, then using flexbox for content inside those boxes?
Is this something people do?

Attached: Edit fiddle JSFiddle.png (463x567, 30K)

Sorry, I meant flexbox is often used for a one dimensional layout and grid is used for two dimensional layout.

Yes, that's how it's usually used. Grid is perfect for creating a template, and flexbox is great for manipulating the content inside of it.

Ah, makes sense.
So basically, things like padding and margins aren't as necessary to set?

Best Udemy course on Express?

It's express bro, not fucking rocket science. Just read the docs.

Well, you'll probably want to set padding and margins for styling. Grid and flexbox together just makes it easier for you to create a page template with elements positioned inside the way you want it to. Even complex structures that needed some workarounds with the regular css in the past are now easily achieved with those two tools.
I'd suggest that you take a look at caniuse for browser support.

What projects would be valuable to someone that is initially building their portfolio for web dev?

Appreciate the response.

I guess I'm a bit overwhelmed and choice paralyzed. I've mostly just been trying to figure out the big picture and how all this stuff interconnects. I suppose the best way to go about learning this would just be to fool about and experiment a bit; start a couple of small projects like you said.

>Grid and flexbox are often used interchangeably, grid is often used for a 3 dimensional layout and flexbox for a 2 dimensional layout.

I've read about people abandoning the use of frameworks altogether in favor of pure CSS grid and flexbox. What's up with that?

The most valuable projects are ones that imitate real life apps or are actual real life apps that can be put on the market. Same goes for websites.

Suggestion: volunteer to make a website for a local restaurant or an app; whatever.

Why does this fall back to Arial on windows?
It worked just fine on my Mac at work.
Tested in google chrome on both OS.

And on both, the font is available (it downloads when you open the .ttf url)

Attached: Untitled.png (1127x629, 47K)

To add to this; if you do a good job it also gives you connection and something else to put on your resume as well as actual work experience with a customer.

That's a millennium problem

>I've read about people abandoning the use of frameworks altogether in favor of pure CSS grid and flexbox. What's up with that?
Why use an external dependency when you don't need to?

So I want to make a website. Is there any reason I shouldn't just use WordPress to make it? Or are there other alternatives? I remember a guy from a company talking about how his company pretty much almost exclusively uses WordPress because it's not worth the effort otherwise.

WordPress is a "blog" platform directed towards non-developers. If you have no interest in web development whatsoever, go ahead. Jow Forums memes about hating it are mostly cause it's a tool for people who can't program and it's actually rather messy and idiotic to deal with over using other available developer-frameworks.

How should I fix position:fixed for overlays on smartphones?

The problem:
When users scroll on Android and iShit the visible size changes and this leaves a gap. What is the most common and best practice to fix this?

The code:
div#id {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}


I know position fixed sucks on mobile, still I need it.

I heard that WordPress has transitioned away from the blogging aspect though. I heard that you can customize it however you want as well though. I do have experience with web development and was thinking that it was a cms that I could customize on top of. What are some of the better ones? I'd rather use those if they're better. The main thing is that I don't want to spend excessive amounts of time on css and html. I know there's Sass and Emmet but still.

When will the PHP meme finally die and the alpha JavaScript finally reign totally supreme?

>using anything but the system stack
Sweetie...
devhints.io/css-system-font-stack

Roboto everywhere, it's in the specs sweetie

Ones that you actually finish bitchboi.

Get rid of those shit specs then sweetie, save the world one step at a time!
developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
your urls should be surrounded by quotes btw but make sure the actual path is proper (../ or without the first /)

PHP won't go anywhere (unfortunately)

>What are some better ones?
None, WP is top.

CMS is content-management-system; it IS created by developers to non-developers.

>The main thing is that I don't want to spend excessive amounts of time on css and html.
Bootstrap/any CSS framework.

.......

If you insist in using WP; go ahead. But the main thing you must keep in mind, is what WP will provide you as a skill to put on your resume. An applicant is far more valuable with knowledge of any: React/Angular/Vue than knowledge of WordPress.

Also WP does have its uses, aside from what people tend to hate on it. My company uses it in a small part of our structure just to allow people who must edit text/images the freedom to do so without bothering the developers.

And no, CMS is just a frontend/blogging tool. It doesn't reflect actual programming nor does it develop your programming skills in a good way (because you learn the "WP way")

Hmm

Stack Overflow seems to have changed its layout

What's the magic behind arrow functions in js that there's no binding of this?
How does that work under the hood?

Cool thanks. So you're saying that I wouldn't be able to type in my own html/css/js? I guess I'm just looking for a graphical designer that simplifies a lot of tedious work.

why? it's a shitty interpreted language used only by pajeets

For those stressing out about getting a job in webdev and your foot in the door, don't bother with jobs. Start your own business instead

>Start your own business instead
You say that like it is easy....

It's easier than trying to get a job as an autist desu :\

starting a business is a nightmare i think
if it was easy everyone would be doing it

is it a problem to have resize events that manipulate dom? it serves my needs, I'm using the optimizer, but still feel like I'm shooting the four functions that do the resizing of the search bar and this container way too much,

>So you're saying that I wouldn't be able to type in my own html/css/js?
Are you fucking cathy newman?

No, I'm not saying that. Yes, you can. It's fine if you want to make your website in WP. WP is a tool and like any other it totally depends on how you gonna use it.

The rest is up to you to find out.

Attached: cathy-newman.jpg (780x405, 30K)

Attached: 1 l3TW5HAb0pRtSsV8VqjZXg.png (1242x2139, 2.04M)

Honestly I'm giving it a try because I feel it is my last option. Working with other people is stressful so I'm going to work solo and market my skills to small businesses. At least it'll give me freedom to use whatever tools I like and not feel like I have to 'prove myself' and write a whole social network or video game from scratch in COBOL just to impress potential employers and get an interview despite my lack of formal education in anything related to computers.

Sorry to blogpost there. But maybe somebody else ITT can chime in on starting your own business and what to look out for.

Nowadays you can have your entire business online. The infrastructure is already there waiting for you. (e.g. hosting your things on AWS, cloud services..)

lmao sorry man. Genuinely was confused as I'm not actually aware of what I can and can't do

I read that learning c++ can make you a better javascript developer. Is that true or bullshit?

Attached: 1424991401624s.jpg (240x232, 7K)

Learning JS will make you a better JS programmer.

Learning C++/any other language will make you a better programmer. A better programmer should also naturally be more intuitive to understand new programming concepts.

A programmer who focuses on a language should know more about said language than one who does not/only has a general concept of it. Or else why the fuck would we have different languages, just for memes?

It highly depends on region to even get started. Some nations are chill about that shit, other nations you need to literally blackmail a bunch of people to even get paperwork started.
And that's just the start, actually maintaining it successfully is an entirely different story.

Don't get me wrong, in most western nations you eventually will be starting your own business in most scenarios after you've worked at corporations long enough, but doing what user says and just jumping straight in is silly.

>It's easier than trying to get a job as an autist desu
not if you're willing to work for microsoft
indeed.com/cmp/Microsoft/jobs/Software-Engineer-Intern-e30c196a85aae25b

>Must be on Autism Spectrum Disorder
jej

applying now
see ya later fucks

What the fuck lmao. Never seen anything like this before. Too bad I'm not a US citizen else I'd apply.
Fuck it I'll apply anyway and blame it on the autism.

I'm trying to set up a Mpeg Dash video without using javascript but am running in to problems.
I'm using this as a basic guide:
>developer.mozilla.org/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video

But whenever I load up my html, it just throws the error:
HTTP "Content-Type" of "text/xml" is not supported. Load of media resource video-manifest.mpd failed.

When I specify type of "application/dash+xml" or "application/xml" it also just throws
Specified "type" attribute of "application/dash+xml" is not supported. Load of media resource video-manifest.mpd failed.
or
Specified "type" attribute of "application/xml" is not supported. Load of media resource video-manifest.mpd failed.

Is there something I am doing wrong? I don't particuarly want to use javascript if I don't have to.

I think SAP also does it.

Make sure you have the right filepath. I've gotten similar errors trying to load a stylesheet and when my app couldn't find it it was defaulting to my homepage and telling me that html was not a supported stylesheet. It looks like it's trying to load xml for some reason

It's trying to load xml because that is the format that dash uses to then point to the other files to stream. But i'm obviously doing something wrong.

I can't find any examples of people running it without a javascript player, which doesnt exactly fill me with confidence that it works html only.

For those who work as a web dev, what's it like in the office?

nodejs | | django?

node && django

i just learned about this the other day and thought it was pretty neat

css-tricks.com/almanac/properties/t/text-transform/

What the fuck is Redux and why do people use it?

Coming from a traditional application development perspective, I can design pretty much anything in React using just the base framework and its built-in props and state.

Is Redux supposed to promote a design pattern that separates the view from everything else?

>Fun stuff
Pretty chill desu. Flexible hours, my bosses are understanding when I need to work remote.

People I sit next to are actually fun. Lucky me.

I drive to work, stop to get coffee on the way, get to my desk. I usually listen to music and browse Jow Forums while programming. Or chatting with friends on [spoiler]Discord.[/spoiler]

Getting paid to do what you love and learning to do what you love is awesome.

>Serious stuff
I'm always involved in projects. They can be smaller weekly projects, or larger monthly.

You might be required to work with other developers and other teams depending on what something you're going to build. Generally it goes okay because we're the systems team and no matter what they want it won't fly unless we say it will fly.

Sometimes you get the opportunity of using new technologies on building an app/website if it benefits the company. That's the fun stuff, I love that I get to learn new languages at work and my bosses are supportive of it. (not all companies may be as nice as this)

We have an international team. Sometimes I'm working with guys from other continents.
You might have a lot of meetings because of this. Specially for debugging.

>Serious pt.2
Another important part of our day is debugging. Pretty much every other day something here or there might break due to an update or a smaller feature needing to be implemented. They send a ticket to systems team, your boss looks at it, then assigns it to you.

Again if your boss is someone with experience they will generally know how much time it would take you and give you a good length to work on it. (Because he/she realizes you also got other stuff on your plate)

>...
With all of this in mind, there's a side to development the "business side" that you don't quite get to experience by working alone. You can only understand it by being part of the corporation, to think the way it works internally and your role there as a developer. It's very valuable for your future.

Attached: celty.gif (500x265, 259K)

>Is Redux supposed to promote a design pattern that separates the view from everything else?
Sometimes it does that, sometimes it's just a way to have global variables or to separate state as a globally managed thing.

It also enforces a certain discipline on state updates by supplying methods that mutate state rather than letting people just set whatever they want on it. Basically, it uses set methods.

It has what is considered an important feature in that it can arbitrarily rewind changes to the state, obviously useful for debugging though I'm not sure it's really useful outside of that (unless you're making some sort of WYSIWYG editor of course, then it's probably amazing).

can someone try this on chrome? When dragging the dog pic the viewport should be going dark and the "drag here" should be above the darkness.
codepen.io/user/pen/PaKMaa

It's working in firefox and edge for me, but not chrome. Is chrome fucked or is it just me?

Attached: 1334329164853.jpg (366x380, 18K)

he's not moving. Bad dog!

what the fuck, google

Attached: 1432669193779s.jpg (223x225, 10K)

even working in internet fucking explorer

Angular for serious applications

React for hipster basedboy startups

Vue for personal hobby products

Elm if you're a smelly basement wizard

Attached: 13.jpg (1000x1412, 424K)

fuck redux use mobx

The main purpose I've found for it is full stack things, when you sign in a user on the main "App" component for example you can set the user to a store, then like 800 components deep just inject the store and get that user without any problems at all, where as without it you'd have to pass it as props 800 times.

Same goes for other things, maybe you have a "settings" tab 3 levels deep from your main app component but then something that is changed from that settings tab 800 levels deep, by simply injecting the store you can update the state between those 2 like it's nothing, where as without redux or mobx, yikes, that would be gross.

is human here

we miss you human

regards, tf2g

>not using t.
you fucked up

I always wondered what t. is supposed to mean. Do you know?

For people who actually employ others
What are the things you want junior developers to be able to do or know?

>What are the things you want junior developers to be able to do or know?
Be good at learning things, have a basic CS degree, have basic skills in every area of CS and more or less advanced skills in just one or two.

Depending on the project/company etc, I might want someone with honours or impressive final year projects etc but if it's just a random software house then that's probably asking too much. Even so, if they're a graduate, then they ought to be able to demonstrate decent knowledge of algorithms and efficiency, understand big O and make intelligent comments about the shortcomings or random sorting techniques. Maybe solve some sort of challenge in an intelligent and optimal way.

If you're hoping for something about how you don't need a degree or you can just acquire basic skills from tutorials/online courses...I wouldn't hire someone like that. There's too much they don't know, regardless of what skills they've picked up in one specific area.

>how you don't need a degree
Not a concern.

Just wondering what skills or the expectations of a junior web developer are
Thanks for answering.

1. Strong fundamentals of web development and has a portfolio of finished projects to prove it. I expect that if I pick any one of those those projects on your portfolio, you'll be able to convey it's purpose, how it works, and justify the design decisions you've made.
2. Has experience or is willing to learn the technology stack that my company uses.
3. Good communication skills & is a team player. I don't want some antisocial autist on any of my teams.

im noticing too even for web dev jobs you need a CS degree or be really smart with data structures and algorithms

i did that on purpose
human used t. a lot so i wanted to not use it

Man, i'd love to do your job. I hope i'll get there in time.

Say i want to implement a link to /wdg/on my startpage that opens Jow Forums, performs a ctrl+F "wdg" then links directly to the new wdg.
How would i implement something like that? Is it even possible?

let me guess you got your job through nepotism

Did a bit of research, found this.
Jow Forums.org/g/catalog" onclick="find('wdg');">Click to find WDG

Doesn't work though

That's not possible. When you navigate away from your website, and open a new page your javascript is gone and you can't automatically execute some new javascript on the new page.

Because the `onclick="find('wdg')"` will execute on the first page, and then navigate to the href.

>shitty interpreted language
So, same as js?

Try to iframe Jow Forums to find link

a.4cdn.org/g/catalog.json

That won't work, you could load the iframe, but you couldn't access it's contents due to same-origin policies.

DOMException: Blocked a frame with origin "" from accessing a cross-origin frame.

So yea, easiest is just to load the catalog.json and find the correct link there.

you can't really link directly to the "new" wdg without previously knowing where to go.

Maybe you could use the Jow Forums API to find out though, so you'd just do a function that would go see if it exists, if it does then link to it.

is good enough tho

>im noticing too even for web dev jobs you need a CS degree or be really smart with data structures and algorithms
Web development is still development.

You can be a designer and know fuck all but for development, you have to know a lot more than you can get from self-learning and online courses.

Simple Question:

I have a navbar that jumps to sections on main page using the # id tag.

However, when I'm on any other page that doesn't work.

How do I write a navbar that always jumps to sections on main page with the # id tag?

Is this in react or vue or just plain JS or what?

If it's in plain JS you can do something like if (this url === blahblah#id) then jump to the ID
using react-router you can use a settimeout and it will jump to that ID after

it doesn't work because when you change the page I assume your page is refreshing and thus obviously all JS stops so how can it possibly know what happened before the page load and what it wants to do next

No! It's just ordinary HTML.
I'm talking about anchors that jump to sections of a page.

Contact
About

Contact

You're using relative paths, what you're saying is to jump to a DOM element with id="contact" on the same page.

If you want to jump to that element on a specific page you'll need to use absolute paths:

href="home.be/home#contact"