Creating a responsive multithreading Website for Desktop & Mobile

栏目: IT技术 · 发布时间: 4年前

内容简介:Please take a look at the Intro Video first, to get the idea:You might know the feeling: You create a new GitHub repository and start with a default GH Pages implementation using a default GH design skin. You add more and more content, and suddenly it look

Content

  1. Introduction
  2. The Problems
  3. The Solution
  4. Welcome to the neo.mjs v1.3.0 Release
  5. Is this App a PWA?
  6. The Website Source Code
  7. Live Demo
  8. Can we get a Tutorial on creating this App?
  9. What is coming next?
  10. Final Thoughts

1. Introduction

Please take a look at the Intro Video first, to get the idea:

2. The Problems

You might know the feeling: You create a new GitHub repository and start with a default GH Pages implementation using a default GH design skin. You add more and more content, and suddenly it looks like this:

Creating a responsive multithreading Website for Desktop & Mobile

Creating a responsive multithreading Website for Desktop & Mobile

Creating a responsive multithreading Website for Desktop & Mobile

To be fair, it was just an Online Examples collection and not a real Product Website, but you will agree that this one hurts your eyes. It is not helpful for developers who discover the neo.mjs project for the first time.

The next problem was, that a full Blog Post collection was hidden inside the repository (projects/14).

The probably biggest problem was, that until now the neo.mjs UI framework did not have a single Example App, which was polished for Mobile Devices.

3. The Solution

The boundaries for Web based Apps & Websites are getting smaller and smaller. Thinking back on my time working for Sencha, many devs complained about, that the Website was not created using Ext JS (or at least the core version of it).

So, for me the challenge was to create the new neo.mjs Website using the neo.mjs UI framework and making it responsive. Meaning: Fully polished for mobile as well. In case you looked close at the video, you might have seen that there are more than 25 transitions in place, to make it feel more natural when switching between Desktop & Mobile resolutions.

Creating a responsive multithreading Website for Desktop & Mobile

Creating a responsive multithreading Website for Desktop & Mobile

Creating a responsive multithreading Website for Desktop & Mobile

Creating a responsive multithreading Website for Desktop & Mobile

While I am most definitely not a professional designer, I like this new version a lot. Especially the Item Previews contain a lot of CSS magic, like mixing a background gradient with a background image to create a better contrast.

4. Welcome to the neo.mjs v1.3.0 Release

As you can see, the v1.3.0 is mostly focussed on the new Website, to give new visitors who discover the project for the first time a more pleasant experience.

A lot of effort went into the new intro texts (Home Tab) as well.

As mentioned inside the title: The Website App is using the full worker setup (4 CPUs / Cores). Most parts of the framework and the entire Website code base is inside the App worker:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据挖掘

数据挖掘

(美)Jiawei Han、(加)Micheline Kamber、(加)Jian Pei / 范明、孟小峰 / 机械工业出版社 / 2012-8 / 79.00元

数据挖掘领域最具里程碑意义的经典著作 完整全面阐述该领域的重要知识和技术创新 这是一本数据挖掘和知识发现的优秀教材,结构合理、条理清晰。本书既保留了相当篇幅讲述数据挖掘的基本概念和方法,又增加了若干章节介绍数据挖掘领域最新的技术和发展,因此既适合初学者学习又适合专业人员和实践者参考。本书视角广阔、资料翔实、内容全面,能够为有意深入研究相关技术的读者提供足够的参考和支持。总之, 强烈推荐......一起来看看 《数据挖掘》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器