diff options
-rw-r--r-- | content/weblog/2018-10-10_w3blog-v05-release/index.es.md | 66 | ||||
-rw-r--r-- | content/weblog/2018-10-10_w3blog-v05-release/index.md | 64 | ||||
-rw-r--r-- | content/weblog/2018-10-10_w3blog-v05-release/index.ru.md | 73 | ||||
-rw-r--r-- | content/weblog/2018-10-10_w3blog-v05-release/v04.png | bin | 0 -> 188207 bytes | |||
-rw-r--r-- | content/weblog/2018-10-10_w3blog-v05-release/v05.png | bin | 0 -> 143484 bytes | |||
-rw-r--r-- | content/weblog/2018-10-20_thoughts-on-web-design/index.md | 131 | ||||
-rw-r--r-- | content/weblog/_index.md | 2 |
7 files changed, 335 insertions, 1 deletions
diff --git a/content/weblog/2018-10-10_w3blog-v05-release/index.es.md b/content/weblog/2018-10-10_w3blog-v05-release/index.es.md new file mode 100644 index 0000000..ce7f9be --- /dev/null +++ b/content/weblog/2018-10-10_w3blog-v05-release/index.es.md @@ -0,0 +1,66 @@ ++++ +title = "Nueva versión de w3blog, v0.5" +date = 2018-10-10T12:04:00Z ++++ + +Después de unos meses sin mucho tiempo libre, la semana pasada al fin me pude +sentar a trabajar en la siguiente actualización para mi motor de blog, la cual +ha estado en mi lista de cosas por hacer un buen tiempo. Esta nueva +actualización incluye mejores y nuevas capacidades para w3blog. + +<!-- more --> + +Primero que nada, en el lado del "front end" (la parte del cliente) me deshice +de Bootstrap y JQuery, y rehice la hoja de estilos por defecto de w3blog. Ahora +el estilo por defecto de w3blog es agradable y bonito, y lo más importante, es +más ligero (por el hecho de que no hace uso de Bootstrap + Jquery). La hoja de +estilos CSS sin minimizar pesa solamente 5.6K (a contrario de los 138K de +Bootstrap sin minimizar), y por supuesto, el sitio también pesa menos a +consecuencia de haberse deshecho de JQuery (Realmente sólo hacía falta para +Bootstrap). + +Cómo lucía v0.4 + +![v0.4](v04.png) + +Como luce v0.5 + +![v0.5](v05.png) + +Hablando de mejoras, los comentarios ahora incluyen la fecha de su publicación. No estoy seguro de como es que es había dejado pasar por alto por tanto tiempo su ausencia. + +Las nuevas características son: + +* Carga dinámica de entradas en la página principal, páginas de categorías y de + archivo. Si activas esta opción, en lugar de obtener los tradicionales botones + de paginación al fondo de la página, aparece un botón para cargar + dinámicamente las siguientes entradas, de tal forma no se carga toda una nueva + página desde cero. Se activa agregando `'dynamic_load': True` a + `WEBLOG_SETTINGS`. +* Scroll infinito para la carga dinámica. Al activar esta opción, y la de carga + dinámica, después de llegar al fondo de la página (principal, categorías, + archivo), la siguiente partida de entradas es cargada automáticamente con + AJAX. Para activarlo enciende la opción de carga dinámica (mira el primer + punto) y agrega `'infinite_load': True` a `WEBLOG_SETTINGS`. +* Barra lateral flotante. Esta función hace que la barra lateral flote junto al + contenido después de desplazar la página pasado la barra de navegación. Activa + esta función agregando `'floating_sidebar': True` a `WEBLOG_SETTINGS`. + +Estos son básicamente todos los cambios en esta versión. Si ya estás usando +w3blog, y usas tus propios CSS, tendrás que readaptarlos, ya que las plantillas +han cambiado un poco, principalmente las clases de HTML/CSS. + +Tenía planes para más novedades en esta versión, pero he decidido posponerlos +por ahora. Uno de ellos era una forma de poder agregar elementos adicionales a +la barra lateral sin tener que modificar las plantillas de w3blog. +Desafortunadamente no encontré una forma racional de hacerlo. + +Si tienes algún problema usando w3blog, o inclusive sugerencias, la primera +opción sería abrir un "issue" en la página de Github, o si no tienes cuenta de +GitHub (y no deseas crear una nueva cuenta), puedes escribirme un correo +electrónico a [contact@yaroslavps.com](mailto:contact@yaroslavps.com). Sin +embargo, si usas uno de los grandes proveedores de email (por ejemplo, outlook o +gmail), mi respuesta podría ser bloqueada por tu proveedor. + +[Página de GitHub de w3blog](https://github.com/Yaroslav-95/w3blog). + diff --git a/content/weblog/2018-10-10_w3blog-v05-release/index.md b/content/weblog/2018-10-10_w3blog-v05-release/index.md new file mode 100644 index 0000000..490bd4d --- /dev/null +++ b/content/weblog/2018-10-10_w3blog-v05-release/index.md @@ -0,0 +1,64 @@ ++++ +title = "New w3blog release, version 0.5" +date = 2018-10-10T12:04:00Z ++++ + +After some months without much free time, I finally could sit down a week ago +and start working on an update to my blog engine that had been sitting on my +to-do list for quite some time. This update brings improvements and new +features to w3blog. + +<!-- more --> + +First of all, bloat was removed on the front end (client) side of things. I +got rid of Bootstrap, and JQuery, and rewrote the default CSS sheet. The +default look of the engine is actually pleasant to look at, the css sheet +weighs only 5.6K unminified (vs 138K of minified bootstrap's css), and of +course weight has also been slimmed down by removing JQuery (it was only +really needed by bootstrap). + +v0.4 default look + +![v0.4](v04.png) + +v0.5 default look + +![v0.5](v05.png) + +Speaking about improvements, comments now have a date of publishing. Really not +sure how I overlooked such a thing for so long. + +The new features are: + +* Dynamic loading of posts on the main page, and category and archive pages. If + you turn on this feature, instead of getting the traditional pagination + buttons at the end of the page, you get a button to load the next batch of + posts through AJAX, so that it doesn't load a whole new page. You turn this + by adding `'dynamic_load': True` to `WEBLOG_SETTINGS`. +* Infinite scroll for dynamic loading. When this and dynamic loading are + active, after scrolling to the bottom of the page (index, category page, + archive page), the next batch of posts are loaded automatically through AJAX. + Turn on dynamic loading (see above) and add `'infinite_load': True` to + `WEBLOG_SETTINGS`. +* Floating sidebar. To turn this feature on, you add `'floating_sidebar': True` + to `WEBLOG_SETTINGS`. What this does, is make the sidebar float next to the + content container after scrolling past the navbar and breadcrumb bar. +* These are basically all of the changes in this new release. If you happen to + already be using w3blog and are using a custom css sheet, you will need to + redo your css since the templates changed a bit since version 0.4, mainly the + html/css classes used. You will also need to make migrations and migrate them + to the database. + +I had plans for other features for this release, but I decided to postpone them +for now. One of them was a way to add custom elements/html to the sidebar +without having to modify w3blog templates. Unfortunately I didn't find a sane +way of doing this. + +If you have any issues with w3blog, or maybe even suggestions, the first option +would be to open an issue on its Github page, if you don't have a Github +account (and don't want to create one), you can write me an email at +[contact@yaroslavps.com](mailto:contact@yaroslavps.com). However, if you are +using one of the big email providers (e.g. outlook or gmail), my response could +be blocked by your provider. + +[w3blog's GitHub page](https://github.com/Yaroslav-95/w3blog). diff --git a/content/weblog/2018-10-10_w3blog-v05-release/index.ru.md b/content/weblog/2018-10-10_w3blog-v05-release/index.ru.md new file mode 100644 index 0000000..870ba96 --- /dev/null +++ b/content/weblog/2018-10-10_w3blog-v05-release/index.ru.md @@ -0,0 +1,73 @@ ++++ +title = "Новый выпуск w3blog - версия 0.5" +date = 2018-10-10T12:04:00Z ++++ + +После несколько месяцев без особого свободного времени, оно наконец появилось и +мне удалось сесть за работу над моим движком для блогов. Это обновление приносит +некоторые улучшении и новые фишки для w3blog. + +<!-- more --> + +Первым делом, я избавился от лишнего в клиентской части. Избавился от Bootstrap +и JQuery, и полностью переписал дефолтный CSS. А теперь приятно смотреть на +дефолтный стиль страницы, таблицв стилей без сжатия весит всего 5.6К (По +сравнению с 138К для сжатого CSS Bootstrap), и конечно сайт так же стал более +легким за счет избавления JQuery (который в принципе нужен был бутстрапу). + +v0.4 - дефолтный вид + +![v0.4](v04.png) + +дефолтный вид в v0.5 + +![v0.5](v05.png) + +И говоря про улучшения, комментарии наконец содержат дату публикации. Кажется я +забыл добавить столь полезную функцию. + +Новые фишки: + +* Динамическая прогрузка постов на главной и страницах категорий и архива - Если + вы включите эту фичу, вместо обычных кнопок пагинации, появится в конце + страницы кнопка для прогрузки следующих постов через AJAX. Таким образом не + подгружается целая страница заново. Включите добавляя `'dynamic_load': True` в + `WEBLOG_SETTINGS`. +* Бесконечное пролистывание страницы для динамической прогрузки - Когда эта + опция и динамическая прогрузка включены, после пролистывания до конца + страницы, следующие посты автоматически прогружаются через AJAX. Включите + динамическую прогрузку (см. выше) и добавьте `'infinite_load': True` в + `WEBLOG_SETTINGS`. +* Плавающая боковая панель - Действия этой функции, сделать так чтобы боковая + панель плавала рядом с контентом после пролистывания страницы ниже + навигационной строки. Для активации добавьте `'floating_sidebar': True` в + `WEBLOG_SETTINGS`. + +Это собственно все изменения внесены в этом новом релизе. Если вы уже +пользуйтесь w3blog'ом, и вы используете свои собственны таблицы стилей, вам +придется их переделать, поскольку шаблоны немного изменились с поседней (0.4) +версей. В основном изменились классы HTML/CSS. + +Были планы и для другие фичи для этого релиза, но я решил их оставить на +следующие релизы.Один из них является способ добавления элементов/HTML в боковую +панель, без необходимости переписывание шаблонов w3blog'а. К сожалению я пока не +нашел нормальный способ разработать такую функцию. + +Если у вас возникли проблемы при испоьзованию w3blog, или у вас есть советы либо +комментарии, первый и наилучший вариант это открыть "issue" на странице +Github'а. Если вдруг у вас нет аккаунта Github (и вы не желаете создать аккаунт, +увы) напишите мне на адрес электронной почты +[contact@yaroslavps.com](mailto:contact@yaroslavps.com). Однако, если вы +пользуетесь одним из больших провайдеров электронной почты (например mail.ru, +gmail) то возможно ваш провайдер заблокирует мое письмо с ответом, либо отправит +в спам. + +If you have any issues with w3blog, or maybe even suggestions, the first option +would be to open an issue on its Github page, if you don't have a Github +account (and don't want to create one), you can write me an email at +[contact@yaroslavps.com](mailto:contact@yaroslavps.com). However, if you are +using one of the big email providers (e.g. outlook or gmail), my response could +be blocked by your provider. + +[Страница GitHub](https://github.com/Yaroslav-95/w3blog). + diff --git a/content/weblog/2018-10-10_w3blog-v05-release/v04.png b/content/weblog/2018-10-10_w3blog-v05-release/v04.png Binary files differnew file mode 100644 index 0000000..7885d06 --- /dev/null +++ b/content/weblog/2018-10-10_w3blog-v05-release/v04.png diff --git a/content/weblog/2018-10-10_w3blog-v05-release/v05.png b/content/weblog/2018-10-10_w3blog-v05-release/v05.png Binary files differnew file mode 100644 index 0000000..074667a --- /dev/null +++ b/content/weblog/2018-10-10_w3blog-v05-release/v05.png diff --git a/content/weblog/2018-10-20_thoughts-on-web-design/index.md b/content/weblog/2018-10-20_thoughts-on-web-design/index.md new file mode 100644 index 0000000..9929277 --- /dev/null +++ b/content/weblog/2018-10-20_thoughts-on-web-design/index.md @@ -0,0 +1,131 @@ ++++ +title = "Some thoughts on web design" +date = 2018-10-20T02:25:00Z ++++ + +I am no designer by any means, I mostly prefer to deal with the technical side +of things. However I do appreciate when things aren't an eyesore, and most +importantly regarding technology, when the design doesn't get in the way. That +is, I value more UX, than an overtly designed UI. + +<!-- more --> + +Early on websites were designed to just contain information, things like text +and images, without any of the fancy things that come with today's websites. +Nowadays it seems almost like a must that a website should have some kind of +interactivity, even if it doesn't add any actual value to the website. + +I am not trying to say that websites should stay the same static things that +they were in the past, rather, that a lot of bloat has been added to them in an +attempt to make them more "appealing" and interactive, which is not a bad thing +in and of itself. + +However, that trend has spawned a lot of bloated websites with unnecessary or +even annoying gimmicks. Gimmicks like menus that open up automatically blocking +the view of what you are reading, and assume that you actually need it at the +moment. Or the worst offender, autoplaying videos. + +Setting aside my rants about the modern offenses of design and UX in web +development, I want to focus on a couple of issues. + +## Typography/Readability + +I have started to notice lately that a great deal of +websites tend to neglect what I think is one of the most important aspects in a +good user experience (maybe except for media sites like youtube), and that is +the text itself. + +The people who design these sites seem to pay too much attention to the overall +style of the site and its elements, but don't seem to care about the actual +legibility of them. One might think that font type and size should be enough, +but those are far from the only important aspects to consider for comfortable +reading. Line length and spacing are also key aspects, and might be even more +important than the font you choose (just don't choose some quirky font like +Comic Sans, for your readers sanity's sake). + +I came to the realization that line length is a really important aspect for a +comfortable read, after having worked some time with LaTeX and wondering why it +always defaulted to the same line length. I always noticed that documents +produced in LaTeX were more pleasant to read than, for example, Word documents, +and it was not only the font. + +So after some reading on the internet about the choices of the default styles +for LaTeX, I realized how important line length is. I now understood why even +PDFs were more pleasant to read than your average website. + +Consider a book. Have you ever read a book whose line length was more than 80 +characters? If so, that's a terrible book. + +There seems to be some consensus that an optimal line length should be between +50-75 characters, spaces included (right now my blog's articles are at about 80 +characters, so there's room for improvement). + +If the line is too narrow, it breaks the reader's rhythm, and stresses them. If +it is too wide, the read will have a harder time focusing on the text, it will +be harder to gauge where the line ends and the next begin, and the reader's eyes +will end up moving more horizontally, also stressing the reader in the end. + +A lot of websites tend to present the text in lines too long for comfortable +reading. That factor ends up contributing in more readers skimming through text +and not paying much attention to what has been written. + +One more thing would be line height. I've noticed that many websites tend to use +most of the default styles for text, and sometimes the line height ends up being +too small for the font used and the lines of text being crammed. It's not as bad +as with the line length, but it is a problem present in some websites. + +## Bloat + +Oh boy, there's a lot that can be said about bloat on modern websites. +I'll try to keep it short. I'll begin by writing about some "addons" that end up +making sites heavier than they should. + +I feel like for most use cases JQuery is a really unnecessary thing to use. Most +website don't need half the features that JQuery provides, and most of its +features are just "shortcuts" that JS already offers by default. I mean, if +you're using JQuery, most of the time, you're being lazy. JQuery makes your site +unnecessarily heavier, although if your site is already JS-heavy, and the focus +of your site is actually on providing some specific functionality, JQuery can be +a great tool. + +Another thing that bloats sites, are CSS frameworks (e.g. Bootstrap). They can +make life easier when building templates for your sites, but most of the time, +as is the case with JQuery, you're not going to use half the features it +provides. In this case, it can get worse, since you will most probably end up +overriding a great deal of the default style provided with the framework anyway, +especially if you don't want your site to look generic. + +Finally, on the topic of bloat, is feature and visual bloat. + +The biggest offenders I have found to be news sites, especially those kinds of +"specialized" magazine type of sites. You enter the site to read the article, +and most of your screen is occupied by ads, useless images and links to other +articles and associated websites that distract you from your reading. + +And don't get me started on the autoplaying videos (I'm looking at you CNN, +although I don't even know why I bother to read their ~~biased bullshit~~ +articles). If I opened up an article, I want to read. READ, not watch or listen +some dude babbling about what I'm intending on reading. If I wanted to watch a +video, I would have gone to the videos section of the site, or to YouTube. + +Might be just my humble opinion, but when I am reading, I like to see only the +text in front of me, with maybe some links to the sides or top/bottom, to help +me navigate, and maybe some images relevant to what I am reading. + +## Conclusion/Final words + +Keep those lines at a sane width, let your lines and characters breathe with a +little bit of space, and maybe up your font size a bit if you notice you start +squinting when trying to read. + +Fluid design doesn't mean that the container where your text is should occupy +the entire width of your screen. + +Make beautiful, but lightweight (in bytes, and visually) websites, that are +comfortable to read, and your readers will thank you. + +### Some links that might be of interest: + +* [https://baymard.com/blog/line-length-readability](https://baymard.com/blog/line-length-readability) +* [https://www.paulolyslager.com/optimal-text-layout-line-length/](https://www.paulolyslager.com/optimal-text-layout-line-length/) +* [http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/) diff --git a/content/weblog/_index.md b/content/weblog/_index.md index cbf1900..9813b83 100644 --- a/content/weblog/_index.md +++ b/content/weblog/_index.md @@ -1,5 +1,5 @@ +++ sort_by = "date" template = "weblog.html" -paginate_by = 3 +paginate_by = 10 +++ |