Wednesday, October 12, 2016
AtoZ CSS Quick Tip: Control Element Visibility with Opacity
O is for opacity
We can use opacity to control the visibility of elements on the page - anything from completely transparent to completely opaque as discussed in the original screencast video.
Here’s a couple of tips when using opacity to ensure the right parts of the element are semi-transparent and to demonstrate how we can create fading effects without relying on JavaScript effects libraries.
Tip 1: opacity applies to the whole element
When setting opacity on an element, the whole element, including its children are made semi-transparent. The opacity is not inherited by the children so unfortunately you can’t set opacity:1 on them to make them fully opaque again.
If you want to have the background of an element semi-transparent but want the child elements (eg: text or images) to be opaque, use a semi-transparent background instead of using opacity.
[code language="css"]
.module {
background: rgba(255,255,255,0.5); /* semi-trans white */
}
[/code]
Tip 2: opacity affects stacking context
When setting opactiy to a value less than 1 the element is placed on a new layer so the background can be shown beneath the semi-transparent element. This is similar to how z-index works and, just like z-index, using opacity creates a new stacking context.
Continue reading %AtoZ CSS Quick Tip: Control Element Visibility with Opacity%
by Guy Routledge via SitePoint
Building RESTful APIs With Flask: An ORM With SQLAlchemy
In the first part of this three-part tutorial series, we saw how to write RESTful APIs all by ourselves using Flask as the web framework. The previous approach provided a whole lot of flexibility but also included writing a lot of code that otherwise could have been avoided in more generic cases.
In this part, we will use a Flask extension, Flask-Restless, which simply generates RESTful APIs for database models defined with SQLAlchemy. I will take the same sample application as in the last part of this series to maintain context and continuity.
Installing Dependencies
While continuing with the application from the first part, we need to install only one dependency:
$ pip install Flask-Restless
The Application
Flask-Restless makes adding RESTful API interfaces to models written with SQLAlchemy a piece of cake. First, add the REST APIManager from the flask.ext.restless extension to the application configuration file.
flask_app/my_app/__init__.py
from flask.ext.restless import APIManager manager = APIManager(app, flask_sqlalchemy_db=db)
Just adding the above couple of lines to the existing code should suffice.
flask_app/my_app/catalog/views.py
This file comprises the bulk of the changes from the previous part. Below is the complete rewritten file.
from flask import Blueprint
from my_app import manager
from my_app.catalog.models import Product
catalog = Blueprint('catalog', __name__)
@catalog.route('/')
@catalog.route('/home')
def home():
return "Welcome to the Catalog Home."
manager.create_api(Product, methods=['GET', 'POST'])
It is pretty self-explanatory how the above code would work. We just imported the manager that was created in a previous file, and it is used to create an API for the Product model with the listed methods. We can add more methods like DELETE, PUT, PATCH, etc. as needed.
Application in Action
Let's test this application by creating some products and listing them. The endpoint created by this extension by default is http://localhost:5000/api/product.
As I did in the last part of this tutorial series, I will test this using the requests library via terminal.
>>> import requests
>>> import json
>>> res = requests.get('http://ift.tt/2dc1P7E')
>>> res.json()
{u'total_pages': 0, u'objects': [], u'num_results': 0, u'page': 1}
>>> d = {'name': u'iPhone', 'price': 549.00}
>>> res = requests.post('http://ift.tt/2dc1P7E', data=json.dumps(d), headers={'Content-Type': 'application/json'})
>>> res.json()
{u'price': 549.0, u'id': 1, u'name': u'iPhone'}
>>> d = {'name': u'iPad', 'price': 649.00}
>>> res = requests.post('http://ift.tt/2dc1P7E', data=json.dumps(d), headers={'Content-Type': 'application/json'})
>>> res.json()
{u'price': 649.0, u'id': 2, u'name': u'iPad'}
>>> res = requests.get('http://ift.tt/2dc1P7E')
>>> res.json()
{u'total_pages': 1, u'objects': [{u'price': 549.0, u'id': 1, u'name': u'iPhone'}, {u'price': 649.0, u'id': 2, u'name': u'iPad'}], u'num_results': 2, u'page': 1}
How to Customize
It is really handy to have the RESTful APIs created automatically, but each application has some business logic which calls for customizations, validations, and clever/secure handling of requests as needed.
Here, request preprocessors and postprocessors come to the rescue. As the names signify, methods designated as preprocessors run before the processing of the request, and methods designated as postprocessors run after the processing of the request. create_api() is the place where they are defined as dictionaries of the request type (GET, POST, etc.) and the methods as list which will act as preprocessors or postprocessors on the specified request. Below is a template example:
manager.create_api(
Product,
methods=['GET', 'POST', 'DELETE'],
preprocessors={
'GET_SINGLE': ['a_preprocessor_for_single_get'],
'GET_MANY': ['another_preprocessor_for_many_get'],
'POST': ['a_preprocessor_for_post']
},
postprocessors={
'DELETE': ['a_postprocessor_for_delete']
}
)
The GET, PUT, and PATCH requests have the flexibility of being fired for single as well as multiple records; therefore, they have two types each. In the code above, notice GET_SINGLE and GET_MANY for GET requests.
The preprocessors and postprocessors accept different parameters for each type of request and work without any return value. This is left for you to try on your own.
Conclusion
In this part of this tutorial series, we saw how to create a RESTful API using Flask just by adding a couple of lines to a SQLAlchemy-based model.
In the next and last part of this series, I will cover how to create a RESTful API using another popular Flask extension, but this time, the API will be independent of the modeling tool used for the database.
by Shalabh Aggarwal via Envato Tuts+ Code
This Week in Mobile Web Development (#129)
|
Brian Rinaldi recommends
Holly Schinsky recommends
Chris Brandrick recommends
by via Mobile Web Weekly
BIGSOUND Buzz
by Rob Hope via One Page Love
Social Ad Spend Surpasses Television: New Research
Is your company wondering where to allocate its advertising budget? Are you on the fence about whether jumping into social media advertising is worth it? New research shows that for the first time, digital and social media ad spending has surpassed that of TV. Marketers everywhere may revisit their strategies, leading to big changes in [...]
This post Social Ad Spend Surpasses Television: New Research first appeared on .
- Your Guide to the Social Media Jungle
by Michelle Krasniak via
League of Legends - Worlds History
by via Awwwards - Sites of the day