Web开发利器推荐(二)

简介: 看到一个很棒的系列,介绍了很多对web开发很有帮助的利器,解决了很多开发中遇到的繁琐事,翻译来分享一下:

看到一个很棒的系列,介绍了很多对web开发很有帮助的利器,解决了很多开发中遇到的繁琐事,翻译来分享一下:


Webflow

image.png

通过这些服务,一个没有HTML/CSS知识的人,就能在55分钟内搭建一个跨浏览器的页面。 这是为网页设计师准备的完美解决方案,已经有超过26 000人在使用Webflow。 只能免费创建两个项目,想要创建更多项目的收费也很合理。 这个工具真的很酷。

如果你和我一样是个不喜欢GUI的前端,就可以在Webflow上导出几个免费的响应式布局模板。 我还想推荐responsive layout generatorResponsive Patterns


Parallax.js

image.png

功能强大、使用简单的视差效果库。

可以给所有的元素应用视觉差效果,通过设置data-depth控制速度。 Parallax.js有一系列的参数:

<ul id="scene"

 data-calibrate-x="false"

 data-calibrate-y="true"  

 data-invert-x="false"    

 data-invert-y="true"  

 data-limit-x="false"

 data-limit-y="10"

 data-scalar-x="2"

 data-scalar-y="8"

 data-friction-x="0.2"

 data-friction-y="0.8">

 <li class="layer" data-depth="0.00"><img src="layer6.png"></li>

 <li class="layer" data-depth="0.20"><img src="layer5.png"></li>

 <li class="layer" data-depth="0.40"><img src="layer4.png"></li>

 <li class="layer" data-depth="0.60"><img src="layer3.png"></li>

 <li class="layer" data-depth="0.80"><img src="layer2.png"></li>

 <li class="layer" data-depth="1.00"><img src="layer1.png"></li>

</ul>

传递父元素:

varscene = document.getElementById('scene');

var parallax = new Parallax(scene);

Intention.js

很小,但很有用的库,简化了创建完全自适应布局的开发过程。 用起来很简单。 操作原理如图所示:

image.png

Device.js

image.png

该脚本类似Modernizr,包含了 ios/android/windows/blackberry phone/tablet landscape/portrait 的 HTML 类。

谈到跨设备开发,我想提及 Risizer -响应设计测试的工具。 有很多类似的服务,但是我认为这种方法是最方便的。


GistBox

GistBox能同步你的Github 的 Gist。 可以通过标签排序,管理方便,随时查看。 它是一个Chrome扩展。

image.png

CSS Modal

image.png

起初,该项目是由一个团队成员创建的HTML5样板。 CSS Modal-轻松让网站能自适应窗口变化。 首先要添加此代码:

<sectionclass="semantic-content"id="modal-text"tabindex="-1"

       role="dialog"aria-labelledby="modal-label"aria-hidden="true">

   <divclass="modal-inner">

       <headerid="modal-label"><!-- Header --></header>

       <divclass="modal-content"><!-- The modals content --></div>

       <footer><!-- Footer --></footer>

   </div>

   <ahref="#!"class="modal-close"title="Close this modal"data-close="Close"

       data-dismiss="modal"</a>

</section>

然后在body的结束标记之前添加modal.js。 这是完成了!


Dotdotdot.js, Uikit, HTML2PDF

最近,我需要用省略号来表明有更多的文字。 但标准文本溢出只能在一句中。 我发现一个好脚本dotdotdot.js,它完美地解决了这个问题。

image.png

UIKit——轻量级的web开发框架。

image.png

HTML2PDF——基于phantom.js。 还可以在线把HTML转换成PDF。

image.png


相关文章
|
20天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
1月前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
29 7
|
1月前
|
存储 资源调度 应用服务中间件
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
浅谈本地开发好的 Web 应用部署到 ABAP 应用服务器上的几种方式
26 0
|
1月前
|
存储 前端开发 JavaScript
从前端到后端,探索现代Web开发技术
本文探索了现代Web开发技术的各个方面,包括前端和后端开发以及多种编程语言的应用。通过对JavaScript、Java、Python、C、PHP和Go等语言的介绍,深入探讨了前端和后端开发的基本原理和常用工具。同时,还涵盖了数据库技术在Web开发中的重要性和应用场景。无论你是初学者还是有经验的开发者,本文都能为你提供全面的视角和实用的知识,帮助你在Web开发领域取得更好的成果。
|
1月前
|
缓存 关系型数据库 API
后端开发:构建高效、可扩展的Web应用程序的关键
后端开发:构建高效、可扩展的Web应用程序的关键
21 0
|
6天前
|
JSON Java fastjson
Spring Boot 底层级探索系列 04 - Web 开发(2)
Spring Boot 底层级探索系列 04 - Web 开发(2)
15 0
|
6天前
|
安全 编译器 PHP
PHP 8.1版本发布:引领Web开发新潮流
PHP编程语言一直是Web开发的主力军,而最新发布的PHP 8.1版本则为开发者们带来了更多创新和便利。本文将介绍PHP 8.1版本的主要特性,包括更快的性能、新的语言功能和增强的安全性,以及如何利用这些功能来提升Web应用程序的质量和效率。
|
9天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
9天前
|
前端开发 数据挖掘 API
使用Python中的Flask框架进行Web应用开发
【4月更文挑战第15天】在Python的Web开发领域,Flask是一个备受欢迎的轻量级Web框架。它简洁、灵活且易于扩展,使得开发者能够快速地构建出高质量的Web应用。本文将深入探讨Flask框架的核心特性、使用方法以及在实际开发中的应用。
|
18天前
|
安全 前端开发 Java
Java Web开发知识点学习总结
Java Web开发涉及Java基础、Servlet、JSP、数据库操作(SQL+JDBC)、MVC设计模式、Spring框架、Hibernate ORM、Web服务(SOAP&RESTful)、安全认证(HTTP Basic/Digest/OAuth)及性能优化(缓存、异步、负载均衡)。
17 3