If you have developed modern web applications in Angular, you have inevitably run into a situation in which you need to share data among components (from parent to child, child to parent, child to grandparent, or *gasp* sibling to sibling).
In this article, originally posted on Medium, we’ll create a basic shopping cart application to explore best practices for sharing data and business logic between components using Services powered by RxJS Observables and BehaviorSubjects.
https://vidalquevedo.medium.com/how-to-share-data-between-components-in-angular-a-shopping-cart-example-b86ce8254965
Category: Uncategorized
This fall I just enrolled back to complete my PhD at the School of Journalism and Mass Communications (SJMC) at the University of Wisconsin-Madison. As part of my activities, I’ve been attending the sessions of the Social Media and Democracy research group at SJMC, a great collaborative effort to further research in Social Media and how it’s used in political communications.
As part of a series of upcoming research projects on a HUGE Twitter dataset collected SMADÂ during the US 2012 presidential election, we’ve been brushing up on Python, Hadoop and MapReduce. I’m very excited about this opportunity, as big data analysis seems to be coming of age and gaining traction on in several areas of communication research.
Getting started with Hadoop and MapReduce
As part of our training, Alex Hanna, a sociology PhD student at UW-Madison, put together an excellent series of workshops on Twitter (or, as he’s aptly named them, “Tworkshops“) to get the whole SMAD team started in the art of big data analysis. It’s an excellent reference for beginners, so if you are interested in analyzing Twitter data, this is definitely for you:
- Lesson 1: Twitter API and an Introduction to the Terminal
- Lesson 2: More Terminal and your first Python script
- Lesson 3: Basic Python
- Lesson 4: Python Modules and I/O
- Lesson 5: Hadoop and MapReduce
- Lesson 6: Basic sentiment analysis
- Lesson 7: Mention network analysis
Thanks to Alex for all his time and effort. This is all incredibly cool, and I’m looking forward to continue exploring our dataset and learning more about Hadoop and MapReduce!
Not much to say here other than the guys at Designwoop.com put together this GREAT source for online (paid and free) testing tools for responsive web design. Check it out:
http://designwoop.com/2012/04/tools-for-testing-responsive-web-design/
On April 16th, Nick Weaver (@nickweaver) and I gave a presentation at the Madison Web Design & Dev Meetup titled “Responsive Web Design:Â How the mobile web has changed the way we think and work.” We were pleased to bring such a cool topic to this meetup led by Ben Siegel, Principal at VersaStudio, LLC.
The presentation was an introduction to Responsive Web Design (RWD), a new approach to web development brought forward and popularized by Ethan Marcotte. We covered the benefits and challenges of RWD and the pros and cons of native vs web-based applications for mobile.
Below is a link to the presentation’s slideshow. Enjoy!
We have all been there: for some reason, you really need to display a list of posts within a page in WordPress. And the list needs to be paginated, of course…
Fortunately, there is a way to do it. The WordPress Codex Page reference has a nice (though pretty much buried) example of a page template to get you started:
How to display posts within a page:
http://codex.wordpress.org/Pages#A_Page_of_Posts
As a great addition, it also has an example of a how to display custom post types within a page as well:
How to display a custom post type within a page:
http://codex.wordpress.org/Pages#Using_Custom_Post_Types
I found this definitely helpful, and hopefully you will too!
Happy coding!
In her article Mobile UI performance considerations, Estelle Weyl addresses memory and battery considerations when developing web applications for mobile devices. From embedding CSS and JavaScript into your HTML file (GASP!!!) on first load (and storing the code using localStorage), to minding the DOM and what you CAN’T see in the viewport of a mobile phone, this article is full of great ideas on how to reduce loading and processing times on our beloved tiny devices. A must read.
Get it here -> http://calendar.perfplanet.com/2011/mobile-ui-performance-considerations/
Ever wonder when you can use the CSS rule inline-block, or PNG transparency, and what browsers support them? Search no more: http://caniuse.com/ has a cool list of these and other rules. Happy to have found it!
It made a small modification to my site’s permalink structure while I was developing a plugin: I changed my permalink structure from /%postname% to “/%postname%/” (notice the extra “/” in the latter).
Not a big deal, right? After all, your browser understands that:
http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
is the same as
http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery/
With that in mind, this should be the same for your Google Analytics, right?
WRONG!
Actually, after I made that change, Google Analytics assumed that now the same page was actually TWO different pages, so the traffic data in one started to go down, while the the data in the other started to go up:
Here’s the traffic data with the “old” permalink structure:
And this one with the new one:
Same page, but now that it was being accessed via a “different” URL (with an extra “/” at the end), Google Analytics started to see it as two different pages. (Note that apparently I made the change on Sept 12, since that’s when traffic started to move from one page to another).
Bummer.
Needless to say, now I have “duplicated” pages all over my traffic data, because the extra “/” was added to all pages on the site. I corrected the permalink to what it was before, and hopefully everything will go back to normal.
The takeway
Modifying your site’s permalink (or link) structure will definitely take a toll on your traffic data. Fortunately, in this case, people (and search engines) can still get to the aforementioned page (phew!) But if your permalink structure has changed drastically and there are no redirection solutions implemented, a page that was ranking really high in search results will actually go down until the “new” page takes the time to crawl up, and that can take a while…
So, lesson learned: modifying your permalink structure (even slightly) WILL mess up your traffic data.
Hi all,
Sifting through stackoverflow.com I ran into this question: how do you add custom fields automatically as post tags in WordPress?
A while ago, someone asked something similar, and I put together a little script to help, but now I refined that script to be more encompassing. So, here’s a function to add custom fields automatically as post tags.
How it works
The vq20_convert_custom_fields_to_tags() function uses jQuery to retrieve the value of specific custom fields (which you can specify in an array, more on that below), and then adds those to the “tags” list on your post editor on save.
Instructions
- Put this script in your functions.php file in your WordPress install:
<?php function vq20_convert_custom_fields_to_tags(){ /*create list of custom fields to add as tags on save*/ $custom_field_names = array(); if(count($custom_field_names)>0) {?> <script type="text/javascript"> jQuery(document).ready(function($){ $('form#post').submit(function(event){ <?php foreach($custom_field_names as $name){?> cf_key = $('input[value="<?php echo $name; ?>"]').attr('id').replace('meta[', '').replace('][key]', ''); $('#new-tag-post_tag').val($('textarea[id*='+cf_key+']').val()); <?php } ?>}); }); </script> <?php } } add_action('admin_footer', 'vq20_convert_custom_fields_to_tags'); ?>
* * * UPDATE * * *
A couple of users in the comments below pointed out that the previous code was only adding the last custom field to the tag list, so I decided to go ahead and revamp the whole thing. Use this code instead:
<?php function vq20_convert_custom_fields_to_tags(){ ?> <script type="text/javascript"> jQuery(document).ready(function($){ // Create list of custom fields to add as tags on save // (e.g. var custom_field_names = ['my_custom_field', 'my_other_custom_field', 'yet_another_custom_field'];) var custom_field_names = []; $('form#post').submit(function(){ if(custom_field_names.length > 0) { var custom_field_values = []; $('#postcustom tr[id^="meta-"]').each(function(){ var meta_id = $(this).attr('id').substring($(this).attr('id').indexOf('-')).replace('-',''); if ($.inArray($(':text[id="meta[' + meta_id + '][key]"]').val(), custom_field_names) !== -1) { custom_field_values.push($('textarea[id="meta[' + meta_id + '][value]"]').val().toLowerCase()); } }); var tags = custom_field_values.join(','); $('#new-tag-post_tag').val(tags); } }); }); </script> <?php } add_action('admin_footer', 'vq20_convert_custom_fields_to_tags'); ?>
- Add the names of the custom fields you would like to automatically add as tags to the custom_field_names array
// Create list of custom fields to add as tags on save // (e.g. var custom_field_names = ['my_custom_field', 'my_other_custom_field', 'yet_another_custom_field'];) var custom_field_names = ['my_custom_field', 'my_other_custom_field'];
- Save/upload your functions.php file, and then go to your post, add the matching custom field(s), and their values should be added as tags as soon as you save the post.
Note: this only works for custom fields holding individual values!!! (i.e. only one value per custom field will be added as a tag)
Let me know what you think!
Happy tagging!
Testing Twitterfeed…
Just found out about Twitterfeed.com, a service that allows to automatically feed your blog posts to Twitter and Facebook. It does it by checking your site’s RSS feed every so often (30 min by default) and if there’s anything new, it posts it!
Yay, time saver! =)
After seeing it featured in several articles as a tool for live examples, I can only say that JSFiddle is a dream come true: an experimental environment where you can test your HTML, JavaScript and CSS and see the results right there. You can even choose a framework to work with (jQuery, Mootools, Prototype) and start coding away.
Highly recommended. I’ll definitely be using it to test during development!
Get your hands on it: http://jsfiddle.net/
Hi all,
I just published a new plugin, UW CALS Extend RSS2 Feed (killer name!), and I’m very excited about it.
Basically, this plugin allows you to include thumbnail and custom field information in your WordPress site’s default RSS2 feed, making it more complete.
Give a try! Here’s the link, and let me know what you think!
PS: don’t forget to visit my WordPress Plugins page for more goodies!
By default, the WordPress post editor has an excerpt box that helps you add a little description to your posts. However, this option is not enabled by default for pages, so here’s the solution to that problem.
Add an excerpt meta box to pages
Pre-WordPress 3.0
The best way to add a meta box for pages in WordPress installs older than 3.0 is via the add_meta_box() function.
Add this code to your theme’s functions.php file:
<?php function add_page_excerpt_support(){ add_meta_box('postexcerpt', __('Page Excerpt'), 'post_excerpt_meta_box', 'page', 'advanced', 'core'); } add_action('admin_init', 'add_page_excerpt_support'); ?>
The code above tells WordPress to use the same “post_excerpt_meta_box()” callback function it employs to add the excerpt box for regular posts, to enable for pages as well.
WordPress 3.0 and up
WordPress 3.0 formally introduced support for new custom post types, which allow you to add custom content types besides the default “post” and “page” types. Along with this, the add_post_type_support() function was added to allow us to tell WordPress what “default” features we want a specific post type to support. Fortunately, we can use this to further extend the default “page” post type as well, such as adding an excerpt box to it.
Add this code to your theme’s functions.php file:
<?php function add_page_excerpt_support(){ add_post_type_support( 'page', 'excerpt' ); } add_action('admin_init', 'add_page_excerpt_support'); ?>
And that should be it! Now you should have a spankin’ new excerpt box ready to be filled on your WordPress page editor!
When developing for WordPress , sometimes you may be looking to run a small piece of code that you and only you can see, without disturbing the peaceful, beautiful flow of your carefully crafted website (and without annoying your users, of course).
So, here’s a small function I created, admin_level(), that’s come in handy several times while I’ve worked with WordPress. By placing this function in your theme’s functions.php file, you will be able to create “test areas” throughout your site where you can run code only when someone with enough permissions (e.g. an “admin” user) is logged in.
NOTE: Testing should ALWAYS be done on a test server separate from production!!! But hey, quick and dirty also does it =)
The admin_level() function
<?php function admin_level($user_login=''){ global $current_user; get_currentuserinfo(); if(current_user_can('level_10')) { if ($user_login!=''){ if($current_user->user_login==$user_login){ return true; } else { return false; } } else { return true; } } else { return false; } } ?>
The admin_level() function has only one optional parameter $user_login, which you can use to basically say “Hey, check that I’m user ‘username’ and have admin access.” If those conditions are met, it returns true, otherwise it returns false.
Examples
Create a “test area” in functions.php
After adding the admin_level()Â function to your functions.php file, you can start using it to test things right away. Here’s an example of a “test area” within the function.php file itself (I usually do this at the end of the file, so I know where it is):
<?php //Test Area //Only run following code if logged in as admin if( admin_level($user_login = 'vidal') ){ //run your awesome code right here, admin!!! } //End Test Area ?>
Another (inverse) example: redirecting from header.php
Here’s a redirecting script I used on header.php to send anyone who was NOT logged in as admin user ‘vidal’ somewhere else:
<?php if( !admin_level($user_login = 'vidal') ){ header('Location:http://www.getouttahere.com); exit(); } ?>
This one came in handy, since I needed to temporarily redirect people to another site and keep on working quickly to fix the site ASAP.
So, there you have it. This is a very simple way to keep scripts safely confined (even if they fail while you are testing them). I hope you find it useful!
While working with Google Custom Search Engine (CSE), I needed to access elements within the <iframe> containing the search results it generated. Using jQuery, I tried to select the iframe first and its content:
$('#cse-search-results iframe').contents();
But as soon as I tried to do something with it, I’d get a “Error: Permission denied to access property ‘nodeType’” message.
Turns out, <iframes> follow the same origin policy, which prevents you from accessing them directly if they weren’t generated from your own domain. Of course, you can create a proxy file with PHP to retrieve the data first and then add the resulting HTML to your script to get around this problem.
I know, I know… it makes sense now. But I just didn’t know, so, lesson learned!
When creating unordered lists (i.e. the ones with bullets and not numbers or letters) in HTML, you can use the list-image CSS property to use an image to replace the default bullets HTML supports.
That’s cool. But, if you are mindful of front-end optimization and decide to use CSS sprites throughout your site to reduce HTTP requests, the list-image CSS property falls short, because it is intended to use only one perfect, well-tailored bullet image for each bullet style you define. So, if you have ten different types of lists with different image bullets, you will need as many or more separate images to customize your lists. And that is NOT cool.
So, how do you use CSS sprites to create custom bullets?
Example
First, here is the demo of the bulleted list with custom bullets made using CSS Sprites we’ll be developing in this example. A few things to notice:
- The bullets are made of custom images contained in a CSS sprite.
- The bullets change on hover from gray to red, just like each link does (something not accomplished by default when only using the a:hover CSS property).
Now, let’s get to it.
What you need:
The HTML
This is the basic HTML we’ll use for this example, which creates a list of links to awesome tropical flavors:
<ul id="my-list"> <li><a href="#">Mango</a></li> <li><a href="#">Banana</a></li> <li><a href="#">Watermelon</a></li> </ul>
The CSS
This is the initial CSS we’ll use in this example. We’ll develop it more as we go along:
#my-list{ width: 120px; padding: 16px; border: 1px dotted #CCC; } #my-list a{ display:block; padding: 4px 0; color:#333; text-decoration:none; } #my-list a:hover{ color:#900; } #my-list li{ margin: 0 0 0 12px; }
The HTML and CSS above generate a list that looks like this:
The custom-bullets sprite image
Ok so, what’s are CSS sprites, again?
In a few words, CSS sprites are basically images that contain a grid of images, like this one from Google. The idea is that instead of loading each image separately, you can load a master image that contains them all, and then use that master image as a background in all HTML elements that need it. This helps reduce the amount of HTTP requests your page makes on load, which then helps reduce loading times. A List Apart has a seminal article on CSS Sprites that, despite being old, will still blow your mind. Also, Christ Coyier from CSS-tricks.com has a cool article with more info on how to use sprites with an example from his own website. Read it.
Here’s the image very simple image sprite we’ll use for this example:
Getting it done:
Let’s further expand the CSS above to make this thing work:
- Remove the “bullets” from each li element
#my-list li{ margin: 0 0 0 12px; list-style:none; }
- Remove the left margin and some the same amount in padding. This helps both make up for the space lost when the bullets were removed and open some space between the border of the li element and the anchor element contained in it
#my-list li{ list-style:none; padding: 0 0 0 12px; }
At this point, the list should look like this:
- Set the sprite as the background for the li element
#my-list li{ list-style:none; padding: 0 0 0 12px; background: url(images/sprite.png) -8px 0px; }
- Set the background for the :hover of the li element
#my-list li:hover{ background: url(images/sprite.png) -8px 24px }
Notice that the list element is now using the sprite image as its background, but it repeats all over the place:
There are two ways to solve this, depending on how your sprite is set up:
- a) If your sprite is setup vertically (i.e. if all the images in the sprite are stacked in one column), you can do with just setting the background-repeat to repeat-y at it will do the trick:
#my-list li{ list-style:none; padding: 0 0 0 12px; background: url(images/sprite.png) -8px 0px repeat-y; } #my-list li:hover{ background: url(images/sprite.png) -8px 24px repeat-y }
- b) If your sprite is setup horizontally (i.e. if all images in the sprite are distributed across the grid, next to each other, like the one in the Googlee example shown above), you may be better off by setting up background color for the most immediate element contained in the li element (in our case, the <a> element):
#my-list a{ display:block; padding: 4px 0; color:#333; text-decoration:none; background-color:#FFF; }
Whichever the case, your list should now look like this:
And that’s it! Click here to see the live example »
See you next time!
Serializing arrays in PHP is a great way to format their content before storing it in a database. However, if the serialized content has certain characters (such as “;” or “:”) the resulting string won’t be read correctly by the unserialize() function, which is a huge bummer. So, here’s a workaround.
Although displaying all your latest posts in WordPress may seem like a no-brainer (after all, the default home page already displays your “Latest Posts”), doing so is kind of tricky if you are trying to do it in on a custom page.
Here’s a little code that can help you accomplish that. Basically, you need to override the $wp_query object with a new query:
<?php $wp_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>10, 'paged'=>get_query_var('paged'))); ?>Put this code at the beginning of your default page.php template (or your custom page template) right before the Loop, and you are done!