Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. desarrollo web. Página 4

Django Girls

Imago voragine.net
• , , , , ,

We inspire women to fall in love with programming.

Django Girls organize free Python and Django workshops, create open sourced online tutorials and curate amazing first experiences with technology.

Django Girls is a non-profit organization and a community that empowers and helps women to organize free, one-day programming workshops by providing tools, resources and support. We are a volunteer run organization with hundreds of people contributing to bring more amazing women into the world of technology. We are making technology more approachable by creating resources designed with empathy.

During each of our events, 30-60 women build their first web application using HTML, CSS, Python and Django.

Electron. Build cross-platform desktop apps with JavaScript, HTML, and CSS

Imago voragine.net
• , , , ,

https://www.youtube.com/watch?v=8YP_nOCO-4Q

Building cross-platform desktop applications comes with a unique set of challenges that can stand in your way when you are trying to transform your ideas into software. Web apps avoid some of these hurdles, but they have limitations that make them impractical for building native desktop applications. Electron lets you harness the best parts of these technologies to build beautiful, cross-platform desktop applications using HTML, JavaScript, and CSS.

Django Slug Tutorial

Imago voragine.net
• , ,

There are only two steps required: updating our articles/models.py file and articles/urls.py.

In our model, we can add Django’s built-in SlugField. But we must also–and this is the part that typically trips people up–update get_absolute_url as well. That’s where we pass in the value used in our URL.

Native image lazy-loading for the web!

Imago voragine.net
• , ,

The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:

lazy: is a good candidate for lazy loading.
eager: is not a good candidate for lazy loading. Load right away.
auto: browser will determine whether or not to lazily load.

Not specifying the attribute at all will have the same impact as setting loading=auto.

Five Ways to Lazy Load Images for Better Website Performance

Imago voragine.net
• , ,

Native lazy loading of images and iframes is super cool. Nothing could be more straightforward than the markup below:

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

As you can see, no JavaScript, no dynamic swapping of the src attribute’s value, just plain old HTML.

The loading attribute gives us the option to delay off-screen images and iframes until users scroll to their location on the page. loading can take any of these three values:

lazy: works great for lazy loading
eager: instructs the browser to load the specified content right away
auto: leaves the option to lazy load or not to lazy load up to the browser.

Lazy Loading Images and Video

Imago voragine.net
• ,

Using intersection observer

If you’ve written lazy loading code before, you may have accomplished your task by using event handlers such as scroll or resize. While this approach is the most compatible across browsers, modern browsers offer a more performant and efficient way to do the work of checking element visibility via the intersection observer API.

How to Submit My Website to DuckDuckGo Search Engine?

Imago voragine.net
• , , , , ,

Unlike other search engines, DuckDuckGo doesn’t offer any kind of webmaster tools.

Duckduckgo also not offers URL submission.

So, Is there any way to submit your site to DuckDuckGo. Yes, they don’t have any kind of a crawler that is going to crawl your website. To index your site, you have to rely on the search results from other search engines and come up with a way to index your site.

There is no need to submit your site to duckduckgo also there is no way to submit.

As duckduckgo automatically index your site.

So, It might take some time to show your site on duckduckgo search Engine.

I have made a Youtube Tutorial on Google, Bing and Yandex Webmaster Submission. Have a look at that.

Print the whole webpage in a single image file

Imago voragine.net
• , , ,

It only does PNG, but Firefox has a way to capture the whole page built in: Shift-F2 brings up a command prompt, which includes a screenshot command. For instance, screenshot –clipboard –fullpage as I was writing this answer produced http://imgur.com/tnplKPE.

If you want something designed to be automated, phantomjs has page.render() which takes a filename and an optional options object, with format and quality entries; the example given is

page.render('google_home.jpeg', {format: 'jpeg', quality: '100'});

Download Sample Videos

Imago voragine.net
•

Sample-Videos.com is a 100% FREE service that allows programmers, testers, designers, developers to download sample videos for demo/test use. No matter what video format they use (MP4, FLV, MKV, 3GP); they will be able to test videos on any Smartphone without any hustle. This is a one stop destination for all sample video testing needs. Just search below for the relevant video formats in specific sizes, download them, and start testing.

A mobile screen resolution can be a big challenge when it comes to watching videos online or offline. By testing out videos one can be rest assured regarding the video playback in an app, without annoying the end users. Choose from four different video extensions i.e. 3GP, MKV, FLV, and MP4. The best thing is all of these are free and very easy to download. We provide you with a specific and perfect resolution in all sizes possible with just one simple click. Check out the one which suits your requirements. All you need to do is hit the DOWNLOAD button, and get started.

Syntastic. Syntax checking hacks for vim

Imago voragine.net
• , ,

Syntastic is a syntax checking plugin for Vim created by Martin Grenfell. It runs files through external syntax checkers and displays any resulting errors to the user. This can be done on demand, or automatically as files are saved. If syntax errors are detected, the user is notified and is happy because they didn’t have to compile their code or execute their script to find them.

Custom user taxonomies in WordPress

Imago voragine.net
• ,

…the ability to create and use custom taxonomies has been around since 2007. We didn’t get all the cool functions added until 2.8 though.

However, one thing we’ve had since 2.3 was the ability to create taxonomies for any object type, not just posts. In WordPress, there are several object types:

Posts
Users
Comments
Links

So, you can technically create a taxonomy for any object type. Most of WordPress core support is for posts, but the API is extremely well thought out and can handle the other object types with minimal code effort.

This tutorial will focus on registering and using a taxonomy on the user object type. It will not be a 100% solution for everything you can do with a custom user taxonomy. Consider this an extremely rough draft of what’s possible.

Best way to include JavaScript libraries in Hugo sites

Imago voragine.net
• ,

Yet another option: supporting JS/CSS includes in your template based on frontmatter variables. This would allow you to use CDN links so you could forego including the libraries in your source code all together if you like. Otherwise you can use relative links if you want to drop the javascript or CSS files in your static directory.
Frontmatter

---
title: Some catchy title
js: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.js
css: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.css
---

Template partial

You could also support multiple includes if you want to provide scripts as an array in your front matter; you’d just loop through and add a script tag for each entry under js. The same process works for CSS.
CSS Partial

{{ if .Params.css }}
<link rel="stylesheet" href="{{ .Params.css }}">
{{ end }}

JS Partial

{{ if .Params.js }}

{{ end }}

NetlifyCMS. Open source content management for your Git workflow

Imago voragine.net
• , , ,

Use Netlify CMS with any static site generator for a faster and more flexible web project.

Static + content management = ♥

Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.
An integrated part of your Git workflow

Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
An extensible CMS built on React

Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs.

Is Gutenberg the End or a New Beginning for WordPress?

Imago voragine.net
• , , ,

Clearly a project the size of WordPress needs some strong leadership and a clear roadmap. However, when that roadmap starts to be clouded by outside factors such as financial pressure to compete with the market, decisions aren’t made in the best interest of everyone. Don’t forget that whatever is implemented in WordPress.org is being built for WordPress.com (one of the main money-making arms of Automattic) and no doubt their biggest concern when considering losing customers to competitors. Gutenberg is a clear attempt to attract new users to the platform.

The major part of backwards compatibility is not breaking things, or doing everything possible to avoid it. Gutenberg simply will break sites. This won’t be white screening, or breaking appearance on the frontend, but as soon as a site is updated to 5.0, a user will have a broken experience the next time they edit a post, if the site relies on custom meta boxes.

The percentage number of sites on the web that are powered by WordPress is often touted and this number will be made up of a variety of different types of sites and site owners. A large number will be developers, freelancers and agencies who have built sites in the past, manage sites currently, and build every new site with WordPress. From experience, these developers typically don’t use page builder plugins but a combination of custom fields and meta boxes to give clients the ability to add all the data needed to be displayed on the site in a controlled and prescribed style.

These people will need to prepare for 5.0 (more on that later) to make sure their clients aren’t affected by Gutenberg.

Out of all the modern frontend frameworks, React was always the first choice for Gutenberg, even after some token debate, and weathering the storm of patent clauses. But adding a shiny new framework to a critical piece of WordPress core is highly problematic and we’ve seen it before. WordPress 3.5 was released with a new media manager, built with Backbone and landed without documentation, no clear extensibility model, and a steep learning curve for core contributors and developers with media-related plugins.

Gutenberg has the potential to go the same way, but undoubtedly it will reduce the amount of people able to contribute to it, without learning React deeply. It also places a burden on plugin developers (in a short timescale) to learn, adapt, and get their plugins ready.

Of course this is possible for the big guys like WooCommerce (Automattic owned, large team) and Advanced Custom Fields (independant small team, huge user base), but this will affect any plugin which registers a custom post type, or meta boxes. Most developers simply won’t have the time, inclination or skills to make them compatible with Gutenberg. We will likely see a lot of plugins broken which just won’t get fixed. That will have a detrimental effect on user experience and the WordPress ecosystem in general.

Core should leave Gutenberg as a feature plugin for longer. The timeline is just too short for people to prepare. It is too great a change to be rushed. I think the decision to be merged should be rethought and only merged when a certain level of plugin adoption by users is reached.

Make WordPress default video embeds responsive

Imago voragine.net
• , ,

Add this to your theme’s functions.php:

function alx_embed_html( $html ) {
    return '<div class="video-container">' . $html . '</div>';
}
 
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

And next up, we need to add the CSS that makes it responsive to our style.css:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Downloading an Entire Web Site with wget

Imago voragine.net
• , , 
wget --recursive --no-clobber --page-requisites --html-extension --convert-links --domains website.org --no-parent www.website.org/tutorials/html/

This command downloads the Web site www.website.org/tutorials/html/.

The options are:

–recursive: download the entire Web site.
–domains website.org: don’t follow links outside website.org.
–no-parent: don’t follow links outside the directory tutorials/html/.
–page-requisites: get all the elements that compose the page (images, CSS and so on).
–html-extension: save files with the .html extension.
–convert-links: convert links so that they work locally, off-line.
–no-clobber: don’t overwrite any existing files (used in case the download is interrupted and resumed).

Gulp vs Grunt. Why one? Why the Other?

Imago voragine.net
• , ,

Truth is, if you’re starting to work with JS-based build systems, there is a high chance that you’d pick Gulp right away. The prospects for it just seem a little rosier, plus, it has been adopted by a large portion of projects. Yet, if you are still using Grunt and feel comfortable using it, there is nothing to be worried about — the community is still there, bigger than Gulp, and keeps growing. Grunt has almost a couple of years of advantage, and I am sure that large project maintainers will try to stick to it for as long as possible. Another advantage of using Grunt is if all you need is that little built-in set of simple tasks. In that case, you’d feel right at home with it, and Gulp, despite all of its flexibility, will make you spend more time in theory than you need. As with everything else project related, you should choose based on the circumstances.