Σειρά meta tag, css, scripts

[sinikos]

Καλησπέρα και χρόνια πολλά. Υπάρχει κάποια οδηγία (π.χ. πως λέμε οτι το custom css πρέπει να πηγαίνει κάτω από τα άλλα) για το πως πρέπει να μπαίνουν τα tags στο header και στο footer? Είχα για παράδειγμα το jquery.js στο footer και μερικά πράγματα δεν δουλεύαν, όταν το έβαλα στο header, δούλεψαν, αλλά δεν δουλεύουν άλλα πράγματα. Υπάρχει κάποια σωστή σειρά πως πρέπει να μπαίνουν?

Αυτό που κάνω μέχρι στιγμής είναι

πάνω πάνω τα metatags του site (title, favicon κλπ)

μετά τα css (bootstrap.css, custom.css κλπ)

και μετά όλα τα jscipts (jquery, droppie, dropzone κλπ)

 

Βασικά μέχρι στιγμής είναι έτσι. Τα βλέπετε σωστά? (το πρόβλημα που έχω τώρα είναι οτι όταν πάω να cropάρω μια εικόνα, ενώ παλιά δούλευε το crop & upload και την αποθήκευε, τωρα δεν δουλεύει : ( )

Στο Header μου

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<title>My site</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha684-mzrmE5qonljUremFsq4355B46JvROS7bZs3IO2EmfFDwed5uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">   
<link rel="stylesheet" href="assets/css/styles.css"> 
<link rel="stylesheet" href="assets/css/dragndrop.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>
<link rel="stylesheet" href="assets/css/dropzone.css">
<link rel="stylesheet" href="assets/css/croppie.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<link rel="stylesheet"  id="style_switch" href="assets/css/styles2.css">
<script src="assets/js/croppie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>   

Στο Footer

<script src="assets/js/popper.min.js"></script>
<script src="assets/js/tether.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.touch-swipe.min.js"></script>
<script src="assets/js/jarallax.min.js"></script>
<script src="assets/js/smooth-scroll.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/formoid.min.js"></script>

Τα βλέπετε σωστά?

 

Εντωμεταξι μου πετάει πολλά σφάλματα η κονσόλα οτι δεν βρίσκει τα αρχεία, ενώ σχεδόν όλα τα αρχεία είναι self hosted

Επεξ/σία 27 Απριλίου 2019 από sinikos

[rafinos]

Εμένα μια χαρά σωστά μου φαίνονται... αλλά πάρα πολλά αρχεία! Το Facebook σήκωσες;

Αρχικά τσέκαρε αν είναι σωστά τα paths γιατί μάλλον κάτι τέτοιο φταίει. Η σελίδα από την οποία καλείς τα js files είναι στον parent folder;

Δηλαδή είναι στον ίδιο φάκελο με τον φάκελο assets;

Αλλά τώρα είδα ότι έχεις θέμα και με το cdn.

Επεξ/σία 27 Απριλίου 2019 από rafinos

[XPHSTOS_]

Η σειρά που αναφέρεις παίζει ρόλο στα εξαρτώμενα αρχεία.
πχ. Για να παίξει το "α" js πρέπει να έχει φορτωθεί το "b" js, αντίστοιχα και για το CSS, θέλεις το custom να είναι τελευταίο για να κάνει override τα υπόλοιπα.
Στα υπόλοιπα meta tags δεν παίζει κανένα ρόλο η σειρά, αρκεί να είναι στο head.

Παρατηρώ ότι φορτώνεις πολύ πράμα από CDN, καλύτερα θα ήταν να τα κατεβάσεις τα αρχεία αυτά και να τα σερβίρεις από τον server σου.
Για να αποφύγεις προβλήματα όπως αυτά που δείχνεις επάνω και να είσαι σίγουρος ότι θα δουλεύει πάντα η εφαρμογή σου.

Αν για παράδειγμα τραβάς το latest version από το CDN τότε υπάρχει περίπτωση να βγει ένα update και να σπάσει όλα τα υπόλοιπα.
Ενώ αν τα σερβίρεις ο ίδιος είσαι σίγουρος ότι οι συγκεκριμένες version των βιβλιοθηκών που σερβίρεις παίζουν καλά μεταξύ τους.

[sinikos]

Καλημέρα. Ευχαριστώ για τις απαντήσεις σας. Θα κατεβάσω τοπικά τα frameworks.

Κάτι τελευταίο, που με έχει σκάσει 4 μέρες τώρα,  για να μην ανοίγω νέο νήμα. Χρησιμοποιώ codeigniter 3.x και έχω ένα πρόβλημα που νομίζω δεν το είχα. Έχω φτιάξει μία φόρμα που ανεβάζω αρχεία στο site  με ajax. Όταν επιλέγω εικόνα .png,  ανεβαίνει μια χαρά, όταν επιλέγω .jpg  παίρνω σαν απάντηση "The filetype you are attempting to upload is not allowed".

μεταξύ άλλων ο κωδικάς μου, στο κομμάτι του upload, ειναι:

               $imageName1 = $user_id;
               $imageName2 = mt_rand(1000,9999);
               $imageName3 = time() . '.jpg';
               $imageName = $imageName1."-".$imageName2.$imageName3;
                $config['file_name'] = $imageName;
                $config['upload_path'] = './assets/images/';  
                $config['allowed_types'] = 'jpg|jpeg|png|gif';  
                $this->load->library('upload', $config);  
                if(!$this->upload->do_upload('image_avatar'))  
                {  
                     echo $this->upload->display_errors();  
                }  else  {              
                     $data = $this->upload->data(); 

                     $config['image_library'] = 'gd2';  
                     $config['source_image'] = './assets/images/'.$imageName;  
                     $config['maintain_ratio'] = TRUE;  
                     $config['width'] = 1280;  
                     $config['height'] = 720;  
                     $config['new_image'] = './assets/images/'.$imageName;  
                     $this->load->library('image_lib', $config);  
                     $this->image_lib->resize();  
                     $base_url = base_url();


				}

Όταν ανεβάζω png δουλεύει μια χαρά.

Είδα και εδώ, αλλά δεν έβγαλα άκρη.

https://stackoverflow.com/questions/9815208/codeigniter-the-filetype-you-are-attempting-to-upload-is-not-allowed 

και δοκίμασα και αυτό που λέει ο τύπος εδώ

https://stackoverflow.com/a/10850763 

και παίρνω σαν απάντηση "string(9) "image/png"", ενώ ανεβάζω .jpg

Επίσης έχει πρόβλημα σε όλους τους browser και όχι μόνο σε ff που λεει αυτός.

Επεξ/σία 27 Απριλίου 2019 από sinikos

[παπι]

Μπορεις να παιξεις με προγραμμα που ενωνει τα assets. Πχ εδω εχω jquery, bs, popper και custom script ολα μεσα στο app.js. Τα script τα βαζεις οταν φορτωσει το dom δηλαδη πριν κλεισει το body ή στο head με defer attribute

[sinikos]

2 ώρες πριν, παπι είπε

Μπορεις να παιξεις με προγραμμα που ενωνει τα assets. Πχ εδω εχω jquery, bs, popper και custom script ολα μεσα στο app.js. Τα script τα βαζεις οταν φορτωσει το dom δηλαδη πριν κλεισει το body ή στο head με defer attribute

Ωραια θα κατεβασω τοπικα τα σκριπτ, θα τα βαλω ολα μαζι, θα τα κανω και minified και κομπλε. Καμια ιδεα στο προβλημα μου με την εικονα εχετε; Εχω διαβασει ολο το. Stackoverflow και δεν βγαζω ακρη.

[k33theod]

Επίσης το tag script έχει τις ιδιότητες async και defer που μπορεί να βοήθησουν στο πρόβλημα το τι ακριβώς κάνουν είναι εδώ.

https://www.w3.org/TR/2017/REC-html52-20171214/semantics-scripting.html#the-script-element

For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.

[killer76]

Και μια και πιασαμε την κουβεντα για js, να πω και εγω ενα περιεργο που δεν καταλαβαινω. Γιατι ενα δικο μου script μεσα στην html δουλευει κανονικα η λειτουργια πχ σε ενα input field εχω oninput”myscript()” που καλει το script, ενω αν βαλω το κωδικα του script σε ξεχωριστο .js και το φορτωσω σαν external δεν το δουλευει. Και αυτη τη στιγμη εχω γεμισει μια σελιδα html με εναν αχταρμα js 

[sinikos]

8 ώρες πριν, παπι είπε

Μπορεις να παιξεις με προγραμμα που ενωνει τα assets. Πχ εδω εχω jquery, bs, popper και custom script ολα μεσα στο app.js. Τα script τα βαζεις οταν φορτωσει το dom δηλαδη πριν κλεισει το body ή στο head με defer attribute

 Ρε παπί. Αν έχω πχ

<script src="script1.js"></script>

<script src="script2.js"></script>

και το script1 εχει μεσα τον κώδικα μπλα μπλα μπλα και το script2 μπλου μπλου μπλου και φτιάξω ένα script3.js που έχει το κώδικα μπλα μπλα μπλα μπλου μπλου μπλου 

οπότε αντί για

<script src="script1.js"></script>

<script src="script2.js"></script>

έχω

<script src="script3.js"></script>

 Δεν θα έπρεπε να δουλεύει? Αυτό δεν λές?

Γιατί εμένα τώρα δεν δουλεύει

 

 

 

Το ιδιο πηγα να ενώσω και τα  css, αλλά και εκει δεν δουλευαν σωστα

Επεξ/σία 27 Απριλίου 2019 από sinikos

[παπι]

Τα ενωνεις με εργαλεια οχι copy paste, πχ τα εγω τα κανω με laravel mix. Απο τα παραπανω που βλεπω, μονο για το popper ειμαι σιγουρος οτι πρεπει να μπει πριν το bs.