Web前端最新2024 用好这 8 个工具,提升前端工程师软技能(3),三面头条+四面阿里+五面腾讯拿offer分享面经总结

跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。

面试准备

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。

1.2 Neovim/Vim - 沉浸式编码体验

主页:neovim.io/

这是我最常用的工具,我会用它写 TypeScript 或者 go。我个人非常主观地喜欢 Neovim 超过 Vim,因为它现在内置了 Language Server,能用 lua 写各种插件或者命令。虽然 Vim 有着很陡峭的学习曲线,但是在上手后,你可以甩开鼠标,快速专注于编码。

另外,通过 coc.nvim 自动补全插件,Vim 可以做到和 VSCode 一样的智能提示,快速跳转。对了,如果你是新手,建议你和我一样,把键盘的上下左右键扣掉——这样才能沉浸式体验 Vim 键位。

1.3 Visual Studio Code - 最受欢迎的编辑器

主页:code.visualstudio.com/

另外一个我非常喜欢用的代码编写工具是 Visual Studio Code,且我一直保持使用它的 insider 版本,每次新版本发布时,会关注发布日志,以便尝试使用它的最新功能。

我甚至开过脑洞,用 LiveShare 插件实现远程协助、免密共享本地 terminal(是的,你不需要内网穿透工具);用 MySQL 插件替代数据库 GUI 工具查看数据。

2. 快速原型/开发


2.1 Draw.io - 强大的原型设计工具

这是一个免费且强大的流程图、原型工具,你打开网页即可使用。另外它还提供本地版本,你可以离线使用它。

主页:draw.io/

2.2 轻服务 - 快速的一站式开发平台

主页:qingfuwu.cn/

这是字节跳动推出面向开发者的云服务,你可以用 JavaScript 快速编写和部署你的前端项目或者 Serverless 后台,它内置了 Redis 和数据库等基础服务——你只要完成核心逻辑,不用关心如何连接和管理基础组件。

另外值得一提的是,轻服务的开发体验非常棒,在轻服务的数据库中,你甚至可以直接浏览和编辑数据库数据,直接查看图片。

3. 信息获取


总结

前端资料汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

  • 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯

  • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

  • 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
    喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!

  • 19
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,作为AI语言模型,我无法提供图形用户界面。但是,我可以提供示例代码供您参考: <!DOCTYPE html> <html> <head> <title>今日头条</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>今日头条</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">热点</a></li> <li><a href="#">视频</a></li> <li><a href="#">社会</a></li> <li><a href="#">科技</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">体育</a></li> <li><a href="#">军事</a></li> </ul> </nav> </header> <main> <section class="carousel"> <div class="carousel-item active"> <img src="https://picsum.photos/id/10/640/360" alt="carousel item"> <h2>标题1</h2> <p>这里是描述1</p> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/20/640/360" alt="carousel item"> <h2>标题2</h2> <p>这里是描述2</p> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/30/640/360" alt="carousel item"> <h2>标题3</h2> <p>这里是描述3</p> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/40/640/360" alt="carousel item"> <h2>标题4</h2> <p>这里是描述4</p> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/50/640/360" alt="carousel item"> <h2>标题5</h2> <p>这里是描述5</p> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/60/640/360" alt="carousel item"> <h2>标题6</h2> <p>这里是描述6</p> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/70/640/360" alt="carousel item"> <h2>标题7</h2> <p>这里是描述7</p> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/80/640/360" alt="carousel item"> <h2>标题8</h2> <p>这里是描述8</p> </div> </section> <section class="news"> <h2>热点新闻</h2> <ul> <li> <a href="#"> <img src="https://picsum.photos/id/100/120/80" alt="news item"> <h3>新闻标题1</h3> <p>这里是新闻描述1</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/110/120/80" alt="news item"> <h3>新闻标题2</h3> <p>这里是新闻描述2</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/120/120/80" alt="news item"> <h3>新闻标题3</h3> <p>这里是新闻描述3</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/130/120/80" alt="news item"> <h3>新闻标题4</h3> <p>这里是新闻描述4</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/140/120/80" alt="news item"> <h3>新闻标题5</h3> <p>这里是新闻描述5</p> </a> </li> </ul> </section> <section class="videos"> <h2>热门视频</h2> <ul> <li> <a href="#"> <img src="https://picsum.photos/id/150/120/80" alt="video item"> <h3>视频标题1</h3> <p>这里是视频描述1</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/160/120/80" alt="video item"> <h3>视频标题2</h3> <p>这里是视频描述2</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/170/120/80" alt="video item"> <h3>视频标题3</h3> <p>这里是视频描述3</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/180/120/80" alt="video item"> <h3>视频标题4</h3> <p>这里是视频描述4</p> </a> </li> <li> <a href="#"> <img src="https://picsum.photos/id/190/120/80" alt="video item"> <h3>视频标题5</h3> <p>这里是视频描述5</p> </a> </li> </ul> </section> </main> <footer> <p>版权所有:今日头条</p> </footer> </body> </html> /* CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; background-color: #f5f5f5; color: #333; } header { background-color: #fff; padding: 20px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } header h1 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } nav li { margin: 0 10px; } nav a { display: block; padding: 10px; color: #333; text-decoration: none; } nav a:hover { background-color: #f5f5f5; } main { padding: 20px; } .carousel { position: relative; height: 360px; overflow: hidden; margin-bottom: 20px; } .carousel .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .carousel .carousel-item.active { opacity: 1; } .carousel img { width: 100%; height: 100%; object-fit: cover; } .carousel h2 { position: absolute; bottom: 20px; left: 20px; font-size: 20px; color: #fff; } .carousel p { position: absolute; bottom: 0; left: 20px; font-size: 14px; color: #fff; } .news, .videos { margin-bottom: 20px; } .news h2, .videos h2 { font-size: 20px; font-weight: bold; margin-bottom: 10px; } .news ul, .videos ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; } .news li, .videos li { width: calc(50% - 10px); margin-bottom: 10px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .news a, .videos a { display: block; padding: 10px; color: #333; text-decoration: none; } .news a:hover, .videos a:hover { background-color: #f5f5f5; } .news img, .videos img { display: block; margin: 0 auto; max-width: 100%; height: auto; } .news h3, .videos h3 { font-size: 16px; font-weight: bold; margin: 10px 0; } .news p, .videos p { font-size: 14px; margin-bottom: 10px; } footer { background-color: #ddd; padding: 10px; text-align: center; font-size: 12px; }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值