/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 for web-technologies
freecodecamp.com/
codecademy.com/
bento.io/ (is this still good?)
google.com

>Further resources
github.com/kamranahmedse/developer-roadmap - Roadmap
youtu.be/Zftx68K-1D4 - Web Development in 2018
jsfiddle.net/ - Use this and post a link, if you need help with your HTML/CSS/JS

Attached: wdg.png (1280x720, 180K)

Other urls found in this thread:

medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
twitter.com/i/moments/880688233641848832
react.christmas/17
npmcharts.com/
twitter.com/SFWRedditImages

I could've been an artist or musician..

Attached: woonigga.jpg (630x603, 18K)

Alright, I see a few issues:
1.
When generating a random integer in a range, you should be multiplying by the size of the range, not the maximum number. So *8 instead of *10. And then you need to shift that number by adding 2, since that will shift the minimum from zero to two. You should be starting i and j at 0, since by starting them at 2 you're actually decreasing the range, and have a decent chance of having an empty word or an empty sentence.

2.
You seem to have some logic outside of your loops that should go inside them. The sentence.push(word.join('')); should be done every time you finish making a word, so it should go inside the sentence loop (but outside the word loop). And having this word.join inside the sentence.push call means you can get rid of that first word.join.

3.
You should be joining the sentence array together with a space instead of an empty string, and stop simply pushing a space at the end of each word, since that results in a space before the period. And pushing the period as its own word will add in yet another space. You should just concat the period as a string when you go to join the word.

Other minor nitpicks:
Use else instead if else if when checking the randNum. The number generating logic looks good, but if you did screw up, generally you want to just include that in the else. In this case it might be fine to just effectively omit that loop iteration, but in general you might want to make sure you're at least going through one of the cases, as going through neither can be hard to check. (Alternatively, add an error log in the else so you get an error if it ever falls through to there.)

Also, randNum is a bad name. You should probably just cast it to a boolean and call it isConsonant or something like that.

Then why hang out here and not or ?

No you couldn't have.

Dude, thanks. I'm busy at the mo but will look over what you have advised quite soon. Also to as well. I'm new to the heavy-thinking kind of coding that takes a lot of explaining to solve. It's funny cos my mind understands the terminology and what would ideally be used for a particular use case but when I actually write the code it doesn't take long for my mind to melt and for me to hit a block.

I love learning how to adopt the algorithmic mindset though. It's very difficult but fun all the same. Expect a reply soon once I process what you and the other poster have advised.

>I could have been a barista or burger flipper
umm, ok?

which is better for getting a job, php or ruby on rails

I haven't seen any RoR job openings in a year, maybe more. I'd say it's dead. PHP is shit, but at least you can get a job in it without any problems.

seen some ruby on rails jobs in my area, but definitely very few compared to php. you should learn php, java or c#, that's where the jobs are in most places.

nodejs

I'm not a big fan of it, but it's used a lot. Learn PHP if you want to maintain legacy web applications

you are an artist user

you are a [spoilers]web artisan

constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
}


I'm trying to learn React. Is there any way to avoid binding "this" all the time? It's very tedious.

Attached: bear_picnic_table[1].jpg (468x435, 59K)

user arrow functions.
handleChange = () => {
// your stuff here
}

I need to know full stack to have a viable business where I am but I hate front end design.
Help

Look into autobind decorator.

Full stack development does not include design.

what use cases would suit relational databases and what would suit flat databases such as MongoDB

medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
twitter.com/i/moments/880688233641848832
>I hate front end design
The hate comes from sucking at it
I fucking loathed the design aspect of a site. I still prefer to work on functionality, but design is slowly getting interesting and fun as well.

It's the same when people yell about JS, how they hate using it and only ever do pure HTML+CSS sites.
Then it turns out they don't even know how to do a simple for loop, if anything at all.
Since they suck at it, it's easier to say that you hate it, than to admit the lack of skill to produce anything non-shitty.

Attached: 1517351635134.png (1920x1080, 598K)

what are some best practices for retaining visitors to a website/app? i can't seem to get anyone to take more than a glance at the site despite it being useful to the community i'm involved in.

Oh I'll be the first one to say I suck at it. It just sucks cause it feels like an annoying chore to get something that looks nice before I can do any fun stuff.
Interesting resources though, thanks

Get rid of any annoying shit like modals begging for e-mail address and cookies information pop-up.

If you're doing it yourself and you're not a professional designer then you are doing a bad job and producing a shit product and therefore you should feel bad about it.

the site just posts useful information, there's not much going on with it. i figured it would get a few visitors every day but it doesn't get any visitors at all. if i wasn't using the site myself then i would feel like i'm wasting my time.

For the sake of an example, I have a config extendable class in php that retrieves values. Such as:


class configuredStuff {
protected adminEmail;

public function getAdminEmail() {
return $this->adminEmail;
}
}

class myConfig extends configuredStuff {
protected adminEmail = '[email protected]';
}


However, $adminEmail comes empty, UNLESS i call it from configuredStuff constructor's. Not only this is puzzling me as why, I'd like to know what is the best practice for such case?

With configuredStuff model taking care of the getters, the actual config files can just extend it and declare its settings. Would be clean and seems elegant except I can't understand what is happening nor get it to work.

Only you can save me Sup Forums, found nothing online

Attached: 1443631571587.png (208x254, 6K)

Maybe your content is lacking? If the community is niche enough and your content provides actual value you should at least retain a small number of visitors. Could also be the design/UX. People won't revisit a site which doesn't leave a good impression on them. Link it?

Is there a way to change what Angular considers the root URL for routing? e.g. to serve an application at localhost:4200/FOO instead of localhost:4200 without having to prefix all Angular routes with "FOO/"?

DISCLAIMER: I'm working with somebody else's code and have only a basic (and outdated) command of the MEAN stack. Most importantly I've never really done Angular style routing, and it seems I have to fiddle with that to get what I want.

Basically there's an Angular SPA being served through Node (with Express) with a server.js script like so:
app.get('/', function(req, res) {
res.sendFile(__dirname + '/dist/index.html');
});
app.listen(port);


and I'd like to change it to

app.get('/FOO', function(req, res) {


If I do that it breaks all the Angular routing, but as I said I can get it to work again just by prefixing all the routes in the Angular app with FOO/. Still, I was wondering if there's a more 'proper' way to do it.

react.christmas/17

There are very little legit use cases for MongoDB in regular day-to-day web dev. If you don't know the answer to the question you asked, you should always go with MySQL.

Suppose I want to do this:
>create a without adding it to the DOM
>set its width explicitly
>set its text (that is, add a text node child)
>set all other styling attributes (font size etc)
>read back its natural, auto-generated height (the height it would have if I had just added it normally)
And similarly for setting the height and having it generate the width. Can I do this without some horrible hack (such as adding it to the DOM but setting opacity:0)?

No shit

There is no way to create an element without adding it to the DOM

I think Im gonna go with passing an interface to the configuredStuff constructor's. That should make it very explicit


private $mootMail;

class myLittleConfiguredStuff {
public function __construct(interfaceForConfig $interfaceImplementingObject) {
$this->mootMail = $interfaceImplementingObject->getMootMail();
}
}
/* this is the end of the program! see you guys later XD* /

I'm referring to calling document.createElement, working with that element, but never adding it as a child of anything. This works for most things except those which require actual pixel dimensions, which don't exist for these elements.

I want to ask the browser: Hey, don't put this into the DOM yet- but if you /were/ to do so, what size would it be?

Just add it to the DOM with an absolute position and left: -9999px. It's not even a hack, that's how honeypots and other form traps work.

Get a handle on ES6. Arrow functions will bind automatically, although you'll still have to call them as this.myfunction().

>.christmas

Most retarded TLD I've seen in a while.

i thought some browsers don't allow negative position values?

Got college assignment to create a website. I have no previous experience in creating website and only basic school tier experience of java.
Can anyone redpill me on angular 4 ? Thanks.

Do you actually have to use angular (or any other framework)?

iirc depends on how overflow is handled

Bruh stick to HTML

>need to make a website
>consider two of the worst options
it's like you hate yourself

Never had an issue with this, or heard about it. Source?

I see a lot of courses, guides, conferences, etc about web development, but almost none about web/ui design, why is that? Also are transitions like these even possible or is it all just dribble pipe dreams?

Attached: 1_S1FkQRTnrvz2qy520AhbVA.gif (800x600, 2.2M)

>I have no previous experience
Learn HTML
Learn CSS
Learn JS

There is literally no point trying to do anything with a frontend framework if you can't use the underlying basics.

Also why specifically Angular version 4?

Angular might be overkill for your website. That framework is for enterprise level applications not landing pages. Use react or stick to basic html/css/js

Thanks.
My friend suggested me to download Angular webpack starter and start from there, watching tutorials and reading manuals.

I do machine learning, and I recently came up with an idea where I want to do some processing on resources hosted on another site, like pictures on Sup Forums or the text of an article or something.

I generally use python and C for my academic work, but this is my first time trying to do a website. Would it be best to learn JavaScript and have the processing done on the user's side, or have the server somehow do it. I feel like that might be very slow with a bunch of users.

Is there some way to run arbitrary python or C code on the client machine?

Attached: 1518119313202.png (596x599, 246K)

Pipe dream for almost 99% of the devs out there. Building something like this and making it work in all browsers and screen sizes takes a lot of dev time and even more Q&A. It's possible, but only big brand names have the manpower and incentive to pull it off.

I use Angular for work at the moment, and it does make some sense for large projects, but I think I would have seriously struggled with it without a solid understanding of the basics.

possible sure, but then that's also levels of polishment, that you rarely see elsewhere

Got an offer through family/friends for a trainee/internship for 5/6 months at a webdev company. They will pay me a little amount + pay for my travel time. And if I do well they can offer me a junior position after the 5/6 month period. Now this seems like a perfect opportunity to switch my career around since I don't have any school papers and I currently work a pretty shitty just above minimum wage job.
The only problem I'm having is that from what I gathered in the interview they still use a lot of jquery because "they don't see a reason to switch to react yet" and they use PHP for their back-end. While the company seems to make nice products and they're still growing, these two technologies kind of put me off, I see PHP getting a lot of hate and as far as I knew jquery was dying.
Should I be worried about potentially learning outdated skills?

Attached: 3242423662623.png (741x568, 29K)

PHP is still very viable. Whatever all the hipster on the forums might say, PHP/ASP/Java still power the majority of the web. Learning modern PHP (7+, OOP, PHPTheRightWay) is a perfectly reasonable career path to start and will take you far.

While jQuery is on the way out, it is by no means dead. Take the job and work on reducing their dependency on jQuery. If you can replace 200 lines of jQuery with 200 lines of vanilla JS doing the exact same thing, they'll have to follow you because you just erased a dependency for them.

>5 replies questioning use of angular
>"Thanks."
I really wouldn't recommend trying to learn Angular before you learn either JavaScript or HTML.

Generally in JavaScript you can't get content from other sites unless they explicitly allow it, due to same-origin policy.

As for the actual processing, you could compile C to JS using Emscripten, but it might be more trouble than it's worth.

Also this: don't jump on the React bandwagon too quickly. Work on your basics. Get a solid grasp on PHP and vanilla JS. You can spend years on those two alone.

How does a site like archive.fo do it?

Thanks user, I'll accept the offer and work hard on the basics. Getting pretty excited for my future as a webdev ™.

The archive.fo server is the one that actually fetches the pages, and then they serve that fetched content. Once it's archived, a user requesting the copy doesn't need to interact with the original site at all.

When I said "in JavaScript", I really meant "in the user's browser", since the browser is where the same-origin policy is enforced.

Ah that makes sense.

I can actually think of a way I could do that without killing the server. Thanks user.

Attached: 1412615124565.jpg (696x720, 30K)

anyone know of a site like npmcharts.com/ this but for github repos?

Trying to compare popularity, maintainability, etc

const objectToGetParameters = obj => {
let str = '';
for (let key in obj) {
if (!obj.hasOwnProperty(key)) {
continue;
}

if (str !== '') {
str += '&';
}
str += key + '=' + encodeURIComponent(obj[key]);
}
return str;
};

const objectToGetParameters = obj => {
return Object
.keys(obj)
.map(key => `${key}=${obj[key]}`)
.join('&');
};

Attached: 1519080245352.png (657x539, 110K)

what's the purpose of this function?

It generates a GET query string from an object.
objectToGetParameters({ threadId: 1, page: 33, another: 'one'}) === 'threadId=1&page=33&another=one

I use it like this
const createGetRequest = (_url, parameters) => {
let url = _url;
if (parameters) {
url = url.concat('?', objectToGetParameters(parameters));
}

return new Request(url, { method: 'GET' });
};

you forgot to urlencode the value in the second one (and you're not doing it for the key)

i don't like having .keys(obj) on its own line since it's not really a chainable method like the others

>obj.hasOwnProperty
objectToGetParameters({"hasOwnProperty": null})
use Object.prototype.hasOwnProperty.call(obj, key)

Where do I go to hire pajeets for my web dev business?

I'm writing a book and I want to make a website for it. The website will just be where I post the book so people can read it. It will also have images on it between chapters and whatever.


What technologies should I go about using to make a website like this? I don't need help programming or anything like that, I just need recommendations for technologies to use to make this. Only requirement is I want it to be responsive to work on mobile. Any recommendations?

hire yourself?

const objectToGetParameters = obj => Object.entries(obj)
.map((...parts) => parts.map(encodeURIComponent))
.map((key, value) => `${key}=${value}`)
.join('&');


Or something.

const objectToGetParameters = obj => Object.entries(obj)
.map(parts => parts.map(encodeURIComponent))
.map(([key, value]) => `${key}=${value}`)
.join('&');


Had a couple typos.

>go to the real site
>none of this happens

fucking dribbble """designers"" who haven't even worked on a real website before, let alone understand how a web page even works

And how are you going to display 2 side by side animated cards that move positions left & right on a mobile view? Exactly, you're not. The design is literally a waste of time because a huge portion of viewers will be from mobile to begin with.

const tag = (fn: (value: T) => string) => {
return (template: TemplateStringsArray, ...substitutions: T[]) => {
// @ts-ignore
return String.raw({raw: template}, ...substitutions.map(fn));
};
};

const urlencode = tag(encodeURIComponent);

const objectToGetParameters = (obj: {[key: string]: string}) => {
return Object.entries(obj)
.map(([key, value]) => urlencode`${key}=${value}`)
.join("&");
};

>typescript

why tho?
why complicate things?

it's satisfying to have it fully typed

what?

I'm all for having it typed, but I guess the template tagged function is just for cuteness' sake?

i thought it'd be neat

Sounds like a case for a static-site-generator, with each chapter (or page) being converted into its own page.
Pick any of the popular CSS frameworks for easy responsive layouts.

good idea with the parts.map

const objectToGetParameters = obj => Object.entries(obj)
.reduce((acc,val) => (acc ? acc + "&" : "") + val.map(encodeURIComponent).join("=") ,"")

the function should be called
objectToGETParameters

>objectToGetParameters
yeah, just copied the name from the other posts

POST bodies can use the same format

the content-type for it is application/x-www-form-urlencoded and i have to look it up every time

>relying on type inference to convert '' to false
I'm not a fan of this.

>combining steps into a single reduce
Just makes this harder to follow in my opinion. When you have it split up ( etc.) then it's a simple pipeline that you can walk through step-by-step. When they are all combined, you are forced to hold all those things in your head at once.

Really, it should be urlEncodeObject or objectToQueryParams. Or you should just be using FormData.

hm probably right
then what about shortening that to
const urlEncodeObject = obj => Object.entries(obj)
.map(parts => parts.map(encodeURIComponent).join('=')).join('&')

I think that's quite neat

Better.

>Angular
>Full fledged MVC framework
>Templating
>Routing
>Form validation
>Authentication
>HTTP
>Solid architecture

>React
>JSX (disgusting)
>Need anything else other than the view, here are dozens of options, most of which are badly coded trash

Why would anyone choose react over angular?

If I were looking for my first web dev jobs, should I include previous work experience on my resume? In my case all my work experience is customer service at a grocery store and manager at fast food. Obviously not very relevant, but should I include it just to show that I've held a job in the past? Obviously I'd include personal projects (link to GitHub, I have a few web repos) but should I just omit my shit tier previous jobs?

Attached: 1j8phywd4z501.jpg (640x446, 24K)

I'm looking to learn how to expose a filesystem to an internet facing endpoint. Speaking generically, what should I be looking into? Not really concerned with anything like JSON returns, SPA, specific frameworks or languages, etc, just wanting to build the barebones backend in a reinvention of the wheel scenario to really understand how to build/work with something like this.

Potential use case:
Have a directory of music, symlink/sshfs mount in a chroot or something, and then have the final (curated) directories act as ordered sets (albums) for users to explore somehow (SPA frontend, JSON return for a client, etc) and then return the selected data (will probably have a user run bit of JS to zip it up for them).

Because:
>code splitting per route
>isolated presentational components with their own styling not part of a giant as fuck global stylesheet
>full utilisation of service workers
>styled-components
>react storybook

Also has great state management tools like Redux and MobX unlike typically emitting or set root scope vars.

>>code splitting per route
>>isolated presentational components with their own styling not part of a giant as fuck global stylesheet
>>full utilisation of service workers
>>styled-components
Angular has these

You can use redux with angular and I think it has its own specific library as well.

basically, google doesn't do a good job promoting angular and it's clearly harder to learn than react. plus people are still wary because of the angular 2 fiasco. i don't think it will ever catch up to react again.

Because I don't want it to do anything other than view.

I don't think Google even cares about Angular, they don't even use it for some reason.

My real gripe with Angular is that you essentially are passing in JS in to your templates and because of that you have to define how you want the data parsed, how you want it bound which also means it can't really be minified nearly as much as React can.

Something like this typically happens with a more server sided website:

// some directive/component/controller
ngApp('MyTemplate, ['$rootScope'], function($rootScope) {
return {
scope: {
someData: '=?'
},
link: () => {},
controller: ['$scope, ($scope) => { $scope.someParsingFunction = (obj) => {} }],
}
}

So, something that another user did and talked about in the last thread, I also just did.

Trying to learn webdev I created a basic brochure site for a relative's business. Static site with 4 pages and it is all straight up html, css, with a little bit of bootstrap. No JS. No content management of any kind.

Did I fuck up and I shouldn't include it in my portfolio?

Attached: brainlet methematical.png (586x578, 37K)

And it also leads to cryptic/generic errors and also I just really dislike the idea of having to use both hyphen separated case and camel case.

why do some websites use this CDATA keyword?


//

Why would you include a bootstrap project with no js as part of a portfolio?

It's like half a step up from copy pasting code from a youtube tutorial, but that's probably what you did anyway.

Pretty sure it's necessary for valid XHTML