/wdg/ - Web Development General

Code Connoisseur 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

>Further resources
github.com/kamranahmedse/developer-roadmap - Roadmap
youtu.be/Zftx68K-1D4 - Web Development in 2018

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

github.com/npm/npm/issues/19883
es6-features.org
github.com/lukehoban/es6features
staticgen.com/
codepen.io/dsenneff/pen/QajVxO?editors=1010
ipfs.io/ipfs/QmRGHjyQLHkQRAreoiBpy8tu5LSPAMxyPjtYa2t1b943My
ipfs.io
hackdesign.org/lessons
medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
npmjs.com/package/serve
twitter.com/NSFWRedditGif

When you get asked to do a website and the client wants to have some 'control' over the content, what do you normally do? Wordpress and customize a template?

Starting the thread of with the monthly fuckup by the NPM devs.
github.com/npm/npm/issues/19883

Could go with a static-site-generator and headless-CMS, where the site lives in a git repo and gets rebuild after editing.
Then it can be hosted on GitHub pages or Netlify and you don't even have to take care and pay for a server.

React or Vue?

job market value definitely React.
personal enjoyment Vue.js
at least that's for me, maybe you prefer React anyway.
Do a simple todo app and see for yourself.

When did you first come into contact with HTML?

I was 12 years old. The internet was exciting to me and I wanted to know how it all worked under the hood. Through some searching on Google I found out about HTML. Most of it, like tags and tags, seemed just like the BBCode that was used on a forum I frequented.

So I grasped it all quite quickly and began to create web pages. I began to experiment with CSS as well, but it was a little more tricky to grasp since it wasn't like BBCode. When I learned about JavaScript, I was like "lol fuck this" and dropped the habit for a good 8 years or so before picking it up again. In the year 2017, when everything was a framework...

literally two months ago and i dying

why shouldnt i just use jekyll & github pages?

go, /wdg/

Two months ago you started on HTML and you're dying *now*?

>static-site-generator and headless-CMS
What's the best one to use if I have my website already built? I don't want to use their shitty templates.

Fuck Wordpress. Use any CMS that is not shit: Craft, Bolt, Grav, Kirby, Pico, CouchCMS, OctoberCMS.

I run Kirby for all my basic text/image based sites these days. It's such a breeze to use.

Jekyll & Github pages for your own static content website

Flat-file CMS like Kirby or Grav if your website is still content-heavy but with a few extensions that require a back-end language (contact form, thumbnail generation, admin panel, etc)

Full-feature CMS like Craft for big projects and big brand websites.

Slim for small basic applications and APIs.

Laravel for Complex custom applications.

That's my stack these days.

On the beers again /wdg/

Duncepill me on ES6 JavaScript and what, in your view, is the best thing about it.

just read
es6-features.org
github.com/lukehoban/es6features
Then things like Async/Await are actually part of ES8 I think, though often included, when people mention "ES6-like modern JS"

arrow functions, template strings and promises are really nice

aw man, I don't think there is a good answer, since I doubt, that you can just drop your site into any generator, when they usually use some specific templating language as well.
Have a look at some options: staticgen.com/

But I think if you have to do some rewriting if some CMS has to become a part of the site.

Anyone here with Azure experience? I'm trying to clone a resource group using templates. So far I've got the actual resources cloned, but now I need to copy the code from some repository into the deployment so I can actually deploy the webapp. Can I do this with Templates, or is that a separate operation

Vue and Angular syntax looks so unnatural, not sure why. If you know JavaScript well, you feel right at home with React.

JSX feels natural but HTML directives don't?

fuggggg, I just want to code and get paid
not go on holiday weekends with a bunch of people and pretend that I have similar interests

It's simplistic as fuck, I love it.


const foo = (x, y) => x * y;

const name = prompt('Enter your name: ');
alert(`Hello ${name}!`);

what do you think of this webpage i made for my first commision. client asked me to update his business site. im going to change the button colors.

...

why is the phone number on its own row above all the other elements? Wouldn't that fit in well with the contact column to the right?

The large title seems redundant, but I am alsonot familiar if that's just common practice maybe.
>Storageland
>Storageland Self Storage
>Welcome to Storageland

as meme-y as it is, a hero image with a wider image might look neat to the average visitor.

Bit overall ok I think. Not much that can be done wrong with such a design.

Bit of a dumbass question here, is it doable to make a multi-page application with React? I've had a play around with React but I'm not really sure how you would go about it. Plus people always say React is for single-page applications. I'm trying to make a basic version of this: mattime.io.

So it would eventually include a login page, then a homepage, page for adding new entries and a page for viewing stats.

Thank you very much I appreciate your opinions. I was thinking the same thing about having a wider image, which I can probably find on google.
I figured having the number up there at the top would make it the first thing people see. This site has no online stuff so the goal is to have people call or visit.
This is what each location page looks like. Im polishing the price tables now

Garbage. /webdev/ is cancerous. Do you even know how to code an email script with php or do you let wordpress handle all of the big boi work?

Yep, kinda. I mean, with JSX you know when there's some reserved keyword you're supposed to change in the html, while with directives it's basically an additional templating language you have to learn.

But it all boils down to preferences, I guess.

>OctoberCMS
>not shit

to be fair i only got into web coding a week ago. i saw his ad on craigslist and figured it couldnt be too difficult. if you google his website, you can see that anything would be an upgrade.
but no i tried learning html and stuff then realized hes using wordpress so i went and messed with it to make this.
webdev does seem cool and im going to learn more on the side.

sure, it's just multiple pages with React, so not something too far fetched.

>people always say React is for single-page applications
>So it would eventually include a login page, then a homepage, page for adding new entries and a page for viewing stats.
Be aware that single-page-application doesn't mean, that there is only one page of content.
It means, that you remain on the same page in the browser (without reloading a new page from a server), but routing to other pages (news, contact, blog, etc.) is still included in the concept of single-page-apps.
It's just handled by the frontend JS framework, that dynamically renders new content, instead of a request, that goers to a server and replies with new HTML content.

>saw his ad on craigslist
>i only got into web coding a week ago
what the fuck
I am doing this as a hobby for 2 years and don't feel confident enough to ask others to pay me.

> I am doing this as a hobby for 2 years and don't feel confident enough to ask others to pay me.

Same. Maybe we should stop overthinking.

idk man im just taking opportunities i guess,.he didnt sound tech savvy so im betting hes going to be impressed and i dont think he really wants to pay much.

Ok that makes sense. Thanks

> i dont think he really wants to pay much.

You did agree to a price, right?

>When I learned about JavaScript, I was like "lol fuck this"
I had a similar reaction, but I just decided to avoid JavaScript for as long as possible, and just try an master CSS. These days I still tend to do as much as I can in pure CSS, but now I do stuff in JavaScript as well.

He told me to brush up on my skills while he was gone for a week, because I said I had prior experience(myspace) and then talk to him and he would give me access to his site. So I figured Id make demo for him, see if he likes it, agree on a price and implement. I was thinking about asking for $100

What country/area are you in? $100 is dirt cheap. You should charge a minimum of $50 per hour if you want to sound professional. A completely new website is closer to $500, even for a beginner. Don't undersell yourself even if it's only for installing a Wordpress template. If it took you two hours, sure ask $100, but if you spent more don't be afraid to ask for your real worth.

You can't make this shit up

$100 did sound low, I dont know what hes expecting though. I got a template, grabbed plugins, did a little html and last I want to see what I can do with SEO, he specifically mentioned having his site show up on google. Simply updating his 3 year old site will do wonders but its his descriptions Im not sure how to handle. He doesnt have much now and I cut it even more

hey uhh I need you guys to make me the next facebook and I need it done by tomorrow morning. $15 pay for each of you. thanks

Sir, I will do the needful. $10 only, next Facebuk

>he specifically mentioned having his site show up on google.
Google Webmasters. Register the site, it'll show up after a few days. That's really all there is to it.

...

Stupid question here.
How are desktop applications styled? For the web, we have CSS. But what language is used for styling, say, Chrome? What does the styling look like?

now do it again but this time with a cute anime girl

How did you do that?

desu this is cute

this

not mine
I sometimes scan the webdev and javascript subreddits for libraries, releases and news, like the mentioned NPM permission screw up, since that part of the site is actually bearable, as it doesn't veer into retarded circlejerking.

At work watching twitch streams all day.

Do you know which technology to use for that profile animation? I've seen animated css characters before so I presume it's that + JS unless I'm mistaken.

>animated SVG
he said

codepen.io/dsenneff/pen/QajVxO?editors=1010

Awesome, thanks!

Second question:
Why/how the fuck does node execute .txt files?
// hello.txt
console.log('hello');

node hello.txt -> hello

????

The file ending doesn't change the content of the file.
A program has no reason to care really, what the file ending is, if you open it from within that program.
Only when you try to run a file from the file browser or something, then the file ending is useful in determining which program should be used to open the file.

I have to interview a web dev for my careers class, I would be grateful if anyone would answer these questions without cheeky memes.

1. Describe your typical work day.

2. What do you enjoy most about web dev?

3. What do you dislike about it?

4. What barriers or challenges did you have to overcome to get into your career?

5. What skills do you feel are most important for a position in the web dev field?

6. As a student, what do I really need to know/do to have a successful entry into this career?

Thank you.

1. I do IT work all day and moonlight as webdev. I can't imagine making good money at this.

2. Javascript.

3. Once you figure something and then you have to do it 100 more times or engineer a solution to make it easier which is also tedious.

4. Had to realize its not a career its a low value specialization.

5. Learn to learn and love learning.

6. learn data science and get a real job.

Sounds like you got hired as an "IT GUY"

1. I come into work, check if I have any emails (problems that need to be dealt with ASAP), then begin working on whatever the highest priority feature that needs doing. Often there are meetings to talk about these features, or to keep the customer in the loop.

2. The quick feedback loop. I can make a change or begin working on an idea and quickly see it evolve. This isn't as true for desktop applications.

3. The low learning curve makes it easy for subpar developers to skate by, which ends up giving all web developers a bad reputation. Javascript being the only language with first-class support also sucks.

4. Computer Science is an enormous field. I didn't really get my feet wet with web dev till I had almost graduated college. Also, the pace that the web industry moves means that you need to stay on top of trends to keep your skills relevant.

5. Be ready to adapt/always keep learning. CS fundamentals are important just because of the low barrier of entry. It is too easy to make low quality solutions that work, so unless you stay sharp you will quickly become worse as a developer.

6. Push through the denser Comp Sci/Math stuff and you will be able to use your skills in any field you can imagine. Computers are ubiquitous to nearly every industry, so you can work on anything that interests you. You just need to focus on getting past the fundamentals, and keep up-to-date.

I am working on a website for the company I am employed at and I have a question.

We recently deployed our new website, which includes a Freshchat widget. Now the company wants the widget to be hidden, when no one is here. I already contacted Freshchat support and there is no way to hide it from that end. So I figured I could use some JS.

In my header I have


var Now = new Date(),
CurrentDay = Now.getDay(),
OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 16, 30),
ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 08, 00),
Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime());

if (CurrentDay !== 6 && CurrentDay !== 0 && Open) {
$('.openstatus').toggle();
}


Then before the body close I have

>I didn't really get my feet wet with web dev till I had almost graduated college.
Yeah, I know people with CS degrees that can't, for the life of them, get into web dev.

$('.openstatus').hide();? Throw that into some logic.

what is the actual POINT of jQuery

thats what I said kid, I do IT work because it pays 85K per year plus amazing benefits with no degree required

web devs make about $200-300 a month which only works in india

it handles edge cases and cross browser compatibility in ways you literally never could because youre slow witted.

learn CSS

www.bananagiveaway.com

yeah, back in 2005 mate. but it is 2018 now, so what is the actual point of using jQuery in 2018?

It is used for coverage of edge cases you clearly don't know about and cross browser compatibility you clearly don't know about.

Not everyone is running the latest Firefox:Soy Edition /w Popular Instagram Skin

Name those 'edge cases' and examples of 'cross-browser compatibility' then.

Because, to me, jQuery is a relic of a past time when people used either Internet Explorer or Firefox. And IE had its 'JScript' bullshit. That shit, thankfully, is not relevant in this day and age. So I ask you to sell to me a reason to use jQuery in 2018.

Where do you work? Its probably not relevant to your not-for-profit hipster blog jut to real industry people.

Same reason it's always been used, retard.

>this spoon youre feeding me with is too big, spoon feed me all day long with tiny spoons
No.

I don't work anywhere right now, I collect welfare from the state.

Hmmst. What an intelligent response.

I do not understand.

>Hmmst. What an intelligent response.
It is an good response, what else are you looking for? Sure, I could use vanillaJS, but why would I when jQuery is so much quicker? I can translate any jQuery into vanillaJS, so that's not a problem.

Also, not everyone is using modern-day frameworks.

>tfw getting started with IPFS-JS
has anyone messed around with ipfs yet?

Nice, that looks really interesting! I'm going to give it a look now.

not knowing your exact HTML, but depending on how it works, there are different ways to go about this.
Either identify which element the widget is and apply the CSS class that will hide it, or only even load the required JS for it in the first place, if it's within business hours.
And then also consider, whether you only want to check it once on pageload or in certain intervals.. lets say someone loads your site 5 minutes before everyone leaves, gets the widget and then tries to start a chat like 30 minutes later.

ipfs.io/ipfs/QmRGHjyQLHkQRAreoiBpy8tu5LSPAMxyPjtYa2t1b943My

so what is this ?

a pastebin-like tool?

ipfs.io

so what is this ?

a pastebin-like tool?

Can nginx use php files as a 404 page? I've got it set up as you would for an html file, but it's not redirecting to anything.

Where can I learn some design principles and general good practices for making good looking web interface? I mean only looks-wise, I make functional sites already but they are very bland.

its for any kind of file. its a distributed file system meaning that you can host your files without needing a dedicated server.

someone linked this recently.
Don't know if it's a meme or not.
hackdesign.org/lessons
Otherwise it's just practice. I feel like I am absolutely shit at design but every month less so, than I was before, when I look back at the crap I produced in the past.
Sometimes I think I have some aspects figured out, just to reevaluate everything again next week.
But it's fine.

Well it wasn't necessarily that I couldn't find my way in, it just wasn't on my radar as a career choice. An internship is what really pulled me in.

In what third world country do you live that web devs make $300 a month? What is your definition of a web dev, someone who makes Wordpress pages? Full stack developers can easily pull in $120k with a few years experience.

and something more
medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

It is pointless for anything but some of its convenient side-features like Promises/request handling.
Has no idea what he is talking about, because you can easily support any browser with just polyfills. The "edge cases" argument is just him parroting some opinion he found on a blog or stack overflow a few years ago. I've supported IE6 without jQuery (in the last two years). It ain't that hard.

feel like I need to post one more time

read through that article now and somehow actually started to like the idea of frontend design for the first time.
I always saw it as incredibly tedious with little reward (i.e. just some useless colors and no functionality), but that was also because I always sucked and took hours to come with some semi-decent layout and non-eye-cancer causing colors.

Will see how far my newfound motivation gets me.

So we're hosting a react app at work, and I was wondering would there be any negatives with using the npm package serve. We could definitely use nginx, but we just don't feel like spending the time with dealing with SPA issues.

react because functional programming, also it's good

using NPM instead of nginx to avoid SPA issues, what?
what are you asking?

Using vim+jslint. Im practicing with const but jslint warns me this is bad. I specified es6 at the top of the file and it still says fuck you. What do i do? Should i be using jshint after all?

what warning specifically?
Isn't ESLint, the go-to linter?

there are no issues wrt to nginx and a react based SPA.
you can just use the nginx docker image (I'd recommend alpine for prod) and serve your static bundle straight within 2 minutes

Is it necessary to use linux to make web developement things?

Thanks.

No idea what the go to linter is, im a freah programmer and trusted crockford. Specifically it says something along the lines of "expected identifier and instead saw 'const'"

That means it is old version or something. You should be using eslint, it is the standard

There's an npm package called "serve" that's only purpose is to host static files. You can just pass a single flag to handle SPA routing.

npmjs.com/package/serve

Just didn't know if there are any cons with using this in production.

We were having a few issues with getting the routing to work well with our environment (rancher and traefik, not too familiar with it), but I definitely want to put in the effort to make it work.