Role transition to a Frontend Developer

modern residential building facade decorated with green plants

There are only two hard problems in Computer Science: cache invalidation and naming things.

Phil Karlton

I recently started a frontend role at Automattic. Just in case any of you still don’t know the company, it’s the company behind WordPress.com, Tumblr, Simplenote etc.

Developers at A8C are all kinda full stack engineers. I was mostly a backend dev in my previous careers, but as fate would have it, I ended up in a front team. A big change I would say. I mean I have done a lot of frontend stuff before, but never served as a frontend developer, meaning I know how things work, but I don’t know how to make it perfect. So I decide to start blogging again, making notes while learning and develop all the skills required.

Found a interesting diagram about the tech stack of a frontend dev nowadays.

Credits: Frontend Master

I’ll explore the nodes on the diagram bits by bits and concentrate mostly on CSS and Reactjs where I’m not 100% confident.

CSS实现表格单元格强制换行和强制不换行

引用

用CSS实现表格单元格数据自动换行或不换行

1、自动换行:
<style type=”text/css”>
.AutoNewline
{
  word-break: break-all;/*必须*/
}
</style>

<table>
<tr>
  <td class=”AutoNewline”>自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行</td>
</tr>
</table>

2、不换行:
<style type=”text/css”>
.NoNewline
{
word-break: keep-all;/*必须*/
}
</style>

<table>
<tr>
  <td class=”NoNewline”>不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</td>
</tr>
</table>