端開發(fā)是一個(gè)不斷變化的領(lǐng)域,技術(shù)也日新月異,因此掌握一些最新的技術(shù)發(fā)展趨勢(shì)及技術(shù)動(dòng)向?qū)ξ覀儊?lái)說(shuō)非常重要。
因此,今天我跟大家分享27個(gè)前端開發(fā)工程師必看的國(guó)外技術(shù)大牛博客和網(wǎng)站。希望對(duì)你有幫助。
01、Noupe
地址:https://www.noupe.com/
Noupe由Noura Yehia創(chuàng)建于2007年,內(nèi)容涉及CSS、Ajax、JavaScript、Photoshop、Wordpress以及網(wǎng)頁(yè)設(shè)計(jì)等。
02、Smashing Magazine
地址:https://www.smashingmagazine.com/
Smashing Magazine創(chuàng)建于2006年,是最好的設(shè)計(jì)博客之一,有很多Web設(shè)計(jì)和開發(fā)方面的高質(zhì)量文章,內(nèi)容涉及HTML5、CSS、JavaScript、Photoshop、Wordpress、壁紙和網(wǎng)站可用性。
03、CodePen.io
地址:https://codepen.io/
CodePen.io:網(wǎng)站前端設(shè)計(jì)開發(fā)平臺(tái)是一個(gè)針對(duì)網(wǎng)站前端代碼設(shè)計(jì)的開發(fā)工具,提供多種效果的網(wǎng)站前端代碼設(shè)計(jì)工具,豐富的案例特效,用戶可以demo的基礎(chǔ)上開發(fā)自己的前端設(shè)計(jì)。
這個(gè)應(yīng)該算個(gè)工具類的網(wǎng)站,主要用作代碼演示。一般人會(huì)用微博、朋友圈來(lái)分享分邊事,但程序員會(huì)用代碼來(lái)分享技術(shù),CodePen類似代碼朋友圈的奇怪的存在。里面有很多很有趣的實(shí)例,但內(nèi)容比較多,篩選會(huì)比較麻煩,大家用心淘淘代碼吧,可能會(huì)有驚喜發(fā)現(xiàn)。
04、Specky Boy
地址:https://speckyboy.com/
Specky Boy博客戲稱自身是一本教設(shè)計(jì)的雜志。Specky Boy的創(chuàng)始人Paul Andrew說(shuō):我們的網(wǎng)站不僅僅為開發(fā)者提供一些資源,更期望成為開發(fā)者獲取最新技術(shù)的第一渠道。
Speckyboy對(duì)前端開發(fā)人員來(lái)說(shuō)是非常有用的,它是實(shí)時(shí)更新的資源庫(kù),主要發(fā)布網(wǎng)頁(yè)設(shè)計(jì)教程、免費(fèi)資源、平面設(shè)計(jì)以及移動(dòng)開發(fā)等~
05、Scotch.io
地址:https://scotch.io/
Scotch.io主要是關(guān)于AngularJS,node,JavaScript,Bootstrap等內(nèi)容的博客網(wǎng)站
06、sixrevisions
地址:https://www.webpagefx.com/blog/web-design/
Six Revisi
來(lái)源于微信公眾號(hào)
:xiaowanzi02620
以下是一個(gè)簡(jiǎn)單的HTML登錄頁(yè)面的代碼,你可以根據(jù)自己的需要進(jìn)行修改:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁(yè)面</title>
<style type="text/css">
body {
background-color: #f2f2f2;
}
.login {
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
.login h1 {
text-align: center;
font-size: 30px;
color: #333;
padding-top: 30px;
}
.login input[type="text"], .login input[type="password"] {
width: 300px;
height: 40px;
border-radius: 5px;
border: none;
outline: none;
margin-top: 30px;
margin-left: 50px;
padding-left: 10px;
font-size: 16px;
}
.login input[type="submit"] {
width: 300px;
height: 40px;
background-color: #f00;
border-radius: 5px;
border: none;
outline: none;
color:#fff;
font-size: 18px;
cursor:pointer;
margin-top: 30px;
margin-left:50px;
}
</style>
</head>
<body>
<div class="login">
<h1>登錄</h1>
<form action="" method="post">
<input type="text" name="username" placeholder="請(qǐng)輸入用戶名"><br>
<input type="password" name="password" placeholder="請(qǐng)輸入密碼"><br>
<input type="submit" value="登錄">
</form>
</div>
</body>
</html>
這是一個(gè)簡(jiǎn)單的登錄頁(yè)面,你可以根據(jù)自己的需要進(jìn)行修改。如果你想了解更多關(guān)于HTML的知識(shí),可以參考這些網(wǎng)站:W3Schools、MDN Web Docs。
(1) HTML+CSS+JS實(shí)現(xiàn)十款好看的登錄注冊(cè)界面模板,趕緊收藏起來(lái)吧!好看的登錄界面王同學(xué)要努力的博客-CSDN博客. https://blog.csdn.net/m0_46374969/article/details/115906705. (2) HTML+CSS登錄界面html登錄頁(yè)面代碼桐艾的博客-CSDN博客. https://blog.csdn.net/tongai1/article/details/105954419. (3) 如何制作一個(gè)簡(jiǎn)單的HTML登錄頁(yè)面(附代碼) - 知乎專欄. https://zhuanlan.zhihu.com/p/143671138.
當(dāng)客戶端使用GET方法向服務(wù)器發(fā)送請(qǐng)求時(shí),請(qǐng)求的數(shù)據(jù)會(huì)附加在URL的末尾。服務(wù)器可以使用相同的HTTP協(xié)議來(lái)回答請(qǐng)求。在客戶端,可以使用JavaScript來(lái)獲取GET請(qǐng)求的數(shù)據(jù)。以下是一個(gè)簡(jiǎn)單的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GET請(qǐng)求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test_get.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>發(fā)送 GET 請(qǐng)求</button>
</body>
</html>
在這個(gè)例子中,我們使用了jQuery庫(kù)來(lái)發(fā)送GET請(qǐng)求。當(dāng)用戶點(diǎn)擊按鈕時(shí),jQuery會(huì)向demo_test_get.asp發(fā)送GET請(qǐng)求,并將數(shù)據(jù)附加在URL的末尾。當(dāng)服務(wù)器回答請(qǐng)求時(shí),jQuery會(huì)調(diào)用回調(diào)函數(shù),并將服務(wù)器返回的數(shù)據(jù)作為參數(shù)傳遞給它。
如果你想了解更多關(guān)于HTML、JavaScript和jQuery的知識(shí),可以參考這些網(wǎng)站:W3Schools、MDN Web Docs。
(1) 發(fā)送表單數(shù)據(jù) - 學(xué)習(xí) Web 開發(fā) | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) 純 HTML 頁(yè)面發(fā)請(qǐng)求獲取數(shù)據(jù)并渲染到頁(yè)面上 - CSDN博客. https://blog.csdn.net/LuckKing0925/article/details/111308084. (3) 使用Ajax發(fā)送http請(qǐng)求(get&post請(qǐng)求) - 千古壹號(hào) - 博客園. https://www.cnblogs.com/qianguyihao/p/8485028.html.
在HTML中,可以使用form元素來(lái)創(chuàng)建一個(gè)表單,然后使用POST方法將表單數(shù)據(jù)發(fā)送到服務(wù)器。以下是一個(gè)簡(jiǎn)單的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請(qǐng)求</title>
</head>
<body>
<form action="http://www.example.com/login" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在這個(gè)例子中,我們使用了form元素來(lái)創(chuàng)建一個(gè)表單,然后使用POST方法將表單數(shù)據(jù)發(fā)送到http://www.example.com/login。在表單中,我們使用了兩個(gè)input元素來(lái)接收用戶名和密碼。當(dāng)用戶點(diǎn)擊提交按鈕時(shí),表單數(shù)據(jù)將被發(fā)送到服務(wù)器。
如果你想了解更多關(guān)于HTML的知識(shí),可以參考這些網(wǎng)站:W3Schools、MDN Web Docs。
(1) POST - HTTP | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/web/http/methods/post. (2) HTML 請(qǐng)求方法 - w3school 在線教程. https://www.w3school.com.cn/tags/html_ref_httpmethods.asp. (3) jQuery post() 方法 | 菜鳥教程. https://www.runoob.com/jquery/ajax-post.html. (4) 發(fā)送表單數(shù)據(jù) - 學(xué)習(xí) Web 開發(fā) | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data.
當(dāng)客戶端使用POST方法向服務(wù)器發(fā)送請(qǐng)求時(shí),服務(wù)器會(huì)將請(qǐng)求的數(shù)據(jù)存儲(chǔ)在HTTP請(qǐng)求的請(qǐng)求主體中。服務(wù)器可以使用相同的HTTP協(xié)議來(lái)回答請(qǐng)求。在客戶端,可以使用JavaScript來(lái)獲取POST請(qǐng)求的數(shù)據(jù)。以下是一個(gè)簡(jiǎn)單的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請(qǐng)求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>發(fā)送 POST 請(qǐng)求</button>
</body>
</html>
在這個(gè)例子中,我們使用了jQuery庫(kù)來(lái)發(fā)送POST請(qǐng)求。當(dāng)用戶點(diǎn)擊按鈕時(shí),jQuery會(huì)向demo_test_post.asp發(fā)送POST請(qǐng)求,并將數(shù)據(jù)存儲(chǔ)在HTTP請(qǐng)求的請(qǐng)求主體中。當(dāng)服務(wù)器回答請(qǐng)求時(shí),jQuery會(huì)調(diào)用回調(diào)函數(shù),并將服務(wù)器返回的數(shù)據(jù)作為參數(shù)傳遞給它。
如果你想了解更多關(guān)于HTML、JavaScript和jQuery的知識(shí),可以參考這些網(wǎng)站:W3Schools、MDN Web Docs。
(1) 發(fā)送表單數(shù)據(jù) - 學(xué)習(xí) Web 開發(fā) | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) javascript能否獲取到post請(qǐng)求內(nèi)的數(shù)據(jù)? - SegmentFault 思否. https://segmentfault.com/q/1010000004523107. (3) ChatGPT流式streaming回復(fù)的實(shí)現(xiàn) - 掘金. https://juejin.cn/post/7222440107214241829.
程序員書庫(kù)(ID:CodingBook) 猿妹編譯 鏈接:https://catswhocode.com/programming-blogs/
跟自己所處領(lǐng)域的發(fā)展趨勢(shì)是至關(guān)重要的,尤其是在編程領(lǐng)域,相信每一個(gè)專業(yè)的程序員都會(huì)通過(guò)關(guān)注一些業(yè)界大牛的博客讓自己時(shí)刻了解最新的技術(shù)。
有些博客無(wú)論你是什么類型的程序員都會(huì)想要訂閱關(guān)注,這些博客作者通過(guò)分享相關(guān)的信息,幫助程序員更好的提升自己。
國(guó)內(nèi)一些大牛的博客相信,你們都知道些,也都關(guān)注了,今天和大家分享一些國(guó)外的博客,你可以通過(guò)這些博客獲得很多有用的信息,幫助你少走彎路
1、Coding Horror
Coding Horror 創(chuàng)建于2004年,創(chuàng)始人杰夫·阿特伍德(Jeff Atwood)是加州伯克利的一名經(jīng)驗(yàn)豐富的,杰夫的經(jīng)歷以及他對(duì)技術(shù)人性化的認(rèn)識(shí),使得它的網(wǎng)站成為許多對(duì)網(wǎng)絡(luò)開發(fā)、軟件工程和計(jì)算機(jī)感興趣的人最愛(ài)編的編程博客之一。
博客地址:https://blog.codinghorror.com/
2、David Walsh
這個(gè)流行的編碼博客關(guān)注于現(xiàn)代的庫(kù)、編程教程和JavaScript編程方面,David Walsh和他的客座博主每天都會(huì)發(fā)表文章和評(píng)論,幫助你學(xué)習(xí)如何更快更有效的編程。
在他的博客上,你可以找到從React到Node.js的視頻教程,你如果能再配套關(guān)注幾個(gè)領(lǐng)先的編程博客,那么,掌握高級(jí)HTML/CSS技術(shù)的一切則指日可待。
地址:https://davidwalsh.name/
3、A List Apart
該博客是由幾個(gè)博主共同維護(hù)的,創(chuàng)建了一個(gè)內(nèi)容豐富、有趣的帖子流,關(guān)注這個(gè)博客,你可以了解影響網(wǎng)絡(luò)訪問(wèn)的相關(guān)問(wèn)題、用戶界面、編程語(yǔ)言、前端開發(fā)以及HTML/CSS等方面的知識(shí)。
地址:https://alistapart.com/
4、Ray Wenderlich
Ray Wenderlich的編程博客是市場(chǎng)上最受信任和質(zhì)量最高的博客之一。它主要包含Android和其它環(huán)境應(yīng)用開發(fā)的博客、視頻以及音頻教程。該博客還推出了一個(gè)播客,包含了上千篇帖子和3000多個(gè)循序漸進(jìn)的編程教程
地址:https://www.raywenderlich.com/
5、WebDevBlog
這是一個(gè)新的Web開發(fā)博客。它包含了對(duì)Web開發(fā)人員非常重要的所有內(nèi)容的深入文章:HTML/CSS、JavaScript、PHP、React…盡管WebDevBlog相對(duì)較新,但它的文章和指南已經(jīng)出現(xiàn)在諸如WebDesigner Depot這樣的知名博客中。
地址:https://webdevblog.com/
6、CodeWall
CodeWall由英國(guó)Web開發(fā)人員Dan Englishby創(chuàng)建,是一個(gè)為前端和后端開發(fā)人員提供有用的深入教程的網(wǎng)站。CodeWall有許多關(guān)于HTML/CSS、Node等JavaScript和PHP主題的文章,該網(wǎng)站同樣吸引了一大批程序員。
地址: https://www.codewall.co.uk
7、Erik Bernhardsson
Erik Bernhardsson是一個(gè)優(yōu)秀的博客和程序員,他的編程博客涉及了所有程序員都關(guān)心的問(wèn)題,如Git repos、ide、命名約定,以及各種編碼軟件的系統(tǒng)支持問(wèn)題。此外,Bernhardsson還討論了在更廣泛意義上影響程序員的問(wèn)題,比如轉(zhuǎn)化率和SaaS(軟件即服務(wù))。
地址:https://erikbern.com/
8、Cat On Mat
這個(gè)獨(dú)特的編碼博客專門討論JavaScript庫(kù)、工具、XML、JSON等,CatOnMat博客由著名程序員Peteris Krumins編寫,并定期更新。
這個(gè)博客從2007年7月開始運(yùn)營(yíng),多年來(lái)吸引了很多關(guān)注者。您還可以在本博客中閱讀有關(guān)Perl的文章,因?yàn)樽髡咭呀?jīng)出版了一本關(guān)于這種語(yǔ)言的書。
地址:http://www.catonmat.net/
9、Web Designer Depot
如果你對(duì)網(wǎng)頁(yè)開發(fā)和網(wǎng)頁(yè)設(shè)計(jì)感興趣,那么你應(yīng)該把這個(gè)博客當(dāng)作必讀的,該博客從前端的功能和設(shè)計(jì)到后端的服務(wù)器編程,通通都涉及了,有很多開發(fā)文章和教程都發(fā)布在這個(gè)網(wǎng)站上
地址: https://www.webdesignerdepot.com/
10、NSHipster
SHipster博客是為那些使用Objective-C編寫代碼的程序員編寫的,它還涵蓋了Swift和Cocoa,全面研究了所有與mac相關(guān)的東西。
如果你是一名軟件工程師,為Mac產(chǎn)品或iOS編寫程序,那么你一定要把這個(gè)博客添加到收藏夾,每周你都能在上面發(fā)現(xiàn)大量有用的信息
地址: http://nshipster.com/
11、CodePen Blog
許多程序員都熟悉CodePen及其流行的項(xiàng)目庫(kù),并且還會(huì)在這個(gè)網(wǎng)站共享和下載倉(cāng)庫(kù)代碼,當(dāng)然也就忽視了這個(gè)網(wǎng)站的博客也是很精彩的一部分。
CodePen每周提供幾篇關(guān)于Web開發(fā)、編程語(yǔ)言和開源工具等主題的博客文章。
地址:https://blog.codepen.io/
12、Scott Hanselman
Scott Hanselman的博客主要針對(duì)的是.NET開發(fā)以及Web應(yīng)用。在該博客上你能夠?qū)W到如何設(shè)置一個(gè)IIS服務(wù)器或者如何創(chuàng)建一個(gè).NET應(yīng)用等內(nèi)容。
地址:https://www.hanselman.com/blog/
13、David Ford
該博客的主題包括Web開發(fā)、UX、模板、JavaScript Web應(yīng)用程序和移動(dòng)應(yīng)用程序等。這個(gè)博客將幫助你充分利用你的虛擬主機(jī)和設(shè)計(jì)環(huán)境,并提供一些關(guān)于效率的有用技巧,此外這個(gè)博客還包含了對(duì)某些語(yǔ)言未來(lái)的看法。
地址:https://medium.com/@daveford
14、Hongkiat
十多年來(lái),我一直在閱讀這個(gè)很棒的編程博客,Hongkiatt讓我學(xué)到了很多有用的東西,讓我跟上了現(xiàn)代技術(shù)和工具的步伐。該網(wǎng)站每天都有關(guān)于各種編程語(yǔ)言、網(wǎng)頁(yè)開發(fā)和網(wǎng)頁(yè)設(shè)計(jì)的博客文章。
地址:https://hongkiat.com/blog
15、CSS Tricks
CSS Tricks該網(wǎng)站是我個(gè)人最喜歡的,可以說(shuō)是前端開發(fā)人員最好的編程博客之一,該站點(diǎn)不僅提供文章,還提供大量可重用代碼片段庫(kù)。
地址:https://css-tricks.com/
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。