/wdg/ Web Development General, love

>COMPLETE BEGINNERS GUIDE
github.com/kamranahmedse/developer-roadmap

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

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

>PHP resources
pastebin.com/gfBPg24A (embed)

Attached: elasticsearch.jpg (1024x517, 90K)

Other urls found in this thread:

mywebsite.azurewebsites.net/v1/api/object',
mywebsite.azurewebsites.net/v1/api/object',{
youtu.be/y4gZMJKAeWs
pastebin.com/raw/6TFQ61qk
stackoverflow.com/questions/26706846/apache-virtual-host-without-domain-name
pastebin.com/gfBPg24A
github.com/GoogleChrome/puppeteer
phptherightway.com/
phpbestpractices.org/
airpair.com/php/posts/best-practices-for-modern-php-development
phpcheatsheets.com/
owasp.org/index.php/PHP_Security_Cheat_Sheet
phpweekly.com/
youtube.com/user/phpacademy
youtube.com/user/thenewboston
youtube.com/user/businessgeek
youtube.com/user/LevelUpTuts
teamtreehouse.com/library/php-standards-and-best-practices
pluralsight.com/search?q=php
lynda.com/search?q=php
code.tutsplus.com/categories/php/courses
laracasts.com/
php-fig.org/psr/psr-1
php-fig.org/psr/psr-2
php-fig.org/psr/psr-3
php-fig.org/psr/psr-4
php-fig.org/psr/psr-6
php-fig.org/psr/psr-7
php-fig.org/psr/psr-11
php-fig.org/psr/psr-13
php-fig.org/psr/psr-15
php-fig.org/psr/psr-16
php-fig.org/psr/psr-17
addons.mozilla.org/en-US/firefox/addon/markdown-viewer-webext/
doctrine-project.org/projects/doctrine-dbal/en/2.8/reference/security.html
stackoverflow.com/questions/32164695/using-laravel-auth-middleware
github.com/kamranahmedse/developer-roadmap
jsbin.com/likamafufu/edit?js,output
jsbin.com/rupajicuce/1/edit?js,output
twitter.com/SFWRedditGifs

pls help i'd rather not spend days trying out differnt open source projects until i find one that i can make work

Can someone tell me a high-level overview of how I might implement autocomplete on an html input textbox (similar to that of google's/urbandictionary), where it autocompletes/makes guesses based on what you type?

I'm guessing it would be a combination of:
the input text changed event,
elasticsearch,
and some templating engine.

I'm a bit new so it's still kind of unclear to me how the flow would go from the DOM to ElasticSearch and back to manipulating the DOM.

Sorry if this didn't make sense.

tl;dr, how to make autocomplete like urbandictionary/google using node.js and elasticsearch?

Attached: backend.png (1284x3600, 672K)

>those feet

Attached: 1535849591553.png (1000x900, 44K)

>no link to previous thread
you know you are breaking the chain and fucking up anons being able to check old info on the old threads? fuck you for that nigger, if you don't know how to make a thread don't make it.

Thanks, sorry.
Here you go:

good enough, don't fuck it up next time

>store searches in DB
>oninput send input.value through AJAX to a backend script that queries relevant searches
>return query results from backend API as JSON (or whatever)
>update dropdown list of guesses with the returned values in JS

Making a MVP/prototype of this is pretty straightforward, but optimizing performance, minimizing requests, adding UX (like fuzzycomplete), etc. can quickly make this a pretty difficult task.

I've never heard of ElasticSearch, so can't help ye with that.

I've never done this before, but here's how I envision doing it. Add an onKeyDown listener on the search input box. When that event happens, send a request in JavaScript (via XHR or Fetch) to the server. Specifically to the autocomplete api endpoint. The server gets the currently entered text and uses Elasticsearch to get a few possible suggestions. Then the server responds to the request with a (probably JSON encoded) payload containing those suggestions. The client gets those suggestions, and populates the suggestion dropdown, replacing whatever was there before.

You would probably want to throttle (request only every e.g. 0.25 seconds) or debounce (request only when the user has stopped typing for e.g. 0.25 seconds) the requests, since the user will probably type some parts of their query quickly, and don't care about suggestions in those intervals.

Also, it might be better to return a lot of suggestions in each request, and then filter for the ones that fit with what the user has typed since the request went out (since there will be some latency).

There seem to be guides online for doing this, if you Google "elasticsearch autocomplete", so I would read one of those, since there may be parts of this where I'm wrong or haven't thought of something.

im having a POST request issue for my ReactJS app. i'm trying to POST a new object from the ReactJS app to a Azure hosted API.

the API has CORS enabled for any site, can make POST requests through Postman, and i'm able to make GET requests from the ReactJS app successfully.

when i try to make POST requests from the app, an OPTIONS request is made, which comes back 200. but then the app never makes the POST request. i tried using fetch(), and now trying to use axios(). anyone run into this issue before?

i can make changes on the ReactJS app or in the Azure API to get this working. posted the axios() method below thats only sending OPTIONS request

axios({
method: 'post',
url: 'mywebsite.azurewebsites.net/v1/api/object',
data: payload,
});

this and incorporate elasticsearch in the api request.

use fetch instead

i run into the same issue running fetch with the below code

fetch('mywebsite.azurewebsites.net/v1/api/object',{
method: 'post',
header: {'Content-Type':'application/json'},
body: payload,
});

maybe the route in your back-end is only configured for get requests

Are you sure it only makes an OPTIONS request?
In chrome developer tools network tab, look at XHR and Other. (Hold ctrl/cmd + click XHR and Other)

heres a good tutorial for doing autocomplete/type-ahead with js youtu.be/y4gZMJKAeWs

He said his postman request worked though... Probably it's an issue with the client

Check if using XMLHttpRequest works, just to check where the issue is

try "object.json" instead of "object" in the url

how do I add multiple virtualhosts in my apache http server? :80 works but I get permission denied on :8000 pastebin.com/raw/6TFQ61qk

> Elasticsearch
You weebs are done in the head, what does ES has to do with this image.

Will Ryuko kill me if I look at her panties?

> DocumentRoot "/home/myname/.test
OK, first check if Apache listens on 8000. netstat -plnt | grep 8000
Then make sure Apache user can open that dir. Do su www-data (or your apache user) and cd to that dir.
Add the user to a necessary group or chown/chmod the dir. 777 access rights are bad, don't do that.

stackoverflow.com/questions/26706846/apache-virtual-host-without-domain-name

also check permissions, as said

Attached: 1527808035263.png (800x800, 626K)

>cute footer

yea, i checked the Network tab. OPTIONS is 200, no other requests made.

>XMLHttpRequest
would this also send an OPTIONS request first?

if it's linux, edit etc/hosts file

you want it to look like this:

127.0.0.1 localhost
127.0.1.1 mysite.com

also you need a mysite.com.conf in the apache2 sites available folder, after configuring it type sudo a2ensite mysite.com.conf

put things in the parent folder, have fun

not sure about different ports though

not the user you are replying to, but amazing tutorial

ok now it works it correctly serves a new folder on the port 8000. I moved everything into /srv/mynewpath, set ownership as root:users, chmod it as 0775 and stickied it. then I moved my files inside and set http:users ad ownership for everything. a quick restart of the httpd service and now it shows my index of /

>posting unoptimized images

Attached: 1539539765169.png (1000x900, 17K)

>>PHP resources
>pastebin.com/gfBPg24A (embed)
Guess who is back ?
answering php related questions

Attached: 86712-istock-503686732.jpg (1100x620, 81K)

github.com/GoogleChrome/puppeteer

lel, I have this saved in several js files at the bottom as comment


Read : - phptherightway.com/ - phpbestpractices.org/ -
airpair.com/php/posts/best-practices-for-modern-php-development -
phpcheatsheets.com/ - owasp.org/index.php/PHP_Security_Cheat_Sheet
- Weekly Mailing list : - phpweekly.com/ Youtube Tutorials : -
youtube.com/user/phpacademy - youtube.com/user/thenewboston
- youtube.com/user/businessgeek - youtube.com/user/LevelUpTuts
Paid Videos : - teamtreehouse.com/library/php-standards-and-best-practices
- pluralsight.com/search?q=php - lynda.com/search?q=php -
code.tutsplus.com/categories/php/courses - laracasts.com/ PHP Standers :
- php-fig.org/psr/psr-1 ( Basic Coding Standard ) -
php-fig.org/psr/psr-2 ( Coding Style Guide ) -
php-fig.org/psr/psr-3 ( Logger Interface ) -
php-fig.org/psr/psr-4 ( Autoloading Standard )
- php-fig.org/psr/psr-6 ( Caching Interface ) -
php-fig.org/psr/psr-7 ( HTTP Message Interface ) -
php-fig.org/psr/psr-11 ( Container Interface ) -
php-fig.org/psr/psr-13 ( Hypermedia Links ) -
php-fig.org/psr/psr-15 ( HTTP Handlers ) -
php-fig.org/psr/psr-16 ( Simple Cache ) -
php-fig.org/psr/psr-17 ( HTTP Factories )


welcome back

thanks, you might wanna add symfonycasts.com there

here you go

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

i'm happy that you people kept it, i took me some time to write that

you wrote it and I made that image with markdown threads and threads ago

Attached: index.jpg (269x187, 4K)

thanks but what i was asking was for a project where i would not have to code the whole crawler myself. i have looked into puppeteer, simplecrawler, scrappy, ache, and a sitemap generator. the sitemap generator is the one which seems most easy to use, but it doesn't work with sites behind login

i just want a list of all urls in a domain, i'm surprised there isn't some tool that does this specifically

how do I view markdowns in firefox in windows or fedora, I've tried with the addon markdown viewer webtext, but it dunnot work.

Attached: 1530989464027.jpg (650x649, 47K)

*donnut

are you sure?

i just installed this
>addons.mozilla.org/en-US/firefox/addon/markdown-viewer-webext/
to test it and it works.

create a markdown file (.md extension) and then drag it to the browser

it works here

epic trole, it works now, but not on my fedora

>Slight chance of getting fired in a week from my shitty job, non tech related

I'm afraid but excited at the same time. I could focus on learning web dev.

to new beginnings

Attached: images.jpg (309x163, 6K)

You could try httrack, I know it stores a list of the crawled urls somewhere

based nonsense poster

...

I started making a project in Symfony a few days ago. It will be simple, with one in memory admin account and some other features. I familiarize myself with quite a lot when it comes to the project structure.
I saw that there is an in built form component for Symfony, but I want to build one myself and I'm quite excited about it to be honest.

Can you educate me on the security aspect when it comes to Post requests, what does Symfony handle automatically in terms of SQL injections etc?

symfony doesn't have a database component, it makes use of doctrine, you can either install doctrine ORM, DBAL or both, if you would go with ORM, there's a really small risk for SQL injection, as you will be dealing with object without writing any SQL quries most of the time, but in the DBAL you will have to use it the right way

read this article about security in doctrine : doctrine-project.org/projects/doctrine-dbal/en/2.8/reference/security.html

Thanks. I already have Doctrine set up. That's what I wanted to know. Right on point.

IS there anything new out that is good to use?

Currently doing dart/flutter but it's kinda lame desu

How does one work as a freelancer who has his own website and pretty much advertises his services?

I live in the UK and don't want to compete against all pajeets on upwork, hence why I believe just self-promotion would be a better idea.

Also would adwork integration work with such a website?

What is the best way to migrate a large woocommerce store? I'm moving from siteground to a digital ocean droplet but all the typical migrate plugins don't work due to site being 4g+

Are you referring to mobile app development?

Is it possible to secure an API route with the built-in user auth in Laravel somehow? Or does securing API via AJAX calls only work with token/passport shit?

you can, just create a middleware and check if user is authenticated ( Auth::check(); ) before passing the request to the next middleware

Do you know of any tutorial page/video that can spoonfeed me this? Don't usually work with Laravel, trying to make a quick tweek.

using XMLHttpRequest has the same result, OPTIONS comes back 200 but no POST is made

stackoverflow.com/questions/32164695/using-laravel-auth-middleware

Just anything to do with web dev. I know that's software, but that's just what I was doing.

I don't know, when did you stop following the trends? Maybe Gatsby? React Suspense?

Gatsby is a good idea. Forgot about that. That's the React JAMstack thing if I remember right.

I have no idea what Gatsby actually is. Is it like Next.js?

All I remember from reading it is that it's for JAMstack and it requires React knowledge.

I wasn't aware of next.js. Thanks!

Is there an advantage of having images on the server instead of using an external image hosting service and link it in the src tag?

I think the latter one would save me a little bit of time.

got this working. needed to add
'Access-Control-Allow-Headers':'Content-Type'

to the response header for the OPTIONS request. was able to do this on the server side, not sure what he correct steps would be if i didnt have access to the server though

I wanted to tell you to add that but I thought you did.

>github.com/kamranahmedse/developer-roadmap
Is this a joke? It's just endless crap upon crap, a bit like a modern website.

Speaking in broad strokes, yes, kinda.
It should be seen as more of a list of options you can choose not really a mandatory path to go down though, you can be a fine web developer without half of those things anyway.

Half is already far too much fucking effort and memorization just to make webshit. Who would want a job in this crap?

nothing.more.comfy.than.webdev

Well it's a lot on the surface but over time it's really not that much.

You have to realise this is like a life long career and it might take you a year to get to the end of just the front end path at a very basic level, but once you've finished that you know everything there is and you get the ecosystem. From there you can pick the parts you like and learn more about whatever you enjoy the most.


It's like being a mechanic, on the surface you need to know every single car part and how it works, and what to do, obviously when someone just starts out they have no idea what to do.

That's what you'll get paid for, for knowing all those things that 99.9% of people have no idea even existed.

All of this shit is "obsolete" as soon as you learn it.

Not at all, unless the package literally doesn't work anymore.

If you try to be using the most modern tools all the time instead of just using what you like and what works, you're gonna have a bad time.

Don't fall for the memes and try to be "trendy" all the time, it's typical Jow Forums fashion to say stupid shit like "LMAO u shud use haskell br0 so 1337" even though PHP would be fine for the job

my god this reminds me of this start-up that asked me to implement this on the frontend when i was applying for an backend interview

i got it to work but man i hate frontend

once you really learn something it's not because you know how to turn an allen key it's you know why you had to use an allen key in the first place

yeah yet-another-framework your working on will have EOL at maybe 5 years if your lucky but the concepts will be useful forever

that one component that serializes jobs into SQS? once you learn that, now you know a good portion on how to have a distributed queueing system.

Can anyone explain to me what exactly Flexbox and Grid are and which one is better? Are they a natuve part of CSS that is supported by all browsers? How do they compare with using Bootstrap/Bulma?

flexbox works with pretty much all browsers, grid doesn't (but it's getting better), but it works with the modern popular browsers.

For any serious project, use flexbox to support everyone including weird mobile browsers.

Bootstrap/Bulma use flexbox under the hood and just give you an easy to work with "grid system", which removes the needs for css files but makes your HTML uglier.

People usually say grid is better for a "3d" layout and flex is better for a "2d" layout, because grid handles y axis better, but in reality it's unlikely you'll need a "3d" layout very often.

Is Grid meant to be a successor to Flexbox (with Flexbox being deprecated eventually) or are they just different functions for different situations (2D vs 3D)?

Both flexbox and grid are a native part of CSS that are supported by modern browsers. (Not all browsers, older versions don't support either, but flexbox is a bit better supported, see caniuse.com).

Bootstrap and Bulma are CSS frameworks. I've used Bootstrap but not Bulma, so sorry if my knowledge is incomplete. They both provide some base CSS classes that you can build on top of. Bulma is apparently built on top of flexbox, so I guess it only works properly in browsers that support it.

In general, CSS frameworks tend to deal with the structure of the page (position, margins, padding, etc.), and then you can implement the more-specific-to-your-site stuff yourself, essentially look and feel (colors, typography, borders, etc.)

So tl;dr flexbox is probably fine to use as long as you don't need to support IE, grid is a bit more iffy. And Bulma requires flexbox, so take that into consideration.

Just a quick question, in javascript, when i grab a TD element from a table by its id, how do you find out the number of the column it belongs to?
You know, if you have
ab
and i grab the second td, i need to know it's the second column

td elements have a cellIndex property.

nice, that is exactly what i wanted

>put some .focus() in onload event
>works on IE and chrome
>doesn't work in firefox
I don't understand how people can this fucking bullshit profession

The way I've seen others do it is to work in companies for a few years, make connections (clients, colleagues, and bosses) who will eventually offer you contract/freelance work, then word of mouth. Also work for friends and family cheap or free, to get more mouth words.

It's happening to me by accident, I'm booked out for paid side projects for ~6mo and working 40 hrs. I much prefer to work for someone else but that extra cash I can't say no to.

Also having a local accent helps a tonne.

I want to lick her feet

Just manually dump and restore the database using mysql-cli, sequel-pro, dbeaver, or phpmyadmin.

If you're changing urls (even for a temp staging url) use wp-cli to do a find and replace on the database

The best idea of making dynamic blog site with categorization?

I come here to try and be helpful and you give me this. Put some effort in Jimmy

jsbin.com/likamafufu/edit?js,output

I have multiple setTimeouts running at once and they all finish at different times so they are never in order. How do I write my code so that the next setTimeout only starts when the previous setTimeout ends? So it all runs in order and not all in one go.

She is a cartoon character and is not real.

Promises is the easiest way, then just chain .then( doSomething()) on after.

Simple answer, keep track of all the previous time steps so you can add the correct time to each timeout. See jsbin.com/rupajicuce/1/edit?js,output

Better but harder answer, what this guy said

You don't know that

Thanks dude. Damn right Promises are hard lol. I get them but was trying to work them into my code and wasn't able to do it. Guess I'm only 668.5 hacker and not 1337 for now.

it's pretty easy to understand and there's plenty of tutorials to learn from that explain promises, they're pretty fundamental to learn for async stuff too.

Convience me that laravel isn't the best php framework available right now.
protip: you simply can't.

Stop posting ryuko, she's mine

webdev makes me wanna kill myself. Unfortunately i'm stuck here since I'm not smart enough to do serious stuff.

Hello guys,

there is an extension for Chrome and Firefox named Speed dial 2 (pic related). It's a homepage with saved websites and pictures of them. I want to make something like that for myself but i have no idea how to get websites image. Is there any specific Chrome or Firefox API that gets website image and saves it or it's some kind of JS library?

Attached: speed dial 2.png (898x499, 722K)

I want to cum in her badly drawn feet.