I don't think there is a comprehensive library for that but you may want to check this out: https://github.com/GoogleChrome/voice-memos and see if you can borrow some things.
-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
I don't think there is a comprehensive library for that but you may want to check this out: https://github.com/GoogleChrome/voice-memos and see if you can borrow some things.
Thanks, not a bad place to start. I had come across RecordJS.
I didn't expect a response so quick hah, I was about to edit my post with a little more detail.
What I am trying to do is allow a user to record themselves talking, and then have the ability to add more to the recording or even use the scrubber to insert a new recording in the middle of the previous recording.
It's similar to the Voice Memo you linked to but with more features.
I am building this in React Native which gives me a few options but still haven't found anything that meets the criteria. It's looking like it's going to need to be custom.
I didn't expect a response so quick hah, I was about to edit my post with a little more detail.
What I am trying to do is allow a user to record themselves talking, and then have the ability to add more to the recording or even use the scrubber to insert a new recording in the middle of the previous recording.
It's similar to the Voice Memo you linked to but with more features.
I am building this in React Native which gives me a few options but still haven't found anything that meets the criteria. It's looking like it's going to need to be custom.
Also, MediaRecorder just hit Chrome Beta depending on what your release timeline looks like, it might make the saving part much easier: https://developers.google.com/web/updates/2016/01/mediarecorder.
PetriP-TNT
Member
Frustrated_me
Member
Hello WebDevGaf,
I'm new to all this and trying to pick up and learn as much as I can. I have a quick question with regards to JavaScript and Ajax content.
So using clipboard.js (enables copying to clipboard without flash) on my current test site I have the following code which works perfectly fine. What it does is look at the element ID and get the value, simple and to the point.
HTML:
Javascipt:
So as mentioned above, this works great. When I click I get the "Text to copy" on my clipboard. My problem is getting this code to function when Ajax content is loaded into the same page. From what I understand I need to re-triger the clipboard function but I can't seem to get that to work.
Can anyone shine some light for me? Would this even be possible?
Thanks.
I'm new to all this and trying to pick up and learn as much as I can. I have a quick question with regards to JavaScript and Ajax content.
So using clipboard.js (enables copying to clipboard without flash) on my current test site I have the following code which works perfectly fine. What it does is look at the element ID and get the value, simple and to the point.
HTML:
Code:
<a href="#"><i class="icon-link icon-1x fa-fw" id="d_clip_button_X" data-clipboard-text="Text to copy"></i></a>
Code:
<script type="text/javascript" src="/clipboard.min.js"></script>
<script type="text/javascript"> var client = new Clipboard( document.getElementById('d_clip_button_X') );</script>So as mentioned above, this works great. When I click I get the "Text to copy" on my clipboard. My problem is getting this code to function when Ajax content is loaded into the same page. From what I understand I need to re-triger the clipboard function but I can't seem to get that to work.
Can anyone shine some light for me? Would this even be possible?
Thanks.
PetriP-TNT
Member
Hello WebDevGaf,
I'm new to all this and trying to pick up and learn as much as I can. I have a quick question with regards to JavaScript and Ajax content.
So using clipboard.js (enables copying to clipboard without flash) on my current test site I have the following code which works perfectly fine. What it does is look at the element ID and get the value, simple and to the point.
HTML:
Javascipt:Code:<a href="#"><i class="icon-link icon-1x fa-fw" id="d_clip_button_X" data-clipboard-text="Text to copy"></i></a>
Code:<script type="text/javascript" src="/clipboard.min.js"></script> <script type="text/javascript"> var client = new Clipboard( document.getElementById('d_clip_button_X') );</script>
So as mentioned above, this works great. When I click I get the "Text to copy" on my clipboard. My problem is getting this code to function when Ajax content is loaded into the same page. From what I understand I need to re-triger the clipboard function but I can't seem to get that to work.
Can anyone shine some light for me? Would this even be possible?
Thanks.
I think that ClipboardJS uses event delegation so you can add just use classes instead of ID's and everything will work out of the box.
If you cannot use classes for whatever reason, you could try destroying the instance and re-initializing it.
(Semi pseudocode)
Code:
var clipboard = null;
clipboard = new Clipboard('#d_clip_button_X');
clipboard.destroy(); //clipboard is now null again
someAjaxCallThatGetsYourContent().done(function (content) {
document.innerHTML = content;
clipboard = new Clipboard('#d_clip_button_X');
});Can't help you with Angular, but Coffeescript, as much as I love it and I used it a lot in the past, I switched to ES6. I miss some of the syntax sugar coffee offers, but don't want to code without the enhancements ES6 introduces anymore.
How's ES6 compatibility with browsers nowadays? I want to get into it too if it works on a lot of platforms
Frustrated_me
Member
Thanks PetriP. I think I get the concept, you're destroying the function after use and then re-enabling it during the Ajax call. I would like to try this out on my test site, but before I do I now need to figure out what the Ajax call is. Looking at the developer tools I can see the ajax file get triggered when I press a button that retrieves the ajax content. Would the developer tools contain and display the call? I can see header and response data.
I'm reading this documentation to figure it out as my site uses the Ganrty foundation (Joomla) http://docs.gantry.org/gantry4/advanced/ajax-system with it's own built-in ajax system.
valkillmore
Member
This might not be the right place to ask, but I've asked for advice on GAF over the years many times and I've always found the most helpful people I could hope for.
I just bought a domain, and want to put some basic stuff up on it. Godaddy is offering around $6.99/mo (paid annually) for it's basic hosting. I"m wondering, if I registered the domain through them, do I then have to use them for hosting?
I'm Canadian for what its worth.
If I don't have to use them, what hosting companies do you recommend? I'd prefer to use one with a simple page builder until I can get a proper page designed. Any help is appreciated, and if this isn't the right place to ask, just point me in the right direction thread-wise. Did a search and this is the first one that popped up.
Cheers.
I just bought a domain, and want to put some basic stuff up on it. Godaddy is offering around $6.99/mo (paid annually) for it's basic hosting. I"m wondering, if I registered the domain through them, do I then have to use them for hosting?
I'm Canadian for what its worth.
If I don't have to use them, what hosting companies do you recommend? I'd prefer to use one with a simple page builder until I can get a proper page designed. Any help is appreciated, and if this isn't the right place to ask, just point me in the right direction thread-wise. Did a search and this is the first one that popped up.
Cheers.
Frustrated_me
Member
Valk,
You do not have to host with GoDaddy, in fact I strongly recommend you don't, they're horrible. Just use them for domain registration.
As for your other question, I've heard good things about stablehost.com
You do not have to host with GoDaddy, in fact I strongly recommend you don't, they're horrible. Just use them for domain registration.
As for your other question, I've heard good things about stablehost.com
The Albatross
Member
Valk, you don't have to use GoDaddy even if you buy your domain through them and I'd strongly recommend against using them.
If you're looking for a simple page builder that won't cost you anything, your best bet is to go with WordPress.com or SquareSpace. These are popular web content management systems that have a good amount of support for building functional websites.
If you're really fixed on the $7/year domain price, then that's fine, but I'd encourage you to use another domain registrar and spend a few bucks more... Hover.com is a great domain registrar with easy to use tools, a customer-first business model, and everything is up front... No silly tricks or dumb promotions, just simple domains with a user friendly interface, quick processing, and great customer service.
Their domains cost the standard domain price, $12, but they're usually running coupons for $10/year. You can google Hover.com coupon codes, last year it was "honest" this year I think they have a promo with Freakanomics and do "Freak" for $10/year.
If you're looking for a simple page builder that won't cost you anything, your best bet is to go with WordPress.com or SquareSpace. These are popular web content management systems that have a good amount of support for building functional websites.
If you're really fixed on the $7/year domain price, then that's fine, but I'd encourage you to use another domain registrar and spend a few bucks more... Hover.com is a great domain registrar with easy to use tools, a customer-first business model, and everything is up front... No silly tricks or dumb promotions, just simple domains with a user friendly interface, quick processing, and great customer service.
Their domains cost the standard domain price, $12, but they're usually running coupons for $10/year. You can google Hover.com coupon codes, last year it was "honest" this year I think they have a promo with Freakanomics and do "Freak" for $10/year.
AquaticSquirrel
Member
Hey guys I'm newish to CSS, HTML5 and Bootstrap but I seem to learning fairly quickly.
But I have an issue where when using a form text input field it seems to add additional vertical padding/margin to the parent element.
No matter what I seem to try I can't seem to remove this so I've been forced to adjust the height of the container to be larger to compensate.
Any ideas for how to remove this unwanted padding/margin? Anyone come across this before?
But I have an issue where when using a form text input field it seems to add additional vertical padding/margin to the parent element.
No matter what I seem to try I can't seem to remove this so I've been forced to adjust the height of the container to be larger to compensate.
Any ideas for how to remove this unwanted padding/margin? Anyone come across this before?
PetriP-TNT
Member
Seriously, fuck SCORM, fuck Experience API aka Tin Can API aka xAPI, fuck Mike Rustici and Rustici Software in particular.
I have worked with SCORM and other related crap for like 6 years now and it's only getting worse day by day
Can you post a fiddle (http://jsfiddle.net)? You might be missing an container element (or have one extra)
I have worked with SCORM and other related crap for like 6 years now and it's only getting worse day by day
Can you post a fiddle (http://jsfiddle.net)? You might be missing an container element (or have one extra)
Starphoenix
Member
Have you tried viewing the form in other browser's to make sure it's not your browser's default styling? If so you'll need to rager it a specific way.
valkillmore
Member
Thanks to both of you. I have already registered my domain, and based on the recommendation I'm going to have a close look at StableHost.com for hosting. Cheers!
AquaticSquirrel
Member
Sorry guys, I'm just in work so I'm not with my code. I'll try post later when I get home.
What could be an issue here is that I'm using Flask-Bootstrap and Flask-WTForms.
It seems there is a pre made macro for Jinja2 templates/Flask with Flask-Bootstrap that generates the WTF form elements.
It seems that this macro adds a label to the form but the label is just an empty string I think. Normally this appears above the input field itself so maybe the label element is adding additional padding?
Either way I'll look into it further when I get home.
What could be an issue here is that I'm using Flask-Bootstrap and Flask-WTForms.
It seems there is a pre made macro for Jinja2 templates/Flask with Flask-Bootstrap that generates the WTF form elements.
It seems that this macro adds a label to the form but the label is just an empty string I think. Normally this appears above the input field itself so maybe the label element is adding additional padding?
Either way I'll look into it further when I get home.
Question?
I am studying front end. I know hmtl, Css, and now going on to JavaScript. After that should I learn Angular.js or go to node.js to get some back end experience? I want to get a job as a front end but I wonder if knowing nodeJS would make me a better contender in job searching?
I am studying front end. I know hmtl, Css, and now going on to JavaScript. After that should I learn Angular.js or go to node.js to get some back end experience? I want to get a job as a front end but I wonder if knowing nodeJS would make me a better contender in job searching?
would anyone mind helping me with some code? I gotta database of foods and vitamins and want want the user to select from a dropdown list a vitamin and then they' see a list of foods that contains the vitamin . Thing is im new to back end and im learning php as i go basically.
PetriP-TNT
Member
Post the relevant bits here and I am sure that people will help. For the best efficiency, check out http://stackoverflow.com/help/mcve on how to post Minimal, Complete, and Verifiable examples.
Being an all rounder is certainly helpful, but not at the cost of being solid all across your focus. You're more likely to use something like Angular or React as a front-end dev than you are to be asked to help with the back end.
Try and get an understanding of the patterns and technologies that are used on the back-end, but only after you feel you've learnt enough front-end that you feel you could handle a good range of situations.
AquaticSquirrel
Member
So it seems that the blank label was causing some padding issues, plus I wasn't selecting the right element within the form from my css file.
It's all sorted out now!
It's all sorted out now!
WanderingWind
Mecklemore Is My Favorite Wrapper
God JavaScript is so boring. I want to poke out my own eyes. Why can't everything be as grokable as CSS?
And yet, JS is as fun as programming can be!
WanderingWind
Mecklemore Is My Favorite Wrapper
Ugh. Having to learn a vocabulary of methods is going to suck.
Post the relevant bits here and I am sure that people will help. For the best efficiency, check out http://stackoverflow.com/help/mcve on how to post Minimal, Complete, and Verifiable examples.
ok ill post the relevant bits. my cousin who's like an experience web developer was helping me a bit but some of the stuff he was doing I'm not sure i know how to actually finish.
index.php
Code:
<script>
$(function() {
var trans = $('.transbox');
var lower = $('.containerL');
$('.dropdown li').click(function(e) {
e.preventDefault();
var name = $(e.target).html();
$.get('/vitamins/data.php', { name: name }, function(data) {
console.log(data);
trans.html(data);
trans.show();
});
lower.hide();
console.log('clicked');
console.log(trans, lower);
});
});
</script>vitamins.php
Code:
<?php
class Vitamins {
protected $db;
public function __construct(PDO $db) {
$this->db = $db;
}
public function getAll()
{
return $this->db->query('SELECT * FROM vitamins');
}
public function getData($_GET['name']) {
$name = $db->quote($_GET['name']);
$sql = "
SELECT 'v'.'name', 'f'.'name', 'p'.'grams',
'p'.'percentage', 'i'.'path'
FROM 'vitamins' 'v' JOIN 'percentage' 'p' ON 'v'.'id' = 'p'.'vitamin_id'
JOIN 'food' 'f' ON 'f'.'id' = 'p'.'food_id'
JOIN 'images' 'i' ON 'i'.'id' = 'f'.'image_id'
WHERE 'v'.'name' = '". $name ."'
";
return $this->db->query($sql);
}
}so my cousin told me to make the query global in this file and like put it in a function and then call the function in data.php below
data.php
Code:
<?php
if(isset($_GET['name'])) {
require '../vitamins.php';
getData($data);
echo $data['
//markup
']
}so the issues im having is 1) did i even do that correctly and 2) how do i echo the results of the query to be used in the script back in index.php? I'm a bit lost here
Well,
MVC as a concept isn't that complicated. The tougher part is learning an actual framework implementing mvc. Many of them add tons of magic (convention over configuration) to get rid of all the boilerplate code you need otherwise.
Are you struggling with a particular framework or with the mvc architecture in general?
Just in general. I mean, with a few clicks, VS generates practically everything you need to insert/modify/delete in a database. It seems that everything is routed to its own "view," but what if I wanted to have one page/form that handles inserts and edits like I can easily do in web forms? Now its separated in two different views.
I guess I don't really know the best practices for all these models, views, view models, and controllers you need to create. For example, when should you make a new controller versus just keep putting actions in the same controller? It seems that there are so many files to account for with only a couple pages.
managed to fixed that crazy looking code i posted earlier. phew.
problem now is i got some phperrors. so i wanted my markup to print 3 columns of the data from the query on one row then when that's completed i wanted to break a line and print a new row of 3 columns until the end of the data. this is what i got
data.php
the error I'm getting her is a (T_Variable) error. the log says synthax error unexpected $i.
problem now is i got some phperrors. so i wanted my markup to print 3 columns of the data from the query on one row then when that's completed i wanted to break a line and print a new row of 3 columns until the end of the data. this is what i got
data.php
Code:
<?php
if(!isset($_GET['name'])) die('A vitamin name is required.');
require '../vitamins.php';
$pdo = new PDO('mysql:host=localhost;dbname=vitamins', 'root', 'root');
$table = new Vitamins($pdo);
$param = $_GET['name'];
$data = $table->getData($param);
?>
<div class="row">
<?php while($data): ?>
<?int $i = 0;
while($i < "3"){ ?>
<div class="column">
<h1><?php print $data['f.name']; ?></h1>
<p>serving</p>
<p><?php print $data['p.grams']; ?>G = <?php print $data['p.percentage']; ?>%</p>
</div>
$i++;
<?}?>
<br/>
<?php endWhile; ?>
</div>the error I'm getting her is a (T_Variable) error. the log says synthax error unexpected $i.
Zoe
Member
You can still have everything in one page if you want. It's merely a template.
In general, the controllers and views are driven by the directory structure of your site.
Easy, don't use the scaffolding. MVC is customizable, don't like how it does routing? Change it. Don't like how it does parameter binding? Change it.
Usually I separate controllers by pages because an endpoint might involve multiple entities, if a page needs to call an endpoint it's in the same controller. If you did a single page app you might break it by entity (customers, shops, etc). Some people like only one action per controller but I find that odd, it's really up to you and your context. Just don't throw more than a 4-5 of methods into one and keep those methods small (10 lines or less, call into a service layer for business logic)
AquaticSquirrel
Member
So I'm in the process of learning Javascript and AJAX.
At the moment JQuery seems to be a defacto standard that a lot of people are sick of and people are either moving back to vanilla JS or using new frameworks like React, Ember, Angular, Backbone, Meteor etc...
My plan for the moment is learn vanilla JS and get a good handle on it, especially with regards to AJAX, then once I'm comfortable move into something like React and just use a combo of both of those.
I'm also trying to stay away from PHP because again it seems one of those things that's "old hat" and putting the time into getting good at this and JQuery could be put to better use.
Am I making a mistake with this approach? What I mean is that given most web pages are still using legacy code built with PHP/JQuery if I want to be a web developer should I just bite the bullet and learn the basics in case I need to maintain old code?
At the moment JQuery seems to be a defacto standard that a lot of people are sick of and people are either moving back to vanilla JS or using new frameworks like React, Ember, Angular, Backbone, Meteor etc...
My plan for the moment is learn vanilla JS and get a good handle on it, especially with regards to AJAX, then once I'm comfortable move into something like React and just use a combo of both of those.
I'm also trying to stay away from PHP because again it seems one of those things that's "old hat" and putting the time into getting good at this and JQuery could be put to better use.
Am I making a mistake with this approach? What I mean is that given most web pages are still using legacy code built with PHP/JQuery if I want to be a web developer should I just bite the bullet and learn the basics in case I need to maintain old code?
Maybe but I still have the error.
I like Derek Banas https://youtu.be/dTVVa2gfht8 design patterns series, it helped me understand most design patterns.
Despite the fact that a lot of issues with javascript engines, jQuery was build for, are not a problem anymore, it's still really really useful. I would definitely look into that, you will stumble into jQuery code always and everywhere in the web.
But, vanilla js should always be the first thing you learn, as it's the base for everything else.
If you don't know what a prototype is and how "this" works, you'll get headaches later, that's for sure. (you'll get them anyway though, but not as frequent
)For PHP all I can say is: I don't like the syntax very much, so many remains from the past, but with a good framework (like Laravel) it's still a solid contender. It's easy to setup, cheap to host, and not that hard to learn. It does not suite any project, Java etc exist for a reason, but for my everyday work I don't want to deal with these monsters.
thanks man. I also just noticed that i put
Code:
<?int $i = 0;?>like a dumb-dumb. So i fixed that to be
Code:
<?php $i = 0; ?>unfortunately in fixing that it revealed another error ;___;
the console log says
Code:
[07-Feb-2016 18:41:58 Europe/Berlin] PHP Fatal error: Uncaught Error: Call to a member function quote() on unknown in /Applications/MAMP/htdocs/vitamins.php:16
Stack trace:
#0 /Applications/MAMP/htdocs/vitamins/data.php(11): Vitamins->getData('Selanium')
#1 {main}
thrown in /Applications/MAMP/htdocs/vitamins.php on line 16I guess the points of interests are here
vitmains.php
Code:
public function getData($name) {
$nameEscaped = $db->quote($name);
$sql = "SELECT 'v'.'name', 'f'.'name', 'p'.'grams', 'p'.'percentage', 'i'.'path' " .
"FROM 'vitamins' 'v' JOIN 'percentage' 'p' ON 'v'.'id' = 'p'.'vitamin_id' " .
"JOIN 'food' 'f' ON 'f'.'id' = 'p'.'food_id' " .
"JOIN 'images' 'i' ON 'i'.'id' = 'f'.'image_id' " .
"WHERE 'v'.'name' = {$nameEscaped}";
return $this->db->query($sql);
}
}data.php
Code:
<div class="row">
<?php while($data): ?>
<?php $i = 0;
while($i < 3){ ?>
<div class="column">
<h1><?php print $data['f.name']; ?></h1>
<p>serving</p>
<p><?php print $data['p.grams']; ?>G = <?php print $data['p.percentage']; ?>%</p>
</div>
<?$i++;
}?>
<br/>
<?php endWhile; ?>
</div>Change:
Code:
$nameEscaped = $db->quote($name);To:
Code:
$nameEscaped = $this->db->quote($name);AquaticSquirrel
Member
Despite the fact that a lot of issues with javascript engines, jQuery was build for, are not a problem anymore, it's still really really useful. I would definitely look into that, you will stumble into jQuery code always and everywhere in the web.
But, vanilla js should always be the first thing you learn, as it's the base for everything else.
If you don't know what a prototype is and how "this" works, you'll get headaches later, that's for sure. (you'll get them anyway though, but not as frequent
For PHP all I can say is: I don't like the syntax very much, so many remains from the past, but with a good framework (like Laravel) it's still a solid contender. It's easy to setup, cheap to host, and not that hard to learn. It does not suite any project, Java etc exist for a reason, but for my everyday work I don't want to deal with these monsters.
Thanks for the advice! Yeah I'm definitely concentrating on just JS for now. I hear about a ton of people who say they know JS but really only know JQuery so I want to avoid that. But I will look into it as I hear it does make some tasks a bit easier to handle and I will likely bump into it everywhere so can't really avoid it I suppose.
As for the server side stuff, I'm using Python for that which I have a reasonable grasp over with some MVC frameworks like Flask and Django. So I think the PHP stuff I can leave on the backburner for a bit but you are right that it seems lightweight and easy to learn so I think when the time comes that I need to use PHP I think I should be able to pick it up pretty quick.
It's important to understand jQuery and what it buys you, rather than just include it by default. jQuery is not a framework and makes no suggestion to how you structure your code, it's not really related to angular/react/backbone etc. It's a utility library. jQuery does a few things:
- queries DOM
- manipulates DOM Nodes
- Ajax
- Animation
- Event listeners
- Utility methods
- Provides older browser compatibility for all the above
It's heavy and often unnecessary depending on your target but it does have some good uses. It's really knowing when to use it.
Query DOM can be done in any browser since IE9 with document.querySelector and document.querySelectorAll. If you are using IE8 it's a crapshoot.
Manipulating DOM nodes is much more standardized post IE9 but before then there was a lot of inconsistency with how text nodes work that jQuery standardizes. Though, even now, DOM manipulation methods, while not hard to write, don't come out of the box and are confusing to read. Still, these are easily some of the most abused parts of jQuery because it's so easy to do.
Ajax is still probably the most useful utility it offers as it's pretty robust. This is mostly replaced by the fetch spec (which as of now is not implemented in all browsers) but you can use polyfills for it.
Animation has mostly been replaced by CSS animation, on the JS side there are web animations which are not completely implemented across the board but jQuery animation isn't powerful enough to replicate those anyway.
Event listeners are still a big one. Tracking events isn't simple in native javascript, especially the cleanup which jQuery provides out of the box. That and delegation are two things jQuery does pretty well still.
jQuery also provides a couple utility methods for iteration, promises etc. that have mostly been replaced by native variants on the modern web.
So if you're targeting IE8 (and I hope not) it's a no-brainer. IE9+ it makes sense to look at what you actually need. Does your framework provide some of that functionality? Does vanilla js? Can you polyfill to make older browsers work with newer specs? The incorrect answer is "I don't know how to do that without jQuery" and that's where a lot of people who abuse it have issues.
- queries DOM
- manipulates DOM Nodes
- Ajax
- Animation
- Event listeners
- Utility methods
- Provides older browser compatibility for all the above
It's heavy and often unnecessary depending on your target but it does have some good uses. It's really knowing when to use it.
Query DOM can be done in any browser since IE9 with document.querySelector and document.querySelectorAll. If you are using IE8 it's a crapshoot.
Manipulating DOM nodes is much more standardized post IE9 but before then there was a lot of inconsistency with how text nodes work that jQuery standardizes. Though, even now, DOM manipulation methods, while not hard to write, don't come out of the box and are confusing to read. Still, these are easily some of the most abused parts of jQuery because it's so easy to do.
Ajax is still probably the most useful utility it offers as it's pretty robust. This is mostly replaced by the fetch spec (which as of now is not implemented in all browsers) but you can use polyfills for it.
Animation has mostly been replaced by CSS animation, on the JS side there are web animations which are not completely implemented across the board but jQuery animation isn't powerful enough to replicate those anyway.
Event listeners are still a big one. Tracking events isn't simple in native javascript, especially the cleanup which jQuery provides out of the box. That and delegation are two things jQuery does pretty well still.
jQuery also provides a couple utility methods for iteration, promises etc. that have mostly been replaced by native variants on the modern web.
So if you're targeting IE8 (and I hope not) it's a no-brainer. IE9+ it makes sense to look at what you actually need. Does your framework provide some of that functionality? Does vanilla js? Can you polyfill to make older browsers work with newer specs? The incorrect answer is "I don't know how to do that without jQuery" and that's where a lot of people who abuse it have issues.
thanks man appreciate it.
And don't forget the zillions of widgets/ui thingies someone may request to include in your project, that will most likely use jQuery.
I for myself use jQuery for event delegation most of the time, as it's pretty good in it. There is Gator as an alternative, but I never tried it.
Ajax is fetch for me these days and I prefer the native Promise syntax. jQuery does it a bit different, if I'm not mistaken.
I would say: look into jQuery to understand the code you'll stumble upon. Otherwise
1. try to build it natively
2. search for a micro framework
3. use something like jQuery
I for myself use jQuery for event delegation most of the time, as it's pretty good in it. There is Gator as an alternative, but I never tried it.
Ajax is fetch for me these days and I prefer the native Promise syntax. jQuery does it a bit different, if I'm not mistaken.
I would say: look into jQuery to understand the code you'll stumble upon. Otherwise
1. try to build it natively
2. search for a micro framework
3. use something like jQuery
one last thing with my code. im so sorry to flood this page with my personal project but I'm in need.
I'm not getting any output from the query onto the client side html file and I'm not sure why. points of interests
index.php
data.php
The only thing that's going on client side is the div row container. I guess I should post the query function again too to be safe.
vitamins.php
I'm not getting any output from the query onto the client side html file and I'm not sure why. points of interests
index.php
Code:
<script>
$(function() {
var trans = $('.transbox');
var lower = $('.containerL');
$('.dropdown li').click(function(e) {
e.preventDefault();
var name = $(e.target).html();
$.get('./vitamins/data.php', { name: name }, function(data) {
console.log(data);
trans.html(data);
trans.show();
});
lower.hide();
console.log('clicked');
console.log(trans, lower);
});
});
</script>data.php
Code:
<div class="row">
<?php while($data): ?>
<?php $i = 0;
while($i < 3){ ?>
<div class="column">
<h1><?php print $data['name']; ?></h1>
<p>serving</p>
<p><?php print $data['grams']; ?>G = <?php print $data['percentage']; ?>%</p>
</div>
<?$i++;
}?>
<br/>
<?php endWhile; ?>
</div>The only thing that's going on client side is the div row container. I guess I should post the query function again too to be safe.
vitamins.php
Code:
<?php
class Vitamins {
protected $db;
public function __construct(PDO $db) {
$this->db = $db;
}
public function getAll()
{
return $this->db->query('SELECT * FROM vitamins');
}
public function getData($name) {
$nameEscaped = $this->db->quote($name);
$sql = "SELECT 'v'.'name', 'f'.'name', 'p'.'grams', 'p'.'percentage', 'i'.'path' " .
"FROM 'vitamins' 'v' JOIN 'percentage' 'p' ON 'v'.'id' = 'p'.'vitamin_id' " .
"JOIN 'food' 'f' ON 'f'.'id' = 'p'.'food_id' " .
"JOIN 'images' 'i' ON 'i'.'id' = 'f'.'image_id' " .
"WHERE 'v'.'name' = {$nameEscaped}";
return $this->db->query($sql);
}
}If you become pretty good with vanilla JavaScript, then jQuery shouldn't be to bad to pick up fast that you might as well. It is still used quite a bit. I would at least read the API or watch some video series on it to know the basics and what its used for.
Is anything actually getting logged in the console from your JavaScript commands?