DataStream
Member
The project was really just getting started and we liked the way Vue has been progressing.
-
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
The project was really just getting started and we liked the way Vue has been progressing.
No, see, I actually love linters, and I've spent an absurd amount of time configuring ESLint to my maximum pleasure.
just to find out most of my style preferences are the complete opposite of what my new job use :'(
No, see, I actually love linters, and I've spent an absurd amount of time configuring ESLint to my maximum pleasure.It's just that... at some point you just have to ask yourself if the 120 different rules regarding bracket positioning and spacing are actually worth it.just to find out most of my style preferences are the complete opposite of what my new job use :'(
For me the most important thing is, that everybody uses the same code style in a project. In the end I'll autoformat it anyway. I work a lot in other teams and boy there is so much chaos, I have no idea how teams with more than 2 developers can work like that.
But rip me if I can't add tons of whitespace in my CSS files anymore because of a linter
I'm having a bit of a weird issue.
Basically, what this designed to do is to:
I'm not sure why I'm not able to pass in a string through the onclick function to the function and set the innerHTML to the string.
Code:
<script>
function setBNP(operationalEntity){
var countryImg = document.getElementById("atmbanklogo");
var operEn = document.getElementById("operational-entity");
countryImg.src = "/ca/en/images/14/05/bnp.png";
operEn.innerHTML(operationalEntity);
}
</script>
<a href="#wheretobank" onclick="setBNP('BNP Paribas El Djazair'); return false;">Algeria</a>
<div id="wheretobank">
<img id="atmbanklogo" src="/common/banners/logo.png" /><br/><br/>
<p id="operational-entity"></p>
</div>Basically, what this designed to do is to:
- set the img src to the path in the function onclick- this part actually works
- set the <p> to the innerHTML to the string passed in through the onclick function- this doesn't work.
I'm not sure why I'm not able to pass in a string through the onclick function to the function and set the innerHTML to the string.
wtf is wrong with me, of course- thanks.
Technically you want textContent instead since you aren't using HTML.
HarryHengst
Member
This is an incredibly impressive codepen showing image transition using three.js: http://codepen.io/zadvorsky/pen/PNXbGo/
Tathanen
Get Inside Her!
https://www.kickstarter.com/projects/232193852/font-awesome-5
Couple more days to get the pro license for a measley 20 bux.
Couple more days to get the pro license for a measley 20 bux.
Why would I as a developer pay for the icons the client wants.
20$ is a joke for all the icons of course, but I don't know for what I would need them for personally. Do you guys build your own products?
The Albatross
Member
Thread is for development and design, so presumably, yes some people may design in here for either their own products or others'.
DataStream
Member
Big company legal team feels otherwise
Sucks
PetriP-TNT
Member
Lister
Banned
Son of a bitch!
The rollecoaster set of contradicting emotions when you figure out an issue is like taking a drug that starts off bad and ends in Nirvana.
Why did I forget to set Reference Loop handling to ignore in my JSON serializer? I still don't know, but it took me the weekend to figure out that was the issue. I feel so good, and so bad at the same time.
The rollecoaster set of contradicting emotions when you figure out an issue is like taking a drug that starts off bad and ends in Nirvana.
Why did I forget to set Reference Loop handling to ignore in my JSON serializer? I still don't know, but it took me the weekend to figure out that was the issue. I feel so good, and so bad at the same time.
So... How's this thread feeling about the new MBP? I know it's been the go-to machine for a lot of front-end dev or UI devs (myself included), but...is it still? I feel like I've been holding out for this refresh but I see more reasons to look elsewhere than I do to stick around, although the comfort of having the native terminal apps and photoshop running alongside one another never really fades.
I feel 2-in-1s are really where it's at. If you aren't checking touch+pointer machines you almost certainly have a lot of bugs on them, plus native touch debugging is just much nicer than pointer emulation with a mouse.
First of all, I'm pretty happy with it as I have no interest in upgrading my late 2014 15" Pro
anyway
- I think that TouchBar is a gimmick and they should just have went with a touchscreen instead.
I never look at my keyboard, It will be pretty much useless for me. - I don't need a lighter and thinner 15" Macbook, especially one with a shitty keyboard like this
- I don't mind the USB C ports, changing standards is always painful, BUT I'll miss MagSafe, the SD Card Reader and the HDMI port
I really hope they'll add a version with normal function keys in the future and improve the keyboard, because that keyboard, if it's more or less the same as the one found in the 12" Macbook, is a no go for me.
Aztechnology
Member
Ok, so... I was asked in an assignment for class that I need to list the type of tags used for certain functions in a list. The problem is, I can't remember how to write the code to display the html tags without it using them. How can I show the <nav></nav> tag for instance in my code to the end user without using the tag.
My code for example is supposed to look like
<ul>
<li> <!-- <div></div> would go here for instance--> </li>
</ul>
My code for example is supposed to look like
<ul>
<li> <!-- <div></div> would go here for instance--> </li>
</ul>
PetriP-TNT
Member
Escape the greater than (>
and less than (< symbols and wrap them inside <pre> for pretty formatting
Code:
<ul>
<li> <div></div></li>
</ul>There's also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp, but it's deprecated.
Aztechnology
Member
Escape the greater than (>
Code:<ul> <li> <div></div></li> </ul>
There's also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp, but it's deprecated.
Awesome, I had figured out the special chars, but not the <pre> tag before you responded, I saw some info about using htmlentities() like so. Is this a better usage than special chars?
echo '<pre>';
echo htmlspecialchars($YOUR_HTML);
echo '</pre>';
PetriP-TNT
Member
It's (somewhat) the PHP equivalent of escaping the characters yourself. However, if you don't use PHP you can also do the same thing with JavaScript: http://stackoverflow.com/questions/784586/convert-special-characters-to-html-in-javascript
OminoMichelin
Member
Anyone know a good, comprehensive tutorial for making plug-ins in wordpress? I have an idea for my company's site, but I think I need to make what I need on my own.
It's about gathering my clients' needs and return a report. Not hard in theory but I want to learn how to do it without messing everything up.
It's about gathering my clients' needs and return a report. Not hard in theory but I want to learn how to do it without messing everything up.
So, setting up angular 2 in vs2015 such that getting breakpoints to work involves some transcoding via gulp etc. I have this working.
Does VS Code support breaking/stepping through typescript with any less effort?
Could I use VS Code to write asp net core services or should I just stick to vs2015 for that?
Does VS Code support breaking/stepping through typescript with any less effort?
Could I use VS Code to write asp net core services or should I just stick to vs2015 for that?
The Albatross
Member
There isn't a trick to it. If you have the code figured out, you create a folder in wp-content/plugins/ with any name, and then within that folder, create a file with the same name as the folder with the .php extension. But your code in that file. At the top of the plugin in a comment block, have the line "Plugin Name: Your Plugin"
Voila. That will now appear as a plugin that you can activate and deactivate to apply the code.
Wordpress comes with a sample blank plugin called "Hello Dolly" which is in the wp-content/plugins/ directory under hello-dolly.php. You can copy that and start your own.
alternatively, you can also go to your theme directory, open the functions.php file, and add your code there. That's effectively the same as adding a plugin, you just dont' have the ability to activate and deactivate the plugin in the UI.
So I've got a Drupal 7 problem that I've been banging my head against for a while now. I've got a module for a subscription system, it allows users to purchase a membership but right now it's only can set the expiration date based on the current date. I need it to be able to add on to the current subscription if there is one.
I have a general idea of how to do it I'm just not familiar enough with Drupal to know specifically how to do it. I've got a table in the database called role_expire that stores the user id (as uid), the role id (as rid) and the expiration date (as expiry_timestamp). I need a way to get that expiration field so I can add the interval to it instead of the current date if there is an expiration date already.
This is the code I have already for setting the expiration date:
$date = format_date(time(), 'custom', 'Y-m-d');
$expire_date = strtotime('' . $date . ' + ' . $duration_interval . ' ' . $duration_period . '');
role_expire_write_record($user->uid, $role_id, $expire_date);
Any help would be greatly appreciated.
I have a general idea of how to do it I'm just not familiar enough with Drupal to know specifically how to do it. I've got a table in the database called role_expire that stores the user id (as uid), the role id (as rid) and the expiration date (as expiry_timestamp). I need a way to get that expiration field so I can add the interval to it instead of the current date if there is an expiration date already.
This is the code I have already for setting the expiration date:
$date = format_date(time(), 'custom', 'Y-m-d');
$expire_date = strtotime('' . $date . ' + ' . $duration_interval . ' ' . $duration_period . '');
role_expire_write_record($user->uid, $role_id, $expire_date);
Any help would be greatly appreciated.
OminoMichelin
Member
I'm having trouble implementint smooth anchor scrolling on my site. I'm using the latest wordpress and the twentysixteen theme with siteOrigin.
The anchoring itself works, and I have a plugin that scrolls to top smoothly; when it comes to smooth other links though, nothing seems to work. I tried the most popular plugins for this (easy smooth scroll links and jquery smooth scroll), then I tried adding the code as a script (which I'm still not 100% confident about how it works).
Here's the code in my functions.php:
this is the script:
What am I doing wrong?
The anchoring itself works, and I have a plugin that scrolls to top smoothly; when it comes to smooth other links though, nothing seems to work. I tried the most popular plugins for this (easy smooth scroll links and jquery smooth scroll), then I tried adding the code as a script (which I'm still not 100% confident about how it works).
Here's the code in my functions.php:
Code:
<?php
function theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
/* Add your own functions below this line.
======================================== */
function wpb_adding_scripts() {
wp_register_script('smoothanchor', plugins_url('smoothanchor.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('smoothanchor');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
wp_enqueue_script( 'smoothanchor', get_template_directory_uri() . '/js/smoothanchor.js', array( 'jquery' ), '', true );
Code:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});The Albatross
Member
WordPress runs jQuery in a no-conflict mode. Basically, it doesn't associate $ as jQuery, so you have to prepend your jQuery functions with:
Sorry for the bad spacing.
Basically you're wrapping your jquery with a self-executing anonymous function:
Alternatively, you could instead replace every $ with jQuery in your code as well, but typically wrapping the whole thing in that function is easier.
Beyond that though this looks a little redundant or erroneous:
In the top function, you're pointing to a plugins_url and looking for smoothanchor.js, but then in the wp_enqueue_Script at the bottom, you're pointing to your theme directory, then the js folder, and then smoothanchor.js.
I wonder if these are conflicting with one another. If you know where smoothanchor.js is and it's in your theme folder, then all you should need to do is the bottom wp_enqueue_script() function, not the top one. Enqueue scripts is WordPress' way of bringing a script into the template. This is definitely the preferred way, but you could also try removing it from functions.php and then calling your script the old fashioned way in the header.php file in your theme directory... Using <script src... />
Enqueuing your script as you have it in functions.php is the best way. I just wonder if that wpb_adding_scripts() function is mucking things up. Seems redundant to me.
Code:
[B](function($) {[/B]
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
[B]})( jQuery );[/B]Sorry for the bad spacing.
Basically you're wrapping your jquery with a self-executing anonymous function:
Code:
(function($) {
})( jQuery );Alternatively, you could instead replace every $ with jQuery in your code as well, but typically wrapping the whole thing in that function is easier.
Beyond that though this looks a little redundant or erroneous:
Code:
function wpb_adding_scripts() {
wp_register_script('smoothanchor', plugins_url('smoothanchor.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('smoothanchor');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
wp_enqueue_script( 'smoothanchor', get_template_directory_uri() . '/js/smoothanchor.js', array( 'jquery' ), '', true );In the top function, you're pointing to a plugins_url and looking for smoothanchor.js, but then in the wp_enqueue_Script at the bottom, you're pointing to your theme directory, then the js folder, and then smoothanchor.js.
I wonder if these are conflicting with one another. If you know where smoothanchor.js is and it's in your theme folder, then all you should need to do is the bottom wp_enqueue_script() function, not the top one. Enqueue scripts is WordPress' way of bringing a script into the template. This is definitely the preferred way, but you could also try removing it from functions.php and then calling your script the old fashioned way in the header.php file in your theme directory... Using <script src... />
Enqueuing your script as you have it in functions.php is the best way. I just wonder if that wpb_adding_scripts() function is mucking things up. Seems redundant to me.
OminoMichelin
Member
Thank you for the insights, I tried just wrapping the script, modifying functions.php like you said, and using <script> in the header... nothing works.
I'm positive now that there must be some kind of osbcure conflict somewhere.
runningjoke
Member
-Did you load jquery twice, or even two different versions?
-Is it really the body you need to scroll on?
-Can you add console.log('hi') in the click function, so you can see if the function even fires at all?
OminoMichelin
Member
-I'm not sure I know what that means :/
-Pretty sure, yeah.
-I guess that's the first thing I should have done: look at the console. Not only the function doesn't start, I also get this error:
Code:
Uncaught SyntaxError: Unexpected token <Not sure what this means :/ sorry, again, I'm pretty new at this.
PetriP-TNT
Member
It means that your webserver is fetching a resource (such as an JavaScript file or PHP file) but failing to find it thus returning an HTML page instead (such as an error page, or index.php as it commonly occurs on Apache servers) which the browser tries to parse.
Go to your network tab in developer tools (usually F12, or CMD+J, or right click and select inspect page) and see the file that fails to load correctly.
OminoMichelin
Member
Turns out, I left a script tag in the footer.
I tried reinstalling the script, enqueued it in functions.php (like The Albatross suggested) and I can see the script tag on the page, but it doesn't do anything :/
The Albatross
Member
Pm me a link to your site I'll take a look and see if we can figure it out on the front end
Finally finished my company's website and installed a ServiceWorker for offline viewing. It only works half the time though and seems to fail fetching the assets way too often. Any idea what's going on?
The entire website is only 10.7MB so it shouldn't be the internet causing problem for downloading such a large site.
EDIT - Totally different question. My company is going to start a project and I'm in charge of the entire front-end stack. Any way to go about looking at the best options? I'm just leaning towards using Angular 2 for it since I'm not entirely sure how other technologies stack up to each other. The backend seems to be going MySQL and CakePHP
The entire website is only 10.7MB so it shouldn't be the internet causing problem for downloading such a large site.
EDIT - Totally different question. My company is going to start a project and I'm in charge of the entire front-end stack. Any way to go about looking at the best options? I'm just leaning towards using Angular 2 for it since I'm not entirely sure how other technologies stack up to each other. The backend seems to be going MySQL and CakePHP
Hard to say without seeing code. Generally this is related to lifetime issues, either the service worker was active for too long or you stored state somewhere volatile and so when the service worker dies it takes all that with it.
runningjoke
Member
I've looked at Angular 2 and it seems pretty great. It did lose me a bit when the docs started using RxJS like it's nothing. That stuff seems powerful, but really hard to learn.
I'll keep using our React stack for the next project at my company, mostly because me and my colleagues are already familiar with it. Maybe I'll suggest we start using Typescript
The Albatross
Member
So, a friend of mine is launching a weblog and asked my help to convert his design to wordpress.
I'm stuck. I have no idea how to do the 4 column new entries/post thing
Any help will be really appreciated.
This wouldn't be too bad from a WordPress perspective. Styling it will take some work. But from a WP Perspective, you could do that 4 column blog layout with something like what's below:
Let's say you're starting from a starter theme (like _underscores.me) or some other theme framework (like FoundationPress), you'd want to start with your index.php file.
The index.php file, by default, is going to be your blog index landing page. This is what WP uses to loop through all of your posts by default, out of the box starter theme.
Within that index.php file you're going to find an if statement that will say "If you have posts... then do this..." and within that if statment is going to be a while statement, "while there are posts, for each post, do this..."
It will look similar to this:
Code:
while ( have_posts() ) : the_post();This is the most essential part of WordPress, called "The Loop," and this is effectively what loops through every piece of content on your site.
Within "the loop" you'd create your HTML for a single element. So, let's say you're using bootstrap, a popular front-end responsive framework, within the loop, you could setup each item like this:
Code:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="blog-item">
<p><?php the_post_thumbnail(); // this gets your featured image and makes it a thumbnail ?></p>
<h3><a href="<?php the_permalink(); // returns the link to your post ?>"><?php the_title(); // this prints out the title to your post ?></a></h3>
<p><?php the_excerpt(): // this returns a post excerpt for each post, or the first ~180 characters of the post ?></p>
</div>
</div>This is a very basic overview of three elements, and this won't look like what you have in your mock, but it's the basic structure. THe little "Class 2 Provincial" thing, you could do by using tags or categories. So a post could have a category of Class 2 Provincial, and then you could use <?php the_category(); ?> and style it to be placed over your featured image/thumbnail.
THis is just a basic structure to help you get started, it's not a full guide or anything like that, but it'll help you look up some of those build in WordPress functions to start constructing your template. Each one of those functions has attributes and options that you can use with it, so google them and go to the WordPress codex to read about how each function works.
Aztechnology
Member
We're working on tables and I'm having trouble figuring out why my column will not align like my one below. I'd appreciate it if someone could steer me in the right direction.
My current page
What it's supposed to look like
ignore the padding and such, not done styling yet.
Code here (It's not a Quiz, every week we either get a quiz or assignment, up to him. This week is an assignment, file submission name is just Quiz 8)
HTML
http://pastebin.com/bVxKbnLY
CSS
http://pastebin.com/aWcDg5GF
My current page
What it's supposed to look like
ignore the padding and such, not done styling yet.
Code here (It's not a Quiz, every week we either get a quiz or assignment, up to him. This week is an assignment, file submission name is just Quiz 8)
HTML
http://pastebin.com/bVxKbnLY
CSS
http://pastebin.com/aWcDg5GF
Tathanen
Get Inside Her!
Colspan on your second table header, but not on your first.